ENH Replace react-selectable with react-drag-to-select

client/src/containers/Gallery/Gallery.js

@@ -24,6 +24,9 @@ import backend from 'lib/Backend';
 import MoveModal from '../MoveModal/MoveModal';
 import GalleryDND from './GalleryDND';
 
+// todo: import as containers/Selectable/Selectable
+import Selectable from '../Selectable/Selectable';
+
 /**
  * List of possible possible bulk actions.
  */
@@ -957,15 +960,7 @@ class Gallery extends Component {
           className={galleryClasses.join(' ')}
         >
           {this.renderToolbar()}
-          <SelectableGroup
-            enabled={this.props.view === 'tile' && this.props.type === ACTION_TYPES.ADMIN}
-            className="flexbox-area-grow fill-height gallery__main--selectable"
-            onSelection={this.handleGroupSelect}
-            onNonItemClick={this.handleClearSelection}
-            onBeginSelection={this.handleBeginSelection}
-            preventDefault={false}
-            fixedPosition
-          >
+          <Selectable>
             <AssetDropzone
               name="gallery-container"
               className="flexbox-area-grow"
@@ -986,7 +981,7 @@ class Gallery extends Component {
               {messages}
               {this.renderGalleryView()}
             </AssetDropzone>
-          </SelectableGroup>
+          </Selectable>
         </GalleryDND>
         {this.props.loading && <Loading />}
         <MoveModal

client/src/containers/Selectable/Selectable.js

@@ -0,0 +1,82 @@
+
+import React, { useState, useEffect, useRef } from 'react';
+import { useSelectionContainer } from '@air/react-drag-to-select';
+
+function Selectable(props) {
+  const [selectionBox, setSelectionBox] = useState(null);
+  const [selectedIndexes, setSelectedIndexes] = useState([]);
+
+  const selectableItems = useRef([]);
+  const elementsContainerRef = useRef(null);
+
+  const { DragSelection } = useSelectionContainer({
+
+    eventsElement: document.getElementById("root"),
+
+    onSelectionChange: (box) => {
+      /**
+       * Here we make sure to adjust the box's left and top with the scroll position of the window
+       * @see https://github.com/AirLabsTeam/react-drag-to-select/#scrolling
+       */
+      const scrollAwareBox = {
+        ...box,
+        top: box.top + window.scrollY,
+        left: box.left + window.scrollX
+      };
+      setSelectionBox(scrollAwareBox);
+      const indexesToSelect = [];
+      selectableItems.current.forEach((item, index) => {
+        if (boxesIntersect(scrollAwareBox, item)) {
+          indexesToSelect.push(index);
+        }
+      });
+      setSelectedIndexes(indexesToSelect);
+    },
+
+    onSelectionStart: () => {
+      console.log("OnSelectionStart");
+    },
+
+    onSelectionEnd: () => console.log("OnSelectionEnd"),
+
+    selectionProps: {
+      style: {
+        border: "2px dashed purple",
+        borderRadius: 4,
+        backgroundColor: "brown",
+        opacity: 0.5
+      }
+    },
+
+    isEnabled: true
+  });
+
+  useEffect(() => {
+    if (elementsContainerRef.current) {
+      Array.from(elementsContainerRef.current.children).forEach((item) => {
+        const { left, top, width, height } = item.getBoundingClientRect();
+        selectableItems.current.push({
+          left,
+          top,
+          width,
+          height
+        });
+      });
+    }
+  }, []);
+
+  return (
+    <div className="container">
+      <DragSelection />
+      <div
+        id="elements-container"
+        className="elements-container"
+        ref={elementsContainerRef}
+      >
+        { props.children }
+      </div>
+    </div>
+  );
+}
+
+export default Selectable;

package.json

@@ -64,6 +64,7 @@
     "webpack-cli": "^5.0.0"
   },
   "dependencies": {
+    "@air/react-drag-to-select": "^5.0.10",
     "@deltablot/dropzone": "^7.2.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",

yarn.lock

@@ -2,6 +2,13 @@
 # yarn lockfile v1
 
 
+"@air/react-drag-to-select@^5.0.10":
+  version "5.0.10"
+  resolved "https://registry.yarnpkg.com/@air/react-drag-to-select/-/react-drag-to-select-5.0.10.tgz#c80c748bc06e6abac00f4a352c6917f80405140d"
+  integrity sha512-KP0HaYoGvVinDwl0K4hv54CAyvbmN/7Z9ZRhOwZvJsgBjfAwWEHYIoJ5k3VLk3D4dp6XIU1FXnBbKO/IoF4S7g==
+  dependencies:
+    react-style-object-to-css "^1.1.2"
+
 "@ampproject/remapping@^2.2.0":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4"
@@ -6861,6 +6868,11 @@ react-selectable@^2.1.1:
   resolved "https://registry.yarnpkg.com/react-selectable/-/react-selectable-2.1.1.tgz#21272e613929991e248570cc98a9266aa10eeecb"
   integrity sha512-5W7WrC+TCchIwE8wDQhV5F1iJXNZJN09RsIa7kgl8P8tcG7UOYSkK6M3Jundec90mB7iN+KOLeLivSRdf9WrxQ==
 
+react-style-object-to-css@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/react-style-object-to-css/-/react-style-object-to-css-1.1.2.tgz#3e97da92c9edf8190e30f4b27026e74285940498"
+  integrity sha512-+5MFULqCCj7wwJJ/ISKFP91ZlHVF1Rv8o0neiTKvt21XDTU5e34tc8hy+XPLeYWYOupdHt25HxxwocvYm3HM6A==
+
 react-transition-group@^4.4.2:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"