2022-06-22 14:57:09 +08:00
|
|
|
import CaretDownFilled from '@ant-design/icons/CaretDownFilled';
|
2020-03-02 12:09:38 +08:00
|
|
|
import FileOutlined from '@ant-design/icons/FileOutlined';
|
2022-06-22 14:57:09 +08:00
|
|
|
import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
|
2020-03-02 12:09:38 +08:00
|
|
|
import MinusSquareOutlined from '@ant-design/icons/MinusSquareOutlined';
|
|
|
|
import PlusSquareOutlined from '@ant-design/icons/PlusSquareOutlined';
|
2022-06-22 14:57:09 +08:00
|
|
|
import classNames from 'classnames';
|
2023-05-06 15:49:37 +08:00
|
|
|
import * as React from 'react';
|
2022-06-22 14:57:09 +08:00
|
|
|
import { cloneElement, isValidElement } from '../../_util/reactNode';
|
2023-04-01 13:38:34 +08:00
|
|
|
import type { AntTreeNodeProps, SwitcherIcon, TreeLeafIcon } from '../Tree';
|
|
|
|
|
|
|
|
interface SwitcherIconProps {
|
|
|
|
prefixCls: string;
|
|
|
|
treeNodeProps: AntTreeNodeProps;
|
|
|
|
switcherIcon?: SwitcherIcon;
|
|
|
|
showLine?: boolean | { showLeafIcon: boolean | TreeLeafIcon };
|
|
|
|
}
|
|
|
|
|
|
|
|
const SwitcherIconCom: React.FC<SwitcherIconProps> = (props) => {
|
|
|
|
const { prefixCls, switcherIcon, treeNodeProps, showLine } = props;
|
2019-09-28 11:31:28 +08:00
|
|
|
|
2022-04-08 22:55:42 +08:00
|
|
|
const { isLeaf, expanded, loading } = treeNodeProps;
|
|
|
|
|
2019-09-28 11:31:28 +08:00
|
|
|
if (loading) {
|
2019-11-28 12:34:33 +08:00
|
|
|
return <LoadingOutlined className={`${prefixCls}-switcher-loading-icon`} />;
|
2019-09-28 11:31:28 +08:00
|
|
|
}
|
2022-09-27 12:07:30 +08:00
|
|
|
let showLeafIcon: boolean | TreeLeafIcon;
|
2020-06-24 00:19:43 +08:00
|
|
|
if (showLine && typeof showLine === 'object') {
|
|
|
|
showLeafIcon = showLine.showLeafIcon;
|
|
|
|
}
|
2022-09-27 12:07:30 +08:00
|
|
|
|
2019-09-28 11:31:28 +08:00
|
|
|
if (isLeaf) {
|
2022-09-27 12:07:30 +08:00
|
|
|
if (!showLine) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (typeof showLeafIcon !== 'boolean' && !!showLeafIcon) {
|
|
|
|
const leafIcon =
|
|
|
|
typeof showLeafIcon === 'function' ? showLeafIcon(treeNodeProps) : showLeafIcon;
|
|
|
|
const leafCls = `${prefixCls}-switcher-line-custom-icon`;
|
|
|
|
|
|
|
|
if (isValidElement(leafIcon)) {
|
|
|
|
return cloneElement(leafIcon, {
|
|
|
|
className: classNames(leafIcon.props.className || '', leafCls),
|
|
|
|
});
|
2020-06-24 00:19:43 +08:00
|
|
|
}
|
2022-09-27 12:07:30 +08:00
|
|
|
|
2023-04-01 13:38:34 +08:00
|
|
|
return leafIcon as unknown as React.ReactElement;
|
2020-06-24 00:19:43 +08:00
|
|
|
}
|
2022-09-27 12:07:30 +08:00
|
|
|
|
|
|
|
return showLeafIcon ? (
|
|
|
|
<FileOutlined className={`${prefixCls}-switcher-line-icon`} />
|
|
|
|
) : (
|
|
|
|
<span className={`${prefixCls}-switcher-leaf-line`} />
|
|
|
|
);
|
2019-09-28 11:31:28 +08:00
|
|
|
}
|
2022-04-11 17:41:54 +08:00
|
|
|
|
2019-09-28 11:31:28 +08:00
|
|
|
const switcherCls = `${prefixCls}-switcher-icon`;
|
2022-04-01 17:10:38 +08:00
|
|
|
|
2022-07-23 16:54:36 +08:00
|
|
|
const switcher = typeof switcherIcon === 'function' ? switcherIcon(treeNodeProps) : switcherIcon;
|
2022-04-01 17:10:38 +08:00
|
|
|
|
|
|
|
if (isValidElement(switcher)) {
|
|
|
|
return cloneElement(switcher, {
|
|
|
|
className: classNames(switcher.props.className || '', switcherCls),
|
2019-09-28 11:31:28 +08:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2023-04-08 09:54:20 +08:00
|
|
|
if (switcher !== undefined) {
|
2023-04-01 13:38:34 +08:00
|
|
|
return switcher as unknown as React.ReactElement;
|
2022-04-11 18:07:34 +08:00
|
|
|
}
|
|
|
|
|
2019-09-28 11:31:28 +08:00
|
|
|
if (showLine) {
|
|
|
|
return expanded ? (
|
2019-11-28 12:34:33 +08:00
|
|
|
<MinusSquareOutlined className={`${prefixCls}-switcher-line-icon`} />
|
2019-09-28 11:31:28 +08:00
|
|
|
) : (
|
2019-11-28 12:34:33 +08:00
|
|
|
<PlusSquareOutlined className={`${prefixCls}-switcher-line-icon`} />
|
2019-09-28 11:31:28 +08:00
|
|
|
);
|
|
|
|
}
|
|
|
|
return <CaretDownFilled className={switcherCls} />;
|
2023-04-01 13:38:34 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
export default SwitcherIconCom;
|