feat: add fileList delete function

HOUSHENGREN · May 9, 2023 · 2e17984 · 2e17984
1 parent e12ac9f
commit 2e17984
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 10 deletions.
diff --git a/src/App.js b/src/App.js
@@ -17,20 +17,86 @@ function App() {
   const [openedFileIDs, setOpenedFileIDs] = useState([])
   const [unsaveFileIDs, setUnsaveFileIDs] = useState([])
 
-  const openedFiles = openedFileIDs.map(i => {
-    return files.find(file => file.id === i.id)
+  console.log(openedFileIDs, '88899998')
+  const openedFiles = openedFileIDs.map(ID => {
+    console.log('87898', files.find(file => file.id === ID) )
+    return files.find(file => file.id === ID) 
   })
   const activeFile = files.find(file => file.id === activeFileID)
 
+  const fileClick = fileID => {
+    console.log('***fileId+++ ', fileID)
+    setActiveFileID(fileID)
+    // 防止重复打开同一个文件
+    if(!openedFileIDs.includes(fileID)) {
+      setOpenedFileIDs([...openedFileIDs, fileID])
+    }
+  }
+
+  const tabClick = id => {
+    setActiveFileID(id)
+  }
+
+  const closeTab = id => {
+    console.log('CLOST-TAB', id, openedFileIDs, openedFileIDs.filter(i => i !== id))
+    const filterOpenFiles = openedFileIDs.filter(i => i !== id)
+    setOpenedFileIDs(filterOpenFiles)
+
+    // openedFileIDs.splice(0, openedFileIDs.length, ...openedFileIDs.filter(ID => ID !== id))
+    // setOpenedFileIDs(openedFileIDs)
+
+    console.log('openedid', openedFileIDs, files)
+
+    if(id === activeFileID) {
+      if(openedFileIDs.length) {
+        console.log('openFileIDs', openedFileIDs)
+        setActiveFileID(openedFileIDs[0])
+      } else {
+        setActiveFileID('')
+      }
+    }
+  }
+
+  const fileChange = (activeFileID, value) => {
+    activeFile.body = value
+
+    console.log('file change')
+
+    if(!unsaveFileIDs.includes(activeFileID)) {
+      setUnsaveFileIDs([...unsaveFileIDs, activeFileID])
+    }
+  }
+
+  const fileDelete = id => {
+
+    // setFiles([])
+    // const filesCopy = 
+    // files.splice(0, files.length, ...files.filter(file => file.id !== id))
+    // 更新左侧的列表
+    setFiles(files.filter(file => file.id !== id))
+    // setFiles(files)
+
+    // console.log('files', files)
+
+    // 更新右侧的tab列表
+    // if(openedFileIDs.includes(id)) {
+      closeTab(id)
+    // }
+
+    console.log('files-filter', files, openedFileIDs)
+
+  }
+
   return (
     <div className="App container-fluid px-0">
       <div className='row g-0'>
         <div className='col-3 left-pane px-0'>
           <FileSearch onFileSearch={(value) => console.log(666, value)} title='My document'></FileSearch>
           <FileList 
-            files={defaultFiles}
-            onFileClick={(id) => {console.log('777cli', id)}}
-            onFileDelete={(id) => {console.log('777delete', id)}}
+            files={files}
+            onFileClick={fileClick}
+            // onFileDelete={id => console.log('out file-delete', id)}
+            onFileDelete={fileDelete}
             onSaveEdit={(id, value) => {console.log('777edit', id, value)}}
           ></FileList>
           <div className='btn-group row g-0'>
@@ -64,12 +130,13 @@ function App() {
                 files={openedFiles}
                 activeId={activeFileID}
                 unsaveIds={unsaveFileIDs}
-                onTabClick={id => { console.log('onTabClick', id)}}
-                onCloseTab={id => { console.log('onCloseTab', id)}}
+                onTabClick={tabClick}
+                onCloseTab={closeTab}
               ></TabList>
               <SimpleMDE
+                key={activeFile && activeFileID} // 最好加上，早期版本，没有key无法正确切换文件
                 value={activeFile && activeFile.body}
-                onChange={value => { console.log('simpleMde', value); defaultFiles[1].body = value}}
+                onChange={value => { fileChange(activeFileID, value) }}
                 options={{
                   minHeight: '370px'
                 }}   

diff --git a/src/components/FileList.js b/src/components/FileList.js
@@ -53,7 +53,7 @@ const FileList = ({files, onFileClick, onSaveEdit, onFileDelete}) => {
                                 <button 
                                     type="button"
                                     className="icon-button col-2"
-                                    onClick={() => { onFileDelete(file.id) }}
+                                    onClick={() => { onFileDelete(file.id); console.log('onFileDelete') }}
                                 >
                                     <FontAwesomeIcon title="删除" size="lg" icon={faTrash} />
                                 </button>

diff --git a/src/components/TabList.js b/src/components/TabList.js
@@ -4,12 +4,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTimes } from '@fortawesome/free-solid-svg-icons'
 import './TabList.scss'
 
-const TabList = ({ files,activeId, unsaveIds, onTabClick, onCloseTab}) => {
+const TabList = ({ files, activeId, unsaveIds, onTabClick, onCloseTab}) => {
     console.log('999', files, activeId)
     return (
         <ul className="nav nav-pills">
             {
                 files.map(file => {
+                    console.log('unsaveId++', file)
                     const widthUnsaveMark = unsaveIds.includes(file.id)
                     const fClassName = classNames({
                         'nav-link': true,