feat: support array reference multi-select (#3041)

* feat: support array reference multi-select

* fix build

* fix

* fix loop multi-select

* adjust condition

* fix get value

* array and non-array conversion

* fix plugin input

* merge func

packages/web/components/common/MySelect/MultipleRowSelect.tsx

@@ -1,9 +1,10 @@
 import React, { useRef, useCallback, useState } from 'react';
-import { Button, useDisclosure, Box, Flex, useOutsideClick } from '@chakra-ui/react';
+import { Button, useDisclosure, Box, Flex, useOutsideClick, Checkbox } from '@chakra-ui/react';
 import { MultipleSelectProps } from './type';
 import EmptyTip from '../EmptyTip';
 import { useTranslation } from 'next-i18next';
 import MyIcon from '../../common/Icon';
+import { ChevronDownIcon } from '@chakra-ui/icons';
 
 const MultipleRowSelect = ({
   placeholder,
@@ -14,12 +15,14 @@ const MultipleRowSelect = ({
   maxH = 300,
   onSelect,
   popDirection = 'bottom',
-  styles
+  styles,
+  isArray = false
 }: MultipleSelectProps) => {
   const { t } = useTranslation();
   const ref = useRef<HTMLDivElement>(null);
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const [cloneValue, setCloneValue] = useState(value);
+
+  const [navigationPath, setNavigationPath] = useState<string[]>([]);
 
   useOutsideClick({
     ref: ref,
@@ -28,59 +31,80 @@ const MultipleRowSelect = ({
 
   const RenderList = useCallback(
     ({ index, list }: { index: number; list: MultipleSelectProps['list'] }) => {
-      const selectedValue = cloneValue[index];
-      const selectedIndex = list.findIndex((item) => item.value === selectedValue);
+      const currentNav = navigationPath[index];
+      const selectedIndex = list.findIndex((item) => item.value === currentNav);
       const children = list[selectedIndex]?.children || [];
       const hasChildren = list.some((item) => item.children && item.children?.length > 0);
 
+      const handleSelect = (item: any) => {
+        if (hasChildren) {
+          // Update parent menu path
+          const newPath = [...navigationPath];
+          newPath[index] = item.value;
+          // Clear sub paths
+          newPath.splice(index + 1);
+          setNavigationPath(newPath);
+        } else {
+          if (!isArray) {
+            onSelect([navigationPath[0], item.value]);
+            onClose();
+          } else {
+            const parentValue = navigationPath[0];
+            const newValues = [...value];
+            const newValue = [parentValue, item.value];
+
+            if (newValues.some((v) => v[0] === parentValue && v[1] === item.value)) {
+              onSelect(newValues.filter((v) => !(v[0] === parentValue && v[1] === item.value)));
+            } else {
+              onSelect([...newValues, newValue]);
+            }
+          }
+        }
+      };
+
       return (
         <>
           <Box
             className="nowheel"
             flex={'1 0 auto'}
-            // width={0}
             px={2}
             borderLeft={index !== 0 ? 'base' : 'none'}
             maxH={`${maxH}px`}
             overflowY={'auto'}
             whiteSpace={'nowrap'}
           >
-            {list.map((item) => (
-              <Flex
-                key={item.value}
-                py={2}
-                cursor={'pointer'}
-                px={2}
-                borderRadius={'md'}
-                _hover={{
-                  bg: 'primary.50',
-                  color: 'primary.600'
-                }}
-                onClick={() => {
-                  const newValue = [...cloneValue];
+            {list.map((item) => {
+              const isSelected = item.value === currentNav;
+              const showCheckbox = isArray && index !== 0;
+              const isChecked =
+                showCheckbox &&
+                value.some((v) => v[1] === item.value && v[0] === navigationPath[0]);
 
-                  if (item.value === selectedValue) {
-                    newValue[index] = undefined;
-                    setCloneValue(newValue);
-                    onSelect(newValue);
-                  } else {
-                    newValue[index] = item.value;
-                    setCloneValue(newValue);
-                    if (!hasChildren) {
-                      onSelect(newValue);
-                      onClose();
-                    }
-                  }
-                }}
-                {...(item.value === selectedValue
-                  ? {
-                      color: 'primary.600'
-                    }
-                  : {})}
-              >
-                {item.label}
-              </Flex>
-            ))}
+              return (
+                <Flex
+                  key={item.value}
+                  py={2}
+                  cursor={'pointer'}
+                  px={2}
+                  borderRadius={'md'}
+                  _hover={{
+                    bg: 'primary.50',
+                    color: 'primary.600'
+                  }}
+                  onClick={() => handleSelect(item)}
+                  {...(isSelected ? { color: 'primary.600' } : {})}
+                >
+                  {showCheckbox && (
+                    <Checkbox
+                      isChecked={isChecked}
+                      icon={<MyIcon name={'common/check'} w={'12px'} />}
+                      mr={1}
+                    />
+                  )}
+                  {item.label}
+                </Flex>
+              );
+            })}
             {list.length === 0 && (
               <EmptyTip
                 text={emptyTip ?? t('common:common.MultipleRowSelect.No data')}
@@ -93,28 +117,39 @@ const MultipleRowSelect = ({
         </>
       );
     },
-    [cloneValue]
+    [navigationPath, value, isArray, onSelect]
   );
 
   const onOpenSelect = useCallback(() => {
-    setCloneValue(value);
+    setNavigationPath(isArray ? [] : [value[0]?.[0], value[0]?.[1]]);
     onOpen();
-  }, [value, onOpen]);
+  }, [value, isArray, onOpen]);
 
   return (
     <Box ref={ref} position={'relative'}>
-      <Button
+      <Flex
         justifyContent={'space-between'}
+        alignItems={'center'}
+        overflow={'auto'}
         width={'100%'}
         variant={'whitePrimaryOutline'}
         size={'lg'}
         fontSize={'sm'}
         px={3}
+        py={1}
+        minH={10}
+        maxH={24}
         outline={'none'}
         rightIcon={<MyIcon name={'core/chat/chevronDown'} w={4} color={'myGray.500'} />}
+        border={'1px solid'}
+        borderRadius={'md'}
+        bg={'white'}
         _active={{
           transform: 'none'
         }}
+        _hover={{
+          borderColor: 'primary.500'
+        }}
         {...(isOpen
           ? {
               borderColor: 'primary.600',
@@ -127,9 +162,13 @@ const MultipleRowSelect = ({
             })}
         {...styles}
         onClick={() => (isOpen ? onClose() : onOpenSelect())}
+        className="nowheel"
       >
         <Box>{label ?? placeholder}</Box>
-      </Button>
+        <Flex alignItems={'center'} ml={1}>
+          <ChevronDownIcon />
+        </Flex>
+      </Flex>
       {isOpen && (
         <Box
           position={'absolute'}

packages/web/components/common/MySelect/type.d.ts

@@ -14,4 +14,5 @@ export type MultipleSelectProps<T = any> = {
   onSelect: (val: any[]) => void;
   styles?: ButtonProps;
   popDirection?: 'top' | 'bottom';
+  isArray?: boolean;
 };