import React, { useCallback, useMemo, useState } from 'react';
import type { CSSProperties } from 'react';
import Icon, * as AntdIcons from '@ant-design/icons';
import type { IntlShape } from 'react-intl';
import { createStyles, useTheme } from 'antd-style';
import { useIntl } from 'dumi';
import debounce from 'lodash/debounce';
import { Segmented, Input, Empty, Affix } from 'antd';
import type { SegmentedProps } from 'antd';
import Category from './Category';
import { FilledIcon, OutlinedIcon, TwoToneIcon } from './themeIcons';
import type { CategoriesKeys } from './fields';
import { categories } from './fields';
export enum ThemeType {
Filled = 'Filled',
Outlined = 'Outlined',
TwoTone = 'TwoTone',
}
const allIcons: { [key: string]: any } = AntdIcons;
const useStyle = createStyles(({ css }) => ({
iconSearchAffix: css`
display: flex;
transition: all 0.3s;
justify-content: space-between;
`,
}));
const options = (intl: IntlShape): SegmentedProps['options'] => [
{
value: ThemeType.Outlined,
icon: ,
label: intl.formatMessage({ id: 'app.docs.components.icon.outlined' }),
},
{
value: ThemeType.Filled,
icon: ,
label: intl.formatMessage({ id: 'app.docs.components.icon.filled' }),
},
{
value: ThemeType.TwoTone,
icon: ,
label: intl.formatMessage({ id: 'app.docs.components.icon.two-tone' }),
},
];
interface IconSearchState {
theme: ThemeType;
searchKey: string;
}
const IconSearch: React.FC = () => {
const intl = useIntl();
const { styles } = useStyle();
const [displayState, setDisplayState] = useState({
searchKey: '',
theme: ThemeType.Outlined,
});
const newIconNames: string[] = [];
const handleSearchIcon = debounce((e: React.ChangeEvent) => {
setDisplayState((prevState) => ({ ...prevState, searchKey: e.target.value }));
}, 300);
const handleChangeTheme = useCallback((value) => {
setDisplayState((prevState) => ({ ...prevState, theme: value as ThemeType }));
}, []);
const renderCategories = useMemo(() => {
const { searchKey = '', theme } = displayState;
const categoriesResult = Object.keys(categories)
.map((key) => {
let iconList = categories[key as CategoriesKeys];
if (searchKey) {
const matchKey = searchKey
// eslint-disable-next-line prefer-regex-literals
.replace(new RegExp(`^<([a-zA-Z]*)\\s/>$`, 'gi'), (_, name) => name)
.replace(/(Filled|Outlined|TwoTone)$/, '')
.toLowerCase();
iconList = iconList.filter((iconName) => iconName.toLowerCase().includes(matchKey));
}
const ignore = [
'CopyrightCircle', // same as Copyright
'DollarCircle', // same as Dollar
];
iconList = iconList.filter((icon) => !ignore.includes(icon));
return {
category: key,
icons: iconList
.map((iconName) => iconName + theme)
.filter((iconName) => allIcons[iconName]),
};
})
.filter(({ icons }) => !!icons.length)
.map(({ category, icons }) => (
));
return categoriesResult.length ? categoriesResult : ;
}, [displayState.searchKey, displayState.theme]);
const [searchBarAffixed, setSearchBarAffixed] = useState(false);
const token = useTheme();
const { borderRadius, colorBgContainer } = token;
const affixedStyle: CSSProperties = {
boxShadow: 'rgba(50, 50, 93, 0.25) 0 6px 12px -2px, rgba(0, 0, 0, 0.3) 0 3px 7px -3px',
padding: 8,
margin: -8,
borderRadius,
backgroundColor: colorBgContainer,
};
return (
);
};
export default IconSearch;