andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Build README

Browse Source
This commit is contained in:
Angelos Chalaris
2019-02-06 22:22:29 +02:00
parent d4ce87ed63
commit 509f7e87fa
3 changed files with 83 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
snippets/TreeView.md
View File

@ -53,7 +53,7 @@ class TreeView extends React.Component {
super(props);
this.state = {
toggled: props.toggled
}
};
this.toggle = this.toggle.bind(this);
}
@ -63,26 +63,52 @@ class TreeView extends React.Component {
render() {
return (
<div style={{ 'marginLeft': this.props.isChildElement ? 16 : 4 + 'px' }} className={this.props.isParentToggled ? 'tree-element' : 'tree-element collapsed'}>
<span className={this.state.toggled ? "toggler" : "toggler closed" } onClick={this.toggle}></span>
{this.props.name ? <strong>&nbsp;&nbsp;{this.props.name}: </strong> : <span>&nbsp;&nbsp;</span>}
{Array.isArray(this.props.data) ? '[' : '{'}
{!this.state.toggled && '...'}
<div
style={{ marginLeft: this.props.isChildElement ? 16 : 4 + "px" }}
className={
this.props.isParentToggled ? "tree-element" : "tree-element collapsed"
}
>
<span
className={this.state.toggled ? "toggler" : "toggler closed"}
onClick={this.toggle}
/>
{this.props.name ? (
<strong>&nbsp;&nbsp;{this.props.name}: </strong>
) : (
<span>&nbsp;&nbsp;</span>
)}
{Array.isArray(this.props.data) ? "[" : "{"}
{!this.state.toggled && "..."}
{Object.keys(this.props.data).map(
(v, i, a) =>
typeof this.props.data[v] == "object" ? (
<TreeView data={this.props.data[v]} isLast={i === a.length - 1} name={Array.isArray(this.props.data) ? null : v} isChildElement isParentToggled={this.props.isParentToggled && this.state.toggled} />
<TreeView
data={this.props.data[v]}
isLast={i === a.length - 1}
name={Array.isArray(this.props.data) ? null : v}
isChildElement
isParentToggled={
this.props.isParentToggled && this.state.toggled
}
/>
) : (
<p style={{ 'marginLeft': 16 + 'px' }} className={this.state.toggled ? 'tree-element' : 'tree-element collapsed'}>
{Array.isArray(this.props.data) ? '' : <strong>{v}: </strong>}
{this.props.data[v]}{i === a.length - 1 ? '' : ','}
</p>
)
<p
style={{ marginLeft: 16 + "px" }}
className={
this.state.toggled ? "tree-element" : "tree-element collapsed"
}
>
{Array.isArray(this.props.data) ? "" : <strong>{v}: </strong>}
{this.props.data[v]}
{i === a.length - 1 ? "" : ","}
</p>
)
)}
{Array.isArray(this.props.data) ? ']' : '}'}
{!this.props.isLast ? ',' : ''}
{Array.isArray(this.props.data) ? "]" : "}"}
{!this.props.isLast ? "," : ""}
</div>
)
);
}
}