ruiling/tachybase_todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 图标搜索优化, 给选中的图标添加背景色,方便识别 (#754)

Browse Source 
![image](/attachments/52e527f2-5952-4ad4-b09e-d49222425be6)

Reviewed-on: daoyoucloud/tachybase#754
Co-authored-by: bai.zixv <bai.zixv@foxmail.com>
Co-committed-by: bai.zixv <bai.zixv@foxmail.com>
This commit is contained in:
bai.zixv 2024-04-18 13:37:13 +08:00 committed by sealday
parent d355519550
commit b1bff7d27e
3 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/client/src/schema-component/antd/icon-picker/IconFilterInput.tsx
View File

@ -9,5 +9,5 @@ export const IconFilterInput = (props) => {
changeFilterKey(inputValue);
}, 100);
return <Input allowClear placeholder={`antd的key,例如"ApiOutlined",忽略大小写`} onChange={onChange} />;
return <Input allowClear placeholder={`Antd的key,例如"ApiOutlined",忽略大小写`} onChange={onChange} />;
};

13
packages/core/client/src/schema-component/antd/icon-picker/IconList.tsx
View File

@ -1,9 +1,10 @@
import React, { useMemo } from 'react';
import { Icon, icons } from '../../../icon';
import { Tooltip } from 'antd';
import { css } from '@emotion/css';
export const IconFilterList = (props) => {
const { filterKey, onChange, changePop } = props;
const { currentKey, filterKey, onChange, changePop } = props;
const iconKeysByFilter = useMemo(() => {
if (!filterKey) {
@ -21,7 +22,13 @@ export const IconFilterList = (props) => {
return (
<div style={{ width: '26em', maxHeight: '20em', overflowY: 'auto' }}>
{[...iconKeysByFilter.keys()].map((key) => (
<span key={key} style={{ fontSize: 18, marginRight: 10, cursor: 'pointer' }}>
<span
key={key}
className={css`
background-color: ${currentKey == key ? '#9bb0d393' : ''};
`}
style={{ fontSize: 18, marginRight: 10, cursor: 'pointer' }}
>
<Tooltip
destroyTooltipOnHide
mouseEnterDelay={0.3}
@ -33,11 +40,11 @@ export const IconFilterList = (props) => {
}}
>
<Icon
type={key}
onClick={() => {
onChange(key);
changePop(false);
}}
type={key}
/>
</Tooltip>
</span>

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

@ -3,9 +3,9 @@ import { useFormLayout } from '@formily/antd-v5';
import { connect, mapProps, mapReadPretty } from '@nocobase/schema';
import { isValid } from '@nocobase/schema';
import { Button, Space } from 'antd';
import React, { useMemo, useState } from 'react';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Icon, hasIcon, icons } from '../../../icon';
import { Icon, hasIcon } from '../../../icon';
import { StablePopover } from '../popover';
import { IconFilterInput } from './IconFilterInput';
import { IconFilterList } from './IconList';
@ -32,7 +32,7 @@ function IconField(props: any) {
content={
<>
<IconFilterInput changeFilterKey={setFilterKey} />
<IconFilterList filterKey={filterKey} onChange={onChange} changePop={setVisible} />
<IconFilterList currentKey={value} filterKey={filterKey} onChange={onChange} changePop={setVisible} />
</>
}
title={t('Icon')}