feat(draggable): Support dynamic rendering draggable handler icon

src/Tree.tsx

@@ -76,7 +76,7 @@ export type AllowDrop<TreeDataType extends BasicDataNode = DataNode> = (
 
 export type DraggableFn = (node: DataNode) => boolean;
 export type DraggableConfig = {
-  icon?: React.ReactNode | false;
+  icon?: ((node: DataNode) => React.ReactNode) | React.ReactNode | false;
   nodeDraggable?: DraggableFn;
 };
 

src/TreeNode.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 // @ts-ignore
 import { TreeContext, TreeContextProps } from './contextTypes';
 import Indent from './Indent';
-import { TreeNodeProps } from './interface';
+import { DataNode, TreeNodeProps } from './interface';
 import getEntity from './utils/keyUtil';
 import { convertNodePropsToEventData } from './utils/treeUtil';
 
@@ -293,13 +293,15 @@ class InternalTreeNode extends React.Component<InternalTreeNodeProps, TreeNodeSt
   };
 
   // ==================== Render: Drag Handler ====================
-  renderDragHandler = () => {
+  renderDragHandler = (data: DataNode) => {
     const {
       context: { draggable, prefixCls },
     } = this.props;
 
     return draggable?.icon ? (
-      <span className={`${prefixCls}-draggable-icon`}>{draggable.icon}</span>
+      <span className={`${prefixCls}-draggable-icon`}>
+        {typeof draggable.icon === 'function' ? draggable.icon(data) : draggable.icon}
+      </span>
     ) : null;
   };
 
@@ -579,13 +581,8 @@ class InternalTreeNode extends React.Component<InternalTreeNodeProps, TreeNodeSt
         {...ariaSelected}
         {...dataOrAriaAttributeProps}
       >
-        <Indent
-          prefixCls={prefixCls}
-          level={level}
-          isStart={isStart}
-          isEnd={isEnd}
-        />
-        {this.renderDragHandler()}
+        <Indent prefixCls={prefixCls} level={level} isStart={isStart} isEnd={isEnd} />
+        {this.renderDragHandler(data)}
         {this.renderSwitcher()}
         {this.renderCheckbox()}
         {this.renderSelector()}

tests/TreeDraggable.spec.tsx

@@ -1086,6 +1086,35 @@ describe('Tree Draggable', () => {
     expect(container.querySelectorAll('.handler')).toHaveLength(2);
   });
 
+  it('render handler icon render function', () => {
+    const { container } = render(
+      <Tree
+        draggable={{
+          icon: node => !node?.children && <span className="handler" />,
+        }}
+        defaultExpandAll
+        treeData={[
+          {
+            title: 'Parent',
+            key: 'parent',
+            children: [
+              {
+                title: 'Child',
+                key: 'child',
+              },
+              {
+                title: 'Child1',
+                key: 'child1',
+              },
+            ],
+          },
+        ]}
+      />,
+    );
+
+    expect(container.querySelectorAll('.handler')).toHaveLength(2);
+  });
+
   it('not break with fieldNames', () => {
     const onDrop = jest.fn();