feat:目录更新

src/components/ItemTree/RefreshDir/index.jsx

@@ -1,17 +1,10 @@
-import React, {useRef, useState} from 'react';
-import {Button, Input, Menu, Modal} from 'antd';
-import {readDir} from "../../../utils/File";
-import {nextDirAdd} from "../../../redux/dirMessage_reducer";
-import {useDispatch} from "react-redux";
-
+import React from 'react';
 const RefreshDir = (prop) => {
-    console.log("prop",prop)
-    const dispatch = useDispatch()
+    console.log("RefreshDir:prop", prop)
     const refreshDir = () => {
         prop.refreshDir(prop.filePath)
         prop.closeMenu()
     };
-
     return (
         <span onClick={refreshDir}>更新目录</span>
     );

src/components/ItemTree/index.jsx

@@ -7,7 +7,7 @@ const {Search} = Input;
 import {useSelector, useDispatch} from "react-redux";
 import {addExpandedKeys, addTableBarItem, setExpandedKeys} from "../../redux/tableBarItem_reducer";
 import {readDir} from "../../utils/File";
-import {nextDirAdd} from "../../redux/dirMessage_reducer";
+import {nextDirAdd,refreshDir as refreshDirReducer} from "../../redux/dirMessage_reducer";
 import {isEmpty} from "../../utils/ObjectUtils";
 import UpdateFileName from "./UpdateFileName";
 import RefreshDir from "./RefreshDir";
@@ -146,7 +146,7 @@ const ItemTree = (prop) => {
     const refreshDir = (filePath) => {
         readDir(filePath).then(fileStateList => {
             if (Array.isArray(fileStateList[0].childList) && fileStateList[0].childList.length > 0) {
-                dispatch(nextDirAdd({selectDirKey: filePath, fileStateList}))
+                dispatch(refreshDirReducer({selectDirKey: filePath, fileStateList}))
                 // 添加下级节点
                 addChildNode(defaultValueState, flushTree(fileStateList))
                 const result = [...defaultValueState]
@@ -164,7 +164,19 @@ const ItemTree = (prop) => {
             if (e.node.dirFlag) {
                 // 加载目录下一级文件信息
                 if (!Array.isArray(e.node.children) || e.node.children.length === 0) {
-                    refreshDir(e.node.key)
+                    readDir(e.node.key).then(fileStateList => {
+                        if (Array.isArray(fileStateList[0].childList) && fileStateList[0].childList.length > 0) {
+                            dispatch(nextDirAdd({selectDirKey: e.node.key, fileStateList}))
+                            // 添加下级节点
+                            addChildNode(defaultValueState, flushTree(fileStateList))
+                            const result = [...defaultValueState]
+                            console.log("[...defaultValueState]:", result)
+                            setDefaultValueState(result)
+                            // 打开当前目录
+                            dispatch(addExpandedKeys([e.node.key]));
+                            setAutoExpandParent(false);
+                        }
+                    })
                 } else {
                     // 打开当前目录
                     dispatch(addExpandedKeys([e.node.key]));
@@ -257,9 +269,7 @@ const ItemTree = (prop) => {
             <Menu.Item key='5'>
                 <CloseDir filePath={key} closeMenu={() => setState("")}/>
             </Menu.Item>,
-            <Menu.Item key='6' onClick={() => {
-                setState("")
-            }}>关闭菜单</Menu.Item>
+            <Menu.Item key='6' onClick={() => {setState("")}}>关闭菜单</Menu.Item>
         ]
         return (
             <Menu style={tmpStyle}>

src/pages/Note/Hlexical/index.jsx

@@ -109,11 +109,11 @@ export default function Hlexical(props) {
     console.log("this.props.filePath:", props.filePath)
     const [editorState, setEditorState] = useState("");
     const [lastId ,setLastId]= useState("");
-    const dispstch = useDispatch();
+    const dispatch = useDispatch();
     function onChange(editorState) {
         // Call toJSON on the EditorState object, which produces a serialization safe string
         const editorStateJSON = editorState.toJSON();
-        console.log('editorStateJSON', editorStateJSON)
+        console.log('onChange-editorStateJSON')
         // However, we still have a JavaScript object, so we need to convert it to an actual string with JSON.stringify
         setEditorState(JSON.stringify(editorStateJSON));
     }
@@ -136,7 +136,7 @@ export default function Hlexical(props) {
                             let resultSave = JSON.stringify(editorStateSave);
                            overWriteFile(result.filePath, resultSave)
                             // 修改当前文件名
-                            dispstch(updatedSavedFile({filePath:result.filePath}))
+                            dispatch(updatedSavedFile({filePath:result.filePath}))
                         }
                     })
                     return

src/redux/dirMessage_reducer.js

@@ -65,7 +65,7 @@ export const dirMessageSlice = createSlice({
             console.log("dirMessage:nextDirAdd", state, action)
             // 获取当前选中的key
             let selectDirKey = action.payload.selectDirKey;
-            // 便利文件树，找到对应的key并加入其中，
+            // 遍历文件树，找到对应的key并加入其中，
             // 如果包含下级目录则不更新，在刷新中更新。
             state.data.forEach(file => {
                 if (file.filePath === selectDirKey && file.dirFlag && file.childList.length === 0) {
@@ -75,6 +75,19 @@ export const dirMessageSlice = createSlice({
                 }
             })
         },
+        refreshDir: (state, action) => {
+            console.log("dirMessage:refreshDir", state, action)
+            // 获取当前选中的key
+            let selectDirKey = action.payload.selectDirKey;
+            // 遍历文件树，找到对应的key并加入其中，
+            state.data.forEach(file => {
+                if (file.filePath === selectDirKey && file.dirFlag) {
+                    file.childList=action.payload.fileStateList[0].childList
+                } else if (file.childList.length > 0) {
+                    refreshChild(file.childList, action, selectDirKey)
+                }
+            })
+        },
         updateFileName:(state,action)=>{
             console.log("dirMessage:updateFileName", state, action)
             let newFilePath = action.payload.newFilePath
@@ -167,6 +180,18 @@ function filterChild(fileList, selectDirKey) {
     })
 }
 
+function refreshChild(fileList, action, selectDirKey) {
+    fileList.forEach(file => {
+        if (file.filePath === selectDirKey && file.dirFlag) {
+            file.childList = action.payload.fileStateList[0].childList
+            return
+        }
+        if (file.dirFlag && Array.isArray(file.childList) && file.childList.length > 0) {
+            refreshChild(file.childList, action, selectDirKey)
+        }
+    })
+}
+
 function findChild(fileList, action, selectDirKey) {
     fileList.forEach(file => {
         if (file.filePath === selectDirKey && file.dirFlag &&
@@ -199,6 +224,7 @@ export const {
     updateFileName,
     dirFileAdd,
     dirFileRemove,
+    refreshDir
 } = dirMessageSlice.actions
 
 export default dirMessageSlice.reducer