From fee38f39e36bcda9924f5b26dca609dda6b331e0 Mon Sep 17 00:00:00 2001
From: skyouc
Date: 星期日, 22 六月 2025 16:53:27 +0800
Subject: [PATCH] no message
---
zy-asrs-flow/src/components/IconSelector/index.tsx | 284 ++++++++++++++++++++++++++++----------------------------
1 files changed, 142 insertions(+), 142 deletions(-)
diff --git a/zy-asrs-flow/src/components/IconSelector/index.tsx b/zy-asrs-flow/src/components/IconSelector/index.tsx
index 78dc931..1718a56 100644
--- a/zy-asrs-flow/src/components/IconSelector/index.tsx
+++ b/zy-asrs-flow/src/components/IconSelector/index.tsx
@@ -1,142 +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
+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
--
Gitblit v1.9.1