fix: verify add file name

close #276

apps/desktop/src/components/FileTree/NewFIleInput.tsx

@@ -13,17 +13,25 @@ import {
 } from 'react'
 import { Input } from '../Input'
 import { Validity } from '../Validity'
+import { unVerifiedFileNameChars, verifyFileName } from './verify-file-name'
 
 export type NewInputRef = {
   show: (args: { fileNode: IFile }) => void
 }
 
+const InvalidTextMap = {
+  same: 'has same file',
+  empty: 'file name can not be empty',
+  invalid: `invalid file name, file name can not include ${unVerifiedFileNameChars.join(' ')}`,
+}
+
 const NewFileInput = forwardRef<NewInputRef, HTMLAttributes<HTMLInputElement>>((props, ref) => {
   const { className, style, ...otherProps } = props
   const [visible, setVisible] = useState(false)
   const [inputName, setInputName] = useState('')
   const contextFileNode = useRef<IFile>()
   const [invalidState, setInvalidState] = useState(false)
+  const [invalidText, setInvalidText] = useState(InvalidTextMap.same)
   const { addFile } = useEditorStore()
 
   const styleProps = useMemo(() => ({ className, style}), [className, style])
@@ -65,10 +73,26 @@ const NewFileInput = forwardRef<NewInputRef, HTMLAttributes<HTMLInputElement>>((
       event.preventDefault()
       if (!event.shiftKey && event.keyCode === 13) {
         if (!contextFileNode.current) return
+        if (inputName === '') {
+          setInvalidText(InvalidTextMap.empty)
+          setInvalidState(true)
+          setTimeout(() => {
+            setInvalidState(false)
+          }, 2000)
+          return
+        } else if (verifyFileName(inputName) === false) {
+          setInvalidText(InvalidTextMap.invalid)
+          setInvalidState(true)
+          setTimeout(() => {
+            setInvalidState(false)
+          }, 2000)
+          return
+        }
+
         const res = addFile(contextFileNode.current, { name: inputName, kind: 'file' })
 
         if (res === false) {
-          // TODO has same file
+          setInvalidText(InvalidTextMap.same)
           setInvalidState(true)
           setTimeout(() => {
             setInvalidState(false)
@@ -90,7 +114,7 @@ const NewFileInput = forwardRef<NewInputRef, HTMLAttributes<HTMLInputElement>>((
   if (!visible) return null
 
   return (
-    <Validity invalidText='has same file' invalidState={invalidState} {...styleProps}>
+    <Validity invalidText={invalidText} invalidState={invalidState} {...styleProps}>
       <Input
         value={inputName}
         onChange={handleChange}

apps/desktop/src/components/FileTree/verify-file-name.test.ts

@@ -0,0 +1,16 @@
+import { verifyFileName } from './verify-file-name'
+import { describe, expect } from 'vitest'
+
+describe('verifyFileName', (it) => {
+  it('should return true when fileName is valid', () => {
+    expect(verifyFileName('test')).toBe(true)
+  })
+
+  it('should return false when fileName is invalid', () => {
+    expect(verifyFileName('test\\')).toBe(false)
+    expect(verifyFileName('test\/')).toBe(false)
+    expect(verifyFileName('test:')).toBe(false)
+    expect(verifyFileName('test|')).toBe(false)
+    expect(verifyFileName('test?')).toBe(false)
+  })
+})

apps/desktop/src/components/FileTree/verify-file-name.ts

@@ -0,0 +1,5 @@
+export const unVerifiedFileNameChars = ['\\', '\/', ':', '|', '?', '"']
+
+export function verifyFileName(fileName: string): boolean {
+  return !unVerifiedFileNameChars.some((char) => fileName.includes(char))
+}