95 lines
3.3 KiB
JavaScript
95 lines
3.3 KiB
JavaScript
import React, {useRef, useState} from 'react';
|
|
import {
|
|
UserOutlined,
|
|
} from '@ant-design/icons';
|
|
import {Layout, Avatar, Tabs} from 'antd';
|
|
import Hlexical from './Hlexical';
|
|
import ItemTree from "../../components/ItemTree";
|
|
import './index.less'
|
|
import {useSelector, useDispatch} from "react-redux";
|
|
import {addTableBarItem, removeTableBarItem, setActiveKey,updatedSavedFile} from "../../redux/tableBarItem_reducer"
|
|
|
|
const {Sider} = Layout;
|
|
const Note = () => {
|
|
const dispatch = useDispatch()
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
// const {
|
|
// token: { colorBgContainer },
|
|
// } = theme.useToken();
|
|
const colorBgContainer = '#800080'
|
|
const newTabIndex = useRef(0);
|
|
|
|
const activeKey=useSelector(state => state.tableBarItem.activeKey);
|
|
const items = useSelector(state => state.tableBarItem.data)
|
|
let filePath = useSelector(state => state.dirMessage.data);
|
|
const onChange = (newActiveKey) => {
|
|
console.log("setActiveKey(newActiveKey)",newActiveKey)
|
|
dispatch(setActiveKey({"activeKey":newActiveKey}));
|
|
};
|
|
const add = () => {
|
|
const newActiveKey = `newTab${newTabIndex.current++}`;
|
|
dispatch(addTableBarItem(
|
|
{
|
|
label: 'New Tab',
|
|
// children: "",
|
|
key: newActiveKey,
|
|
activeKey:newActiveKey
|
|
}
|
|
));
|
|
};
|
|
const remove = (targetKey) => {
|
|
console.log("remove = (targetKey):",targetKey)
|
|
let newActiveKey = activeKey;
|
|
let lastIndex = -1;
|
|
items.forEach((item, i) => {
|
|
if (item.key === targetKey) {
|
|
lastIndex = i - 1;
|
|
}
|
|
});
|
|
dispatch(removeTableBarItem(targetKey));
|
|
const newPanes = items.filter((item) => item.key !== targetKey);
|
|
if (newPanes.length && newActiveKey === targetKey) {
|
|
if (lastIndex >= 0) {
|
|
newActiveKey = newPanes[lastIndex].key;
|
|
} else {
|
|
newActiveKey = newPanes[0].key;
|
|
}
|
|
}
|
|
dispatch(setActiveKey({"activeKey":newActiveKey}));
|
|
};
|
|
const onEdit = (targetKey, action) => {
|
|
if (action === 'add') {
|
|
add();
|
|
} else {
|
|
remove(targetKey);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Layout>
|
|
<Sider margin='5' collapsed='true'>
|
|
<div>
|
|
<Avatar size={60} src='http://localhost/20231114150555.jpg' icon={<UserOutlined/>}/>
|
|
</div>
|
|
<div>
|
|
<p style={{color: colorBgContainer, 'fontSize': 60}}>上善若水</p>
|
|
</div>
|
|
</Sider>
|
|
<Sider trigger={null} collapsedWidth={0} collapsible collapsed={collapsed}>
|
|
<ItemTree filePath={filePath}></ItemTree>
|
|
</Sider>
|
|
<Layout>
|
|
<Tabs
|
|
type="editable-card"
|
|
onChange={onChange}
|
|
activeKey={activeKey}
|
|
onEdit={onEdit}
|
|
items={items.map(item=>{
|
|
return {label:item.label,children: <div className="HlexicalName"><Hlexical filePath={item.children}/></div>,key:item.key}
|
|
})}
|
|
/>
|
|
</Layout>
|
|
</Layout>
|
|
);
|
|
};
|
|
export default Note; |