From 7bd74b39964265cf171beedf1d3e8de9f105b135 Mon Sep 17 00:00:00 2001 From: shixiaohua Date: Mon, 19 Feb 2024 17:33:14 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E7=9B=AE=E5=BD=95=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ItemTree/RefreshDir/index.jsx | 13 +++------ src/components/ItemTree/index.jsx | 22 ++++++++++----- src/pages/Note/Hlexical/index.jsx | 6 ++--- src/redux/dirMessage_reducer.js | 28 +++++++++++++++++++- 4 files changed, 49 insertions(+), 20 deletions(-) diff --git a/src/components/ItemTree/RefreshDir/index.jsx b/src/components/ItemTree/RefreshDir/index.jsx index fc43820..23b62c3 100644 --- a/src/components/ItemTree/RefreshDir/index.jsx +++ b/src/components/ItemTree/RefreshDir/index.jsx @@ -1,19 +1,12 @@ -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 ( - 更新目录 + 更新目录 ); }; export default RefreshDir; \ No newline at end of file diff --git a/src/components/ItemTree/index.jsx b/src/components/ItemTree/index.jsx index 1281472..e3c9368 100644 --- a/src/components/ItemTree/index.jsx +++ b/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) => { setState("")}/> , - { - setState("") - }}>关闭菜单 + {setState("")}}>关闭菜单 ] return ( diff --git a/src/pages/Note/Hlexical/index.jsx b/src/pages/Note/Hlexical/index.jsx index 75fd3ae..9b6e6f9 100644 --- a/src/pages/Note/Hlexical/index.jsx +++ b/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 diff --git a/src/redux/dirMessage_reducer.js b/src/redux/dirMessage_reducer.js index 0987462..f6280ee 100644 --- a/src/redux/dirMessage_reducer.js +++ b/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