feat(Tree): support virtual scroll (#1746)

Co-authored-by: jerryyxu <jerryyxu@IT-C02ZQ0R7LVDL.local>

docs/tree/demo/basic.md

@@ -15,7 +15,7 @@ the simplest usage: can be expanded, selectable, checkable, editable, can be rig
 ---
 
 ````jsx
-import { Tree } from '@alifd/next';
+import { Tree, Button } from '@alifd/next';
 
 const TreeNode = Tree.Node;
 

docs/tree/demo/control-select.md

@@ -80,7 +80,7 @@ class Demo extends React.Component {
         return (
             <div className="control-select-demo">
                 <label className="multiple-check">
-                    <Checkbox value={multiple} onChange={this.handleCheck} />
+                    <Checkbox checked={multiple} onChange={this.handleCheck} />
                     <span className="multiple-text">Enable multiple</span>
                 </label>
                 <Tree defaultExpandAll multiple={multiple} selectedKeys={selectedKeys} onSelect={this.handleSelect} dataSource={data} />

docs/tree/demo/render-child-nodes.md

@@ -48,7 +48,7 @@ class Demo extends React.Component {
 
     render() {
         return (<Tree checkable renderChildNodes={(nodes) => {
-            if (nodes.filter((node) => !node.props.children || node.props.children.length === 0).length !== nodes.length) {
+            if (nodes.find(node => node.props.children && node.props.children.length)) {
                 <ul role="group" className={`next-tree-child-tree`}>
                     {nodes}
                 </ul>;

docs/tree/demo/virtual-tree.md

@@ -0,0 +1,99 @@
+# 虚拟滚动
+
+- order: 10
+
+当树的节点数比较多的时候，设置虚拟滚动提高性能，注意设置高度，且允许滚动。
+
+:::lang=en-us
+# Virtual Tree
+
+- order: 10
+
+Setting useVirtual property to improve performance when there are many nodes in the tree,pay attention to set height and allow to scroll.
+
+:::
+
+---
+
+````jsx
+import { Tree } from '@alifd/next';
+
+function createDataSource(level=3, count=5) {
+    const dataSource = [];
+    let num = 0;
+
+    const drill = (children, _level, _count) => {
+        children.forEach((child, i) => {
+            child.children = new Array(_count).fill(null).map((item, k) => {
+                const key = `${child.key}-${k}`;
+                num++;
+                return {
+                    key,
+                    label: key,
+                };
+            });
+            _level > 0 && drill(child.children, _level - 1, count);
+        });
+    };
+
+    dataSource.push({
+        label: '0-0',
+        key: '0-0',
+    });
+    drill(dataSource, level, count);
+    console.log('node num:', num + 1);
+    return dataSource;
+}
+
+class Demo extends React.Component {
+    constructor() {
+        super();
+
+        this.state = {
+            dataSource: [],
+        };
+    }
+
+    onSelect(keys, info) {
+        console.log('onSelect', keys, info);
+    }
+
+    onCheck(keys, info) {
+        console.log('onCheck', keys, info);
+    }
+
+    onEditFinish(key, label, node) {
+        console.log('onEditFinish', key, label, node);
+    }
+
+    onRightClick(info) {
+        console.log('onRightClick', info);
+    }
+
+    componentDidMount() {
+        this.setState({
+            dataSource: createDataSource(),
+        });
+    }
+
+    render() {
+        const dataSource = this.state.dataSource;
+
+        return (
+            dataSource.length && <Tree checkable editable focusable showLine
+                useVirtual
+                animation
+                style={{ maxHeight: '480px', overflow: 'auto' }}
+                defaultExpandAll
+                defaultCheckedKeys={['0-0-1', '0-0-2']}
+                onSelect={this.onSelect}
+                onCheck={this.onCheck}
+                dataSource={dataSource}
+                onEditFinish={this.onEditFinish}
+                onRightClick={this.onRightClick} />
+        );
+    }
+}
+
+ReactDOM.render(<Demo />, mountNode);
+````

src/tree/main.scss

@@ -39,6 +39,22 @@
         margin: 0 $tree-node-title-margin;
     }
 
+    &-node-indent-unit {
+        display: inline-block;
+        width: $tree-child-indent;
+        vertical-align: middle;
+        position: relative;
+
+        &.#{$css-prefix}line::before {
+            content: '';
+            position: absolute;
+            display: inline-block;
+            border-left: $tree-line;
+            height: $tree-node-padding + $line-2 * 2 + $tree-node-title-height;
+            left: ($tree-switch-size - $tree-line-width) / 2;
+        }
+    }
+
     &-switcher {
         position: relative;
         display: inline-block;
@@ -191,7 +207,6 @@
         }
     }
 
-
     &.#{$css-prefix}node-indent {
         #{$tree-prefix}-node #{$tree-prefix}-node {
             margin-left: $tree-child-indent;

src/tree/view/tree-node-indent.jsx

@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+export default class TreeNodeIndent extends Component {
+    static propTypes = {
+        prefix: PropTypes.string,
+        level: PropTypes.number,
+        isLastChild: PropTypes.arrayOf(PropTypes.bool),
+        showLine: PropTypes.bool,
+    };
+
+    static defaultProps = {
+        isLastChild: [],
+    };
+
+    render() {
+        const { prefix, level, isLastChild, showLine } = this.props;
+        const indents = [];
+
+        for (let i = 1; i < level; i++) {
+            const classNames = cx(`${prefix}tree-node-indent-unit`, {
+                [`${prefix}line`]: !isLastChild[i - 1] && showLine,
+            });
+
+            indents.push(<span className={classNames} key={i - 1} />);
+        }
+
+        return indents;
+    }
+}