ci4sManagement-cloud/react-ui/src/components/MenuIconSelector/index.tsx

/*
 * @Author: 赵伟
 * @Date: 2024-04-17 16:59:42
 * @Description: 菜单图标选择器
 */

import KFIcon from '@/components/KFIcon';
import KFModal from '@/components/KFModal';
import iconData from '@/iconfont/iconfont-menu.json';
import { type ModalProps } from 'antd';
import { useEffect, useState } from 'react';
import styles from './index.less';

interface MenuIconSelectorProps extends Omit<ModalProps, 'onOk'> {
  /** 选中的图标 */
  selectedIcon?: string;
  /** 选择回调 */
  onOk: (param: string) => void;
}

type IconObject = {
  icon_id: string;
  font_class: string;
};

/** 菜单图标选择器 */
function MenuIconSelector({ open, selectedIcon, onOk, ...rest }: MenuIconSelectorProps) {
  const [icons, setIcons] = useState<IconObject[]>([]);
  useEffect(() => {
    const glyphs = iconData.glyphs as IconObject[];
    setIcons(glyphs.filter((item) => !item.font_class.endsWith('-active')));
  }, []);

  return (
    <KFModal
      {...rest}
      title="选择图标"
      width={680}
      open={open}
      cancelButtonProps={{ style: { display: 'none' } }}
      okButtonProps={{ style: { display: 'none' } }}
    >
      <div className={styles['menu-icon-selector']}>
        {icons.map((icon) => (
          <div
            key={icon.icon_id}
            className={styles['menu-icon-selector__item']}
            onClick={() => onOk(icon.font_class)}
          >
            <KFIcon
              className={styles['menu-icon-selector__item__icon']}
              type={
                selectedIcon === icon.font_class
                  ? `icon-${icon.font_class}-active`
                  : `icon-${icon.font_class}`
              }
              font={24}
            />
            <KFIcon
              className={styles['menu-icon-selector__item__icon--active']}
              type={`icon-${icon.font_class}-active`}
              font={24}
            />
          </div>
        ))}
      </div>
    </KFModal>
  );
}

export default MenuIconSelector;