diff --git a/src/components/ItemTree/index.jsx b/src/components/ItemTree/index.jsx index 638e7a1..17c91ba 100644 --- a/src/components/ItemTree/index.jsx +++ b/src/components/ItemTree/index.jsx @@ -6,7 +6,7 @@ import "./index.less" const {Search} = Input; import {useSelector, useDispatch} from "react-redux"; -import {addTableBarItem} from "../../redux/tableBarItem_reducer"; +import {addExpandedKeys, addTableBarItem, setExpandedKeys} from "../../redux/tableBarItem_reducer"; import {readDir} from "../../utils/File"; import {nextDirAdd} from "../../redux/dirMessage_reducer"; // const defaultData = []; @@ -127,9 +127,10 @@ const flushTree = (fileDirDate) => { } const ItemTree = (prop) => { console.log("prop.filePath:", prop.filePath) - const [expandedKeys, setExpandedKeys] = useState([]); - const [searchValue, setSearchValue] = useState(''); const dispatch = useDispatch() + // const [expandedKeys, setExpandedKeys] = useState([]); + const expandedKeys = useSelector(state => state.tableBarItem.expandedKeyList) + const [searchValue, setSearchValue] = useState(''); const [autoExpandParent, setAutoExpandParent] = useState(true); // let filePath = useSelector(state => state.dirMessage.data); const [defaultValueState, setDefaultValueState] = useState(flushTree(prop.filePath)); @@ -137,7 +138,7 @@ const ItemTree = (prop) => { setDefaultValueState(flushTree(prop.filePath)) }, [prop]); const onExpand = (newExpandedKeys) => { - setExpandedKeys(newExpandedKeys); + dispatch(setExpandedKeys(newExpandedKeys)); setAutoExpandParent(false); }; @@ -163,7 +164,7 @@ const ItemTree = (prop) => { return null; }) .filter((item, i, self) => !!(item && self.indexOf(item) === i)); - setExpandedKeys(newExpandedKeys); + dispatch(setExpandedKeys(newExpandedKeys)); setSearchValue(value); setAutoExpandParent(true); }; @@ -185,8 +186,7 @@ const ItemTree = (prop) => { }) } // 打开当前目录 - expandedKeys.push(e.node.key) - setExpandedKeys([...expandedKeys]); + dispatch(addExpandedKeys([e.node.key])); setAutoExpandParent(false); } else { // 打开文件 @@ -244,6 +244,8 @@ const ItemTree = (prop) => { // 是否自动展开父节点 autoExpandParent={autoExpandParent} showIcon={true} + defaultSelectedKeys={[useSelector(state => state.tableBarItem.activeKey)]} + defaultExpandedKeys={useSelector(state => state.tableBarItem.expandedKeyList)} // treeNodes 数据,如果设置则不需要手动构造 TreeNode 节点(key 在整个树范围内唯一) treeData={defaultValueState} onSelect={onSelect} diff --git a/src/redux/tableBarItem_reducer.js b/src/redux/tableBarItem_reducer.js index 592771b..424a236 100644 --- a/src/redux/tableBarItem_reducer.js +++ b/src/redux/tableBarItem_reducer.js @@ -14,7 +14,8 @@ export const tableBarItemSlice = createSlice({ initialState: { type:"tableBarItem", data: [], - activeKey:"" + activeKey:"", + expandedKeyList:[] }, reducers: { addTableBarItem: (state, action) => { @@ -55,11 +56,25 @@ export const tableBarItemSlice = createSlice({ } }) state.activeKey = action.payload.filePath + }, + addExpandedKeys:(state, action)=>{ + state.expandedKeyList.push(...action.payload) + state.expandedKeyList=Array.from(new Set([...state.expandedKeyList])) + }, + setExpandedKeys:(state, action)=>{ + state.expandedKeyList=action.payload + }, + removeExpandedKeys:(state, action)=>{ + state.expandedKeyList=state.expandedKeyList.filter(key=>key!==action.payload) } } }) export const { addTableBarItem, removeTableBarItem, setActiveKey, - updatedSavedFile} = tableBarItemSlice.actions + updatedSavedFile, + setExpandedKeys, + removeExpandedKeys, + addExpandedKeys +} = tableBarItemSlice.actions export default tableBarItemSlice.reducer