V4.6.6-2 (#673)

projects/app/src/components/Select/SelectAiModel.tsx

@@ -0,0 +1,44 @@
+import React, { useMemo } from 'react';
+
+import MySelect, { type SelectProps } from './index';
+import { useTranslation } from 'next-i18next';
+import dynamic from 'next/dynamic';
+import { useDisclosure } from '@chakra-ui/react';
+const PriceBox = dynamic(() => import('@/components/support/wallet/Price'));
+
+const SelectAiModel = ({ list, ...props }: SelectProps) => {
+  const { t } = useTranslation();
+  const expandList = useMemo(
+    () =>
+      list.concat({
+        label: t('support.user.Price'),
+        value: 'price'
+      }),
+    [list, t]
+  );
+
+  const {
+    isOpen: isOpenPriceBox,
+    onOpen: onOpenPriceBox,
+    onClose: onClosePriceBox
+  } = useDisclosure();
+
+  return (
+    <>
+      <MySelect
+        list={expandList}
+        {...props}
+        onchange={(e) => {
+          if (e === 'price') {
+            onOpenPriceBox();
+            return;
+          }
+          props.onchange?.(e);
+        }}
+      />
+      {isOpenPriceBox && <PriceBox onClose={onClosePriceBox} />}
+    </>
+  );
+};
+
+export default SelectAiModel;

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

@@ -1,17 +1,9 @@
 import React, { useRef, forwardRef, useMemo } from 'react';
-import {
-  Menu,
-  Box,
-  MenuList,
-  MenuItem,
-  Button,
-  useDisclosure,
-  useOutsideClick,
-  MenuButton
-} from '@chakra-ui/react';
+import { Menu, MenuList, MenuItem, Button, useDisclosure, MenuButton } from '@chakra-ui/react';
 import type { ButtonProps } from '@chakra-ui/react';
 import { ChevronDownIcon } from '@chakra-ui/icons';
-interface Props extends ButtonProps {
+
+export type SelectProps = ButtonProps & {
   value?: string;
   placeholder?: string;
   list: {
@@ -20,10 +12,10 @@ interface Props extends ButtonProps {
     value: string;
   }[];
   onchange?: (val: any) => void;
-}
+};
 
 const MySelect = (
-  { placeholder, value, width = '100%', list, onchange, ...props }: Props,
+  { placeholder, value, width = '100%', list, onchange, ...props }: SelectProps,
   selectRef: any
 ) => {
   const ref = useRef<HTMLButtonElement>(null);