From 9a0023508f644f7e3d1794ba1e12147fd456dedc Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Wed, 21 Jun 2023 11:41:35 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20feat(sortable-tree):=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E7=A6=81=E7=94=A8=E6=8B=96=E6=8B=BD=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/TreeItem/index.tsx             | 46 +++++++++++--------
 src/SortableTree/container/StoreUpdater.tsx   |  2 +
 src/SortableTree/demos/disableDrag.tsx        | 12 +++++
 src/SortableTree/index.md                     |  1 +
 src/SortableTree/store/initialState.ts        |  5 ++
 5 files changed, 48 insertions(+), 18 deletions(-)
 create mode 100644 src/SortableTree/demos/disableDrag.tsx

diff --git a/src/SortableTree/components/TreeItem/index.tsx b/src/SortableTree/components/TreeItem/index.tsx
index 4540118f..3fb8ef87 100644
--- 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
index 8e611909..54bbcbdc 100644
--- 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
new file mode 100644
index 00000000..283d09ed
--- /dev/null
+++ 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
index f4a0374b..1defe292 100644
--- 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
index 2d698458..d5182fa9 100644
--- 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,
 };