feat:只有点击文件时打开
This commit is contained in:
parent
34fb22536f
commit
a178134507
|
@ -1,7 +1,8 @@
|
||||||
import React, {useEffect, useMemo, useState} from 'react';
|
import React, {useEffect, useMemo, useState} from 'react';
|
||||||
import { Input, Tree } from 'antd';
|
import {Input, Tree} from 'antd';
|
||||||
import {FolderOutlined,FileMarkdownOutlined} from '@ant-design/icons';
|
import {FolderOutlined, FileMarkdownOutlined} from '@ant-design/icons';
|
||||||
const { Search } = Input;
|
|
||||||
|
const {Search} = Input;
|
||||||
import store from "../../redux/store";
|
import store from "../../redux/store";
|
||||||
import {clickFile} from "../../redux/clickFile_reducer";
|
import {clickFile} from "../../redux/clickFile_reducer";
|
||||||
|
|
||||||
|
@ -11,7 +12,7 @@ const dataList = [];
|
||||||
const generateList = (data) => {
|
const generateList = (data) => {
|
||||||
for (let i = 0; i < data.length; i++) {
|
for (let i = 0; i < data.length; i++) {
|
||||||
const node = data[i];
|
const node = data[i];
|
||||||
const { key,title,icon } = node;
|
const {key, title, icon} = node;
|
||||||
dataList.push({
|
dataList.push({
|
||||||
key,
|
key,
|
||||||
title,
|
title,
|
||||||
|
@ -38,61 +39,62 @@ const getParentKey = (key, tree) => {
|
||||||
return parentKey;
|
return parentKey;
|
||||||
};
|
};
|
||||||
|
|
||||||
function generateChildList(fileList){
|
function generateChildList(fileList) {
|
||||||
const result = []
|
const result = []
|
||||||
for (let i = 0; i < fileList.length; i++) {
|
for (let i = 0; i < fileList.length; i++) {
|
||||||
const {fileName,filePath,dirFlag}=fileList[i];
|
const {fileName, filePath, dirFlag} = fileList[i];
|
||||||
result.push({
|
result.push({
|
||||||
"key":filePath,
|
"key": filePath,
|
||||||
"title":fileName,
|
"title": fileName,
|
||||||
"icon":<FolderOutlined />,
|
"icon": <FolderOutlined/>,
|
||||||
"dirFlag":dirFlag,
|
"dirFlag": dirFlag,
|
||||||
"children":[]
|
"children": []
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
const ItemTree = () => {
|
const ItemTree = () => {
|
||||||
const [expandedKeys, setExpandedKeys] = useState([]);
|
const [expandedKeys, setExpandedKeys] = useState([]);
|
||||||
const [searchValue, setSearchValue] = useState('');
|
const [searchValue, setSearchValue] = useState('');
|
||||||
const [defaultValueState, setDefaultValueState] = useState([]);
|
const [defaultValueState, setDefaultValueState] = useState([]);
|
||||||
const [autoExpandParent, setAutoExpandParent] = useState(true);
|
const [autoExpandParent, setAutoExpandParent] = useState(true);
|
||||||
|
|
||||||
useEffect(()=>{
|
useEffect(() => {
|
||||||
store.subscribe(() =>{
|
store.subscribe(() => {
|
||||||
let fileDirDate = store.getState().dirMessage.data;
|
let fileDirDate = store.getState().dirMessage.data;
|
||||||
console.log("打开目录fileDirDate:",fileDirDate)
|
console.log("打开目录fileDirDate:", fileDirDate)
|
||||||
for (let i = 0; i < fileDirDate.length; i++) {
|
for (let i = 0; i < fileDirDate.length; i++) {
|
||||||
const node = fileDirDate[i];
|
const node = fileDirDate[i];
|
||||||
console.log("node:",node)
|
console.log("node:", node)
|
||||||
const { fileName,filePath,childList,dirFlag } = node;
|
const {fileName, filePath, childList, dirFlag} = node;
|
||||||
const childListM=[]
|
const childListM = []
|
||||||
if (childList.length>0) {
|
if (childList.length > 0) {
|
||||||
childListM.push(...generateChildList(childList));
|
childListM.push(...generateChildList(childList));
|
||||||
}
|
}
|
||||||
if (defaultData.filter(fileMessage=>
|
if (defaultData.filter(fileMessage =>
|
||||||
fileMessage.key===filePath
|
fileMessage.key === filePath
|
||||||
).length===0){
|
).length === 0) {
|
||||||
defaultData.push({
|
defaultData.push({
|
||||||
"key":filePath,
|
"key": filePath,
|
||||||
"title":fileName,
|
"title": fileName,
|
||||||
"icon":<FolderOutlined />,
|
"icon": <FolderOutlined/>,
|
||||||
"dirFlag":dirFlag,
|
"dirFlag": dirFlag,
|
||||||
"children":childListM
|
"children": childListM
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
console.log("Array.from(new Set(defaultData)):",Array.from(new Set(defaultData)))
|
console.log("Array.from(new Set(defaultData)):", Array.from(new Set(defaultData)))
|
||||||
setDefaultValueState(Array.from(new Set(defaultData)))
|
setDefaultValueState(Array.from(new Set(defaultData)))
|
||||||
})
|
})
|
||||||
},[])
|
}, [])
|
||||||
|
|
||||||
const onExpand = (newExpandedKeys) => {
|
const onExpand = (newExpandedKeys) => {
|
||||||
setExpandedKeys(newExpandedKeys);
|
setExpandedKeys(newExpandedKeys);
|
||||||
setAutoExpandParent(false);
|
setAutoExpandParent(false);
|
||||||
};
|
};
|
||||||
const onChange = (e) => {
|
const onChange = (e) => {
|
||||||
const { value } = e.target;
|
const {value} = e.target;
|
||||||
const newExpandedKeys = dataList
|
const newExpandedKeys = dataList
|
||||||
.map((item) => {
|
.map((item) => {
|
||||||
if (item.title.indexOf(value) > -1) {
|
if (item.title.indexOf(value) > -1) {
|
||||||
|
@ -105,10 +107,10 @@ const ItemTree = () => {
|
||||||
setSearchValue(value);
|
setSearchValue(value);
|
||||||
setAutoExpandParent(true);
|
setAutoExpandParent(true);
|
||||||
};
|
};
|
||||||
const onSelect = (selectedKeys,e) =>{
|
const onSelect = (selectedKeys, e) => {
|
||||||
if (e.selected){
|
if (e.selected && !e.node.dirFlag) {
|
||||||
console.log('onSelect.selectedKeys',selectedKeys,e)
|
console.log('onSelect.selectedKeys', selectedKeys, e)
|
||||||
store.dispatch(clickFile({"fileName":e.node.title,"filePath":e.node.key}))
|
store.dispatch(clickFile({"fileName": e.node.title, "filePath": e.node.key}))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// const treeData = useMemo(() => {
|
// const treeData = useMemo(() => {
|
||||||
|
@ -155,7 +157,7 @@ const ItemTree = () => {
|
||||||
expandedKeys={expandedKeys}
|
expandedKeys={expandedKeys}
|
||||||
// 是否自动展开父节点
|
// 是否自动展开父节点
|
||||||
autoExpandParent={autoExpandParent}
|
autoExpandParent={autoExpandParent}
|
||||||
showIcon ={true}
|
showIcon={true}
|
||||||
// treeNodes 数据,如果设置则不需要手动构造 TreeNode 节点(key 在整个树范围内唯一)
|
// treeNodes 数据,如果设置则不需要手动构造 TreeNode 节点(key 在整个树范围内唯一)
|
||||||
treeData={defaultValueState}
|
treeData={defaultValueState}
|
||||||
onSelect={onSelect}
|
onSelect={onSelect}
|
||||||
|
|
|
@ -11,6 +11,7 @@ import Hlexical from './Hlexical';
|
||||||
import ItemTree from "../../components/ItemTree";
|
import ItemTree from "../../components/ItemTree";
|
||||||
import './index.less'
|
import './index.less'
|
||||||
import store from "../../redux/store";
|
import store from "../../redux/store";
|
||||||
|
import {isEmpty} from "../../utils/ObjectUtils";
|
||||||
const {Header, Sider, Content} = Layout;
|
const {Header, Sider, Content} = Layout;
|
||||||
const Note = () => {
|
const Note = () => {
|
||||||
const [collapsed, setCollapsed] = useState(false);
|
const [collapsed, setCollapsed] = useState(false);
|
||||||
|
@ -24,7 +25,7 @@ const Note = () => {
|
||||||
store.subscribe(() => {
|
store.subscribe(() => {
|
||||||
const openFile = store.getState().clickFileMessage.data;
|
const openFile = store.getState().clickFileMessage.data;
|
||||||
console.log("store.getState().clickFileMessage.data:",openFile,items)
|
console.log("store.getState().clickFileMessage.data:",openFile,items)
|
||||||
if (items.filter(fileItem => fileItem.key === openFile.filePath).length === 0) {
|
if (items.filter(fileItem => fileItem.key === openFile.filePath).length === 0&& !isEmpty(openFile)) {
|
||||||
setItems([...items,
|
setItems([...items,
|
||||||
{
|
{
|
||||||
label: openFile.fileName,
|
label: openFile.fileName,
|
||||||
|
|
|
@ -3,6 +3,7 @@ import { createSlice } from '@reduxjs/toolkit'
|
||||||
export const clickFileSlice = createSlice({
|
export const clickFileSlice = createSlice({
|
||||||
name: 'clickFile',
|
name: 'clickFile',
|
||||||
initialState: {
|
initialState: {
|
||||||
|
type:"clickFile",
|
||||||
data: {}
|
data: {}
|
||||||
},
|
},
|
||||||
reducers: {
|
reducers: {
|
||||||
|
|
|
@ -0,0 +1,8 @@
|
||||||
|
const schema = {
|
||||||
|
"fileId": {
|
||||||
|
type: 'number',
|
||||||
|
maximum: 100,
|
||||||
|
minimum: 1,
|
||||||
|
default: 50
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,7 @@
|
||||||
|
export const isEmpty =(object)=>{
|
||||||
|
for(let key in object) {
|
||||||
|
if(object.hasOwnProperty(key))
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
Loading…
Reference in New Issue