Fix DnD only moving one file to another folder

Author: TimboKZ

packages/chonky/src/action-definitions/essential.ts

@@ -2,7 +2,6 @@ import { reduxActions } from '../redux/reducers';
 import {
     getFileData,
     getIsFileSelected,
-    getSelectedFiles,
     selectDisableSelection,
     selectLastClickIndex,
     selectParentFolder,
@@ -185,12 +184,9 @@ export const EssentialActions = {
                 return;
             }
 
-            const selectedFiles = getSelectedFiles(
-                getReduxState(),
-                FileHelper.isDraggable
-            );
+            const { draggedFile, selectedFiles } = payload as EndDragNDropPayload;
             const droppedFiles =
-                selectedFiles.length > 0 ? selectedFiles : [payload.draggedFile];
+                selectedFiles.length > 0 ? selectedFiles : [draggedFile];
             reduxDispatch(
                 thunkRequestFileAction(ChonkyActions.MoveFiles, {
                     ...payload,

packages/chonky/src/components/external/FolderChainButton.tsx

@@ -24,7 +24,10 @@ export interface FolderChainButtonProps {
 export const FolderChainButton: React.FC<FolderChainButtonProps> = React.memo(
     ({ first, current, item }) => {
         const { file, disabled, onClick } = item;
-        const { dndIsOver, dndCanDrop, drop } = useFileDrop(file, !!file && !current);
+        const { dndIsOver, dndCanDrop, drop } = useFileDrop({
+            file,
+            forceDisableDrop: !!file && !current,
+        });
         const dndState = useMemo<DndEntryState>(
             () => ({
                 dndIsOver,

packages/chonky/src/components/file-list/DnDFileListDragLayer.tsx

@@ -63,7 +63,7 @@ export const DnDFileListDragLayer: React.FC<DnDFileListDragLayerProps> = () => {
         return null;
     }
 
-    const selectionSize = item.payload.selection.length;
+    const selectionSize = item.payload.selectedFiles.length;
     return (
         <div style={layerStyles}>
             <div

packages/chonky/src/components/file-list/FileList.tsx

@@ -29,7 +29,7 @@ export const FileList: React.FC<FileListProps> = React.memo(() => {
     const viewConfig = useSelector(selectFileViewConfig);
 
     const currentFolder = useSelector(selectCurrentFolder);
-    const { dndCanDrop, drop } = useFileDrop(currentFolder);
+    const { dndCanDrop, drop } = useFileDrop({ file: currentFolder });
 
     const localClasses = useLocalStyles(dndCanDrop);
     const classes = useStyles(viewConfig);

packages/chonky/src/types/action-payloads.types.ts

@@ -25,7 +25,7 @@ export interface StartDragNDropPayload {
     sourceInstanceId: string;
     source: Nullable<FileData>;
     draggedFile: FileData;
-    selection: FileData[];
+    selectedFiles: FileData[];
 }
 
 export type EndDragNDropPayload = StartDragNDropPayload & {

packages/chonky/src/util/dnd.ts

@@ -35,7 +35,7 @@ export const useFileDrag = (file: Nullable<FileData>) => {
             // We force non-null type below because by convention, if drag & drop for
             // this file was possible, it must have been non-null.
             draggedFile: fileRef.current!,
-            selection: selectSelectedFiles(reduxState),
+            selectedFiles: selectSelectedFiles(reduxState),
         };
     }, [store, fileRef]);
 
@@ -104,7 +104,17 @@ export const useFileDrag = (file: Nullable<FileData>) => {
     return { dndIsDragging, drag };
 };
 
-export const useFileDrop = (file: Nullable<FileData>, allowDrop: boolean = true) => {
+interface UseFileDropParams {
+    file: Nullable<FileData>;
+    forceDisableDrop?: boolean;
+    includeChildrenDrops?: boolean;
+}
+
+export const useFileDrop = ({
+    file,
+    forceDisableDrop,
+    includeChildrenDrops,
+}: UseFileDropParams) => {
     const onDrop = useCallback(
         (item: ChonkyDndFileEntryItem, monitor) => {
             if (!monitor.canDrop()) return;
@@ -118,23 +128,23 @@ export const useFileDrop = (file: Nullable<FileData>, allowDrop: boolean = true)
     const canDrop = useCallback(
         (item: ChonkyDndFileEntryItem, monitor: DropTargetMonitor) => {
             if (
-                !allowDrop ||
-                !monitor.isOver({ shallow: true }) ||
-                !FileHelper.isDroppable(file)
+                forceDisableDrop ||
+                !FileHelper.isDroppable(file) ||
+                (!monitor.isOver({ shallow: true }) && !includeChildrenDrops)
             ) {
                 return false;
             }
-            const { source, draggedFile, selection } = item.payload;
+            const { source, draggedFile, selectedFiles } = item.payload;
 
-            const filesToCheck: FileData[] = [draggedFile, ...selection];
+            const filesToCheck: FileData[] = [draggedFile, ...selectedFiles];
             if (source) filesToCheck.push(source);
             for (const currFile of filesToCheck) {
                 if (file.id === currFile.id) return false;
             }
 
             return true;
         },
-        [allowDrop, file]
+        [forceDisableDrop, file, includeChildrenDrops]
     );
     const collect = useCallback(
         (monitor) => ({
@@ -158,7 +168,7 @@ export const useFileDrop = (file: Nullable<FileData>, allowDrop: boolean = true)
 
 export const useFileEntryDnD = (file: Nullable<FileData>) => {
     const { dndIsDragging, drag } = useFileDrag(file);
-    const { dndIsOver, dndCanDrop, drop } = useFileDrop(file);
+    const { dndIsOver, dndCanDrop, drop } = useFileDrop({ file });
     const dndState = useMemo<DndEntryState>(
         () => ({
             dndIsDragging,

packages/chonky/src/util/styles.ts

@@ -39,8 +39,8 @@ export const lightTheme = {
         cannotDropColor: 'red',
         canDropMask: 'rgba(180, 235, 180, 0.75)',
         cannotDropMask: 'rgba(235, 180, 180, 0.75)',
-        fileListMaskOne: 'rgba(180, 235, 180, 0.15)',
-        fileListMaskTwo: 'rgba(180, 235, 180, 0.25)',
+        fileListMaskOne: 'rgba(180, 235, 180, 0.1)',
+        fileListMaskTwo: 'rgba(180, 235, 180, 0.2)',
     },
 
     dragLayer: {