Merge pull request #169 from status-im/feature/do-not-close-expanded-folder

Do not close expanded node
This commit is contained in:
Iuri Matias 2018-10-27 21:36:04 +02:00 committed by GitHub
commit 3487265100
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 29 deletions

View File

@ -149,17 +149,25 @@ decorators.Header = Header;
class FileExplorer extends React.Component { class FileExplorer extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {cursor: null}; this.state = {activeNodes: []};
} }
onToggle(node, toggled) { onToggle(node, toggled) {
node.active = true; node.active = toggled;
if (node.children) { if (node.children) {
node.toggled = toggled; node.toggled = toggled;
} else { } else {
this.props.fetchFile(node); this.props.fetchFile(node);
} }
this.setState({cursor: node});
let newNodes;
if (toggled) {
newNodes = this.state.activeNodes;
newNodes.push(node)
} else {
newNodes = this.state.activeNodes.filter(n => !this.nodeEquals(node, n))
}
this.setState({activeNodes: newNodes});
} }
nodeEquals(a, b) { nodeEquals(a, b) {
@ -168,25 +176,17 @@ class FileExplorer extends React.Component {
a.name === b.name; a.name === b.name;
} }
isNodeInPath(a, b) {
return a && b && a.path && b.path &&
a.path !== b.path &&
b.path.indexOf(a.path) > -1;
}
data(nodes) { data(nodes) {
let filtered = []; let filtered = [];
if (!Array.isArray(nodes)) return filtered; if (!Array.isArray(nodes)) return filtered;
const cursor = this.state.cursor; const activeNodes = this.state.activeNodes;
const showHidden = this.props.showHiddenFiles; const showHidden = this.props.showHiddenFiles;
// we need a foreach to build an array instead of a
// filter to prevent mutating the original object (in props) return nodes.reduce((filtered, node) => {
nodes.forEach(node => { if (!showHidden && node.isHidden) return filtered;
if (!showHidden && node.isHidden) return;
let updatedNode = {...node}; let updatedNode = {...node};
// if it's a folder, filter the children
if (node.children) { if (node.children) {
const children = this.data(node.children); const children = this.data(node.children);
if (children.length) { if (children.length) {
@ -194,22 +194,14 @@ class FileExplorer extends React.Component {
} }
} }
// if this is the selected node, set it as active if (activeNodes.find(n => this.nodeEquals(node, n))) {
if (this.nodeEquals(node, cursor)) { updatedNode.active = true;
updatedNode.active = cursor.active; if (node.children) updatedNode.toggled = true;
// if this node is the selected node and is a folder, set
// it as toggled (expanded) according to the selected node
if (node.children) updatedNode.toggled = cursor.toggled;
} }
// if this node is a folder, and it's a parent of the selected
// folder, force toggle it
if (node.children && this.isNodeInPath(node, cursor)) {
updatedNode.toggled = true;
}
filtered.push(updatedNode);
});
return filtered; filtered.push(updatedNode);
return filtered;
}, []);
} }
render() { render() {