feat(Tree): support icon prop (#2132)

Co-authored-by: 皆虚 <jiarui.xjr@alibaba-inc.com>

Author: jerryyxu

docs/tree/demo/basic.md

@@ -15,7 +15,7 @@ the simplest usage: can be expanded, selectable, checkable, editable, can be rig
 ---
 
 ````jsx
-import { Tree, Button } from '@alifd/next';
+import { Tree, Button, Icon } from '@alifd/next';
 
 const TreeNode = Tree.Node;
 
@@ -45,13 +45,13 @@ class Demo extends React.Component {
                 onCheck={this.onCheck}
                 onEditFinish={this.onEditFinish}
                 onRightClick={this.onRightClick}>
-                <TreeNode key="1" label="Component">
-                    <TreeNode key="2" label="Form" selectable={false}>
-                        <TreeNode key="4" label="Input" />
-                        <TreeNode key="5" label="Select" disabled />
+                <TreeNode key="1" label="Component" icon={<Icon type="smile"/>}>
+                    <TreeNode key="2" label="Form" selectable={false} icon="smile">
+                        <TreeNode key="4" label="Input" icon="smile"/>
+                        <TreeNode key="5" label="Select" disabled  icon="cry"/>
                     </TreeNode>
-                    <TreeNode key="3" label="Display">
-                        <TreeNode key="6" label="Table" />
+                    <TreeNode key="3" label="Display" icon="smile">
+                        <TreeNode key="6" label="Table" icon="smile"/>
                     </TreeNode>
                 </TreeNode>
             </Tree>

docs/tree/index.en-us.md

@@ -70,6 +70,7 @@ Folders, organizational structures, taxonomy, countries, regions, etc. Most of t
 | disabled         | whether node is disabled                        | Boolean   | false |
 | checkboxDisabled | whether checkbox of node is disabled                      | Boolean   | false |
 | isLeaf           | whether it is a leaf node and only works when loadData is set           | Boolean   | false |
+| icon     | custom icon, it can be type of Icon or such as `<Icon type="icon type" />` | String/ReactNode | -   |
 
 <!-- api-extra-start -->
 

docs/tree/index.md

@@ -71,6 +71,7 @@
 | disabled         | 是否禁止节点响应                        | Boolean   | false |
 | checkboxDisabled | 是否禁止勾选节点复选框                     | Boolean   | false |
 | isLeaf           | 是否是叶子节点，设置loadData时生效           | Boolean   | -     |
+| icon     | 自定义图标，可以使用 Icon 的 type，也可以使用组件 `<Icon type="icon type" />` | String/ReactNode | -   |
 
 <!-- api-extra-start -->
 

src/tree/main.scss

@@ -33,6 +33,15 @@
         padding: 0 $tree-node-title-padding;
         border-radius: $tree-node-title-border-radius;
         font-size: $tree-node-title-font-size;
+
+        .#{$css-prefix}icon {
+            font-size: calc(#{$tree-node-title-font-size} + 2px);
+            &::before {
+                font-size: $tree-node-title-font-size;
+                width: $tree-node-title-font-size;
+                margin-right: .5em;
+            }
+        }
     }
 
     &-node-input.#{$css-prefix}input {

src/tree/scss/variable.scss

@@ -152,7 +152,6 @@ $tree-child-indent-right: calc(#{$tree-child-indent} - #{$tree-line-width} - (#{
 $tree-child-right-angle-left: calc(0px - (#{$tree-child-indent} - (#{$tree-switch-size} - #{$tree-line-width}) / 2 + #{$tree-switch-border-width}));
 $tree-child-right-angle-width: calc(#{$tree-child-indent} - (#{$tree-switch-size} - #{$tree-line-width}) / 2);
 
-
 $tree-line: $tree-line-width $tree-line-style $tree-line-color;
 
 

src/tree/view/tree-node.jsx

@@ -78,6 +78,10 @@ class TreeNode extends Component {
         posinset: PropTypes.number,
         // 是否是最后一个子节点，数组类型，包含对祖先节点的判断
         isLastChild: PropTypes.arrayOf(PropTypes.bool),
+        /**
+         * 自定义图标，可以使用 Icon 的 type，也可以使用组件 `<Icon type="icon type" />`
+         */
+        icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     };
 
     static defaultProps = {
@@ -374,7 +378,7 @@ class TreeNode extends Component {
     }
 
     renderLabel() {
-        const { prefix, root, disabled } = this.props;
+        const { prefix, root, disabled, icon } = this.props;
         const { isNodeBlock } = root.props;
         const { label } = this.state;
         const selectable = typeof this.props.selectable !== 'undefined' ? this.props.selectable : root.props.selectable;
@@ -389,9 +393,14 @@ class TreeNode extends Component {
             this.addCallbacks(labelProps);
         }
 
+        const iconEl = typeof icon === 'string' ? <Icon type={icon} /> : icon;
+
         return (
             <div className={`${prefix}tree-node-label-wrapper`} ref={this.saveLabelWrapperRef}>
-                <div {...labelProps}>{label}</div>
+                <div {...labelProps}>
+                    {iconEl}
+                    {label}
+                </div>
             </div>
         );
     }

test/tree/index-spec.js

@@ -6,6 +6,7 @@ import ReactTestUtils from 'react-dom/test-utils';
 import { dom, KEYCODE } from '../../src/util';
 import Tree from '../../src/tree/index';
 import Button from '../../src/button/index';
+import Icon from '../../src/icon/index';
 import '../../src/tree/style.js';
 
 /* eslint-disable react/jsx-filename-extension, react/no-multi-comp */
@@ -794,6 +795,15 @@ describe('Tree', () => {
         assert(hasClass(document.querySelector('.next-tree'), 'next-show-line'));
     });
 
+    it('should support icon', () => {
+        dataSource[0].icon = 'cry';
+        dataSource[0].children[0].icon = <Icon type="smile" />;
+
+        ReactDOM.render(<Tree defaultExpandAll dataSource={dataSource} />, mountNode);
+
+        assert(document.querySelectorAll('.next-tree-node-label .next-icon').length === 2);
+    });
+
     it('should support isLabelBlock and isNodeBlock', () => {
         ReactDOM.render(<Tree isLabelBlock isNodeBlock dataSource={dataSource} />, mountNode);
         assert(hasClass(document.querySelector('.next-tree'), 'next-node-block'));