'init_again'
Change-Id: Ib7ecdb9f5baeab1e4681152a57b936edf7475b35
diff --git a/src/components/IconSelector/index.tsx b/src/components/IconSelector/index.tsx
new file mode 100644
index 0000000..78dc931
--- /dev/null
+++ b/src/components/IconSelector/index.tsx
@@ -0,0 +1,142 @@
+import * as React from 'react';
+import Icon, * as AntdIcons from '@ant-design/icons';
+import { Radio, Input, Empty } from 'antd';
+import type { RadioChangeEvent } from 'antd/es/radio/interface';
+import debounce from 'lodash/debounce';
+import Category from './Category';
+import IconPicSearcher from './IconPicSearcher';
+import { FilledIcon, OutlinedIcon, TwoToneIcon } from './themeIcons';
+import type { CategoriesKeys } from './fields';
+import { categories } from './fields';
+// import { useIntl } from '@umijs/max';
+
+export enum ThemeType {
+ Filled = 'Filled',
+ Outlined = 'Outlined',
+ TwoTone = 'TwoTone',
+}
+
+const allIcons: { [key: string]: any } = AntdIcons;
+
+interface IconSelectorProps {
+ //intl: any;
+ onSelect: any;
+}
+
+interface IconSelectorState {
+ theme: ThemeType;
+ searchKey: string;
+}
+
+const IconSelector: React.FC<IconSelectorProps> = (props) => {
+ // const intl = useIntl();
+ // const { messages } = intl;
+ const { onSelect } = props;
+ const [displayState, setDisplayState] = React.useState<IconSelectorState>({
+ theme: ThemeType.Outlined,
+ searchKey: '',
+ });
+
+ const newIconNames: string[] = [];
+
+ const handleSearchIcon = React.useCallback(
+ debounce((searchKey: string) => {
+ setDisplayState(prevState => ({ ...prevState, searchKey }));
+ }),
+ [],
+ );
+
+ const handleChangeTheme = React.useCallback((e: RadioChangeEvent) => {
+ setDisplayState(prevState => ({ ...prevState, theme: e.target.value as ThemeType }));
+ }, []);
+
+ const renderCategories = React.useMemo<React.ReactNode | React.ReactNode[]>(() => {
+ const { searchKey = '', theme } = displayState;
+
+ const categoriesResult = Object.keys(categories)
+ .map((key: CategoriesKeys) => {
+ let iconList = categories[key];
+ 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:string) => iconName.toLowerCase().includes(matchKey));
+ }
+
+ // CopyrightCircle is same as Copyright, don't show it
+ iconList = iconList.filter((icon:string) => icon !== 'CopyrightCircle');
+
+ return {
+ category: key,
+ icons: iconList.map((iconName:string) => iconName + theme).filter((iconName:string) => allIcons[iconName]),
+ };
+ })
+ .filter(({ icons }) => !!icons.length)
+ .map(({ category, icons }) => (
+ <Category
+ key={category}
+ title={category as CategoriesKeys}
+ theme={theme}
+ icons={icons}
+ newIcons={newIconNames}
+ onSelect={(type, name) => {
+ if (onSelect) {
+ onSelect(name, allIcons[name]);
+ }
+ }}
+ />
+ ));
+ return categoriesResult.length === 0 ? <Empty style={{ margin: '2em 0' }} /> : categoriesResult;
+ }, [displayState.searchKey, displayState.theme]);
+ return (
+ <>
+ <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+ <Radio.Group
+ value={displayState.theme}
+ onChange={handleChangeTheme}
+ size="large"
+ optionType="button"
+ buttonStyle="solid"
+ options={[
+ {
+ label: <Icon component={OutlinedIcon} />,
+ value: ThemeType.Outlined
+ },
+ {
+ label: <Icon component={FilledIcon} />,
+ value: ThemeType.Filled
+ },
+ {
+ label: <Icon component={TwoToneIcon} />,
+ value: ThemeType.TwoTone
+ },
+ ]}
+ >
+ {/* <Radio.Button value={ThemeType.Outlined}>
+ <Icon component={OutlinedIcon} /> {messages['app.docs.components.icon.outlined']}
+ </Radio.Button>
+ <Radio.Button value={ThemeType.Filled}>
+ <Icon component={FilledIcon} /> {messages['app.docs.components.icon.filled']}
+ </Radio.Button>
+ <Radio.Button value={ThemeType.TwoTone}>
+ <Icon component={TwoToneIcon} /> {messages['app.docs.components.icon.two-tone']}
+ </Radio.Button> */}
+ </Radio.Group>
+ <Input.Search
+ // placeholder={messages['app.docs.components.icon.search.placeholder']}
+ style={{ margin: '0 10px', flex: 1 }}
+ allowClear
+ onChange={e => handleSearchIcon(e.currentTarget.value)}
+ size="large"
+ autoFocus
+ suffix={<IconPicSearcher />}
+ />
+ </div>
+ {renderCategories}
+ </>
+ );
+};
+
+export default IconSelector