fix(菜单管理): Icon新增代码修复

src/pages/system/Menu/components/Icons/index.tsx

@@ -1,9 +1,9 @@
-import { useState, useCallback, useEffect } from 'react'
-import IconList from './icon'
-import { Modal } from 'antd'
-import classNames from 'classnames'
-import { PlusOutlined } from '@ant-design/icons'
-import './index.less'
+import { useState, useCallback, useEffect } from 'react';
+import IconList from './icon';
+import { Modal } from 'antd';
+import classNames from 'classnames';
+import { PlusOutlined } from '@ant-design/icons';
+import './index.less';
 
 export interface IconProps {
   value?: string;
@@ -11,96 +11,77 @@ export interface IconProps {
   disabled?: boolean;
 }
 
-export  default (props: IconProps) => {
-
-  const [visible, setVisible] = useState(false)
-  const [icon, setIcon] = useState(props.value || '')
-  const [showMask, setShowMask] = useState(false)
+export default (props: IconProps) => {
+  const [visible, setVisible] = useState(false);
+  const [icon, setIcon] = useState(props.value || '');
+  const [showMask, setShowMask] = useState(false);
 
   useEffect(() => {
-    setIcon(props.value || '')
-  }, [visible])
+    setIcon(props.value || '');
+  }, [visible]);
+
+  const closeModal = () => {
+    setVisible(false);
+  };
 
   const onSubmit = useCallback(() => {
     if (props.onChange) {
-      props.onChange(icon)
+      props.onChange(icon);
     }
-    closeModal()
-  }, [icon])
-
-  const closeModal = () => {
-    setVisible(false)
-  }
+    closeModal();
+  }, [icon]);
 
   return (
-  <div className='menu-icon'>
-    <div className="menu-icon-border">
-      <Modal
-        title='菜单图标'
-        visible={visible}
-        width={800}
-        onOk={onSubmit}
-        onCancel={closeModal}
-      >
-        <div className='menu-icon-items'>
-          {
-            IconList.map(item =>  
+    <div className="menu-icon">
+      <div className="menu-icon-border">
+        <Modal title="菜单图标" visible={visible} width={800} onOk={onSubmit} onCancel={closeModal}>
+          <div className="menu-icon-items">
+            {IconList.map((item) => (
               <div
-                className={classNames('icon-item', { active: icon === item})}
-                onClick={
-                  () => {
-                    setIcon(item)
-                  }
-                }
+                className={classNames('icon-item', { active: icon === item })}
+                onClick={() => {
+                  setIcon(item);
+                }}
               >
                 <svg className="icon" aria-hidden="true">
                   <use xlinkHref={`#${item}`}></use>
                 </svg>
               </div>
-              )
-          }
-        </div>
-      </Modal>
-      <div
-        className='menu-icon-content'
-        onClick={() => {
-        if (!props.disabled) {
-          setVisible(true)
-          }
-        }}
-        onMouseEnter={() => {
-          setShowMask(true)
-        }}
-        onMouseLeave={() => {
-          setShowMask(false)
-        }}
-      >
-        {
-          props.value ?
-          <>
-            <span className='menu-select-icon'>
-              <svg className="icon" aria-hidden="true">
+            ))}
+          </div>
+        </Modal>
+        <div
+          className="menu-icon-content"
+          onClick={() => {
+            if (!props.disabled) {
+              setVisible(true);
+            }
+          }}
+          onMouseEnter={() => {
+            setShowMask(true);
+          }}
+          onMouseLeave={() => {
+            setShowMask(false);
+          }}
+        >
+          {props.value ? (
+            <>
+              <span className="menu-select-icon">
+                <svg className="icon" aria-hidden="true">
                   <use xlinkHref={`#${props.value}`}></use>
-              </svg>
-            </span>
-            <div className={classNames('menu-icon-mask', { show: showMask})}>
-              点击修改
-            </div>
-          </>
-          :
-          <>
-            <PlusOutlined />
-            <div>点击选择图标</div>
-          </>
-        }
-      </div>
-      {
-        props.disabled &&
-        <div className='menu-icon-disabled'>
-
+                </svg>
+              </span>
+              <div className={classNames('menu-icon-mask', { show: showMask })}>点击修改</div>
+            </>
+          ) : (
+            <>
+              <PlusOutlined />
+              <div>点击选择图标</div>
+            </>
+          )}
         </div>
-      }
+        {props.disabled && <div className="menu-icon-disabled"></div>}
+      </div>
     </div>
-  </div>
-  )
-}
+  );
+};