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

feat: file tree, resource pane...

Browse Source
This commit is contained in:
cha0s 2021-01-24 15:31:48 -06:00
parent c467e9c4c0
commit fcd191ee39
5 changed files with 99 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/package.json
View File

@ -35,6 +35,7 @@
"react-hot-loader": "4.13.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-ui-tree": "^4.0.0",
"styled-components": "^5.2.1"
},
"devDependencies": {

2
app/src/react/components/persea/index.jsx
View File

@ -14,7 +14,6 @@ import {
import Dashboard from 'components/dashboard';
import ProjectRoute from 'components/project/route';
import ResourceRoute from 'components/resource/route';
const Persea = React.memo(({history}) => {
const isLoggedIn = useSelector(userIdSelector);
@ -25,7 +24,6 @@ const Persea = React.memo(({history}) => {
{isLoggedIn ? <Redirect to="/" /> : Login}
</Route>
<Route path="/dashboard" component={Dashboard} />
<Route path="/project/:uuid:uri(/.*)" component={ResourceRoute} />
<Route path="/project/:uuid" component={ProjectRoute} />
</Switch>
<Route exact path="/">

61
app/src/react/components/project/index.jsx
View File

@ -3,19 +3,60 @@ import './index.scss';
import {join} from 'path';
import {PropTypes, React} from '@latus/react';
import {Link} from 'react-router-dom';
import {
Link,
Route,
} from 'react-router-dom';
import Tree from 'react-ui-tree';
import ResourceRoute from 'components/resource/route';
const renderNode = ({isFile, label, path}) => (
isFile
? <Link to={path}>{label}</Link>
: <span>{label}</span>
);
const treeFromResourcePath = (tree, uuid, [isFile, resourcePath]) => {
const parts = resourcePath.split('/');
parts.shift();
let walk = tree;
parts.forEach((part) => {
let index = walk.children.findIndex(({label}) => label === part);
if (-1 === index) {
index = walk.children.length;
walk.children.push({
children: [],
isFile,
label: part,
path: join('/project', uuid, resourcePath),
});
}
walk = walk.children[index];
});
}
const treeFromResourcePaths = (uuid, resourcePaths) => {
const tree = {label: uuid, children: []};
resourcePaths
.forEach((resourcePath) => treeFromResourcePath(tree, uuid, resourcePath));
return tree;
};
const Project = ({project: {label, resourcePaths}, uuid}) => (
<div className="project">
<h2 className="project__title">{label}</h2>
<ul>
{resourcePaths.map(([isFile, resourcePath]) => (
<li key={resourcePath}>
{isFile ? 'File: ' : 'Directory: '}
<Link to={join('/project', uuid, resourcePath)}>{resourcePath}</Link>
</li>
))}
</ul>
<div className="sidebar">
<Tree
paddingLeft={20}
tree={treeFromResourcePaths(uuid, resourcePaths)}
// onChange={this.handleChange}
// isNodeCollapsed={this.isNodeCollapsed}
renderNode={renderNode}
/>
</div>
<div className="resource-container">
<Route path="/project/:uuid:uri(/.*)" component={ResourceRoute} />
</div>
</div>
);

27
app/src/react/components/project/index.scss
View File

@ -0,0 +1,27 @@
.project {
display: flex;
width: 100vw;
height: 100vh;
.sidebar {
padding: 1em;
min-width: 25rem;
}
.m-node {
.caret-right::before {
content: "\25B8";
font-size: 0.7em;
padding-right: 0.5em;
}
.caret-down::before {
content: "\25BE";
font-size: 0.7em;
padding-right: 0.5em;
}
}
.resource-container {
background-color: rgba(255, 255, 255, 0.1);
flex-grow: 1;
padding: 1em;
}
}

21
app/yarn.lock
View File

@ -2553,6 +2553,11 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"
classnames@^2.2.5:
version "2.2.6"
resolved "http://npm.cha0sdev/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
clean-css@4.2.x, clean-css@^4.2.3:
version "4.2.3"
resolved "http://npm.cha0sdev/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
@ -5443,6 +5448,11 @@ js-base64@^2.1.8:
resolved "http://npm.cha0sdev/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
js-tree@^2.0.1:
version "2.0.2"
resolved "http://npm.cha0sdev/js-tree/-/js-tree-2.0.2.tgz#25cd00c55a236bd3e02578b25d1c6721803c4085"
integrity sha512-+pqyPOy8vZXW5v+M16rpSFsUO7rtxxnDAKn70DtSkDYhlMUs7QHhprcq/b4FBCbZMeyFv2Pfg8NWgIle9qLMbw==
js-yaml@3.14.0:
version "3.14.0"
resolved "http://npm.cha0sdev/js-yaml/-/js-yaml-3.14.0.tgz#a7a34170f26a21bb162424d8adacb4113a69e482"
@ -7274,7 +7284,7 @@ promise-inflight@^1.0.1:
resolved "http://npm.cha0sdev/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "http://npm.cha0sdev/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@ -7520,6 +7530,15 @@ react-router@5.2.0, react-router@^5.2.0:
tiny-invariant "^1.0.2"
tiny-warning "^1.0.0"
react-ui-tree@^4.0.0:
version "4.0.0"
resolved "http://npm.cha0sdev/react-ui-tree/-/react-ui-tree-4.0.0.tgz#99e36a68e274409485614ab1f31f52fdf884907e"
integrity sha512-2y649h0psahtYb4NW5KK/zcwnzH0Di4a0PPzsorNyHzLGr5fXGB4MyubMcZ1BGD5nZFIATalvCeSJ/YDvIriVw==
dependencies:
classnames "^2.2.5"
js-tree "^2.0.1"
prop-types "^15.5.10"
react@^16.14.0:
version "16.14.0"
resolved "http://npm.cha0sdev/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"