UI: Add checkbox to scenes List view (#1642)

ui/v2.5/src/components/Scenes/SceneListTable.tsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
 /* eslint-disable jsx-a11y/control-has-associated-label */
 import React from "react";
-import { Table, Button } from "react-bootstrap";
+import { Table, Button, Form } from "react-bootstrap";
 import { Link } from "react-router-dom";
 import * as GQL from "src/core/generated-graphql";
 import { NavUtils, TextUtils } from "src/utils";
@@ -11,6 +11,8 @@ import { FormattedMessage } from "react-intl";
 interface ISceneListTableProps {
   scenes: GQL.SlimSceneDataFragment[];
   queue?: SceneQueue;
+  selectedIds: Set<string>;
+  onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
 }
 
 export const SceneListTable: React.FC<ISceneListTableProps> = (
@@ -44,8 +46,29 @@ export const SceneListTable: React.FC<ISceneListTableProps> = (
       ? props.queue.makeLink(scene.id, { sceneIndex: index })
       : `/scenes/${scene.id}`;
 
+    let shiftKey = false;
     return (
       <tr key={scene.id}>
+        <td>
+          <Form.Control
+            type="checkbox"
+            checked={props.selectedIds.has(scene.id)}
+            onChange={() =>
+              props.onSelectChange!(
+                scene.id,
+                !props.selectedIds.has(scene.id),
+                shiftKey
+              )
+            }
+            onClick={(
+              event: React.MouseEvent<HTMLInputElement, MouseEvent>
+            ) => {
+              // eslint-disable-next-line prefer-destructuring
+              shiftKey = event.shiftKey;
+              event.stopPropagation();
+            }}
+          />
+        </td>
         <td>
           <Link to={sceneLink}>
             <img
@@ -97,6 +120,7 @@ export const SceneListTable: React.FC<ISceneListTableProps> = (
       <Table striped bordered>
         <thead>
           <tr>
+            <th />
             <th />
             <th className="text-left">
               <FormattedMessage id="title" />