🐛 Fix Tree showLine and showIcon missing icon

close #20192
2025-08-06 16:06:28 +08:00 · 2019-12-11 17:43:12 +08:00 · 2019-12-11 17:43:12 +08:00 · 0a5ec6713c
commit 0a5ec6713c
parent f459ae9e63
5 changed files with 161 additions and 43 deletions
--- a/components/tree/Tree.tsx
+++ b/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,
--- a/components/tree/tests/snapshots/demo.test.js.snap
+++ b/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>
--- a/components/tree/tests/snapshots/index.test.js.snap
+++ b/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"
      >
--- a/components/tree/tests/index.test.js
+++ b/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>,
    );
--- a/components/tree/demo/line.md
+++ b/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>