Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Tree switcherIcon prop not working when showLine #18829

Merged
merged 2 commits into from Sep 23, 2019
Merged

fix: Tree switcherIcon prop not working when showLine #18829

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7b38632
:bug: fix Tree switcherIcon prop not working when showLine
MrHeer Sep 16, 2019
d903b7c
:ok_hand: add use case
MrHeer Sep 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
24 changes: 12 additions & 12 deletions components/tree/Tree.tsx
View file
Open in desktop
Expand Up @@ -194,28 +194,28 @@ export default class Tree extends React.Component<TreeProps, any> {
if (loading) {
return <Icon type="loading" className={`${prefixCls}-switcher-loading-icon`} />;
}
if (showLine) {
if (isLeaf) {
if (isLeaf) {
if (showLine) {
return <Icon type="file" className={`${prefixCls}-switcher-line-icon`} />;
}
return (
<Icon
type={expanded ? 'minus-square' : 'plus-square'}
className={`${prefixCls}-switcher-line-icon`}
theme="outlined"
/>
);
}
const switcherCls = `${prefixCls}-switcher-icon`;
if (isLeaf) {
return null;
}
const switcherCls = `${prefixCls}-switcher-icon`;
if (switcherIcon) {
const switcherOriginCls = switcherIcon.props.className || '';
return React.cloneElement(switcherIcon, {
className: classNames(switcherOriginCls, switcherCls),
});
}
if (showLine) {
return (
<Icon
type={expanded ? 'minus-square' : 'plus-square'}
className={`${prefixCls}-switcher-line-icon`}
theme="outlined"
/>
);
}
return <Icon type="caret-down" className={switcherCls} theme="filled" />;
};

Expand Down
287 changes: 287 additions & 0 deletions components/tree/__tests__/__snapshots__/demo.test.js.snap
View file
Open in desktop
Expand Up @@ -1950,3 +1950,290 @@ exports[`renders ./components/tree/demo/search.md correctly 1`] = `
</ul>
</div>
`;

exports[`renders ./components/tree/demo/switcher-icon.md correctly 1`] = `
<ul
class="ant-tree ant-tree-icon-hide ant-tree-show-line"
role="tree"
unselectable="on"
>
<li
class="ant-tree-treenode-switcher-open"
role="treeitem"
>
<span
class="ant-tree-switcher ant-tree-switcher_open"
>
<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-open"
title="parent 1"
>
<span
class="ant-tree-title"
>
parent 1
</span>
</span>
<ul
class="ant-tree-child-tree ant-tree-child-tree-open"
data-expanded="true"
role="group"
>
<li
class="ant-tree-treenode-switcher-open"
role="treeitem"
>
<span
class="ant-tree-switcher ant-tree-switcher_open"
>
<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-open"
title="parent 1-0"
>
<span
class="ant-tree-title"
>
parent 1-0
</span>
</span>
<ul
class="ant-tree-child-tree ant-tree-child-tree-open"
data-expanded="true"
role="group"
>
<li
class="ant-tree-treenode-switcher-close"
role="treeitem"
>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
>
<i
aria-label="icon: file"
class="anticon anticon-file ant-tree-switcher-line-icon"
>
<svg
aria-hidden="true"
class=""
data-icon="file"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
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"
/>
</svg>
</i>
</span>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="leaf"
>
<span
class="ant-tree-title"
>
leaf
</span>
</span>
</li>
<li
class="ant-tree-treenode-switcher-close"
role="treeitem"
>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
>
<i
aria-label="icon: file"
class="anticon anticon-file ant-tree-switcher-line-icon"
>
<svg
aria-hidden="true"
class=""
data-icon="file"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
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"
/>
</svg>
</i>
</span>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="leaf"
>
<span
class="ant-tree-title"
>
leaf
</span>
</span>
</li>
<li
class="ant-tree-treenode-switcher-close"
role="treeitem"
>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
>
<i
aria-label="icon: file"
class="anticon anticon-file ant-tree-switcher-line-icon"
>
<svg
aria-hidden="true"
class=""
data-icon="file"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
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"
/>
</svg>
</i>
</span>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="leaf"
>
<span
class="ant-tree-title"
>
leaf
</span>
</span>
</li>
</ul>
</li>
<li
class="ant-tree-treenode-switcher-close"
role="treeitem"
>
<span
class="ant-tree-switcher ant-tree-switcher_close"
>
<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-close"
title="parent 1-1"
>
<span
class="ant-tree-title"
>
parent 1-1
</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: 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-close"
title="parent 1-2"
>
<span
class="ant-tree-title"
>
parent 1-2
</span>
</span>
</li>
</ul>
</li>
</ul>
`;
54 changes: 54 additions & 0 deletions components/tree/demo/switcher-icon.md
View file
Open in desktop
@@ -0,0 +1,54 @@
---
order: 8
title:
zh-CN: 自定义展开/折叠图标
en-US: Customize collapse/expand icon
---

## zh-CN

自定义展开/折叠图标。

## en-US

customize collapse/expand icon of tree node

```jsx
import { Tree, Icon } from 'antd';

const { TreeNode } = Tree;

class Demo extends React.Component {
onSelect = (selectedKeys, info) => {
console.log('selected', selectedKeys, info);
};

render() {
return (
<Tree
showLine
switcherIcon={<Icon type="down" />}
defaultExpandedKeys={['0-0-0']}
onSelect={this.onSelect}
>
<TreeNode title="parent 1" key="0-0">
<TreeNode title="parent 1-0" key="0-0-0">
<TreeNode title="leaf" key="0-0-0-0" />
<TreeNode title="leaf" key="0-0-0-1" />
<TreeNode title="leaf" key="0-0-0-2" />
</TreeNode>
<TreeNode title="parent 1-1" key="0-0-1">
<TreeNode title="leaf" key="0-0-1-0" />
</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>
</TreeNode>
</Tree>
);
}
}

ReactDOM.render(<Demo />, mountNode);
```