4.6.3-website dataset (#532)

projects/app/src/web/common/hooks/useConfirm.tsx

@@ -1,29 +1,46 @@
-import { useCallback, useRef, useState } from 'react';
-import {
-  AlertDialog,
-  AlertDialogBody,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogContent,
-  AlertDialogOverlay,
-  useDisclosure,
-  Button
-} from '@chakra-ui/react';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { useDisclosure, Button, ModalBody, ModalFooter } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
+import MyModal from '@/components/MyModal';
 
 export const useConfirm = (props?: {
-  title?: string | null;
-  content?: string | null;
+  title?: string;
+  iconSrc?: string | '';
+  content?: string;
   bg?: string;
   showCancel?: boolean;
+  type?: 'common' | 'delete';
 }) => {
   const { t } = useTranslation();
-  const { title = t('Warning'), content, bg, showCancel = true } = props || {};
+
+  const map = useMemo(() => {
+    const map = {
+      common: {
+        title: t('common.confirm.Common Tip'),
+        bg: undefined,
+        iconSrc: 'common/confirm/commonTip'
+      },
+      delete: {
+        title: t('common.Delete Warning'),
+        bg: 'red.600',
+        iconSrc: 'common/confirm/deleteTip'
+      }
+    };
+    if (props?.type && map[props.type]) return map[props.type];
+    return map.common;
+  }, [props?.type, t]);
+
+  const {
+    title = map?.title || t('Warning'),
+    iconSrc = map?.iconSrc,
+    content,
+    bg = map?.bg,
+    showCancel = true
+  } = props || {};
   const [customContent, setCustomContent] = useState(content);
 
   const { isOpen, onOpen, onClose } = useDisclosure();
 
-  const cancelRef = useRef(null);
   const confirmCb = useRef<any>();
   const cancelCb = useRef<any>();
 
@@ -41,51 +58,41 @@ export const useConfirm = (props?: {
     ),
     ConfirmModal: useCallback(
       () => (
-        <AlertDialog
+        <MyModal
           isOpen={isOpen}
-          leastDestructiveRef={cancelRef}
-          autoFocus={false}
           onClose={onClose}
+          iconSrc={iconSrc}
+          title={title}
+          maxW={['90vw', '500px']}
         >
-          <AlertDialogOverlay>
-            <AlertDialogContent maxW={'min(90vw,400px)'}>
-              <AlertDialogHeader fontSize="lg" fontWeight="bold">
-                {title}
-              </AlertDialogHeader>
+          <ModalBody pt={5}>{customContent}</ModalBody>
+          <ModalFooter>
+            {showCancel && (
+              <Button
+                variant={'base'}
+                onClick={() => {
+                  onClose();
+                  typeof cancelCb.current === 'function' && cancelCb.current();
+                }}
+              >
+                {t('Cancel')}
+              </Button>
+            )}
 
-              <AlertDialogBody whiteSpace={'pre-wrap'} py={0}>
-                {customContent}
-              </AlertDialogBody>
-
-              <AlertDialogFooter>
-                {showCancel && (
-                  <Button
-                    variant={'base'}
-                    onClick={() => {
-                      onClose();
-                      typeof cancelCb.current === 'function' && cancelCb.current();
-                    }}
-                  >
-                    {t('Cancel')}
-                  </Button>
-                )}
-
-                <Button
-                  {...(bg && { bg: `${bg} !important` })}
-                  ml={4}
-                  onClick={() => {
-                    onClose();
-                    typeof confirmCb.current === 'function' && confirmCb.current();
-                  }}
-                >
-                  {t('Confirm')}
-                </Button>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialogOverlay>
-        </AlertDialog>
+            <Button
+              {...(bg && { bg: `${bg} !important` })}
+              ml={4}
+              onClick={() => {
+                onClose();
+                typeof confirmCb.current === 'function' && confirmCb.current();
+              }}
+            >
+              {t('Confirm')}
+            </Button>
+          </ModalFooter>
+        </MyModal>
       ),
-      [bg, customContent, isOpen, onClose, t, title]
+      [bg, customContent, iconSrc, isOpen, onClose, showCancel, t, title]
     )
   };
 };