4.6.3-website dataset (#532)

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'}>