You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
2.0 KiB
JavaScript
80 lines
2.0 KiB
JavaScript
import React, {PureComponent} from "react";
|
|
import {Treebeard} from "@eater/react-treebeard";
|
|
import style from "../style";
|
|
import Toggle from "./LoreTree/Toggle";
|
|
import Header from "./LoreTree/Header";
|
|
|
|
const decorators = {
|
|
Loading: (props) => {
|
|
return (
|
|
<div style={props.style}>
|
|
loading...
|
|
</div>
|
|
);
|
|
},
|
|
Toggle,
|
|
Header,
|
|
Container: (props) => {
|
|
return (
|
|
<div style={{
|
|
paddingLeft: props.depth * (props.style.toggle.width + 6),
|
|
backgroundColor: (props.node.active ? style.colorBackgroundLight : null)
|
|
}}
|
|
onClick={props.onSelect} onDoubleClick={props.onClick}>
|
|
<props.decorators.Toggle onClick={props.onClick} style={props.style} terminal={props.terminal}
|
|
node={props.node}/>
|
|
<props.decorators.Header style={props.style} terminal={props.terminal} node={props.node}/>
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
|
|
export default class LoreTree extends PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
// Random data to test for now
|
|
data: [{
|
|
name: 'Lore',
|
|
children: [
|
|
{
|
|
name: 'Events',
|
|
children: [
|
|
{name: 'Battle of Heck'},
|
|
{name: 'Treaty Of Fuck'}
|
|
]
|
|
}
|
|
]
|
|
}]
|
|
}
|
|
}
|
|
|
|
onToggle(node, toggled) {
|
|
const {data} = this.state;
|
|
if (node.children) {
|
|
node.toggled = toggled;
|
|
}
|
|
|
|
this.setState(() => ({data: [].concat(data)}));
|
|
}
|
|
|
|
onSelect(node) {
|
|
const {cursor, data} = this.state;
|
|
// `node` is already our cursor, quick return
|
|
if (cursor === node) {
|
|
return;
|
|
}
|
|
|
|
if (cursor) {
|
|
cursor.active = false;
|
|
}
|
|
|
|
node.active = true;
|
|
this.setState(() => ({cursor: node, data: [].concat(data)}));
|
|
}
|
|
|
|
render() {
|
|
return (<Treebeard data={this.state.data} style={style.theme.treebeard} decorators={decorators}
|
|
onToggle={this.onToggle.bind(this)} onSelect={this.onSelect.bind(this)}/>)
|
|
}
|
|
} |