129 lines
3.3 KiB
JavaScript
129 lines
3.3 KiB
JavaScript
import React from 'react';
|
|
import history from 'utils/History';
|
|
|
|
import styles from './Tree.scss';
|
|
import classNames from 'classnames/bind';
|
|
const cx = classNames.bind(styles);
|
|
|
|
class Node extends React.Component {
|
|
displayName: 'UITreeNode'
|
|
|
|
renderCollapse = () => {
|
|
var index = this.props.index;
|
|
|
|
if(index.children && index.children.length) {
|
|
var collapsed = index.node.collapsed;
|
|
|
|
return (
|
|
<span
|
|
className={cx(styles.collapse, collapsed ? styles.caretRight : styles.caretDown)}
|
|
onMouseDown={function(e) {e.stopPropagation()}}
|
|
onClick={this.handleCollapse}
|
|
>
|
|
<img src={ require("./assets/chevron.svg") } />
|
|
</span>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
renderChildren = () => {
|
|
var index = this.props.index;
|
|
var tree = this.props.tree;
|
|
var dragging = this.props.dragging;
|
|
|
|
if(index.children && index.children.length) {
|
|
var childrenStyles = {};
|
|
|
|
if (!this.props.rootNode) {
|
|
if(index.node.collapsed) childrenStyles.display = 'none';
|
|
childrenStyles['paddingLeft'] = this.props.paddingLeft + 'px';
|
|
}
|
|
|
|
return (
|
|
<div className={ styles.children } style={childrenStyles}>
|
|
{index.children.map((child) => {
|
|
var childIndex = tree.getIndex(child);
|
|
return (
|
|
<Node
|
|
tree={tree}
|
|
index={childIndex}
|
|
key={childIndex.id}
|
|
dragging={dragging}
|
|
allowUpdates={ this.props.allowUpdates }
|
|
paddingLeft={this.props.paddingLeft}
|
|
onCollapse={this.props.onCollapse}
|
|
onDragStart={this.props.onDragStart}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
isModifying = () => {
|
|
return this.props.allowUpdates && !this.props.rootNode;
|
|
}
|
|
|
|
onClick = () => {
|
|
const index = this.props.index;
|
|
const node = index.node;
|
|
|
|
if (!this.isModifying()) history.push(node.url);
|
|
}
|
|
|
|
render() {
|
|
const tree = this.props.tree;
|
|
const index = this.props.index;
|
|
const dragging = this.props.dragging;
|
|
const node = index.node;
|
|
const style = {};
|
|
|
|
return (
|
|
<div className={cx(styles.node, {
|
|
placeholder: index.id === dragging,
|
|
rootNode: this.props.rootNode,
|
|
})} style={style}>
|
|
<div
|
|
className={ styles.inner }
|
|
ref="inner"
|
|
onMouseDown={this.props.rootNode || !this.props.allowUpdates ? (e) => e.stopPropagation() : this.handleMouseDown}
|
|
>
|
|
{ !this.props.rootNode && this.renderCollapse() }
|
|
<span
|
|
className={ cx(styles.nodeLabel, {
|
|
rootLabel: this.props.rootNode,
|
|
isModifying: this.isModifying(),
|
|
}) }
|
|
onClick={ this.onClick }
|
|
>
|
|
{ node.title }
|
|
</span>
|
|
</div>
|
|
{this.renderChildren()}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
handleCollapse = (e) => {
|
|
e.stopPropagation();
|
|
var nodeId = this.props.index.id;
|
|
if(this.props.onCollapse) this.props.onCollapse(nodeId);
|
|
}
|
|
|
|
handleMouseDown = (e) => {
|
|
var nodeId = this.props.index.id;
|
|
var dom = this.refs.inner;
|
|
|
|
if(this.props.onDragStart) {
|
|
this.props.onDragStart(nodeId, dom, e);
|
|
}
|
|
}
|
|
};
|
|
|
|
module.exports = Node;
|