2023-09-11 17:28:04 +08:00
|
|
|
import type { ReactNode } from 'react';
|
|
|
|
import * as React from 'react';
|
2020-03-02 12:09:38 +08:00
|
|
|
import CheckOutlined from '@ant-design/icons/CheckOutlined';
|
|
|
|
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
|
2022-06-22 14:57:09 +08:00
|
|
|
import CloseOutlined from '@ant-design/icons/CloseOutlined';
|
|
|
|
import DownOutlined from '@ant-design/icons/DownOutlined';
|
|
|
|
import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
|
2020-03-02 12:09:38 +08:00
|
|
|
import SearchOutlined from '@ant-design/icons/SearchOutlined';
|
2023-09-11 17:28:04 +08:00
|
|
|
|
|
|
|
import { devUseWarning } from '../_util/warning';
|
2019-09-28 11:31:28 +08:00
|
|
|
|
2022-04-08 22:55:42 +08:00
|
|
|
type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);
|
|
|
|
|
2023-09-11 17:28:04 +08:00
|
|
|
export default function useIcons({
|
2019-09-28 11:31:28 +08:00
|
|
|
suffixIcon,
|
|
|
|
clearIcon,
|
|
|
|
menuItemSelectedIcon,
|
|
|
|
removeIcon,
|
|
|
|
loading,
|
|
|
|
multiple,
|
2022-02-16 21:39:48 +08:00
|
|
|
hasFeedback,
|
2020-06-24 23:28:54 +08:00
|
|
|
prefixCls,
|
2023-07-19 20:27:09 +08:00
|
|
|
showSuffixIcon,
|
2022-03-25 17:48:12 +08:00
|
|
|
feedbackIcon,
|
2023-07-19 20:27:09 +08:00
|
|
|
showArrow,
|
2023-08-02 14:21:11 +08:00
|
|
|
componentName,
|
2019-09-28 11:31:28 +08:00
|
|
|
}: {
|
|
|
|
suffixIcon?: React.ReactNode;
|
2022-04-08 22:55:42 +08:00
|
|
|
clearIcon?: RenderNode;
|
|
|
|
menuItemSelectedIcon?: RenderNode;
|
|
|
|
removeIcon?: RenderNode;
|
2019-09-28 11:31:28 +08:00
|
|
|
loading?: boolean;
|
|
|
|
multiple?: boolean;
|
2022-02-16 21:39:48 +08:00
|
|
|
hasFeedback?: boolean;
|
2022-03-25 17:48:12 +08:00
|
|
|
feedbackIcon?: ReactNode;
|
2020-06-24 23:28:54 +08:00
|
|
|
prefixCls: string;
|
2023-07-19 20:27:09 +08:00
|
|
|
showSuffixIcon?: boolean;
|
2022-02-16 21:39:48 +08:00
|
|
|
showArrow?: boolean;
|
2023-08-02 14:21:11 +08:00
|
|
|
componentName: string;
|
2019-09-28 11:31:28 +08:00
|
|
|
}) {
|
2023-08-02 14:21:11 +08:00
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
2023-09-11 17:28:04 +08:00
|
|
|
const warning = devUseWarning();
|
|
|
|
|
2023-08-02 14:21:11 +08:00
|
|
|
warning(
|
|
|
|
!clearIcon,
|
|
|
|
componentName,
|
2023-09-11 17:28:04 +08:00
|
|
|
'deprecated',
|
2023-08-02 14:21:11 +08:00
|
|
|
'`clearIcon` is deprecated, please use `allowClear={{ clearIcon: React.ReactNode }}` instead.',
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2019-09-28 11:31:28 +08:00
|
|
|
// Clear Icon
|
2022-10-06 18:53:06 +08:00
|
|
|
const mergedClearIcon = clearIcon ?? <CloseCircleFilled />;
|
2019-09-28 11:31:28 +08:00
|
|
|
|
2022-02-16 21:39:48 +08:00
|
|
|
// Validation Feedback Icon
|
2023-07-19 20:27:09 +08:00
|
|
|
const getSuffixIconNode = (arrowIcon?: ReactNode) => {
|
|
|
|
if (suffixIcon === null && !hasFeedback && !showArrow) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
{showSuffixIcon !== false && arrowIcon}
|
|
|
|
{hasFeedback && feedbackIcon}
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|
2022-02-16 21:39:48 +08:00
|
|
|
|
2019-09-28 11:31:28 +08:00
|
|
|
// Arrow item icon
|
|
|
|
let mergedSuffixIcon = null;
|
|
|
|
if (suffixIcon !== undefined) {
|
2022-02-16 21:39:48 +08:00
|
|
|
mergedSuffixIcon = getSuffixIconNode(suffixIcon);
|
2019-09-28 11:31:28 +08:00
|
|
|
} else if (loading) {
|
2022-02-16 21:39:48 +08:00
|
|
|
mergedSuffixIcon = getSuffixIconNode(<LoadingOutlined spin />);
|
2019-09-28 11:31:28 +08:00
|
|
|
} else {
|
2020-06-24 23:28:54 +08:00
|
|
|
const iconCls = `${prefixCls}-suffix`;
|
2019-09-28 11:31:28 +08:00
|
|
|
mergedSuffixIcon = ({ open, showSearch }: { open: boolean; showSearch: boolean }) => {
|
|
|
|
if (open && showSearch) {
|
2022-02-16 21:39:48 +08:00
|
|
|
return getSuffixIconNode(<SearchOutlined className={iconCls} />);
|
2019-09-28 11:31:28 +08:00
|
|
|
}
|
2022-02-16 21:39:48 +08:00
|
|
|
return getSuffixIconNode(<DownOutlined className={iconCls} />);
|
2019-09-28 11:31:28 +08:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
// Checked item icon
|
|
|
|
let mergedItemIcon = null;
|
|
|
|
if (menuItemSelectedIcon !== undefined) {
|
|
|
|
mergedItemIcon = menuItemSelectedIcon;
|
|
|
|
} else if (multiple) {
|
2019-11-28 12:34:33 +08:00
|
|
|
mergedItemIcon = <CheckOutlined />;
|
2019-09-28 11:31:28 +08:00
|
|
|
} else {
|
|
|
|
mergedItemIcon = null;
|
|
|
|
}
|
|
|
|
|
|
|
|
let mergedRemoveIcon = null;
|
|
|
|
if (removeIcon !== undefined) {
|
|
|
|
mergedRemoveIcon = removeIcon;
|
|
|
|
} else {
|
2019-11-28 12:34:33 +08:00
|
|
|
mergedRemoveIcon = <CloseOutlined />;
|
2019-09-28 11:31:28 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
clearIcon: mergedClearIcon,
|
|
|
|
suffixIcon: mergedSuffixIcon,
|
|
|
|
itemIcon: mergedItemIcon,
|
|
|
|
removeIcon: mergedRemoveIcon,
|
|
|
|
};
|
|
|
|
}
|