feat: 图标搜索优化, 给选中的图标添加背景色,方便识别 (#754)
 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:
		
							parent
							
								
									d355519550
								
							
						
					
					
						commit
						b1bff7d27e
					
				@ -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} />;
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
@ -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>
 | 
			
		||||
 | 
			
		||||
@ -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')}
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user