chore: access form

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

@@ -38,7 +38,7 @@ const LabelItem: React.FC<LabelItemProps> = ({
 }) => {
   const intl = useIntl();
   const [open, setOpen] = useState(false);
-  const { options } = useLabelSelectorContext();
+  const { options, placeholder = [] } = useLabelSelectorContext();
 
   const keyOptions = useMemo(() => {
     return options?.filter(
@@ -98,7 +98,10 @@ const LabelItem: React.FC<LabelItemProps> = ({
               options={keyOptions}
               disabled={disabled}
               checkStatus="success"
-              label={intl.formatMessage({ id: 'common.input.key' })}
+              label={
+                placeholder?.[0] ||
+                intl.formatMessage({ id: 'common.input.key' })
+              }
               value={label.key}
               onChange={handleOnKeyChange}
               onBlur={(e: any) => handleKeyOnBlur(e, 'key')}
@@ -113,7 +116,10 @@ const LabelItem: React.FC<LabelItemProps> = ({
             options={valueOptions}
             disabled={disabled}
             checkStatus={label.value ? 'success' : ''}
-            label={intl.formatMessage({ id: 'common.input.value' })}
+            label={
+              placeholder?.[1] ||
+              intl.formatMessage({ id: 'common.input.value' })
+            }
             value={label.value}
             onChange={handleOnValueChange}
             onBlur={(e: any) => onBlur?.(e, 'value')}

src/components/label-selector/context.ts

@@ -6,6 +6,7 @@ interface LabelSelectorContextProps {
     value: string | number;
     children?: { label: string; value: string | number }[];
   }>;
+  placeholder?: string[];
   currentData?: Record<string, any>;
 }
 

src/components/label-selector/index.tsx

@@ -10,6 +10,7 @@ interface LabelSelectorProps {
   description?: React.ReactNode;
   disabled?: boolean;
   isAutoComplete?: boolean;
+  enablePaste?: boolean;
   onChange?: (labels: Record<string, any>) => void;
   onBlur?: (e: any, type: string, index: number) => void;
   onDelete?: (index: number) => void;
@@ -24,7 +25,8 @@ const LabelSelector: React.FC<LabelSelectorProps> = ({
   label,
   btnText,
   description,
-  isAutoComplete
+  isAutoComplete,
+  enablePaste = true
 }) => {
   const intl = useIntl();
   const [labelsData, setLabelsData] = useState({});
@@ -73,6 +75,7 @@ const LabelSelector: React.FC<LabelSelectorProps> = ({
     e: React.ClipboardEvent<HTMLTextAreaElement>,
     index: number
   ) => {
+    if (!enablePaste) return;
     const clipboardText = e.clipboardData.getData('text');
     if (!clipboardText || clipboardText.indexOf('=') === -1) return;
     e.preventDefault();

src/components/label-selector/inner.tsx

@@ -1,6 +1,5 @@
-import { useIntl } from '@umijs/max';
 import _ from 'lodash';
-import React, { useEffect } from 'react';
+import React from 'react';
 import AutoCompleteItem from './autocomplete-item';
 import LabelItem from './label-item';
 import Wrapper from './wrapper';
@@ -33,12 +32,6 @@ const Inner: React.FC<LabelSelectorProps> = ({
   description,
   isAutoComplete
 }) => {
-  const intl = useIntl();
-
-  useEffect(() => {
-    console.log('labels changed in Inner', labels);
-  }, [labels]);
-
   const updateLabels = (list: { key: string; value: string }[]) => {
     const newLabels = _.reduce(
       list,

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

@@ -1,5 +1,4 @@
 import SealInput from '@/components/seal-form/seal-input';
-import { Global } from '@/config/global';
 import { MinusOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Tooltip } from 'antd';