fix(Tree): add disabled state check for draggable nodes (#3690)

* fix(Tree): add `disabled` state check for `draggable` nodes

* fix(Tree): ensure draggable class is only applied to non-disabled nodes

Author: RylanBot

src/tree/_example/draggable.vue

@@ -7,6 +7,7 @@
       transition
       expand-all
       draggable
+      check-strictly
       :allow-drop="handleAllowDrop"
       @drag-start="handleDragStart"
       @drag-end="handleDragEnd"
@@ -51,6 +52,7 @@ export default {
                     {
                       value: '1.1.2.1',
                       label: '1.1.2.1',
+                      disabled: true,
                     },
                     {
                       value: '1.1.2.2',
@@ -72,7 +74,7 @@ export default {
             },
             {
               value: '2.2',
-              label: '2.2 不允许拖放为 2.2 的子节点',
+              label: '2.2 （不允许其它节点拖放为其子节点）',
             },
           ],
         },

src/tree/hooks/useTreeItem.tsx

@@ -65,7 +65,7 @@ export default function useTreeItem(state: TypeTreeItemState) {
       [`${classPrefix}-is-disabled`]: node.isDisabled(),
     });
     list.push({
-      [`${componentName}__item--draggable`]: node.isDraggable(),
+      [`${componentName}__item--draggable`]: !node.isDisabled() && node.isDraggable(),
     });
     if (node.visible) {
       list.push(`${componentName}__item--visible`);
@@ -132,7 +132,7 @@ export default function useTreeItem(state: TypeTreeItemState) {
         data-level={level}
         style={styles}
         onClick={(evt: MouseEvent) => handleClick(evt)}
-        draggable={node.isDraggable()}
+        draggable={!node.isDisabled() && node.isDraggable()}
         onDragstart={(evt: DragEvent) => handleDragStart(evt)}
         onDragend={(evt: DragEvent) => handleDragEnd(evt)}
         onDragover={(evt: DragEvent) => handleDragOver(evt)}

test/snap/__snapshots__/csr.test.js.snap

@@ -125428,10 +125428,10 @@ exports[`csr snapshot test > csr test ./src/tree/_example/draggable.vue 1`] = `
           </span>
         </div>
         <div
-          class="t-tree__item t-tree__item--open t-tree__item--draggable t-tree__item--visible"
+          class="t-tree__item t-tree__item--open t-is-disabled t-tree__item--visible"
           data-level="3"
           data-value="1.1.2.1"
-          draggable="true"
+          draggable="false"
           style="--level: 3;"
         >
           <span
@@ -125546,12 +125546,12 @@ exports[`csr snapshot test > csr test ./src/tree/_example/draggable.vue 1`] = `
           />
           <span
             class="t-tree__label"
-            title="2.2 不允许拖放为 2.2 的子节点"
+            title="2.2 （不允许其它节点拖放为其子节点）"
           >
             <span
               style="position: relative;"
             >
-              2.2 不允许拖放为 2.2 的子节点
+              2.2 （不允许其它节点拖放为其子节点）
             </span>
           </span>
         </div>