cha0s/persea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: active and collapsed

Browse Source
This commit is contained in:
cha0s 2021-04-02 17:52:51 -05:00
parent 661ebae50d
commit 6b9b0469fd
1 changed files with 52 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
packages/core/src/components/project/sidebar/index.jsx
View File

@ -3,44 +3,68 @@ import './index.scss';
import {join} from 'path';
import {Tree} from '@avocado/react';
import {PropTypes, React} from '@latus/react';
import {
PropTypes,
React,
useState,
} from '@latus/react';
import {createNextState} from '@latus/redux';
import {useHistory, useLocation} from 'react-router-dom';
const treeFromResourcePath = (tree, uuid, [isFile, resourcePath]) => {
const parts = resourcePath.split('/');
parts.shift();
let walk = tree;
parts.forEach((part) => {
let index = walk.nodes.findIndex(({label}) => label === part);
if (-1 === index) {
index = walk.nodes.length;
walk.nodes.push({
...(isFile ? {} : {nodes: []}),
label: part,
value: join(uuid, resourcePath),
});
}
walk = walk.nodes[index];
});
};
const nodesFromResourcePaths = (label, uuid, resourcePaths) => {
const tree = {label, nodes: []};
resourcePaths
.forEach((resourcePath) => treeFromResourcePath(tree, uuid, resourcePath));
return tree.nodes;
};
const Sidebar = ({label, resourcePaths, uuid}) => {
const history = useHistory();
const location = useLocation();
const [collapsed, setCollapsed] = useState(JSON.parse(window.localStorage['@persea/core/explorer'] || '{}'));
const treeFromResourcePath = (tree, uuid, [isFile, resourcePath]) => {
const parts = resourcePath.split('/');
parts.shift();
let walk = tree;
parts.forEach((part) => {
let index = walk.nodes.findIndex(({label}) => label === part);
if (-1 === index) {
index = walk.nodes.length;
const path = join('/project', uuid, resourcePath);
walk.nodes.push({
...(isFile ? {} : {nodes: []}),
classNames: {
active: location.pathname === path,
collapsed: undefined === collapsed[path] ? true : collapsed[path],
},
label: part,
value: join(uuid, resourcePath),
});
}
walk = walk.nodes[index];
});
};
const nodesFromResourcePaths = (label, uuid, resourcePaths) => {
const tree = {label, nodes: []};
resourcePaths
.forEach((resourcePath) => treeFromResourcePath(tree, uuid, resourcePath));
return tree.nodes;
};
return (
<div className="sidebar">
<Tree
active={({value}) => location.pathname === join('/project', value)}
// active={({value}) => location.pathname === join('/project', value)}
activate={({value, nodes}) => {
const path = join('/project', value);
if (!nodes) {
history.push(join('/project', value));
history.push(path);
}
else {
const next = createNextState(collapsed, (draft) => {
/* eslint-disable no-param-reassign */
if (path in draft) {
delete draft[path];
}
else {
draft[path] = false;
}
/* eslint-enable no-param-reassign */
});
setCollapsed(next);
window.localStorage['@persea/core/explorer'] = JSON.stringify(next);
}
}}
label={label}