feat: depoly model advanced

src/components/label-selector/label-item.tsx

@@ -1,9 +1,10 @@
 import SealInput from '@/components/seal-form/seal-input';
 import { MinusOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
-import React from 'react';
+import { useIntl } from '@umijs/max';
+import { Button, Tooltip } from 'antd';
+import _ from 'lodash';
+import React, { useState } from 'react';
 import './styles/label-item.less';
-
 interface LabelItemProps {
   label: {
     key: string;
@@ -15,16 +16,21 @@ interface LabelItemProps {
   valueAddon?: React.ReactNode;
   seperator?: string;
   onDelete?: () => void;
+  labelList: { key: string; value: string }[];
   onChange?: (params: { key: string; value: string }) => void;
 }
 const LabelItem: React.FC<LabelItemProps> = ({
   label,
+  labelList,
   seperator,
   keyAddon,
   valueAddon,
   onChange,
   onDelete
 }) => {
+  const intl = useIntl();
+  const [open, setOpen] = useState(false);
+
   const handleOnValueChange = (e: any) => {
     const value = e.target.value;
     onChange?.({
@@ -36,20 +42,47 @@ const LabelItem: React.FC<LabelItemProps> = ({
   const handleOnKeyChange = (e: any) => {
     const key = e.target.value;
     onChange?.({
-      key: key,
+      key,
       value: label.value
     });
   };
 
+  const handleKeyOnBlur = (e: any) => {
+    const val = e.target.value;
+    // has duplicate key
+    const duplicates = _.filter(
+      labelList,
+      (item: Global.BaseListItem) => val && val === item.key
+    );
+    if (duplicates.length > 1) {
+      setOpen(true);
+      onChange?.({
+        key: '',
+        value: label.value
+      });
+      setTimeout(() => {
+        setOpen(false);
+      }, 1000);
+    } else {
+      setOpen(false);
+    }
+  };
+
   return (
     <div className="label-item">
       <div className="label-key">
         {keyAddon ?? (
-          <SealInput.Input
-            label="Key"
-            value={label.key}
-            onChange={handleOnKeyChange}
-          ></SealInput.Input>
+          <Tooltip
+            open={open}
+            title={intl.formatMessage({ id: 'resources.table.key.tips' })}
+          >
+            <SealInput.Input
+              label="Key"
+              value={label.key}
+              onChange={handleOnKeyChange}
+              onBlur={handleKeyOnBlur}
+            ></SealInput.Input>
+          </Tooltip>
         )}
       </div>
       {seperator && <span className="seprator">{seperator}</span>}
@@ -75,4 +108,4 @@ const LabelItem: React.FC<LabelItemProps> = ({
   );
 };
 
-export default LabelItem;
+export default React.memo(LabelItem);