feat: refactor component structure

Author: JarrodMFlesch

packages/payload/src/admin/views/treeViewList.ts

@@ -27,6 +27,7 @@ export type TreeViewClientProps = {
   enableRowSelections?: boolean
   expandedItemKeys?: TreeViewItemKey[]
   items: TreeViewItem[]
+  noResults: boolean
   parentFieldName: string
   search?: string
   sort?: FolderSortKeys

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

@@ -27,17 +27,17 @@ interface DivTableRowProps {
   firstCellXOffset: number
   focusedRowIndex?: number
   hasSelectedAncestor: boolean
-  hoveredRowID: null | number | string
+  hoveredRowItemKey: ItemKey | null
   isDragging: boolean
   isFirstRowAtRootLevel: boolean
   isInvalidTarget: boolean
   isLastRow: boolean
   isRowAtRootLevel: boolean
   isRowSelected: boolean
   level: number
-  loadingRowIDs?: Set<number | string>
+  loadingRowItemKeys?: Set<ItemKey>
   onDroppableHover: (params: {
-    hoveredRowID?: number | string
+    hoveredRowID?: ItemKey
     placement?: string
     targetItem: null | SectionRow
   }) => void
@@ -71,13 +71,13 @@ export const Row: React.FC<DivTableRowProps> = ({
   firstCellXOffset,
   focusedRowIndex,
   hasSelectedAncestor,
-  hoveredRowID,
+  hoveredRowItemKey,
   isDragging,
   isFirstRowAtRootLevel,
   isInvalidTarget,
   isRowSelected,
   level,
-  loadingRowIDs,
+  loadingRowItemKeys: loadingRowIDs,
   onDroppableHover,
   onFocusChange,
   onRowDrag,
@@ -301,7 +301,7 @@ export const Row: React.FC<DivTableRowProps> = ({
       </div>
 
       {/* Render placeholder row below the hovered row */}
-      {isDragging && hoveredRowID === rowItem.rowID && (
+      {isDragging && hoveredRowItemKey === rowItem.rowID && (
         <div className={`${baseClass}__placeholder-section`}>
           <div className={`${baseClass}__placeholder-row`}>
             {columns.map((col) => (

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

@@ -12,13 +12,13 @@ interface RenderTableSectionProps {
   firstCellXOffset: number
   focusedRowIndex?: number
   hasSelectedAncestor?: boolean
-  hoveredRowID: null | number | string
+  hoveredRowItemKey: ItemKey | null
   isDragging: boolean
   isLastRowOfRoot?: boolean
   level?: number
-  loadingRowIDs?: Set<number | string>
+  loadingRowItemKeys?: Set<ItemKey>
   onDroppableHover: (params: {
-    hoveredRowID?: number | string
+    hoveredRowID?: ItemKey
     placement?: string
     targetItem: null | SectionRow
   }) => void
@@ -54,11 +54,11 @@ export const TableSection: React.FC<RenderTableSectionProps> = ({
   firstCellXOffset,
   focusedRowIndex,
   hasSelectedAncestor = false,
-  hoveredRowID,
+  hoveredRowItemKey,
   isDragging,
   isLastRowOfRoot = false,
   level = 0,
-  loadingRowIDs,
+  loadingRowItemKeys,
   onDroppableHover,
   onFocusChange,
   onRowDrag,
@@ -144,15 +144,15 @@ export const TableSection: React.FC<RenderTableSectionProps> = ({
               firstCellXOffset={firstCellXOffset}
               focusedRowIndex={focusedRowIndex}
               hasSelectedAncestor={hasSelectedAncestor}
-              hoveredRowID={hoveredRowID}
+              hoveredRowItemKey={hoveredRowItemKey}
               isDragging={isDragging}
               isFirstRowAtRootLevel={isFirstRowAtRootLevel}
               isInvalidTarget={isInvalidTarget}
               isLastRow={isLastRow}
               isRowAtRootLevel={isRowAtRootLevel}
               isRowSelected={isRowSelected}
               level={level}
-              loadingRowIDs={loadingRowIDs}
+              loadingRowItemKeys={loadingRowItemKeys}
               onDroppableHover={onDroppableHover}
               onFocusChange={onFocusChange}
               onRowDrag={onRowDrag}
@@ -176,11 +176,11 @@ export const TableSection: React.FC<RenderTableSectionProps> = ({
                 firstCellXOffset={firstCellXOffset}
                 focusedRowIndex={focusedRowIndex}
                 hasSelectedAncestor={hasSelectedAncestor || isRowSelected}
-                hoveredRowID={hoveredRowID}
+                hoveredRowItemKey={hoveredRowItemKey}
                 isDragging={isDragging}
                 isLastRowOfRoot={isRowAtRootLevel}
                 level={level + 1}
-                loadingRowIDs={loadingRowIDs}
+                loadingRowItemKeys={loadingRowItemKeys}
                 onDroppableHover={onDroppableHover}
                 onFocusChange={onFocusChange}
                 onRowDrag={onRowDrag}

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

@@ -1,6 +1,9 @@
+'use client'
+
+import { useDndMonitor } from '@dnd-kit/core'
 import React from 'react'
 
-import type { NestedSectionsTableProps, SectionRow } from './types.js'
+import type { ItemKey, NestedSectionsTableProps, SectionRow } from './types.js'
 
 import { Header } from './Header/index.js'
 import { TableSection } from './TableSection/index.js'
@@ -13,20 +16,17 @@ export const NestedSectionsTable: React.FC<NestedSectionsTableProps> = ({
   className = '',
   columns = [{ name: 'name', label: 'Name' }],
   dropContextName,
-  hoveredRowID,
-  isDragging = false,
   isRowFocusable,
-  loadingRowIDs,
-  onDroppableHover,
-  onEnter,
+  loadingRowItemKeys,
+  onDrop,
+  // onEnter,
   onEscape,
-  onRowDrag,
+  onItemSelection,
   onSelectAll,
   openItemKeys,
   sections,
   segmentWidth = DEFAULT_SEGMENT_WIDTH,
   selectedItemKeys,
-  targetParentID,
   toggleRowExpand,
   updateSelections,
 }) => {
@@ -36,9 +36,12 @@ export const NestedSectionsTable: React.FC<NestedSectionsTableProps> = ({
   const [firstCellWidth, setFirstCellWidth] = React.useState(0)
   const firstCellRef = React.useRef<HTMLDivElement>(null)
 
-  // Helper to count all visible rows (including nested)
-  const countVisibleRows = React.useCallback(
-    (rows: SectionRow[]): number => {
+  const totalVisibleRows = React.useMemo(() => {
+    if (!sections) {
+      return 0
+    }
+
+    const countVisibleRows = (rows: SectionRow[]): number => {
       let count = 0
       for (const row of rows) {
         count++
@@ -47,14 +50,10 @@ export const NestedSectionsTable: React.FC<NestedSectionsTableProps> = ({
         }
       }
       return count
-    },
-    [openItemKeys],
-  )
+    }
 
-  const totalVisibleRows = React.useMemo(
-    () => (sections ? countVisibleRows(sections) : 0),
-    [sections, countVisibleRows],
-  )
+    return countVisibleRows(sections)
+  }, [sections, openItemKeys])
 
   // Get row at a specific visible index
   const getRowAtVisibleIndex = React.useCallback(
@@ -241,11 +240,11 @@ export const NestedSectionsTable: React.FC<NestedSectionsTableProps> = ({
           break
         }
 
-        case 'Enter': {
-          event.preventDefault()
-          onEnter?.(row)
-          break
-        }
+        // case 'Enter': {
+        //   event.preventDefault()
+        //   onEnter?.(row)
+        //   break
+        // }
 
         case 'Escape': {
           event.preventDefault()
@@ -277,14 +276,83 @@ export const NestedSectionsTable: React.FC<NestedSectionsTableProps> = ({
       totalVisibleRows,
       getRowAtVisibleIndex,
       isRowFocusable,
-      onEnter,
+      // onEnter,
       onEscape,
       onSelectAll,
       toggleRowExpand,
       onSelectionChange,
     ],
   )
 
+  const onRowDrag = React.useCallback(
+    ({ event, item: dragItem }: { event: PointerEvent; item: null | SectionRow }) => {
+      if (!dragItem) {
+        return
+      }
+
+      const isCurrentlySelected = selectedItemKeys.has(dragItem.itemKey)
+
+      if (!isCurrentlySelected) {
+        onItemSelection({
+          eventOptions: {
+            ctrlKey: event.ctrlKey || event.metaKey,
+            metaKey: event.ctrlKey || event.metaKey,
+            shiftKey: event.shiftKey,
+          },
+          itemKey: dragItem.itemKey,
+        })
+      }
+    },
+    [selectedItemKeys, onItemSelection],
+  )
+
+  const [isDragging, setIsDragging] = React.useState(false)
+  const [hoveredRowItemKey, setHoveredRowItemKey] = React.useState<ItemKey | null>(null)
+  const [targetParentID, setTargetParentID] = React.useState<null | number | string>(null)
+
+  const onDroppableHover = React.useCallback(
+    ({
+      hoveredRowItemKey: newHoveredRowItemKey,
+      targetItem,
+    }: {
+      hoveredRowItemKey?: ItemKey
+      targetItem: null | SectionRow
+    }) => {
+      setHoveredRowItemKey(newHoveredRowItemKey || null)
+      setTargetParentID(targetItem?.rowID || null)
+    },
+    [],
+  )
+
+  useDndMonitor({
+    onDragCancel() {
+      setIsDragging(false)
+      setHoveredRowItemKey(null)
+      setTargetParentID(null)
+      document.body.style.cursor = ''
+    },
+    onDragEnd(event) {
+      setIsDragging(false)
+      setHoveredRowItemKey(null)
+      setTargetParentID(null)
+      document.body.style.cursor = ''
+      if (!event.over) {
+        return
+      }
+
+      if (
+        event.over.data.current.type === 'tree-view-table' &&
+        'targetItem' in event.over.data.current
+      ) {
+        void onDrop({ targetItemKey: event.over.data.current.targetItem?.rowID })
+      }
+    },
+    onDragStart() {
+      setIsDragging(true)
+      document.body.style.cursor = 'grabbing'
+    },
+  })
+
   React.useEffect(() => {
     if (isDragging && firstCellRef.current) {
       const rect = firstCellRef.current.getBoundingClientRect()
@@ -328,9 +396,9 @@ export const NestedSectionsTable: React.FC<NestedSectionsTableProps> = ({
           firstCellWidth={firstCellWidth}
           firstCellXOffset={firstCellXOffset}
           focusedRowIndex={focusedRowIndex}
-          hoveredRowID={hoveredRowID}
+          hoveredRowItemKey={hoveredRowItemKey}
           isDragging={isDragging}
-          loadingRowIDs={loadingRowIDs}
+          loadingRowItemKeys={loadingRowItemKeys}
           onDroppableHover={onDroppableHover}
           onFocusChange={(index) => {
             // Convert index back to row ID

packages/ui/src/elements/TreeView/NestedSectionsTable/types.ts

@@ -14,25 +14,26 @@ export type NestedSectionsTableProps = {
   className?: string
   columns?: Column[]
   dropContextName: string
-  hoveredRowID?: null | number | string
   initialOffset?: number
-  isDragging?: boolean
   isRowFocusable: (row: SectionRow) => boolean
-  loadingRowIDs?: Set<number | string>
-  onDroppableHover: (params: {
-    hoveredRowID?: number | string
-    placement?: string
-    targetItem: null | SectionRow
-  }) => void
-  onEnter: (row: SectionRow) => void
+  loadingRowItemKeys?: Set<ItemKey>
+  onDrop?: (params: { targetItemKey: ItemKey | null }) => Promise<void>
+  // onEnter: (row: SectionRow) => void
   onEscape: () => void
+  onItemSelection?: (args: {
+    eventOptions: {
+      ctrlKey: boolean
+      metaKey: boolean
+      shiftKey: boolean
+    }
+    itemKey: ItemKey
+  }) => void
   onRowDrag?: (params: { event: PointerEvent; item: null | SectionRow }) => void
   onSelectAll: () => void
   openItemKeys?: Set<ItemKey>
   sections: SectionRow[]
   segmentWidth?: number
   selectedItemKeys: Set<ItemKey>
-  targetParentID?: null | number | string
   toggleRowExpand: (docID: number | string) => void
   updateSelections: (args: { itemKeys: ItemKey[] | Set<ItemKey> }) => void
 }