✨[Tree]支持动态加载

Author: liyuan-meng

src/components/tree/demos/basicSelector.md

@@ -253,7 +253,6 @@ class TreeDemo extends React.Component {
 				supportMenu={this.state.supportMenu}
 				supportSearch={this.state.supportSearch}
 				isAddFront={this.state.isAddFront}
-                supportCheckbox={true}
 				onAddNode={this.addNode}
 				onDoubleClick={this.onDoubleClick}
 				onRenameNode={this.renameNode}

src/components/tree/demos/dynamicLoad.md

@@ -0,0 +1,112 @@
+---
+order: 1
+title: 基础用法
+desc: 支持搜索节点、右键菜单、最大层级为4、节点名称最大长度20、可搜索关键字长度最大为20个字符、新增节点加到当前节点的子节点末尾，展开全部节点
+---
+
+```jsx
+
+/**
+ * title: 基础用法
+ * desc: 支持搜索节点、右键菜单、最大层级为4、节点名称最大长度20、可搜索关键字长度最大为20个字符、新增节点加到当前节点的子节点末尾，展开全部节点
+ */
+import React from 'react';
+import { Tree, Modal } from 'cloud-react';
+
+const treeData = [
+  {
+    id: 1,
+    name: '所有基础',
+    pId: null,
+    disableRemove: true,
+    disableRename: true,
+    children: [
+      {
+        id: 11,
+        name: '禁止删除节点',
+        pId: 1,
+        disableRemove: true,
+        children: [],
+      },
+      {
+        id: 12,
+        name: '禁止新增节点',
+        pId: 1,
+        disableAdd: true,
+        children: [],
+      },
+      {
+        id: 13,
+        name: '禁止重命名节点',
+        pId: 1,
+        disableRename: true,
+        children: [],
+      },
+      {
+        id: 14,
+        name: '未分类',
+        pId: 1,
+        disableRemove: true,
+        disableAdd: true,
+        disableRename: true,
+        isLeaf: true,
+      }
+    ]
+  }
+];
+
+class TreeDemo extends React.Component {
+	constructor(props) {
+		super(props);
+        this.state = { selectedValue: [] };
+	}
+
+  selectedNode = (node, nodeList) => {
+    console.log(node, nodeList);
+    this.setState({ selectedValue: nodeList });
+  }
+
+	render() {
+		return (
+			<Tree
+              selectedValue={this.state.selectedValue}
+              onSelectedNode={this.selectedNode}
+              isDynamicLoad
+              supportCheckbox
+              supportSearch
+              treeData={treeData} 
+              searchPlaceholder="动态加载节点"
+              onLoadData={(data, node) => {
+                return new Promise(resolve => {
+                  setTimeout(() => {
+                    node.children = [
+                      {
+                        id: `${node.id}1`,
+                        name: '动态加载一个',
+                        // title: <span style={{ color: 'red' }}>动态加载一个</span>,
+                        pId: node.id,
+                        level: node.level + 1,
+                        children: [],
+                        checked: node.checked,
+                      },
+                      {
+                        id: `${node.id}2`,
+                        name: '动态加载叶子节点',
+                        pId: node.id,
+                        isLeaf: true, // 无叶子节点需设置该属性
+                        level: node.level + 1,
+                        children: [],
+                        checked: node.checked, // 父节点选中，子节点也选中
+                      }
+                    ];
+                    resolve(data)
+                  }, 2 * 1000);
+                })
+              }}
+            />
+		);
+	}
+}
+
+export default TreeDemo;
+```

src/components/tree/index.js

@@ -73,6 +73,8 @@ class Tree extends Component {
     onDragMoving: noop,
     onDragBefore: noop,
     onDragAfter: noop,
+    customNodeTpl: noop,
+    onLoadData: noop,
   };
 
   static propsTypes = {
@@ -109,6 +111,8 @@ class Tree extends Component {
     onDragMoving: PropTypes.func,
     onDragBefore: PropTypes.func,
     onDragAfter: PropTypes.func,
+    customNodeTpl: PropTypes.func,
+    onLoadData: PropTypes.func,
   };
 
   constructor(props) {
@@ -245,7 +249,7 @@ class Tree extends Component {
           treeData: [...backTree],
           maxLevel: null,
           selectedValue: [...allSelectedLowest],
-          isUnfold,
+          isUnfold: searchText ? true : undefined,
           disabled,
         }),
         preSelectedList: allSelectedLowest,
@@ -344,10 +348,41 @@ class Tree extends Component {
    * @param node
    */
   onFoldNodeAction = (data, node) => {
-    const backData = store.onFoldNode(data, node);
-    this.setState({
-      treeData: [...backData],
-    });
+    if (this.props.isDynamicLoad && !node?.children?.length) {
+      node.isLoading = true;
+      this.setState({
+        treeData: [...this.state.treeData],
+      }, () => {
+        this.props.onLoadData(data, node).then(res => {
+          node.isLoading = false
+          const backData = store.onFoldNode(res, node);
+
+          // 如果点击的节点被选中，则其子节点也被选中，更新选中节点状态
+          if (this.props.supportCheckbox && node.checked) {
+            const selectedResult = store.getSelectedLowestNodeList(
+              this.state.selectedValue,
+              this.getSelectedMoreList(backData, node),
+              node,
+            ).filter(item => item.id !== node.id);
+            this.props.onSelectedNode(node, selectedResult);
+          }
+
+          // 更新 allTreeData（用作筛选）
+          const currentNode = store.findNodeById(this.state.allTreeData, node.id);
+          Object.assign(currentNode, node);
+
+          this.setState({
+            allTreeData: this.state.allTreeData,
+            treeData: [...backData],
+          });
+        })
+      });
+    } else {
+      const backData = store.onFoldNode(data, node);
+      this.setState({
+        treeData: [...backData],
+      });
+    }
   };
 
   /**
@@ -679,6 +714,7 @@ class Tree extends Component {
       onDragMoving,
       onDragAfter,
       customNodeTpl,
+      isDynamicLoad,
     } = this.props;
 
     const {
@@ -732,6 +768,7 @@ class Tree extends Component {
           customNodeTpl,
           removeNode,
           addNode,
+          isDynamicLoad,
         }}
       >
         <div className={`${selector} ${className}`} style={style}>

src/components/tree/index.less

@@ -134,6 +134,33 @@
           }
         }
 
+        &.support-checkbox {
+          .loading-spin {
+            top: 0;
+          }
+        }
+
+        .loading-spin {
+          position: relative;
+          top: 3px;
+          display: inline-block;
+          width: 12px;
+          height: 12px;
+          margin: 0 9px;
+          border-radius: 50%;
+          animation: load 1.5s infinite linear;
+          border: 1px solid @blue-4;
+          border-right: 1px solid transparent;
+          @keyframes load {
+            from {
+              transform: rotate(0deg);
+            }
+            to {
+              transform: rotate(360deg);
+            }
+          }
+        }
+
         .toggle-icon {
           cursor: pointer;
           font-size: 16px;

src/components/tree/index.md

@@ -52,6 +52,8 @@ group:
 | onDragAfter              | 拖拽后调用	        | Function	| -	|
 | supportTooltip           | 是否启用tooltip，为true时将根据文本长度自动增加tooltip。如数据超大，建议设置为false以节省性能 | Boolean	| true	|
 | customNodeTpl           | 自定义节点内容 | Function	| -	|
+| onLoadData           | 动态加载数据 | Function	| -	|
+| isDynamicLoad           | 动态加载数据 | bool	| false	|
 
 ### 数据属性
 
@@ -183,3 +185,6 @@ group:
 
 ### 自定义节点
 <embed src="@components/tree/demos/custom-node.md" /> 
+
+### 动态加载节点
+<embed src="@components/tree/demos/dynamicLoad.md" /> 

src/components/tree/node.js

@@ -172,6 +172,7 @@ class Node extends Component {
       removeNode,
       addNode,
       customNodeTpl,
+      isDynamicLoad,
     } = this.context;
     const { setInputValue, onSaveClick, onClickCancel } = this;
     // 将三个方法传递出去可以供外部调用
@@ -184,7 +185,7 @@ class Node extends Component {
         <div
           className={classNames(
             `${prefixCls}-list-node-area ${
-              data.children && !data.children.length ? 'child-style' : null
+              (data.children && !data.children.length && (isDynamicLoad && data.isLeaf || !isDynamicLoad)) ? 'child-style' : null
             }`,
           )}
         >
@@ -204,8 +205,9 @@ class Node extends Component {
 
             {/* 折叠展开icon */}
             <ToggleFold
-              hasChildren={data?.children.length > 0}
-              showChildrenItem={data.isUnfold}
+              isLoading={data.isLoading}
+              hasChildren={data?.children.length > 0 || isDynamicLoad && !data.isLeaf}
+              showChildrenItem={data.isUnfold && data?.children.length}
               toggle={(e) => this.toggle(e, data)}
             />
             <div
@@ -288,19 +290,23 @@ class Node extends Component {
  * @returns {null|*}
  * @constructor
  */
-function ToggleFold({ hasChildren, showChildrenItem, toggle }) {
+function ToggleFold({ hasChildren, showChildrenItem, toggle, isLoading }) {
   return (
-    hasChildren && (
-      <Icon
-        className="toggle-icon"
-        // type={!showChildrenItem ? 'down' : 'up'}
-        type="down-solid"
-        style={{
-          transform: showChildrenItem ? 'rotate(0)' : 'rotate(-90deg)',
-        }}
-        onClick={toggle}
-      />
-    )
+    <>
+      {isLoading && <span className="loading-spin" />}
+      {hasChildren && (
+        <Icon
+          className="toggle-icon"
+          type="down-solid"
+          style={{
+            zIndex: isLoading ? -100 : undefined,
+            position: isLoading ? 'absolute' : undefined,
+            transform: showChildrenItem ? 'rotate(0)' : 'rotate(-90deg)',
+          }}
+          onClick={toggle}
+        />
+      )}
+    </>
   );
 }