🐛 fix duplicated icons when Tree showLine is true (#20102)

close #20090

components/tree/Tree.tsx

@@ -188,7 +188,7 @@ export default class Tree extends React.Component<TreeProps, any> {
   renderSwitcherIcon = (
     prefixCls: string,
     switcherIcon: React.ReactElement<any> | undefined,
-    { isLeaf, expanded, loading }: AntTreeNodeProps,
+    { isLeaf, expanded, loading, icon }: AntTreeNodeProps,
   ) => {
     const { showLine } = this.props;
     if (loading) {
@@ -196,19 +196,18 @@ export default class Tree extends React.Component<TreeProps, any> {
     }
     if (isLeaf) {
       if (showLine) {
-        return <Icon type="file" className={`${prefixCls}-switcher-line-icon`} />;
+        return icon || <Icon type="file" className={`${prefixCls}-switcher-line-icon`} />;
       }
       return null;
     }
     const switcherCls = `${prefixCls}-switcher-icon`;
     if (switcherIcon) {
-      const switcherOriginCls = switcherIcon.props.className || '';
       return React.cloneElement(switcherIcon, {
-        className: classNames(switcherOriginCls, switcherCls),
+        className: classNames(switcherIcon.props.className || '', switcherCls),
       });
     }
     if (showLine) {
-      return (
+      return icon || (
         <Icon
           type={expanded ? 'minus-square' : 'plus-square'}
           className={`${prefixCls}-switcher-line-icon`}
@@ -229,6 +228,7 @@ export default class Tree extends React.Component<TreeProps, any> {
       prefixCls: customizePrefixCls,
       className,
       showIcon,
+      showLine,
       switcherIcon,
       blockNode,
       children,
@@ -239,6 +239,9 @@ export default class Tree extends React.Component<TreeProps, any> {
       <RcTree
         ref={this.setTreeRef}
         {...props}
+        // Hide icon in node when showLine is true, show icon in line always
+        // https://github.com/ant-design/ant-design/issues/20090
+        showIcon={showLine ? false : showIcon}
         prefixCls={prefixCls}
         className={classNames(className, {
           [`${prefixCls}-icon-hide`]: !showIcon,

components/tree/__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tree icon of TreeNode should put inside line when showLine is true 1`] = `
+<ul
+  class="ant-tree ant-tree-icon-hide ant-tree-show-line"
+  role="tree"
+  unselectable="on"
+>
+  <li
+    class="ant-tree-treenode-switcher-close"
+    role="treeitem"
+  >
+    <span
+      class="ant-tree-switcher ant-tree-switcher_close"
+    >
+      icon
+    </span>
+    <span
+      class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close"
+      title="---"
+    >
+      <span
+        class="ant-tree-title"
+      >
+        ---
+      </span>
+    </span>
+  </li>
+</ul>
+`;

components/tree/__tests__/index.test.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Tree from '../index';
+
+const { TreeNode } = Tree;
+
+describe('Tree', () => {
+  it('icon of TreeNode should put inside line when showLine is true', () => {
+    const wrapper = mount(
+      <Tree showLine>
+        <TreeNode icon="icon" key="0-0">
+          <TreeNode icon="icon" key="0-0-0" />
+          <TreeNode key="0-0-1" />
+        </TreeNode>
+      </Tree>,
+    );
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+});

components/tree/demo/line.md

@@ -2,19 +2,19 @@
 order: 5
 title:
   zh-CN: 连接线
-  en-US: Tree With Line
+  en-US: Tree with line
 ---
 
 ## zh-CN
 
-带连接线的树。
+节点之间带连接线的树，常用于文件目录结构展示。
 
 ## en-US
 
-Tree With Line
+Tree with connected line between nodes.
 
 ```jsx
-import { Tree } from 'antd';
+import { Tree, Icon } from 'antd';
 
 const { TreeNode } = Tree;
 
@@ -37,7 +37,7 @@ class Demo extends React.Component {
           </TreeNode>
           <TreeNode title="parent 1-2" key="0-0-2">
             <TreeNode title="leaf" key="0-0-2-0" />
-            <TreeNode title="leaf" key="0-0-2-1" />
+            <TreeNode icon={<Icon type="form" />} title="leaf" key="0-0-2-1" />
           </TreeNode>
         </TreeNode>
       </Tree>