✨ feat(sortable-tree): 支持禁用拖拽功能

ant-design · Jun 21, 2023 · 9a00235 · 9a00235
1 parent 6934467
commit 9a00235
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 18 deletions.
diff --git a/src/SortableTree/components/TreeItem/index.tsx b/src/SortableTree/components/TreeItem/index.tsx
@@ -138,18 +138,26 @@ const TreeItem: FC<TreeItemProps> = memo(
     const prefix = `${prefixCls}-node`;
     const { styles, cx } = useStyles({ prefix, collapsed });
 
-    const [indentationWidth, selected, Content, Extra, withKeyboardSelectNode, deselectedNode] =
-      useStore(
-        (s) => [
-          s.indentationWidth,
-          s.selectedIds.includes(id),
-          s.renderContent,
-          s.renderExtra,
-          s.withKeyboardSelectNode,
-          s.deselectedAll,
-        ],
-        shallow,
-      );
+    const [
+      indentationWidth,
+      selected,
+      Content,
+      Extra,
+      withKeyboardSelectNode,
+      deselectedNode,
+      disableDrag,
+    ] = useStore(
+      (s) => [
+        s.indentationWidth,
+        s.selectedIds.includes(id),
+        s.renderContent,
+        s.renderExtra,
+        s.withKeyboardSelectNode,
+        s.deselectedAll,
+        s.disableDrag,
+      ],
+      shallow,
+    );
 
     const extraPanelVisible = showExtra && !clone;
 
@@ -199,12 +207,14 @@ const TreeItem: FC<TreeItemProps> = memo(
           {...props}
         >
           <div className={`${prefix}-body`} ref={setDraggableNodeRef} style={style}>
-            <HandleAction
-              {...listeners}
-              {...attributes}
-              className={cx(`${prefix}-handle`, clone ? undefined : styles.handle)}
-              style={{ width: 12 }}
-            />
+            {disableDrag ? null : (
+              <HandleAction
+                {...listeners}
+                {...attributes}
+                className={cx(`${prefix}-handle`, clone ? undefined : styles.handle)}
+                style={{ width: 12 }}
+              />
+            )}
             {onCollapse && (
               <CollapseAction
                 onClick={(e) => {

diff --git a/src/SortableTree/container/StoreUpdater.tsx b/src/SortableTree/container/StoreUpdater.tsx
@@ -51,6 +51,7 @@ const StoreUpdater = ({
   hideRemove,
   hideAdd,
   indentationWidth,
+  disableDrag,
 }: StoreUpdaterProps) => {
   const storeApi = useStoreApi();
 
@@ -65,6 +66,7 @@ const StoreUpdater = ({
   useStoreUpdater('indentationWidth', indentationWidth);
   useStoreUpdater('hideAdd', hideAdd);
   useStoreUpdater('hideRemove', hideRemove);
+  useStoreUpdater('disableDrag', disableDrag);
 
   useStoreUpdater('onSelectedIdsChange', onSelectedIdsChange);
 

diff --git a/src/SortableTree/demos/disableDrag.tsx b/src/SortableTree/demos/disableDrag.tsx
@@ -0,0 +1,12 @@
+/**
+ * title: 禁用拖拽
+ */
+import { SortableTree } from '@ant-design/pro-editor';
+
+import { initialData } from './data';
+
+export default () => (
+  <div style={{ width: 340 }}>
+    <SortableTree defaultTreeData={initialData} disableDrag />
+  </div>
+);
diff --git a/src/SortableTree/index.md b/src/SortableTree/index.md
@@ -27,6 +27,7 @@ atomId: SortableTree
 ### 使用 renderContent 自定义渲染
 
 <code src="./demos/renderContent.tsx" ></code>
+<code src="./demos/disableDrag.tsx" ></code>
 
 [//]: # '### 多选方案'
 [//]: #

diff --git a/src/SortableTree/store/initialState.ts b/src/SortableTree/store/initialState.ts
@@ -15,6 +15,10 @@ export interface ControlledState {
    * 隐藏默认的删除按钮
    */
   hideRemove?: boolean;
+  /**
+   * 禁用拖拽
+   */
+  disableDrag?: boolean;
   /**
    * 缩进宽度
    */
@@ -96,6 +100,7 @@ export const initialState: State = {
   renderContent: undefined,
   renderExtra: undefined,
   hideAdd: false,
+  disableDrag: false,
   hideRemove: false,
   ...initialDragState,
 };