feat: add adding buttun feature

package.json

@@ -19,6 +19,7 @@
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "react-simplemde-editor": "^5.2.0",
+    "uuid": "^9.0.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -9,14 +9,16 @@ import { faPlus } from '@fortawesome/free-solid-svg-icons';
 import TabList from './components/TabList';
 import SimpleMDE from "react-simplemde-editor";
 import "easymde/dist/easymde.min.css";
-import { useState } from 'react';
+import { useRef, useState } from 'react';
+import { v4 } from 'uuid'
 
 function App() {
   const [files, setFiles] = useState(defaultFiles)
   const [activeFileID, setActiveFileID] = useState('')
   const [openedFileIDs, setOpenedFileIDs] = useState([])
   const [unsaveFileIDs, setUnsaveFileIDs] = useState([])
   const [searchedFiles, setSearchedFiles] = useState([])
+  const fileListNode = useRef(null)
 
   console.log(openedFileIDs, '88899998')
   const openedFiles = openedFileIDs.map(ID => {
@@ -48,8 +50,6 @@ function App() {
     openedFileIDs.splice(0, openedFileIDs.length, ...filterOpenFiles)
     setOpenedFileIDs(openedFileIDs)
 
-    console.log('openedid', openedFileIDs, files)
-
     if(id === activeFileID) {
       // 前面splice 是保证这里openedFileIDs 是修改后的
       if(openedFileIDs.length) {
@@ -64,8 +64,6 @@ function App() {
   const fileChange = (activeFileID, value) => {
     activeFile.body = value
 
-    console.log('file change')
-
     if(!unsaveFileIDs.includes(activeFileID)) {
       setUnsaveFileIDs([...unsaveFileIDs, activeFileID])
     }
@@ -102,18 +100,37 @@ function App() {
 
   const fileSearch = (keyword) => {
     const newFiles = files.filter(file => file.title.includes(keyword))
-    console.log('newFiles', newFiles)
     setSearchedFiles(newFiles)
   }
 
   const fileListArr = searchedFiles.length ? searchedFiles : files
 
+  const createNewFile = () => {
+    const id = v4()
+
+    const newFiles = [
+        ...files,
+        {
+           id,
+           title: '',
+           body: '## 请输入 markdown',
+           createdAt: new Date().getTime()
+        }
+    ]
+    setFiles(newFiles)
+    console.log('fileListNode', fileListNode)
+
+    // fileListNode.current.onFileClick(id) // todo ? 没有用
+  }
+
+
   return (
     <div className="App container-fluid px-0">
       <div className='row g-0'>
         <div className='col-3 left-pane px-0'>
           <FileSearch onFileSearch={fileSearch} title='My document'></FileSearch>
           <FileList 
+            ref={fileListNode}
             files={fileListArr}
             onFileClick={fileClick}
             // onFileDelete={id => console.log('out file-delete', id)}
@@ -126,6 +143,7 @@ function App() {
                 text='新建'
                 colorClass='btn-primary bnt-block'
                 icon={faPlus}
+                onBntClick={createNewFile}
               ></BottomBtn>
             </div>
             <div className='col'>

src/components/FileList.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react"
+import { useState, useEffect, useRef } from "react"
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faEdit, faTrash, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { faMarkdown } from '@fortawesome/free-brands-svg-icons'
@@ -8,6 +8,7 @@ import useKeyPress from "../hooks/useKeyPress"
 const FileList = ({files, onFileClick, onSaveEdit, onFileDelete}) => {
     const [editId, setEditId] = useState(null)
     const [value, setValue] = useState('')
+    const node = useRef(null)
 
     const enterPressed = useKeyPress(13)
     const escPressed = useKeyPress(27)
@@ -27,6 +28,13 @@ const FileList = ({files, onFileClick, onSaveEdit, onFileDelete}) => {
         }
     })
 
+    // 编辑时聚焦输入框
+    useEffect(() => {
+        if(editId) {
+            node.current.focus()
+        }
+    }, [editId])
+
     return (
         <ul className="list-group list-group-flush file-list">
             {
@@ -66,6 +74,7 @@ const FileList = ({files, onFileClick, onSaveEdit, onFileDelete}) => {
                             <>
                                 <span className="col-10">
                                     <input
+                                        ref={node}
                                         className="form-control"
                                         value={value}
                                         onChange={e => {

src/components/FileSearch.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react"
+import { useState, useEffect, useRef } from "react"
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faMagnifyingGlass, faTimes } from '@fortawesome/free-solid-svg-icons'
 import propTypes from 'prop-types' // 类似于ts的类型检查
@@ -13,14 +13,15 @@ import useKeyPress from "../hooks/useKeyPress"
 const FileSearch = ({ title, onFileSearch=(() => {}) }) => {
     const [inputActive, setInputActive] = useState(false)
     const [value, setValue] = useState('')
+    const node = useRef(null)
 
     const enterPressed = useKeyPress(13)
     const escPressed = useKeyPress(27)
 
     const closeSearch = () => {
         setInputActive(false)
         setValue('')
-        onFileSearch('')
+        onFileSearch('') // 此时，外层filter时就能得到整个files数组
     }
 
     // 按esc 、 enter
@@ -32,6 +33,13 @@ const FileSearch = ({ title, onFileSearch=(() => {}) }) => {
         }
     })
 
+    // 编辑时聚焦输入框
+    useEffect(() => {
+        if(inputActive) {
+            node.current.focus()
+        }
+    }, [inputActive])
+
     return (
         <div className="alert alert-primary d-flex justify-content-between align-items-center mb-0">
             {
@@ -57,6 +65,7 @@ const FileSearch = ({ title, onFileSearch=(() => {}) }) => {
                     <input
                         className="form-control"
                         value={value}
+                        ref={node}
                         onChange={e => {
                             setValue(e.target.value)
                         }}