chore: pasted multiple lines in env vars

src/components/label-selector/index.tsx

@@ -1,3 +1,4 @@
+import { useIntl } from '@umijs/max';
 import _ from 'lodash';
 import React, { useCallback, useEffect, useState } from 'react';
 import Inner from './inner';
@@ -17,6 +18,7 @@ const LabelSelector: React.FC<LabelSelectorProps> = ({
   btnText,
   description
 }) => {
+  const intl = useIntl();
   const [labelsData, setLabelsData] = useState({});
   const [labelList, setLabelList] = useState<{ key: string; value: string }[]>(
     []
@@ -46,15 +48,45 @@ const LabelSelector: React.FC<LabelSelectorProps> = ({
     onChange?.(data);
   };
 
+  const handleOnPaste = (
+    e: React.ClipboardEvent<HTMLTextAreaElement>,
+    index: number
+  ) => {
+    e.preventDefault();
+
+    const clipboardText = e.clipboardData.getData('text');
+    if (!clipboardText) return;
+
+    const lines = clipboardText
+      .split(/\r?\n/)
+      .map((line) => line.trim())
+      .filter((line) => line && line.includes('='));
+
+    const parsedData = lines.map((line) => {
+      const [key, value] = line.split('=').map((part) => part.trim());
+      return { key, value };
+    });
+    console.log(lines, parsedData);
+
+    setLabelList((prevPairs) => {
+      const newPairs = [...prevPairs];
+      newPairs.splice(index, 1, ...parsedData);
+      return newPairs;
+    });
+  };
+
   return (
     <Inner
       label={label}
       btnText={btnText}
-      description={description}
+      description={
+        description ?? intl.formatMessage({ id: 'models.form.keyvalue.paste' })
+      }
       labels={labelsData}
       labelList={labelList}
       onChange={handleLabelsChange}
       onLabelListChange={handleLabelListChange}
+      onPaste={handleOnPaste}
     />
   );
 };

src/components/label-selector/inner.tsx

@@ -12,6 +12,7 @@ interface LabelSelectorProps {
   labelList: Array<{ key: string; value: string }>;
   onLabelListChange: (list: { key: string; value: string }[]) => void;
   onChange?: (labels: Record<string, any>) => void;
+  onPaste?: (e: any, index: number) => void;
   description?: React.ReactNode;
 }
 
@@ -20,6 +21,7 @@ const Inner: React.FC<LabelSelectorProps> = ({
   labelList,
   onChange,
   onLabelListChange,
+  onPaste,
   label,
   btnText,
   description
@@ -41,7 +43,7 @@ const Inner: React.FC<LabelSelectorProps> = ({
     );
     onChange?.(newLabels);
   };
-  const handleOnChange = (index: string, label: any) => {
+  const handleOnChange = (index: number, label: any) => {
     const list = _.cloneDeep(labelList);
     list[index] = label;
     onLabelListChange(list);
@@ -60,9 +62,9 @@ const Inner: React.FC<LabelSelectorProps> = ({
     updateLabels(newLabelList);
   };
 
-  const handleOnDelete = (index: string) => {
+  const handleOnDelete = (index: number) => {
     const list = _.cloneDeep(labelList);
-    list.splice(parseInt(index), 1);
+    list.splice(index, 1);
     onLabelListChange(list);
     updateLabels(list);
   };
@@ -70,7 +72,7 @@ const Inner: React.FC<LabelSelectorProps> = ({
   return (
     <Wrapper label={label} description={description}>
       <>
-        {_.map(labelList, (item: any, index: string) => {
+        {labelList?.map((item: any, index: number) => {
           return (
             <LabelItem
               key={index}
@@ -79,6 +81,7 @@ const Inner: React.FC<LabelSelectorProps> = ({
               labelList={labelList}
               onDelete={() => handleOnDelete(index)}
               onChange={(obj) => handleOnChange(index, obj)}
+              onPaste={(e) => onPaste?.(e, index)}
             />
           );
         })}

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

@@ -18,6 +18,7 @@ interface LabelItemProps {
   onDelete?: () => void;
   labelList: { key: string; value: string }[];
   onChange?: (params: { key: string; value: string }) => void;
+  onPaste?: (e: any) => void;
 }
 const LabelItem: React.FC<LabelItemProps> = ({
   label,
@@ -26,7 +27,8 @@ const LabelItem: React.FC<LabelItemProps> = ({
   keyAddon,
   valueAddon,
   onChange,
-  onDelete
+  onDelete,
+  onPaste
 }) => {
   const intl = useIntl();
   const [open, setOpen] = useState(false);
@@ -82,6 +84,7 @@ const LabelItem: React.FC<LabelItemProps> = ({
               value={label.key}
               onChange={handleOnKeyChange}
               onBlur={handleKeyOnBlur}
+              onPaste={onPaste}
             ></SealInput.Input>
           </Tooltip>
         )}