Finish adding show/hide of hidden files
Hidden files/folders (those beginning with “.”) are now hidden and shown depending on the state of the toggle.
This commit is contained in:
parent
f3431eecbd
commit
895c0d86ac
|
@ -11,7 +11,7 @@ const Header = ({style, node}) => {
|
||||||
return (
|
return (
|
||||||
<div style={style.base}>
|
<div style={style.base}>
|
||||||
<div style={style.title}>
|
<div style={style.title}>
|
||||||
<i className={iconClass} style={iconStyle}/>
|
<i className={iconClass} style={iconStyle} />
|
||||||
{node.name}
|
{node.name}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -26,40 +26,81 @@ Header.propTypes = {
|
||||||
decorators.Header = Header;
|
decorators.Header = Header;
|
||||||
|
|
||||||
class FileExplorer extends React.Component {
|
class FileExplorer extends React.Component {
|
||||||
constructor(props){
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
files: this.props.files
|
showHidden: false
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
onToggle(node, toggled){
|
onToggle(node, toggled) {
|
||||||
let oldNode = this.state.cursor;
|
|
||||||
if(oldNode) {
|
|
||||||
oldNode.active = false;
|
|
||||||
}
|
|
||||||
node.active = true;
|
node.active = true;
|
||||||
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 });
|
this.setState({cursor: node});
|
||||||
}
|
}
|
||||||
|
|
||||||
onHiddenToggle(value){
|
onHiddenToggle(e) {
|
||||||
this.setState({files: this.props.files.filter((file) => {
|
this.setState({showHidden: e.target.checked});
|
||||||
return;
|
}
|
||||||
})
|
|
||||||
|
nodeEquals(a, b) {
|
||||||
|
return a && b && a.path && b.path && a.name && b.name &&
|
||||||
|
a.path === b.path &&
|
||||||
|
a.name === b.name;
|
||||||
|
}
|
||||||
|
|
||||||
|
isNodeInPath(a, b) {
|
||||||
|
return a && b && a.path && b.path &&
|
||||||
|
a.path !== b.path &&
|
||||||
|
b.path.indexOf(a.path) > -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
filterHidden(nodes) {
|
||||||
|
let filtered = [];
|
||||||
|
if (!Array.isArray(nodes)) return filtered;
|
||||||
|
|
||||||
|
// we need a foreach to build an array instead of a
|
||||||
|
// filter to prevent mutating the original object (in props)
|
||||||
|
nodes.forEach(node => {
|
||||||
|
const {showHidden, cursor} = this.state;
|
||||||
|
if (!showHidden && node.isHidden) return;
|
||||||
|
let updatedNode = {...node};
|
||||||
|
|
||||||
|
// if it's a folder, filter the children
|
||||||
|
if (node.children) {
|
||||||
|
let children = this.filterHidden(node.children);
|
||||||
|
if (children.length) {
|
||||||
|
updatedNode.children = children;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// if this is the selected node, set it as active
|
||||||
|
if (this.nodeEquals(node, cursor)) {
|
||||||
|
updatedNode.active = cursor.active;
|
||||||
|
// if this node has children, set it as toggled
|
||||||
|
if (node.children) updatedNode.toggled = cursor.toggled;
|
||||||
|
}
|
||||||
|
// if this is a directory, and it lies in the path
|
||||||
|
// of the selected node, ensure it's toggled
|
||||||
|
if (node.children && this.isNodeInPath(node, cursor)) {
|
||||||
|
updatedNode.toggled = true;
|
||||||
|
}
|
||||||
|
filtered.push(updatedNode);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
return filtered;
|
||||||
}
|
}
|
||||||
|
|
||||||
render(){
|
render() {
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<Form.Switch type="checkbox" name="toggle" value={true} label="Show hidden files" ref={(input) => { this.showHidden = input; }} onToggle={this.onHiddenToggle.bind(this)} />
|
<Form.Switch type="checkbox" name="toggle" value={true} label="Show hidden files" onChange={this.onHiddenToggle.bind(this)} />
|
||||||
<Treebeard
|
<Treebeard
|
||||||
data={this.props.files}
|
data={this.filterHidden(this.props.files)}
|
||||||
decorators={decorators}
|
decorators={decorators}
|
||||||
onToggle={this.onToggle.bind(this)}
|
onToggle={this.onToggle.bind(this)}
|
||||||
/>
|
/>
|
||||||
|
|
Loading…
Reference in New Issue