simplifies invalidTargetIDs

Author: JarrodMFlesch

packages/ui/src/elements/TreeView/NestedSectionsTable/RowDropArea/index.tsx

@@ -13,8 +13,8 @@ const THROTTLE_MS = 16
 type Placement = 'middle' | 'split'
 
 export type RowDropAreaProps = {
+  disabled?: boolean
   dropContextName: string
-  invalidTargetIDs?: Set<number | string>
   isDragging?: boolean
   onHover?: (data: { placement: Placement; targetItem: any }) => void
   placement?: Placement
@@ -26,8 +26,8 @@ export type RowDropAreaProps = {
 }
 
 export const RowDropArea = ({
+  disabled = false,
   dropContextName,
-  invalidTargetIDs,
   isDragging = false,
   onHover,
   placement = 'split',
@@ -51,20 +51,10 @@ export const RowDropArea = ({
 
   const targetItem = targetItems[hoverIndex]
 
-  // Check if this target is invalid (trying to drop a parent into its own descendant)
-  const isInvalidTarget = React.useMemo(() => {
-    if (!invalidTargetIDs || !targetItem) {
-      return false
-    }
-    // targetItem can be null (for root level drops) or have a rowID
-    const targetID = targetItem?.rowID
-    return targetID !== null && targetID !== undefined && invalidTargetIDs.has(targetID)
-  }, [invalidTargetIDs, targetItem])
-
   const { isOver, setNodeRef } = useDroppable({
     id,
     data: { type: dropContextName, targetItem },
-    disabled: !isDragging || isInvalidTarget,
+    disabled: disabled || !isDragging,
   })
 
   React.useEffect(() => {
@@ -80,7 +70,7 @@ export const RowDropArea = ({
         `${baseClass}--on-${placement}`,
         isDragging && 'is-dragging',
         isOver && 'is-over',
-        isInvalidTarget && `${baseClass}--invalid`,
+        disabled && `${baseClass}--invalid`,
       ]
         .filter(Boolean)
         .join(' ')}

packages/ui/src/elements/TreeView/NestedSectionsTable/index.tsx

@@ -27,7 +27,6 @@ interface NestedSectionsTableProps {
   dropContextName: string
   hoveredRowID?: null | number | string
   initialOffset?: number
-  invalidTargetIDs?: Set<number | string>
   isDragging?: boolean
   loadingRowIDs?: Set<number | string>
   onDroppableHover: (params: {
@@ -60,8 +59,8 @@ interface DivTableSectionProps {
   firstCellRef?: React.RefObject<HTMLDivElement>
   firstCellWidth: number
   firstCellXOffset: number
+  hasSelectedAncestor?: boolean
   hoveredRowID: null | number | string
-  invalidTargetIDs?: Set<number | string>
   isDragging: boolean
   isLastRowOfRoot?: boolean
   level?: number
@@ -101,7 +100,6 @@ export const NestedSectionsTable: React.FC<NestedSectionsTableProps> = ({
   disabledRowIDs,
   dropContextName,
   hoveredRowID,
-  invalidTargetIDs,
   isDragging = false,
   loadingRowIDs,
   onDroppableHover,
@@ -161,7 +159,6 @@ export const NestedSectionsTable: React.FC<NestedSectionsTableProps> = ({
           firstCellWidth={firstCellWidth}
           firstCellXOffset={firstCellXOffset}
           hoveredRowID={hoveredRowID}
-          invalidTargetIDs={invalidTargetIDs}
           isDragging={isDragging}
           loadingRowIDs={loadingRowIDs}
           onDroppableHover={onDroppableHover}
@@ -188,8 +185,8 @@ export const DivTableSection: React.FC<DivTableSectionProps> = ({
   firstCellRef,
   firstCellWidth,
   firstCellXOffset,
+  hasSelectedAncestor = false,
   hoveredRowID,
-  invalidTargetIDs,
   isDragging,
   isLastRowOfRoot = false,
   level = 0,
@@ -264,8 +261,8 @@ export const DivTableSection: React.FC<DivTableSectionProps> = ({
             : firstCellWidth + segmentWidth * (hasNestedRows ? level + 1 : level) + 28
 
         const isOdd = absoluteRowIndex % 2 === 1
-
-        const isInvalidTarget = invalidTargetIDs?.has(rowItem.rowID)
+        const isRowSelected = selectedRowIDs.includes(rowItem.rowID)
+        const isInvalidTarget = hasSelectedAncestor || isRowSelected
 
         const renderResult = (
           <React.Fragment key={rowItem.rowID}>
@@ -276,7 +273,7 @@ export const DivTableSection: React.FC<DivTableSectionProps> = ({
                 isDragging && isInvalidTarget && `${baseClass}__section--invalid-target`,
                 isOdd && `${baseClass}__section--odd`,
                 targetParentID === rowItem.rowID && `${baseClass}__section--target`,
-                selectedRowIDs.includes(rowItem.rowID) && `${baseClass}__section--selected`,
+                isRowSelected && `${baseClass}__section--selected`,
               ]
                 .filter(Boolean)
                 .join(' ')}
@@ -387,8 +384,8 @@ export const DivTableSection: React.FC<DivTableSectionProps> = ({
                 )}
                 <div>
                   <RowDropArea
+                    disabled={isInvalidTarget}
                     dropContextName={dropContextName}
-                    invalidTargetIDs={invalidTargetIDs}
                     isDragging={isDragging}
                     onHover={(data) => {
                       onDroppableHover({ ...data, hoveredRowID: rowItem.rowID })
@@ -400,8 +397,8 @@ export const DivTableSection: React.FC<DivTableSectionProps> = ({
                   />
 
                   <RowDropArea
+                    disabled={isInvalidTarget}
                     dropContextName={dropContextName}
-                    invalidTargetIDs={invalidTargetIDs}
                     isDragging={isDragging}
                     onHover={(data) => {
                       onDroppableHover({ ...data, hoveredRowID: rowItem.rowID })
@@ -439,8 +436,8 @@ export const DivTableSection: React.FC<DivTableSectionProps> = ({
                 dropContextName={dropContextName}
                 firstCellWidth={firstCellWidth}
                 firstCellXOffset={firstCellXOffset}
+                hasSelectedAncestor={hasSelectedAncestor || isRowSelected}
                 hoveredRowID={hoveredRowID}
-                invalidTargetIDs={invalidTargetIDs}
                 isDragging={isDragging}
                 isLastRowOfRoot={isRowAtRootLevel}
                 level={level + 1}

packages/ui/src/elements/TreeView/TreeViewTable/index.tsx

@@ -343,14 +343,6 @@ export function TreeViewTable() {
     })
   }, [selectedItemKeys, items])
 
-  // Compute invalid drop targets (dragged items + all their descendants)
-  const invalidTargetIDs = React.useMemo(() => {
-    if (!isDragging || selectedRowIDs.length === 0) {
-      return undefined
-    }
-    return getAllDescendantIDs(selectedRowIDs, items)
-  }, [isDragging, selectedRowIDs, items])
-
   return (
     <>
       {/* TODO: remove this button */}
@@ -359,7 +351,6 @@ export function TreeViewTable() {
         className={baseClass}
         dropContextName={dropContextName}
         hoveredRowID={hoveredRowID}
-        invalidTargetIDs={invalidTargetIDs}
         isDragging={isDragging}
         loadingRowIDs={loadingRowIDs}
         onDroppableHover={onDroppableHover}