新建德森项目分支

skyouc

2024-12-21 c635d78b479510ebe2556a420948effcd30a0731

 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