mirrors/nocobase
1
0
Fork 0
mirror of https://github.com/nocobase/nocobase synced 2024-11-16 01:17:43 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf(IconField): improve style performance

Browse Source
This commit is contained in:
Zeke Zhang 2024-10-30 11:37:10 +08:00
parent 95cabdc409
commit 5918d1e14e
1 changed files with 9 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/core/client/src/schema-component/antd/icon-picker/IconPicker.tsx
View File

@ -11,13 +11,12 @@ import { CloseOutlined, LoadingOutlined } from '@ant-design/icons';
import { useFormLayout } from '@formily/antd-v5'; import { useFormLayout } from '@formily/antd-v5';
import { connect, mapProps, mapReadPretty } from '@formily/react'; import { connect, mapProps, mapReadPretty } from '@formily/react';
import { isValid } from '@formily/shared'; import { isValid } from '@formily/shared';
import { Button, Empty, Space, Input, theme } from 'antd'; import { Button, Empty, Input, Space, theme } from 'antd';
import { debounce } from 'lodash';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Icon, hasIcon, icons } from '../../../icon'; import { Icon, hasIcon, icons } from '../../../icon';
import { StablePopover } from '../popover'; import { StablePopover } from '../popover';
import { debounce } from 'lodash';
import { createStyles } from 'antd-style';
const { Search } = Input; const { Search } = Input;
@ -34,17 +33,6 @@ interface IconPickerReadPrettyProps {
value?: string; value?: string;
} }
const useStyle = (isSearchable: IconPickerProps['searchable']) =>
createStyles(({ css }) => {
return {
popoverContent: css`
width: 26em;
${!isSearchable && 'max-'}height: 20em;
overflow-y: auto;
`,
};
})();
function IconField(props: IconPickerProps) { function IconField(props: IconPickerProps) {
const { fontSizeXL } = theme.useToken().token; const { fontSizeXL } = theme.useToken().token;
const availableIcons = [...icons.keys()]; const availableIcons = [...icons.keys()];
@ -53,7 +41,12 @@ function IconField(props: IconPickerProps) {
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const [filteredIcons, setFilteredIcons] = useState(availableIcons); const [filteredIcons, setFilteredIcons] = useState(availableIcons);
const { t } = useTranslation(); const { t } = useTranslation();
const { styles } = useStyle(searchable);
const style: any = {
width: '26em',
[`${searchable ? 'height' : 'maxHeight'}`]: '20em',
overflowY: 'auto',
};
const filterIcons = debounce((value) => { const filterIcons = debounce((value) => {
const searchValue = value?.trim() ?? ''; const searchValue = value?.trim() ?? '';
@ -77,7 +70,7 @@ function IconField(props: IconPickerProps) {
setVisible(val); setVisible(val);
}} }}
content={ content={
<div className={styles.popoverContent}> <div style={style}>
{filteredIcons.length === 0 ? ( {filteredIcons.length === 0 ? (
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
) : ( ) : (