🐛 fix Tree switcherIcon shown in leaf node (#20753)

close #20511

components/tree/Tree.tsx

@@ -194,15 +194,15 @@ export default class Tree extends React.Component<TreeProps, any> {
     if (loading) {
       return <Icon type="loading" className={`${prefixCls}-switcher-loading-icon`} />;
     }
+    if (isLeaf) {
+      return showLine ? <Icon type="file" className={`${prefixCls}-switcher-line-icon`} /> : null;
+    }
     const switcherCls = `${prefixCls}-switcher-icon`;
     if (switcherIcon) {
       return React.cloneElement(switcherIcon, {
         className: classNames(switcherIcon.props.className || '', switcherCls),
       });
     }
-    if (isLeaf) {
-      return showLine ? <Icon type="file" className={`${prefixCls}-switcher-line-icon`} /> : null;
-    }
     return showLine ? (
       <Icon
         type={expanded ? 'minus-square' : 'plus-square'}

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

@@ -725,27 +725,7 @@ 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"
@@ -786,27 +766,7 @@ 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"
@@ -2249,13 +2209,13 @@ exports[`renders ./components/tree/demo/switcher-icon.md correctly 1`] = `
               class="ant-tree-switcher ant-tree-switcher-noop"
             >
               <i
-                aria-label="icon: down"
-                class="anticon anticon-down ant-tree-switcher-icon"
+                aria-label="icon: file"
+                class="anticon anticon-file ant-tree-switcher-line-icon"
               >
                 <svg
                   aria-hidden="true"
                   class=""
-                  data-icon="down"
+                  data-icon="file"
                   fill="currentColor"
                   focusable="false"
                   height="1em"
@@ -2263,7 +2223,7 @@ exports[`renders ./components/tree/demo/switcher-icon.md correctly 1`] = `
                   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"
+                    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"
                   />
                 </svg>
               </i>
@@ -2287,13 +2247,13 @@ exports[`renders ./components/tree/demo/switcher-icon.md correctly 1`] = `
               class="ant-tree-switcher ant-tree-switcher-noop"
             >
               <i
-                aria-label="icon: down"
-                class="anticon anticon-down ant-tree-switcher-icon"
+                aria-label="icon: file"
+                class="anticon anticon-file ant-tree-switcher-line-icon"
               >
                 <svg
                   aria-hidden="true"
                   class=""
-                  data-icon="down"
+                  data-icon="file"
                   fill="currentColor"
                   focusable="false"
                   height="1em"
@@ -2301,7 +2261,7 @@ exports[`renders ./components/tree/demo/switcher-icon.md correctly 1`] = `
                   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"
+                    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"
                   />
                 </svg>
               </i>
@@ -2325,13 +2285,13 @@ exports[`renders ./components/tree/demo/switcher-icon.md correctly 1`] = `
               class="ant-tree-switcher ant-tree-switcher-noop"
             >
               <i
-                aria-label="icon: down"
-                class="anticon anticon-down ant-tree-switcher-icon"
+                aria-label="icon: file"
+                class="anticon anticon-file ant-tree-switcher-line-icon"
               >
                 <svg
                   aria-hidden="true"
                   class=""
-                  data-icon="down"
+                  data-icon="file"
                   fill="currentColor"
                   focusable="false"
                   height="1em"
@@ -2339,7 +2299,7 @@ exports[`renders ./components/tree/demo/switcher-icon.md correctly 1`] = `
                   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"
+                    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"
                   />
                 </svg>
               </i>

components/tree/__tests__/index.test.js

@@ -30,4 +30,16 @@ describe('Tree', () => {
     );
     expect(wrapper.render()).toMatchSnapshot();
   });
+
+  it('switcherIcon in Tree should not render at leaf nodes', () => {
+    const wrapper = mount(
+      <Tree switcherIcon={<i className="switcherIcon" />} defaultExpandAll>
+        <TreeNode icon="icon">
+          <TreeNode id="node1" title="node1" icon="icon" key="0-0-2" />
+          <TreeNode id="node2" title="node2" key="0-0-3" />
+        </TreeNode>
+      </Tree>,
+    );
+    expect(wrapper.find('.switcherIcon').length).toBe(1);
+  });
 });