mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 16:06:28 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

feat: add switcherIcon prop to Tree

Browse Source
This commit is contained in:
nick-ChenZe 2018-12-12 20:25:55 +08:00 committed by 偏右
parent b1a67de35e
commit d814c19356
3 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/tree/Tree.tsx
View File

@ -146,6 +146,7 @@ export interface TreeProps {
style?: React.CSSProperties;
showIcon?: boolean;
icon?: (nodeProps: AntdTreeNodeAttribute) => React.ReactNode | React.ReactNode;
switcherIcon?: React.ReactElement<any>;
prefixCls?: string;
filterTreeNode?: (node: AntTreeNode) => boolean;
children?: React.ReactNode | React.ReactNode[];
@ -166,7 +167,11 @@ export default class Tree extends React.Component<TreeProps, any> {
tree: any;
renderSwitcherIcon = (prefixCls: string, { isLeaf, expanded, loading }: AntTreeNodeProps) => {
renderSwitcherIcon = (
prefixCls: string,
switcherIcon: React.ReactElement<any> | undefined,
{ isLeaf, expanded, loading }: AntTreeNodeProps,
) => {
const { showLine } = this.props;
if (loading) {
return <Icon type="loading" className={`${prefixCls}-switcher-loading-icon`} />;
@ -183,10 +188,17 @@ export default class Tree extends React.Component<TreeProps, any> {
/>
);
} else {
const switcherCls = `${prefixCls}-switcher-icon`;
if (isLeaf) {
return null;
} else if (switcherIcon) {
const switcherOriginCls = switcherIcon.props.className || '';
return React.cloneElement(switcherIcon, {
className: [switcherOriginCls, switcherCls],
});
} else {
return <Icon type="caret-down" className={switcherCls} theme="filled" />;
}
return <Icon type="caret-down" className={`${prefixCls}-switcher-icon`} theme="filled" />;
}
};
@ -196,7 +208,7 @@ export default class Tree extends React.Component<TreeProps, any> {
renderTree = ({ getPrefixCls }: ConfigConsumerProps) => {
const props = this.props;
const { prefixCls: customizePrefixCls, className, showIcon } = props;
const { prefixCls: customizePrefixCls, className, showIcon, switcherIcon } = props;
const checkable = props.checkable;
const prefixCls = getPrefixCls('tree', customizePrefixCls);
return (
@ -207,7 +219,7 @@ export default class Tree extends React.Component<TreeProps, any> {
className={classNames(!showIcon && `${prefixCls}-icon-hide`, className)}
checkable={checkable ? <span className={`${prefixCls}-checkbox-inner`} /> : checkable}
switcherIcon={(nodeProps: AntTreeNodeProps) =>
this.renderSwitcherIcon(prefixCls, nodeProps)
this.renderSwitcherIcon(prefixCls, switcherIcon, nodeProps)
}
>
{this.props.children}

8
components/tree/__tests__/__snapshots__/demo.test.js.snap
View File

@ -648,19 +648,19 @@ exports[`renders ./components/tree/demo/customized-icon.md correctly 1`] = `
class="ant-tree-switcher ant-tree-switcher_open"
>
<i
class="anticon anticon-caret-down ant-tree-switcher-icon"
class="anticon anticon-down ant-tree-switcher-icon"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
data-icon="down"
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
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>

1
components/tree/demo/customized-icon.md
View File

@ -23,6 +23,7 @@ ReactDOM.render(
showIcon
defaultExpandAll
defaultSelectedKeys={['0-0-0']}
switcherIcon={<Icon type="down" />}
>
<TreeNode icon={<Icon type="smile-o" />} title="parent 1" key="0-0">
<TreeNode icon={<Icon type="meh-o" />} title="leaf" key="0-0-0" />