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]
     )
   };
 };

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

@@ -1,21 +1,27 @@
 import React, { useCallback, useRef } from 'react';
 import { ModalFooter, ModalBody, Input, useDisclosure, Button, Box } from '@chakra-ui/react';
 import MyModal from '@/components/MyModal';
+import { useToast } from './useToast';
 
 export const useEditTitle = ({
   title,
   tip,
-  placeholder = ''
+  placeholder = '',
+  canEmpty = true,
+  valueRule
 }: {
   title: string;
   tip?: string;
   placeholder?: string;
+  canEmpty?: boolean;
+  valueRule?: (val: string) => string | void;
 }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   const inputRef = useRef<HTMLInputElement | null>(null);
   const onSuccessCb = useRef<(content: string) => void | Promise<void>>();
   const onErrorCb = useRef<(err: any) => void>();
+  const { toast } = useToast();
   const defaultValue = useRef('');
 
   const onOpenModal = useCallback(
@@ -37,21 +43,43 @@ export const useEditTitle = ({
   );
 
   const onclickConfirm = useCallback(async () => {
-    if (!inputRef.current) return;
+    if (!inputRef.current || !onSuccessCb.current) return;
+    const val = inputRef.current.value;
+
+    if (!canEmpty && !val) {
+      inputRef.current.focus();
+      return;
+    }
+
+    if (valueRule) {
+      const result = valueRule(val);
+      if (result) {
+        return toast({
+          status: 'warning',
+          title: result
+        });
+      }
+    }
+
     try {
-      const val = inputRef.current.value;
-      await onSuccessCb.current?.(val);
+      await onSuccessCb.current(val);
 
       onClose();
     } catch (err) {
       onErrorCb.current?.(err);
     }
-  }, [onClose]);
+  }, [canEmpty, onClose]);
 
   // eslint-disable-next-line react/display-name
   const EditModal = useCallback(
-    ({ maxLength = 30 }: { maxLength?: number }) => (
-      <MyModal isOpen={isOpen} onClose={onClose} iconSrc="/imgs/modal/edit.svg" title={title}>
+    ({
+      maxLength = 30,
+      iconSrc = '/imgs/modal/edit.svg'
+    }: {
+      maxLength?: number;
+      iconSrc?: string;
+    }) => (
+      <MyModal isOpen={isOpen} onClose={onClose} iconSrc={iconSrc} title={title} maxW={'500px'}>
         <ModalBody>
           {!!tip && (
             <Box mb={2} color={'myGray.500'} fontSize={'sm'}>