feat:clickFile改为添加tableBarItem和设置activeKey

This commit is contained in:
shixiaohua 2024-02-04 14:42:20 +08:00
parent ed8ce9ae79
commit 399fabd282
5 changed files with 29 additions and 54 deletions

View File

@ -4,8 +4,8 @@ import {FolderOutlined, FileMarkdownOutlined,FileOutlined} from '@ant-design/ico
import "./index.less"
const {Search} = Input;
import {store} from "../../redux/store";
import {clickFile} from "../../redux/clickFile_reducer";
import {useSelector} from "react-redux";
import {useSelector,useDispatch} from "react-redux";
import {addTableBarItem} from "../../redux/tableBarItem_reducer";
const defaultData = [];
//
@ -59,7 +59,7 @@ function generateChildList(fileList) {
const ItemTree = () => {
const [expandedKeys, setExpandedKeys] = useState([]);
const [searchValue, setSearchValue] = useState('');
const dispatch = useDispatch()
const [autoExpandParent, setAutoExpandParent] = useState(true);
const defaultValueStateSet = [];
@ -109,7 +109,14 @@ const ItemTree = () => {
const onSelect = (selectedKeys, e) => {
if (e.selected && !e.node.dirFlag) {
console.log('onSelect.selectedKeys', selectedKeys, e)
store.dispatch(clickFile({"fileName": e.node.title, "filePath": e.node.key}))
dispatch(addTableBarItem(
{
label: e.node.title,
children: e.node.key,
key: e.node.key,
activeKey:e.node.key
}
))
}
}
// const treeData = useMemo(() => {

View File

@ -9,7 +9,7 @@ import './index.less'
import {store} from "../../redux/store";
import {isEmpty} from "../../utils/ObjectUtils";
import {useSelector, useDispatch} from "react-redux";
import {addTableBarItem, removeTableBarItem} from "../../redux/tableBarItem_reducer"
import {addTableBarItem, removeTableBarItem, setActiveKey} from "../../redux/tableBarItem_reducer"
const {Header, Sider, Content} = Layout;
const Note = () => {
@ -19,29 +19,14 @@ const Note = () => {
// token: { colorBgContainer },
// } = theme.useToken();
const colorBgContainer = '#800080'
const [activeKey, setActiveKey] = useState();
const newTabIndex = useRef(0);
const items = useSelector(state => state.tableBarItem.data)
const openFile = useSelector(state => state.clickFileMessage.data)
console.log("store.getState().clickFileMessage.data:",openFile)
if (!isEmpty(openFile) && activeKey !== openFile.filePath&&isEmpty(activeKey)) {
setActiveKey(openFile.filePath)
}
if (items.filter(fileItem => fileItem.key === openFile.filePath).length === 0 && !isEmpty(openFile)) {
console.log("items.filter(fileItem => fileItem.key === openFile.filePath)",items)
dispatch(addTableBarItem(
{
label: openFile.fileName,
children: openFile.filePath,
key: openFile.filePath,
}
))
}
const activeKey=useSelector(state => state.tableBarItem.activeKey);
const items = useSelector(state => state.tableBarItem.data)
const onChange = (newActiveKey) => {
console.log("setActiveKey(newActiveKey)",newActiveKey)
setActiveKey(newActiveKey);
dispatch(setActiveKey({"activeKey":newActiveKey}));
};
const add = () => {
const newActiveKey = `newTab${newTabIndex.current++}`;
@ -59,7 +44,7 @@ const Note = () => {
key: newActiveKey,
}
));
setActiveKey(newActiveKey);
dispatch(setActiveKey({"activeKey":newActiveKey}));
};
const remove = (targetKey) => {
console.log("remove = (targetKey):",targetKey)
@ -81,7 +66,7 @@ const Note = () => {
}
console.log("remove = (newActiveKey):",newActiveKey)
// setItems(newPanes);
setActiveKey(newActiveKey);
dispatch(setActiveKey({"activeKey":newActiveKey}));
};
const onEdit = (targetKey, action) => {
if (action === 'add') {

View File

@ -1,18 +0,0 @@
import { createSlice } from '@reduxjs/toolkit'
export const clickFileSlice = createSlice({
name: 'clickFile',
initialState: {
type:"clickFile",
data: {}
},
reducers: {
// 点击文件添加item设置单前文件
clickFile: (state, action) => {
console.log("clickFileSlice:clickFile", state, action)
state.data=action.payload
}
}
})
export const { clickFile } = clickFileSlice.actions
export default clickFileSlice.reducer

View File

@ -2,7 +2,6 @@ import {configureStore} from '@reduxjs/toolkit'
import historyReducer from './historyRecord_reducer'
import redirectReducer from './redirectUrl_reducer'
import dirMessageReducer from './dirMessage_reducer'
import clickFileReducer from './clickFile_reducer'
import pushHotkeysReducer from "./pushHotkeys_reducer";
import tableBarItemReducer from "./tableBarItem_reducer";
import {electronStorage} from "../utils/LocalStorage";
@ -25,10 +24,6 @@ const pushHotkeysPersistConfig = {
key: 'pushHotkeys',
storage: electronStorage()
}
const clickFileMessagePersistConfig = {
key: 'clickFileMessage',
storage: electronStorage()
}
const tableBarItemPersistConfig = {
key: 'tableBarItem',
storage: electronStorage()
@ -39,7 +34,6 @@ const historyRecordPersistedReducer = persistReducer(historyRecordPersistConfig,
const redirectUrlPersistedReducer = persistReducer(redirectUrlPersistConfig, redirectReducer)
const dirMessagePersistedReducer = persistReducer(dirMessagePersistConfig, dirMessageReducer)
const pushHotkeysPersistedReducer = persistReducer(pushHotkeysPersistConfig, pushHotkeysReducer)
const clickFileMessagePersistedReducer = persistReducer(clickFileMessagePersistConfig, clickFileReducer)
const tableBarItemPersistedReducer = persistReducer(tableBarItemPersistConfig, tableBarItemReducer)
export const store = configureStore({
@ -48,7 +42,6 @@ export const store = configureStore({
redirectUrl:redirectUrlPersistedReducer,
dirMessage:dirMessagePersistedReducer,
pushHotkeys:pushHotkeysPersistedReducer,
clickFileMessage:clickFileMessagePersistedReducer,
tableBarItem:tableBarItemPersistedReducer,
},
middleware: (getDefaultMiddleware) =>

View File

@ -1,4 +1,5 @@
import { createSlice } from '@reduxjs/toolkit'
import {isEmpty} from "../utils/ObjectUtils";
export const tableBarItemSlice = createSlice({
name: 'tableBarItem',
@ -13,15 +14,22 @@ export const tableBarItemSlice = createSlice({
if (state.data.filter(file=>file.key===action.payload.key).length===0){
state.data.push(action.payload)
}
if (action.payload.activeKey){
state.activeKey=action.payload.activeKey
}
},
removeTableBarItem: (state, action) => {
console.log("tableBarItemSlice:removeTableBarItem",action.payload)
state.data=state.data.filter(file=>file.key!==action.payload)
},
setActiveKey:(state,action)=>{
if (action.payload.activeKey){
state.activeKey=action.payload.activeKey
}
}
,
setActiveKey: (state, action) => {
console.log("tableBarItemSlice:setActiveKey",action.payload)
if (state.activeKey!==action.payload){
state.activeKey=action.payload;
if (action.payload.activeKey){
state.activeKey=action.payload.activeKey
}
}
}