🐛 Fix Tree showLine and showIcon missing icon

close #20192

components/tree/Tree.tsx

@@ -188,34 +188,30 @@ export default class Tree extends React.Component<TreeProps, any> {
   renderSwitcherIcon = (
     prefixCls: string,
     switcherIcon: React.ReactElement<any> | undefined,
-    { isLeaf, expanded, loading, icon }: AntTreeNodeProps,
+    { isLeaf, expanded, loading }: AntTreeNodeProps,
   ) => {
     const { showLine } = this.props;
     if (loading) {
       return <Icon type="loading" className={`${prefixCls}-switcher-loading-icon`} />;
     }
-    if (isLeaf) {
-      if (showLine) {
-        return icon || <Icon type="file" className={`${prefixCls}-switcher-line-icon`} />;
-      }
-      return null;
-    }
     const switcherCls = `${prefixCls}-switcher-icon`;
     if (switcherIcon) {
       return React.cloneElement(switcherIcon, {
         className: classNames(switcherIcon.props.className || '', switcherCls),
       });
     }
-    if (showLine) {
-      return icon || (
-        <Icon
-          type={expanded ? 'minus-square' : 'plus-square'}
-          className={`${prefixCls}-switcher-line-icon`}
-          theme="outlined"
-        />
-      );
+    if (isLeaf) {
+      return showLine ? <Icon type="file" className={`${prefixCls}-switcher-line-icon`} /> : null;
     }
-    return <Icon type="caret-down" className={switcherCls} theme="filled" />;
+    return showLine ? (
+      <Icon
+        type={expanded ? 'minus-square' : 'plus-square'}
+        className={`${prefixCls}-switcher-line-icon`}
+        theme="outlined"
+      />
+    ) : (
+      <Icon type="caret-down" className={switcherCls} theme="filled" />
+    );
   };
 
   setTreeRef = (node: any) => {
@@ -228,7 +224,6 @@ export default class Tree extends React.Component<TreeProps, any> {
       prefixCls: customizePrefixCls,
       className,
       showIcon,
-      showLine,
       switcherIcon,
       blockNode,
       children,
@@ -239,9 +234,6 @@ 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__/demo.test.js.snap

@@ -725,7 +725,27 @@ exports[`renders ./components/tree/demo/customized-icon.md correctly 1`] = `
       >
         <span
           class="ant-tree-switcher ant-tree-switcher-noop"
-        />
+        >
+          <i
+            aria-label="icon: down"
+            class="anticon anticon-down ant-tree-switcher-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </i>
+        </span>
         <span
           class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal ant-tree-node-selected"
           title="leaf"
@@ -766,7 +786,27 @@ exports[`renders ./components/tree/demo/customized-icon.md correctly 1`] = `
       >
         <span
           class="ant-tree-switcher ant-tree-switcher-noop"
-        />
+        >
+          <i
+            aria-label="icon: down"
+            class="anticon anticon-down ant-tree-switcher-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </i>
+        </span>
         <span
           class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
           title="leaf"
@@ -2049,13 +2089,13 @@ exports[`renders ./components/tree/demo/switcher-icon.md correctly 1`] = `
               class="ant-tree-switcher ant-tree-switcher-noop"
             >
               <i
-                aria-label="icon: file"
-                class="anticon anticon-file ant-tree-switcher-line-icon"
+                aria-label="icon: down"
+                class="anticon anticon-down ant-tree-switcher-icon"
               >
                 <svg
                   aria-hidden="true"
                   class=""
-                  data-icon="file"
+                  data-icon="down"
                   fill="currentColor"
                   focusable="false"
                   height="1em"
@@ -2063,7 +2103,7 @@ exports[`renders ./components/tree/demo/switcher-icon.md correctly 1`] = `
                   width="1em"
                 >
                   <path
-                    d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
+                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
                   />
                 </svg>
               </i>
@@ -2087,13 +2127,13 @@ exports[`renders ./components/tree/demo/switcher-icon.md correctly 1`] = `
               class="ant-tree-switcher ant-tree-switcher-noop"
             >
               <i
-                aria-label="icon: file"
-                class="anticon anticon-file ant-tree-switcher-line-icon"
+                aria-label="icon: down"
+                class="anticon anticon-down ant-tree-switcher-icon"
               >
                 <svg
                   aria-hidden="true"
                   class=""
-                  data-icon="file"
+                  data-icon="down"
                   fill="currentColor"
                   focusable="false"
                   height="1em"
@@ -2101,7 +2141,7 @@ exports[`renders ./components/tree/demo/switcher-icon.md correctly 1`] = `
                   width="1em"
                 >
                   <path
-                    d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
+                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
                   />
                 </svg>
               </i>
@@ -2125,13 +2165,13 @@ exports[`renders ./components/tree/demo/switcher-icon.md correctly 1`] = `
               class="ant-tree-switcher ant-tree-switcher-noop"
             >
               <i
-                aria-label="icon: file"
-                class="anticon anticon-file ant-tree-switcher-line-icon"
+                aria-label="icon: down"
+                class="anticon anticon-down ant-tree-switcher-icon"
               >
                 <svg
                   aria-hidden="true"
                   class=""
-                  data-icon="file"
+                  data-icon="down"
                   fill="currentColor"
                   focusable="false"
                   height="1em"
@@ -2139,7 +2179,7 @@ exports[`renders ./components/tree/demo/switcher-icon.md correctly 1`] = `
                   width="1em"
                 >
                   <path
-                    d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
+                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
                   />
                 </svg>
               </i>

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

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Tree icon of TreeNode should put inside line when showLine is true 1`] = `
+exports[`Tree icon and switcherIcon of Tree with showLine should render correctly 1`] = `
 <ul
-  class="ant-tree ant-tree-icon-hide ant-tree-show-line"
+  class="ant-tree ant-tree-show-line"
   role="tree"
   unselectable="on"
 >
@@ -13,12 +13,84 @@ exports[`Tree icon of TreeNode should put inside line when showLine is true 1`]
     <span
       class="ant-tree-switcher ant-tree-switcher_close"
     >
-      icon
+      switcherIcon
     </span>
     <span
       class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close"
       title="---"
     >
+      <span
+        class="ant-tree-iconEle ant-tree-icon__customize"
+      >
+        icon
+      </span>
+      <span
+        class="ant-tree-title"
+      >
+        ---
+      </span>
+    </span>
+  </li>
+  <li
+    class="ant-tree-treenode-switcher-close"
+    role="treeitem"
+  >
+    <span
+      class="ant-tree-switcher ant-tree-switcher_close"
+    >
+      switcherIcon
+    </span>
+    <span
+      class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close"
+      title="---"
+    >
+      <span
+        class="ant-tree-iconEle ant-tree-icon__close"
+      />
+      <span
+        class="ant-tree-title"
+      >
+        ---
+      </span>
+    </span>
+  </li>
+  <li
+    class="ant-tree-treenode-switcher-close"
+    role="treeitem"
+  >
+    <span
+      class="ant-tree-switcher ant-tree-switcher_close"
+    >
+      <i
+        aria-label="icon: plus-square"
+        class="anticon anticon-plus-square ant-tree-switcher-line-icon"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="plus-square"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M328 544h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
+          />
+          <path
+            d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"
+          />
+        </svg>
+      </i>
+    </span>
+    <span
+      class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close"
+      title="---"
+    >
+      <span
+        class="ant-tree-iconEle ant-tree-icon__close"
+      />
       <span
         class="ant-tree-title"
       >

components/tree/__tests__/index.test.js

@@ -5,12 +5,26 @@ import Tree from '../index';
 const { TreeNode } = Tree;
 
 describe('Tree', () => {
-  it('icon of TreeNode should put inside line when showLine is true', () => {
+  it('icon and switcherIcon of Tree with showLine should render correctly', () => {
     const wrapper = mount(
-      <Tree showLine>
-        <TreeNode icon="icon" key="0-0">
-          <TreeNode icon="icon" key="0-0-0" />
-          <TreeNode key="0-0-1" />
+      <Tree showLine showIcon>
+        <TreeNode icon="icon" switcherIcon="switcherIcon" key="0-0">
+          <TreeNode icon="icon" switcherIcon="switcherIcon" key="0-0-0" />
+          <TreeNode switcherIcon="switcherIcon" key="0-0-1" />
+          <TreeNode icon="icon" key="0-0-2" />
+          <TreeNode key="0-0-3" />
+        </TreeNode>
+        <TreeNode switcherIcon="switcherIcon" key="0-1">
+          <TreeNode icon="icon" switcherIcon="switcherIcon" key="0-0-0" />
+          <TreeNode switcherIcon="switcherIcon" key="0-0-1" />
+          <TreeNode icon="icon" key="0-0-2" />
+          <TreeNode key="0-0-3" />
+        </TreeNode>
+        <TreeNode key="0-2">
+          <TreeNode icon="icon" switcherIcon="switcherIcon" key="0-0-0" />
+          <TreeNode switcherIcon="switcherIcon" key="0-0-1" />
+          <TreeNode icon="icon" key="0-0-2" />
+          <TreeNode key="0-0-3" />
         </TreeNode>
       </Tree>,
     );

components/tree/demo/line.md

@@ -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 icon={<Icon type="form" />} title="leaf" key="0-0-2-1" />
+            <TreeNode switcherIcon={<Icon type="form" />} title="leaf" key="0-0-2-1" />
           </TreeNode>
         </TreeNode>
       </Tree>