4.8.5 test (#1819)

projects/app/src/components/SideTabs/index.tsx

@@ -4,15 +4,20 @@ import type { GridProps } from '@chakra-ui/react';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import type { IconNameType } from '@fastgpt/web/components/common/Icon/type.d';
 
-// @ts-ignore
-export interface Props extends GridProps {
-  list: { id: string; label: string; icon: string }[];
-  activeId: string;
+export type Props<ValueType = string> = Omit<GridProps, 'onChange'> & {
+  list: { value: ValueType; label: string; icon: string }[];
+  value: ValueType;
   size?: 'sm' | 'md' | 'lg';
-  onChange: (id: string) => void;
-}
+  onChange: (value: ValueType) => void;
+};
 
-const SideTabs = ({ list, size = 'md', activeId, onChange, ...props }: Props) => {
+const SideTabs = <ValueType = string,>({
+  list,
+  size = 'md',
+  value,
+  onChange,
+  ...props
+}: Props<ValueType>) => {
   const sizeMap = useMemo(() => {
     switch (size) {
       case 'sm':
@@ -37,14 +42,14 @@ const SideTabs = ({ list, size = 'md', activeId, onChange, ...props }: Props) =>
     <Box fontSize={sizeMap.fontSize} {...props}>
       {list.map((item) => (
         <Flex
-          key={item.id}
+          key={item.value as string}
           py={sizeMap.inlineP}
           borderRadius={'md'}
           px={3}
           mb={2}
           fontWeight={'medium'}
           alignItems={'center'}
-          {...(activeId === item.id
+          {...(value === item.value
             ? {
                 bg: ' primary.100 !important',
                 color: 'primary.600 ',
@@ -59,8 +64,8 @@ const SideTabs = ({ list, size = 'md', activeId, onChange, ...props }: Props) =>
             bg: 'myGray.100'
           }}
           onClick={() => {
-            if (activeId === item.id) return;
-            onChange(item.id);
+            if (value === item.value) return;
+            onChange(item.value);
           }}
         >
           <MyIcon mr={2} name={item.icon as IconNameType} w={'20px'} />
@@ -71,4 +76,4 @@ const SideTabs = ({ list, size = 'md', activeId, onChange, ...props }: Props) =>
   );
 };
 
-export default React.memo(SideTabs);
+export default SideTabs;