Prevent folders from being dropped into their descendant

Author: TimboKZ

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

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

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
@@ -24,14 +24,23 @@ import { ListContainer } from './ListContainer';
 
 export interface FileListProps {}
 
+interface StyleState {
+    dndCanDrop: boolean;
+    dndIsOverCurrent: boolean;
+}
+
 export const FileList: React.FC<FileListProps> = React.memo(() => {
     const displayFileIds = useSelector(selectDisplayFileIds);
     const viewConfig = useSelector(selectFileViewConfig);
 
     const currentFolder = useSelector(selectCurrentFolder);
-    const { dndCanDrop, drop } = useFileDrop({ file: currentFolder });
+    const { drop, dndCanDrop, dndIsOverCurrent } = useFileDrop({ file: currentFolder });
+    const styleState = useMemo<StyleState>(() => ({ dndCanDrop, dndIsOverCurrent }), [
+        dndCanDrop,
+        dndIsOverCurrent,
+    ]);
 
-    const localClasses = useLocalStyles(dndCanDrop);
+    const localClasses = useLocalStyles(styleState);
     const classes = useStyles(viewConfig);
 
     // In Chonky v0.x, this field was user-configurable. In Chonky v1.x+, we hardcode
@@ -61,7 +70,13 @@ export const FileList: React.FC<FileListProps> = React.memo(() => {
         >
             <div className={localClasses.dndDropZone}>
                 <div className={localClasses.dndDropZoneIcon}>
-                    <ChonkyIcon icon={ChonkyIconName.dndCanDrop} />
+                    <ChonkyIcon
+                        icon={
+                            dndCanDrop
+                                ? ChonkyIconName.dndCanDrop
+                                : ChonkyIconName.dndCannotDrop
+                        }
+                    />
                 </div>
             </div>
             <AutoSizer disableHeight={!fillParentContainer}>{listRenderer}</AutoSizer>
@@ -72,16 +87,23 @@ export const FileList: React.FC<FileListProps> = React.memo(() => {
 const useLocalStyles = makeLocalChonkyStyles((theme) => ({
     fileListWrapper: {
         minHeight: ChonkyActions.EnableGridView.fileViewConfig.entryHeight + 2,
-        background: (showIndicator: boolean) =>
-            showIndicator
-                ? getStripeGradient(
-                      theme.dnd.fileListMaskOne,
-                      theme.dnd.fileListMaskTwo
-                  )
+        background: (state: StyleState) =>
+            state.dndIsOverCurrent && state.dndCanDrop
+                ? state.dndCanDrop
+                    ? getStripeGradient(
+                          theme.dnd.fileListCanDropMaskOne,
+                          theme.dnd.fileListCanDropMaskTwo
+                      )
+                    : getStripeGradient(
+                          theme.dnd.fileListCannotDropMaskOne,
+                          theme.dnd.fileListCannotDropMaskTwo
+                      )
                 : 'none',
     },
     dndDropZone: {
-        display: (showIndicator: boolean) => (showIndicator ? 'block' : 'none'),
+        display: (state: StyleState) =>
+            // When we cannot drop, we don't show an indicator at all
+            state.dndIsOverCurrent && state.dndCanDrop ? 'block' : 'none',
         borderRadius: theme.gridFileEntry.borderRadius,
         pointerEvents: 'none',
         position: 'absolute',
@@ -90,10 +112,12 @@ const useLocalStyles = makeLocalChonkyStyles((theme) => ({
         zIndex: 2,
     },
     dndDropZoneIcon: {
+        backgroundColor: (state: StyleState) =>
+            state.dndCanDrop ? theme.dnd.canDropMask : theme.dnd.cannotDropMask,
+        color: (state: StyleState) =>
+            state.dndCanDrop ? theme.dnd.canDropColor : theme.dnd.cannotDropColor,
         borderRadius: theme.gridFileEntry.borderRadius,
         transform: 'translateX(-50%) translateY(-50%)',
-        backgroundColor: theme.dnd.canDropMask,
-        color: theme.dnd.canDropColor,
         position: 'absolute',
         textAlign: 'center',
         lineHeight: '60px',

packages/chonky/src/util/dnd.ts

@@ -8,6 +8,7 @@ import { EssentialActions } from '../action-definitions/essential';
 import { ChonkyActions } from '../action-definitions/index';
 import {
     selectCurrentFolder,
+    selectFolderChain,
     selectInstanceId,
     selectSelectedFiles,
 } from '../redux/selectors';
@@ -115,6 +116,7 @@ export const useFileDrop = ({
     forceDisableDrop,
     includeChildrenDrops,
 }: UseFileDropParams) => {
+    const folderChainRef = useInstanceVariable(useSelector(selectFolderChain));
     const onDrop = useCallback(
         (item: ChonkyDndFileEntryItem, monitor) => {
             if (!monitor.canDrop()) return;
@@ -136,15 +138,24 @@ export const useFileDrop = ({
             }
             const { source, draggedFile, selectedFiles } = item.payload;
 
-            const filesToCheck: FileData[] = [draggedFile, ...selectedFiles];
-            if (source) filesToCheck.push(source);
-            for (const currFile of filesToCheck) {
-                if (file.id === currFile.id) return false;
+            // We prevent folders from being dropped into themselves. We also prevent
+            // any folder from current folder chain being moved - we can't move the
+            // folder that we are currently in.
+            const prohibitedFileIds = new Set<string>();
+            prohibitedFileIds.add(file.id);
+            folderChainRef.current.map((folder) => {
+                if (folder) prohibitedFileIds.add(folder.id);
+            });
+            const movedFiles: FileData[] = [draggedFile, ...selectedFiles];
+            for (const currFile of movedFiles) {
+                if (prohibitedFileIds.has(currFile.id)) return false;
             }
 
-            return true;
+            // Finally, prohibit files from being moved into their parent folder
+            // (which is a no-op).
+            return file.id !== source?.id;
         },
-        [forceDisableDrop, file, includeChildrenDrops]
+        [forceDisableDrop, file, includeChildrenDrops, folderChainRef]
     );
     const collect = useCallback(
         (monitor) => ({

packages/chonky/src/util/styles.ts

@@ -39,8 +39,10 @@ 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.1)',
-        fileListMaskTwo: 'rgba(180, 235, 180, 0.2)',
+        fileListCanDropMaskOne: 'rgba(180, 235, 180, 0.1)',
+        fileListCanDropMaskTwo: 'rgba(180, 235, 180, 0.2)',
+        fileListCannotDropMaskOne: 'rgba(235, 180, 180, 0.1)',
+        fileListCannotDropMaskTwo: 'rgba(235, 180, 180, 0.2)',
     },
 
     dragLayer: {