chore: model form state update

src/components/label-selector/index.tsx

@@ -0,0 +1,100 @@
+import { PlusOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import _ from 'lodash';
+import React, { useEffect } from 'react';
+import LabelItem from './label-item';
+import Wrapper from './wrapper';
+
+interface LabelSelectorProps {
+  labels: Record<string, any>;
+  label?: string;
+  onChange?: (labels: Record<string, any>) => void;
+}
+
+const LabelSelector: React.FC<LabelSelectorProps> = ({
+  labels,
+  onChange,
+  label
+}) => {
+  const [labelList, setLabelList] = React.useState<any[]>([]);
+
+  useEffect(() => {
+    const list = _.map(_.keys(labels), (key: string) => {
+      return {
+        key,
+        value: labels[key]
+      };
+    });
+    setLabelList(list);
+  }, [labels]);
+
+  const handleOnChange = (index: string, label: any) => {
+    const list = _.cloneDeep(labelList);
+    list[index] = label;
+    const newLabels = _.reduce(
+      list,
+      (result: any, item: any) => {
+        result[item.key] = item.value;
+        return result;
+      },
+      {}
+    );
+    onChange?.(newLabels);
+  };
+
+  const handleAddLabel = () => {
+    setLabelList([
+      ...labelList,
+      {
+        key: '',
+        value: ''
+      }
+    ]);
+  };
+
+  const handleOnDelete = (index: string) => {
+    const list = _.cloneDeep(labelList);
+    list.splice(parseInt(index), 1);
+    setLabelList(list);
+    const newLabels = _.reduce(
+      list,
+      (result: any, item: any) => {
+        result[item.key] = item.value;
+        return result;
+      },
+      {}
+    );
+    onChange?.(newLabels);
+  };
+
+  return (
+    <Wrapper label={label}>
+      {_.map(labelList, (item: any, index: string) => {
+        return (
+          <LabelItem
+            key={index}
+            label={{
+              key: item.key,
+              value: item.value
+            }}
+            seperator=":"
+            onDelete={() => handleOnDelete(index)}
+            onChange={(obj) => handleOnChange(index, obj)}
+          />
+        );
+      })}
+      <div>
+        <Button
+          size="small"
+          type="default"
+          shape="circle"
+          style={{ marginTop: 16 }}
+        >
+          <PlusOutlined className="font-size-14" onClick={handleAddLabel} />
+        </Button>
+      </div>
+    </Wrapper>
+  );
+};
+
+export default React.memo(LabelSelector);

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

@@ -0,0 +1,78 @@
+import SealInput from '@/components/seal-form/seal-input';
+import { MinusOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import React from 'react';
+import './styles/label-item.less';
+
+interface LabelItemProps {
+  label: {
+    key: string;
+    value: string;
+  };
+  labelKey?: string;
+  labelValue?: string;
+  keyAddon?: React.ReactNode;
+  valueAddon?: React.ReactNode;
+  seperator?: string;
+  onDelete?: () => void;
+  onChange?: (params: { key: string; value: string }) => void;
+}
+const LabelItem: React.FC<LabelItemProps> = ({
+  label,
+  seperator,
+  keyAddon,
+  valueAddon,
+  onChange,
+  onDelete
+}) => {
+  const handleOnValueChange = (e: any) => {
+    const value = e.target.value;
+    onChange?.({
+      key: label.key,
+      value: value
+    });
+  };
+
+  const handleOnKeyChange = (e: any) => {
+    const key = e.target.value;
+    onChange?.({
+      key: key,
+      value: label.value
+    });
+  };
+
+  return (
+    <div className="label-item">
+      <div className="label-key">
+        {keyAddon ?? (
+          <SealInput.Input
+            label="Key"
+            value={label.key}
+            onChange={handleOnKeyChange}
+          ></SealInput.Input>
+        )}
+      </div>
+      {seperator && <span className="seprator">{seperator}</span>}
+      <div className="label-value">
+        {valueAddon ?? (
+          <SealInput.Input
+            label="Value"
+            value={label.value}
+            onChange={handleOnValueChange}
+          ></SealInput.Input>
+        )}
+      </div>
+      <Button
+        size="small"
+        className="btn"
+        type="default"
+        shape="circle"
+        onClick={onDelete}
+      >
+        <MinusOutlined />
+      </Button>
+    </div>
+  );
+};
+
+export default LabelItem;

src/components/label-selector/styles/label-item.less

@@ -0,0 +1,29 @@
+.label-item {
+  display: flex;
+  margin-bottom: 12px;
+  align-items: center;
+  justify-content: flex-start;
+
+  .seprator {
+    display: flex;
+    flex: none;
+    width: 12px;
+    align-items: center;
+    justify-content: center;
+    color: var(--ant-color-text-tertiary);
+  }
+
+  .btn {
+    width: 24px;
+    margin-left: 10px;
+    flex: none;
+  }
+
+  .label-key {
+    flex: 1;
+  }
+
+  .label-value {
+    flex: 1;
+  }
+}

src/components/label-selector/styles/wrapper.less

@@ -0,0 +1,18 @@
+.wrapper {
+  position: relative;
+  padding: 16px 24px;
+  padding-top: 30px;
+  border: 1px solid var(--ant-color-border);
+  border-radius: var(--border-radius-base);
+  display: flex;
+  flex-direction: column;
+
+  :global {
+    .label {
+      position: absolute;
+      left: 24px;
+      line-height: 1;
+      top: 10px;
+    }
+  }
+}

src/components/label-selector/wrapper.tsx

@@ -0,0 +1,21 @@
+import LabelInfo from '@/components/seal-form/components/label-info';
+import React from 'react';
+import styles from './styles/wrapper.less';
+
+const Wrapper: React.FC<{
+  label?: string;
+  children: React.ReactNode;
+}> = ({ children, label }) => {
+  return (
+    <div className={styles['wrapper']}>
+      {label && (
+        <span className="label">
+          <LabelInfo label={label}></LabelInfo>
+        </span>
+      )}
+      {children}
+    </div>
+  );
+};
+
+export default Wrapper;