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

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

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;