diff --git a/src/components/FileOrganizer/FileOrganizer.stories.tsx b/src/components/FileOrganizer/FileOrganizer.stories.tsx index 222e368..a6704b8 100644 --- 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 index e4c14e0..f48722b 100644 --- a/src/hooks/useManagedFiles.ts +++ b/src/hooks/useManagedFiles.ts @@ -22,6 +22,10 @@ export interface UseManagedFilesOptions { * 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 { @@ -87,15 +91,14 @@ export interface UseManagedFilesOutput { * `FileOrganizer` component. * @param options Options for managing files. */ -export function useManagedFiles(options: UseManagedFilesOptions = {}) { - const { - initialFiles, - preventMultiDrag, - preventDeselectOnDragOther, - preventSelectOnDrag, - preventMultiSelect, - } = options; - +export function useManagedFiles({ + initialFiles, + preventMultiDrag, + preventDeselectOnDragOther, + preventSelectOnDrag, + preventMultiSelect, + easyMultiSelect, +}: UseManagedFilesOptions = {}) { const [files, setFiles] = useState(initialFiles ?? []); const addFile = useCallback((file: F, index?: number) => { @@ -138,18 +141,18 @@ export function useManagedFiles(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([]), []);