fix(ModalInput): only check filename if requested (#259)

Author: ILoveScratch2

src/components/ModalInput.tsx

@@ -33,6 +33,7 @@ export type ModalInputProps = {
   bottomSlot?: JSXElement
   footerSlot?: JSXElement
   onDrop?: (e: DragEvent, setValue: (value: string) => void) => void
+  validateFilename?: boolean
 }
 export const ModalInput = (props: ModalInputProps) => {
   const [value, setValue] = createSignal(props.defaultValue ?? "")
@@ -78,18 +79,29 @@ export const ModalInput = (props: ModalInputProps) => {
   })
 
   const submit = () => {
-    const validation = validateFilename(value())
-    if (!validation.valid) {
-      notify.warning(t(`global.${validation.error}`))
-      return
+    if (props.validateFilename) {
+      const validation = validateFilename(value())
+      if (!validation.valid) {
+        notify.warning(t(`global.${validation.error}`))
+        return
+      }
+    } else {
+      if (!value() || value().trim().length === 0) {
+        notify.warning(t("global.empty_input"))
+        return
+      }
     }
     props.onSubmit?.(value())
   }
 
   const handleInput = (newValue: string) => {
     setValue(newValue)
-    const validation = validateFilename(newValue)
-    setValidationError(validation.valid ? "" : validation.error || "")
+    if (props.validateFilename) {
+      const validation = validateFilename(newValue)
+      setValidationError(validation.valid ? "" : validation.error || "")
+    } else {
+      setValidationError("")
+    }
   }
 
   return (

src/components/ModalTwoInput.tsx

@@ -25,6 +25,7 @@ export type ModalTwoInputProps = {
   loading?: boolean
   tips?: string
   topSlot?: JSXElement
+  validateFilename?: boolean
 }
 export const ModalTwoInput = (props: ModalTwoInputProps) => {
   const [value1, setValue1] = createSignal(props.defaultValue1 ?? "") // Update value and setValue to value1 and setValue1
@@ -35,27 +36,42 @@ export const ModalTwoInput = (props: ModalTwoInputProps) => {
 
   const handleInput1 = (newValue: string) => {
     setValue1(newValue)
-    const validation = validateFilename(newValue)
-    setValidationError1(validation.valid ? "" : validation.error || "")
+    if (props.validateFilename) {
+      const validation = validateFilename(newValue)
+      setValidationError1(validation.valid ? "" : validation.error || "")
+    } else {
+      setValidationError1("")
+    }
   }
 
   const handleInput2 = (newValue: string) => {
     setValue2(newValue)
-    const validation = validateFilename(newValue)
-    setValidationError2(validation.valid ? "" : validation.error || "")
+    if (props.validateFilename) {
+      const validation = validateFilename(newValue)
+      setValidationError2(validation.valid ? "" : validation.error || "")
+    } else {
+      setValidationError2("")
+    }
   }
 
   const submit = () => {
-    const validation1 = validateFilename(value1())
-    const validation2 = validateFilename(value2())
+    if (props.validateFilename) {
+      const validation1 = validateFilename(value1())
+      const validation2 = validateFilename(value2())
 
-    if (!validation1.valid) {
-      notify.warning(t(`global.${validation1.error}`))
-      return
-    }
-    if (!validation2.valid) {
-      notify.warning(t(`global.${validation2.error}`))
-      return
+      if (!validation1.valid) {
+        notify.warning(t(`global.${validation1.error}`))
+        return
+      }
+      if (!validation2.valid) {
+        notify.warning(t(`global.${validation2.error}`))
+        return
+      }
+    } else {
+      if (!value1() || !value2()) {
+        notify.warning(t("global.empty_input"))
+        return
+      }
     }
     props.onSubmit?.(value1(), value2()) // Update onSubmit to pass both input values
   }

src/pages/home/toolbar/Mkdir.tsx

@@ -21,6 +21,7 @@ export const Mkdir = () => {
   return (
     <ModalInput
       title="home.toolbar.input_dir_name"
+      validateFilename={true}
       opened={isOpen()}
       onClose={onClose}
       loading={loading()}

src/pages/home/toolbar/NewFile.tsx

@@ -25,6 +25,7 @@ export const NewFile = () => {
   return (
     <ModalInput
       title="home.toolbar.input_filename"
+      validateFilename={true}
       footerSlot={
         <Checkbox
           mr="auto"

src/pages/home/toolbar/Rename.tsx

@@ -30,6 +30,7 @@ export const Rename = () => {
     <Show when={isOpen()}>
       <ModalInput
         title="home.toolbar.input_new_name"
+        validateFilename={true}
         footerSlot={
           <Checkbox
             mr="auto"