feat(useManagedFiles): easyMultiSelect option

allows multiple selections without holding modifier keys
ApryseSDK · Apr 16, 2020 · f272fbe · f272fbe
1 parent decac19
commit f272fbe
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/src/components/FileOrganizer/FileOrganizer.stories.tsx b/src/components/FileOrganizer/FileOrganizer.stories.tsx
@@ -111,6 +111,7 @@ export const UseManagedFilesHook = () => {
     preventMultiSelect: boolean('preventMultiSelect', false, 'useManagedFiles options'),
     preventDeselectOnDragOther: boolean('preventDeselectOnDragOther', false, 'useManagedFiles options'),
     preventSelectOnDrag: boolean('preventSelectOnDrag', false, 'useManagedFiles options'),
+    easyMultiSelect: boolean('easyMultiSelect', false, 'useManagedFiles options'),
   });
 
   return (

diff --git a/src/hooks/useManagedFiles.ts b/src/hooks/useManagedFiles.ts
@@ -22,6 +22,10 @@ export interface UseManagedFilesOptions<F> {
    * Prevent deselecting all selected items when you drag an unselected item.
    */
   preventDeselectOnDragOther?: boolean;
+  /**
+   * Allows multi-select by clicking other files without holding command/control.
+   */
+  easyMultiSelect?: boolean;
 }
 
 export interface UseManagedFilesOutput<F> {
@@ -87,15 +91,14 @@ export interface UseManagedFilesOutput<F> {
  * `FileOrganizer` component.
  * @param options Options for managing files.
  */
-export function useManagedFiles<F extends ObjectWithId>(options: UseManagedFilesOptions<F> = {}) {
-  const {
-    initialFiles,
-    preventMultiDrag,
-    preventDeselectOnDragOther,
-    preventSelectOnDrag,
-    preventMultiSelect,
-  } = options;
-
+export function useManagedFiles<F extends ObjectWithId>({
+  initialFiles,
+  preventMultiDrag,
+  preventDeselectOnDragOther,
+  preventSelectOnDrag,
+  preventMultiSelect,
+  easyMultiSelect,
+}: UseManagedFilesOptions<F> = {}) {
   const [files, setFiles] = useState(initialFiles ?? []);
 
   const addFile = useCallback((file: F, index?: number) => {
@@ -138,18 +141,18 @@ export function useManagedFiles<F extends ObjectWithId>(options: UseManagedFiles
         }
 
         if (toggleIndex === -1) {
-          if (multiKey) return [...prev, id];
+          if (easyMultiSelect || multiKey) return [...prev, id];
           return [id];
         }
         if (toggleIndex !== -1) {
-          if (multiKey) return [...prev.slice(0, toggleIndex), ...prev.slice(toggleIndex + 1)];
+          if (easyMultiSelect || multiKey) return [...prev.slice(0, toggleIndex), ...prev.slice(toggleIndex + 1)];
           if (prev.length > 1) return [id];
           return [];
         }
         return prev;
       });
     },
-    [files, preventMultiSelect],
+    [easyMultiSelect, files, preventMultiSelect],
   );
 
   const onDeselectAll = useCallback(() => setSelectedIds([]), []);