feat: replace react-dnd to dnd-kit (#2028)

Co-authored-by: Himself65 <himself65@outlook.com>

packages/component/src/ui/tree-view/TreeNode.tsx

@@ -1,147 +1,43 @@
-import { useEffect } from 'react';
-import { useDrag, useDrop } from 'react-dnd';
+import { useDraggable } from '@dnd-kit/core';
+import { useMemo } from 'react';
 
 import {
   StyledCollapse,
-  StyledNodeLine,
   StyledTreeNodeContainer,
   StyledTreeNodeWrapper,
 } from './styles';
-import type {
-  Node,
-  NodeLIneProps,
-  TreeNodeItemProps,
-  TreeNodeProps,
-} from './types';
-
-const NodeLine = <RenderProps,>({
-  node,
-  onDrop,
-  allowDrop = true,
-  isTop = false,
-}: NodeLIneProps<RenderProps>) => {
-  const [{ isOver }, drop] = useDrop(
-    () => ({
-      accept: 'node',
-      drop: (item: Node<RenderProps>, monitor) => {
-        const didDrop = monitor.didDrop();
-        if (didDrop) {
-          return;
-        }
-        onDrop?.(item.id, node.id, {
-          internal: false,
-          topLine: isTop,
-          bottomLine: !isTop,
-        });
-      },
-      collect: monitor => ({
-        isOver: monitor.isOver(),
-        canDrop: monitor.canDrop(),
-      }),
-    }),
-    [onDrop]
-  );
-
-  return <StyledNodeLine ref={drop} show={isOver && allowDrop} isTop={isTop} />;
-};
-const TreeNodeItemWithDnd = <RenderProps,>({
-  node,
-  allowDrop,
-  setCollapsed,
-  ...otherProps
-}: TreeNodeItemProps<RenderProps>) => {
-  const { onAdd, onDelete, onDrop } = otherProps;
-
-  const [{ canDrop, isOver }, drop] = useDrop(
-    () => ({
-      accept: 'node',
-      drop: (item: Node<RenderProps>, monitor) => {
-        const didDrop = monitor.didDrop();
-        if (didDrop || item.id === node.id || !allowDrop) {
-          return;
-        }
-        onDrop?.(item.id, node.id, {
-          internal: true,
-          topLine: false,
-          bottomLine: false,
-        });
-      },
-      collect: monitor => ({
-        isOver: monitor.isOver(),
-        canDrop: monitor.canDrop() && allowDrop,
-      }),
-    }),
-    [onDrop, allowDrop]
-  );
-
-  useEffect(() => {
-    if (isOver && canDrop) {
-      setCollapsed(node.id, false);
-    }
-  }, [isOver, canDrop, setCollapsed, node.id]);
-
-  return (
-    <TreeNodeItem
-      dropRef={drop}
-      onAdd={onAdd}
-      onDelete={onDelete}
-      node={node}
-      allowDrop={allowDrop}
-      setCollapsed={setCollapsed}
-      isOver={isOver}
-      canDrop={canDrop}
-      {...otherProps}
-    />
-  );
-};
-
-const TreeNodeItem = <RenderProps,>({
-  node,
-  collapsed,
-  setCollapsed,
-  selectedId,
-  isOver = false,
-  canDrop = false,
-  onAdd,
-  onDelete,
-  dropRef,
-  disableCollapse,
-}: TreeNodeItemProps<RenderProps>) => {
-  return (
-    <div ref={dropRef}>
-      {node.render?.(node, {
-        isOver: isOver && canDrop,
-        onAdd: () => onAdd?.(node.id),
-        onDelete: () => onDelete?.(node.id),
-        collapsed,
-        setCollapsed,
-        isSelected: selectedId === node.id,
-        disableCollapse,
-      })}
-    </div>
-  );
-};
-
+import { NodeLine, TreeNodeItem, TreeNodeItemWithDnd } from './TreeNodeInner';
+import type { TreeNodeProps } from './types';
 export const TreeNodeWithDnd = <RenderProps,>(
   props: TreeNodeProps<RenderProps>
 ) => {
-  const [{ isDragging }, drag] = useDrag(() => ({
-    type: 'node',
-    item: props.node,
-    collect: monitor => ({
-      isDragging: monitor.isDragging(),
-    }),
-  }));
-
-  return <TreeNode dragRef={drag} isDragging={isDragging} {...props} />;
+  const { draggingId, node, allowDrop } = props;
+  const { attributes, listeners, setNodeRef } = useDraggable({
+    id: props.node.id,
+  });
+  const isDragging = useMemo(
+    () => draggingId === node.id,
+    [draggingId, node.id]
+  );
+  return (
+    <StyledTreeNodeContainer
+      ref={setNodeRef}
+      isDragging={isDragging}
+      {...listeners}
+      {...attributes}
+    >
+      <TreeNode
+        {...props}
+        allowDrop={allowDrop === false ? allowDrop : !isDragging}
+      />
+    </StyledTreeNodeContainer>
+  );
 };
 
 export const TreeNode = <RenderProps,>({
   node,
   index,
-  isDragging = false,
   allowDrop = true,
-  dragRef,
   ...otherProps
 }: TreeNodeProps<RenderProps>) => {
   const { indent, enableDnd, collapsedIds } = otherProps;
@@ -149,13 +45,13 @@ export const TreeNode = <RenderProps,>({
   const { renderTopLine = true, renderBottomLine = true } = node;
 
   return (
-    <StyledTreeNodeContainer ref={dragRef} isDragging={isDragging}>
+    <>
       <StyledTreeNodeWrapper>
         {enableDnd && renderTopLine && index === 0 && (
           <NodeLine
             node={node}
             {...otherProps}
-            allowDrop={!isDragging && allowDrop}
+            allowDrop={allowDrop}
             isTop={true}
           />
         )}
@@ -180,11 +76,7 @@ export const TreeNode = <RenderProps,>({
         {enableDnd &&
           renderBottomLine &&
           (!node.children?.length || collapsed) && (
-            <NodeLine
-              node={node}
-              {...otherProps}
-              allowDrop={!isDragging && allowDrop}
-            />
+            <NodeLine node={node} {...otherProps} allowDrop={allowDrop} />
           )}
       </StyledTreeNodeWrapper>
       <StyledCollapse in={!collapsed} indent={indent}>
@@ -195,8 +87,8 @@ export const TreeNode = <RenderProps,>({
                 key={childNode.id}
                 node={childNode}
                 index={index}
-                allowDrop={isDragging ? false : allowDrop}
                 {...otherProps}
+                allowDrop={allowDrop}
               />
             ) : (
               <TreeNode
@@ -209,6 +101,6 @@ export const TreeNode = <RenderProps,>({
             )
           )}
       </StyledCollapse>
-    </StyledTreeNodeContainer>
+    </>
   );
 };

packages/component/src/ui/tree-view/TreeNodeInner.tsx

@@ -0,0 +1,92 @@
+import { useDroppable } from '@dnd-kit/core';
+
+import { StyledNodeLine } from './styles';
+import type { NodeLIneProps, TreeNodeItemProps } from './types';
+
+export const NodeLine = <RenderProps,>({
+  node,
+  allowDrop = true,
+  isTop = false,
+}: NodeLIneProps<RenderProps>) => {
+  const { isOver, setNodeRef } = useDroppable({
+    id: `${node.id}-${isTop ? 'top' : 'bottom'}-line`,
+    disabled: !allowDrop,
+    data: {
+      node,
+      position: {
+        topLine: isTop,
+        bottomLine: !isTop,
+        internal: false,
+      },
+    },
+  });
+
+  return (
+    <StyledNodeLine
+      ref={setNodeRef}
+      isOver={isOver && allowDrop}
+      isTop={isTop}
+    />
+  );
+};
+export const TreeNodeItemWithDnd = <RenderProps,>({
+  node,
+  allowDrop,
+  setCollapsed,
+  ...otherProps
+}: TreeNodeItemProps<RenderProps>) => {
+  const { onAdd, onDelete } = otherProps;
+
+  const { isOver, setNodeRef } = useDroppable({
+    id: node.id,
+    disabled: !allowDrop,
+    data: {
+      node,
+      position: {
+        topLine: false,
+        bottomLine: false,
+        internal: true,
+      },
+    },
+  });
+
+  return (
+    <div ref={setNodeRef}>
+      <TreeNodeItem
+        onAdd={onAdd}
+        onDelete={onDelete}
+        node={node}
+        allowDrop={allowDrop}
+        setCollapsed={setCollapsed}
+        isOver={isOver}
+        {...otherProps}
+      />
+    </div>
+  );
+};
+
+export const TreeNodeItem = <RenderProps,>({
+  node,
+  collapsed,
+  setCollapsed,
+  selectedId,
+  isOver = false,
+  onAdd,
+  onDelete,
+  disableCollapse,
+  allowDrop = true,
+}: TreeNodeItemProps<RenderProps>) => {
+  return (
+    <>
+      {node.render?.(node, {
+        isOver: isOver && allowDrop,
+        onAdd: () => onAdd?.(node.id),
+        onDelete: () => onDelete?.(node.id),
+        collapsed,
+        setCollapsed,
+        isSelected: selectedId === node.id,
+        disableCollapse,
+      })}
+    </>
+  );
+};

packages/component/src/ui/tree-view/TreeView.tsx

@@ -1,11 +1,20 @@
-import { useEffect, useState } from 'react';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
+import type {
+  DragEndEvent} from '@dnd-kit/core';
+import {
+  closestCenter,
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from '@dnd-kit/core';
+import { useCallback, useState } from 'react';
 
+import useCollapsed from './hooks/useCollapsed';
+import useSelectWithKeyboard from './hooks/useSelectWithKeyboard';
 import { TreeNode, TreeNodeWithDnd } from './TreeNode';
-import type { TreeNodeProps, TreeViewProps } from './types';
-import { flattenIds } from './utils';
-
+import type { TreeViewProps } from './types';
+import { findNode } from './utils';
 export const TreeView = <RenderProps,>({
   data,
   enableKeyboardSelection,
@@ -13,69 +22,51 @@ export const TreeView = <RenderProps,>({
   enableDnd = true,
   initialCollapsedIds = [],
   disableCollapse,
+  onDrop,
   ...otherProps
 }: TreeViewProps<RenderProps>) => {
-  const [selectedId, setSelectedId] = useState<string>();
-  // TODO: should record collapsedIds in localStorage
-  const [collapsedIds, setCollapsedIds] =
-    useState<string[]>(initialCollapsedIds);
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    })
+  );
+  const { selectedId } = useSelectWithKeyboard({
+    data,
+    onSelect,
+    enableKeyboardSelection,
+  });
 
-  useEffect(() => {
-    if (!enableKeyboardSelection) {
-      return;
-    }
+  const { collapsedIds, setCollapsed } = useCollapsed({ disableCollapse });
 
-    const flattenedIds = flattenIds<RenderProps>(data);
+  const [draggingId, setDraggingId] = useState<string>();
 
-    const handleDirectionKeyDown = (e: KeyboardEvent) => {
-      if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') {
+  const onDragEnd = useCallback(
+    (e: DragEndEvent) => {
+      const { active, over } = e;
+      const position = over?.data.current?.position;
+      const dropId = over?.data.current?.node.id;
+
+      if (!over || !active || !position) {
         return;
       }
-      if (selectedId === undefined) {
-        setSelectedId(flattenedIds[0]);
-        return;
-      }
-      let selectedIndex = flattenedIds.indexOf(selectedId);
-      if (e.key === 'ArrowDown') {
-        selectedIndex < flattenedIds.length - 1 && selectedIndex++;
-      }
-      if (e.key === 'ArrowUp') {
-        selectedIndex > 0 && selectedIndex--;
-      }
-
-      setSelectedId(flattenedIds[selectedIndex]);
-    };
-
-    const handleEnterKeyDown = (e: KeyboardEvent) => {
-      if (e.key !== 'Enter') {
-        return;
-      }
-      selectedId && onSelect?.(selectedId);
-    };
-
-    document.addEventListener('keydown', handleDirectionKeyDown);
-    document.addEventListener('keydown', handleEnterKeyDown);
-
-    return () => {
-      document.removeEventListener('keydown', handleDirectionKeyDown);
-      document.removeEventListener('keydown', handleEnterKeyDown);
-    };
-  }, [data, enableKeyboardSelection, onSelect, selectedId]);
-
-  const setCollapsed: TreeNodeProps['setCollapsed'] = (id, collapsed) => {
-    if (disableCollapse) {
-      return;
-    }
-    if (collapsed) {
-      setCollapsedIds(ids => [...ids, id]);
-    } else {
-      setCollapsedIds(ids => ids.filter(i => i !== id));
-    }
-  };
 
+      onDrop?.(active.id as string, dropId, position);
+    },
+    [onDrop]
+  );
+  const onDragMove = useCallback((e: DragEndEvent) => {
+    setDraggingId(e.active.id as string);
+  }, []);
   if (enableDnd) {
     return (
-      <DndProvider backend={HTML5Backend}>
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragMove={onDragMove}
+        onDragEnd={onDragEnd}
+      >
         {data.map((node, index) => (
           <TreeNodeWithDnd
             key={node.id}
@@ -86,10 +77,24 @@ export const TreeView = <RenderProps,>({
             selectedId={selectedId}
             enableDnd={enableDnd}
             disableCollapse={disableCollapse}
+            draggingId={draggingId}
             {...otherProps}
           />
         ))}
-      </DndProvider>
+
+        <DragOverlay>
+          {draggingId && (
+            <TreeNode
+              node={findNode(draggingId, data)!}
+              index={0}
+              allowDrop={false}
+              collapsedIds={collapsedIds}
+              setCollapsed={() => {}}
+              {...otherProps}
+            />
+          )}
+        </DragOverlay>
+      </DndContext>
     );
   }
 

packages/component/src/ui/tree-view/hooks/useCollapsed.ts

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+
+import type { TreeNodeProps } from '../types';
+export const useCollapsed = <RenderProps>({
+  initialCollapsedIds = [],
+  disableCollapse = false,
+}: {
+  disableCollapse?: boolean;
+  initialCollapsedIds?: string[];
+}) => {
+  // TODO: should record collapsedIds in localStorage
+  const [collapsedIds, setCollapsedIds] =
+    useState<string[]>(initialCollapsedIds);
+
+  const setCollapsed: TreeNodeProps['setCollapsed'] = (id, collapsed) => {
+    if (disableCollapse) {
+      return;
+    }
+    if (collapsed) {
+      setCollapsedIds(ids => [...ids, id]);
+    } else {
+      setCollapsedIds(ids => ids.filter(i => i !== id));
+    }
+  };
+
+  return {
+    collapsedIds,
+    setCollapsed,
+  };
+};
+
+export default useCollapsed;

packages/component/src/ui/tree-view/hooks/useSelectWithKeyboard.ts

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react';
+
+import type { TreeViewProps } from '../types';
+import { flattenIds } from '../utils';
+export const useSelectWithKeyboard = <RenderProps>({
+  data,
+  enableKeyboardSelection,
+  onSelect,
+}: Pick<
+  TreeViewProps<RenderProps>,
+  'data' | 'enableKeyboardSelection' | 'onSelect'
+>) => {
+  const [selectedId, setSelectedId] = useState<string>();
+  // TODO: should record collapsedIds in localStorage
+
+  useEffect(() => {
+    if (!enableKeyboardSelection) {
+      return;
+    }
+
+    const flattenedIds = flattenIds<RenderProps>(data);
+
+    const handleDirectionKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') {
+        return;
+      }
+      if (selectedId === undefined) {
+        setSelectedId(flattenedIds[0]);
+        return;
+      }
+      let selectedIndex = flattenedIds.indexOf(selectedId);
+      if (e.key === 'ArrowDown') {
+        selectedIndex < flattenedIds.length - 1 && selectedIndex++;
+      }
+      if (e.key === 'ArrowUp') {
+        selectedIndex > 0 && selectedIndex--;
+      }
+
+      setSelectedId(flattenedIds[selectedIndex]);
+    };
+
+    const handleEnterKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== 'Enter') {
+        return;
+      }
+      selectedId && onSelect?.(selectedId);
+    };
+
+    document.addEventListener('keydown', handleDirectionKeyDown);
+    document.addEventListener('keydown', handleEnterKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleDirectionKeyDown);
+      document.removeEventListener('keydown', handleEnterKeyDown);
+    };
+  }, [data, enableKeyboardSelection, onSelect, selectedId]);
+
+  return {
+    selectedId,
+  };
+};
+
+export default useSelectWithKeyboard;

packages/component/src/ui/tree-view/styles.ts

@@ -16,28 +16,28 @@ export const StyledTreeNodeWrapper = styled('div')(() => {
   };
 });
 export const StyledTreeNodeContainer = styled('div')<{ isDragging?: boolean }>(
-  ({ isDragging = false, theme }) => {
+  ({ isDragging = false }) => {
     return {
       background: isDragging ? 'var(--affine-hover-color)' : '',
-      // opacity: isDragging ? 0.4 : 1,
     };
   }
 );
 
-export const StyledNodeLine = styled('div')<{ show: boolean; isTop?: boolean }>(
-  ({ show, isTop = false, theme }) => {
-    return {
-      position: 'absolute',
-      left: '0',
-      ...(isTop ? { top: '-1px' } : { bottom: '-1px' }),
-      width: '100%',
-      paddingTop: '2x',
-      borderTop: '2px solid',
-      borderColor: show ? 'var(--affine-primary-color)' : 'transparent',
-      boxShadow: show
-        ? `0px 0px 8px ${alpha(lightTheme.primaryColor, 0.35)}`
-        : 'none',
-      zIndex: 1,
-    };
-  }
-);
+export const StyledNodeLine = styled('div')<{
+  isOver: boolean;
+  isTop?: boolean;
+}>(({ isOver, isTop = false }) => {
+  return {
+    position: 'absolute',
+    left: '0',
+    ...(isTop ? { top: '-1px' } : { bottom: '-1px' }),
+    width: '100%',
+    paddingTop: '2x',
+    borderTop: '2px solid',
+    borderColor: isOver ? 'var(--affine-primary-color)' : 'transparent',
+    boxShadow: isOver
+      ? `0px 0px 8px ${alpha(lightTheme.primaryColor, 0.35)}`
+      : 'none',
+    zIndex: 1,
+  };
+});

packages/component/src/ui/tree-view/types.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, ReactNode, Ref } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 
 export type DropPosition = {
   topLine: boolean;
@@ -50,8 +50,7 @@ export type TreeNodeProps<RenderProps = unknown> = {
   setCollapsed: (id: string, collapsed: boolean) => void;
   allowDrop?: boolean;
   selectedId?: string;
-  isDragging?: boolean;
-  dragRef?: Ref<HTMLDivElement>;
+  draggingId?: string;
 } & CommonProps<RenderProps>;
 
 export type TreeNodeItemProps<RenderProps = unknown> = {
@@ -59,9 +58,6 @@ export type TreeNodeItemProps<RenderProps = unknown> = {
   setCollapsed: (id: string, collapsed: boolean) => void;
 
   isOver?: boolean;
-  canDrop?: boolean;
-
-  dropRef?: Ref<HTMLDivElement>;
 } & TreeNodeProps<RenderProps>;
 
 export type TreeViewProps<RenderProps = unknown> = {
@@ -73,4 +69,4 @@ export type TreeViewProps<RenderProps = unknown> = {
 export type NodeLIneProps<RenderProps = unknown> = {
   allowDrop: boolean;
   isTop?: boolean;
-} & Pick<TreeNodeProps<RenderProps>, 'node' | 'onDrop'>;
+} & Pick<TreeNodeProps<RenderProps>, 'node'>;

packages/component/src/ui/tree-view/utils.ts

@@ -1,4 +1,4 @@
-import type { Node } from '@affine/component';
+import type { Node } from './types';
 
 export function flattenIds<RenderProps>(arr: Node<RenderProps>[]): string[] {
   const result: string[] = [];
@@ -16,3 +16,21 @@ export function flattenIds<RenderProps>(arr: Node<RenderProps>[]): string[] {
   flatten(arr);
   return result;
 }
+
+export function findNode<RenderProps>(
+  id: string,
+  nodes: Node<RenderProps>[]
+): Node<RenderProps> | undefined {
+  for (let i = 0, len = nodes.length; i < len; i++) {
+    const node = nodes[i];
+    if (node.id === id) {
+      return node;
+    }
+    if (node.children) {
+      const result = findNode(id, node.children);
+      if (result) {
+        return result;
+      }
+    }
+  }
+}