chore: worker selector

src/components/label-selector/inner.tsx

@@ -1,12 +1,14 @@
 import { useIntl } from '@umijs/max';
 import _ from 'lodash';
-import React from 'react';
+import React, { useEffect } from 'react';
+import AutoCompleteItem from './autocomplete-item';
 import LabelItem from './label-item';
 import Wrapper from './wrapper';
 interface LabelSelectorProps {
   labels: Record<string, any>;
   label?: string;
   btnText?: string;
+  isAutoComplete?: boolean;
   labelList: Array<{ key: string; value: string }>;
   onLabelListChange: (list: { key: string; value: string }[]) => void;
   onChange?: (labels: Record<string, any>) => void;
@@ -28,10 +30,15 @@ const Inner: React.FC<LabelSelectorProps> = ({
   disabled,
   label,
   btnText,
-  description
+  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,
@@ -81,21 +88,38 @@ const Inner: React.FC<LabelSelectorProps> = ({
       btnText={btnText}
     >
       <>
-        {labelList?.map((item: any, index: number) => {
-          return (
-            <LabelItem
-              disabled={disabled}
-              key={index}
-              label={item}
-              seperator=":"
-              labelList={labelList}
-              onDelete={() => handleOnDelete(index)}
-              onChange={(obj) => handleOnChange(index, obj)}
-              onPaste={(e) => onPaste?.(e, index)}
-              onBlur={(e: any, type: string) => onBlur?.(e, type, index)}
-            />
-          );
-        })}
+        {isAutoComplete
+          ? labelList?.map((item: any, index: number) => {
+              return (
+                <AutoCompleteItem
+                  disabled={disabled}
+                  key={index}
+                  label={item}
+                  seperator=":"
+                  labels={labels}
+                  labelList={labelList}
+                  onDelete={() => handleOnDelete(index)}
+                  onChange={(obj) => handleOnChange(index, obj)}
+                  onPaste={(e) => onPaste?.(e, index)}
+                  onBlur={(e: any, type: string) => onBlur?.(e, type, index)}
+                />
+              );
+            })
+          : labelList?.map((item: any, index: number) => {
+              return (
+                <LabelItem
+                  disabled={disabled}
+                  key={index}
+                  label={item}
+                  seperator=":"
+                  labelList={labelList}
+                  onDelete={() => handleOnDelete(index)}
+                  onChange={(obj) => handleOnChange(index, obj)}
+                  onPaste={(e) => onPaste?.(e, index)}
+                  onBlur={(e: any, type: string) => onBlur?.(e, type, index)}
+                />
+              );
+            })}
       </>
     </Wrapper>
   );