Fix prettier integration, format (#31)
* Fix prettier integration, format * Reformat again
This commit is contained in:
Tom Moor
GitHub
@ -1,6 +1,6 @@
|
||||
var React = require('react');
|
||||
var Tree = require('./Tree');
|
||||
var Node = require('./Node');
|
||||
const React = require('react');
|
||||
const Tree = require('./Tree');
|
||||
const Node = require('./Node');
|
||||
|
||||
import styles from './Tree.scss';
|
||||
|
||||
@ -16,7 +16,7 @@ module.exports = React.createClass({
|
||||
|
||||
getDefaultProps() {
|
||||
return {
|
||||
paddingLeft: 20
|
||||
paddingLeft: 20,
|
||||
};
|
||||
},
|
||||
|
||||
@ -25,47 +25,47 @@ module.exports = React.createClass({
|
||||
},
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if(!this._updated) this.setState(this.init(nextProps));
|
||||
if (!this._updated) this.setState(this.init(nextProps));
|
||||
else this._updated = false;
|
||||
},
|
||||
|
||||
init(props) {
|
||||
var tree = new Tree(props.tree);
|
||||
const tree = new Tree(props.tree);
|
||||
tree.isNodeCollapsed = props.isNodeCollapsed;
|
||||
tree.changeNodeCollapsed = props.changeNodeCollapsed;
|
||||
tree.updateNodesPosition();
|
||||
|
||||
return {
|
||||
tree: tree,
|
||||
tree,
|
||||
dragging: {
|
||||
id: null,
|
||||
x: null,
|
||||
y: null,
|
||||
w: null,
|
||||
h: null
|
||||
}
|
||||
h: null,
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getDraggingDom() {
|
||||
var tree = this.state.tree;
|
||||
var dragging = this.state.dragging;
|
||||
const tree = this.state.tree;
|
||||
const dragging = this.state.dragging;
|
||||
|
||||
if(dragging && dragging.id) {
|
||||
var draggingIndex = tree.getIndex(dragging.id);
|
||||
var draggingStyles = {
|
||||
if (dragging && dragging.id) {
|
||||
const draggingIndex = tree.getIndex(dragging.id);
|
||||
const draggingStyles = {
|
||||
top: dragging.y,
|
||||
left: dragging.x,
|
||||
width: dragging.w
|
||||
width: dragging.w,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={ styles.draggable } style={ draggingStyles }>
|
||||
<div className={styles.draggable} style={draggingStyles}>
|
||||
<Node
|
||||
tree={ tree }
|
||||
index={ draggingIndex }
|
||||
paddingLeft={ this.props.paddingLeft }
|
||||
allowUpdates={ this.props.allowUpdates }
|
||||
tree={tree}
|
||||
index={draggingIndex}
|
||||
paddingLeft={this.props.paddingLeft}
|
||||
allowUpdates={this.props.allowUpdates}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
@ -75,23 +75,23 @@ module.exports = React.createClass({
|
||||
},
|
||||
|
||||
render() {
|
||||
var tree = this.state.tree;
|
||||
var dragging = this.state.dragging;
|
||||
var draggingDom = this.getDraggingDom();
|
||||
const tree = this.state.tree;
|
||||
const dragging = this.state.dragging;
|
||||
const draggingDom = this.getDraggingDom();
|
||||
|
||||
return (
|
||||
<div className={ styles.tree }>
|
||||
{ draggingDom }
|
||||
<div className={styles.tree}>
|
||||
{draggingDom}
|
||||
<Node
|
||||
rootNode
|
||||
tree={ tree }
|
||||
index={ tree.getIndex(1) }
|
||||
key={ 1 }
|
||||
paddingLeft={ this.props.paddingLeft }
|
||||
allowUpdates={ this.props.allowUpdates }
|
||||
onDragStart={ this.dragStart }
|
||||
onCollapse={ this.toggleCollapse }
|
||||
dragging={ dragging && dragging.id }
|
||||
tree={tree}
|
||||
index={tree.getIndex(1)}
|
||||
key={1}
|
||||
paddingLeft={this.props.paddingLeft}
|
||||
allowUpdates={this.props.allowUpdates}
|
||||
onDragStart={this.dragStart}
|
||||
onCollapse={this.toggleCollapse}
|
||||
dragging={dragging && dragging.id}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
@ -99,11 +99,11 @@ module.exports = React.createClass({
|
||||
|
||||
dragStart(id, dom, e) {
|
||||
this.dragging = {
|
||||
id: id,
|
||||
id,
|
||||
w: dom.offsetWidth,
|
||||
h: dom.offsetHeight,
|
||||
x: dom.offsetLeft,
|
||||
y: dom.offsetTop
|
||||
y: dom.offsetTop,
|
||||
};
|
||||
|
||||
this._startX = dom.offsetLeft;
|
||||
@ -118,69 +118,73 @@ module.exports = React.createClass({
|
||||
|
||||
// oh
|
||||
drag(e) {
|
||||
if(this._start) {
|
||||
if (this._start) {
|
||||
this.setState({
|
||||
dragging: this.dragging
|
||||
dragging: this.dragging,
|
||||
});
|
||||
this._start = false;
|
||||
}
|
||||
|
||||
var tree = this.state.tree;
|
||||
var dragging = this.state.dragging;
|
||||
var paddingLeft = this.props.paddingLeft;
|
||||
var newIndex = null;
|
||||
var index = tree.getIndex(dragging.id);
|
||||
var collapsed = index.node.collapsed;
|
||||
const tree = this.state.tree;
|
||||
const dragging = this.state.dragging;
|
||||
const paddingLeft = this.props.paddingLeft;
|
||||
let newIndex = null;
|
||||
let index = tree.getIndex(dragging.id);
|
||||
const collapsed = index.node.collapsed;
|
||||
|
||||
var _startX = this._startX;
|
||||
var _startY = this._startY;
|
||||
var _offsetX = this._offsetX;
|
||||
var _offsetY = this._offsetY;
|
||||
const _startX = this._startX;
|
||||
const _startY = this._startY;
|
||||
const _offsetX = this._offsetX;
|
||||
const _offsetY = this._offsetY;
|
||||
|
||||
var pos = {
|
||||
const pos = {
|
||||
x: _startX + e.clientX - _offsetX,
|
||||
y: _startY + e.clientY - _offsetY
|
||||
y: _startY + e.clientY - _offsetY,
|
||||
};
|
||||
dragging.x = pos.x;
|
||||
dragging.y = pos.y;
|
||||
|
||||
var diffX = dragging.x - paddingLeft/2 - (index.left-2) * paddingLeft;
|
||||
var diffY = dragging.y - dragging.h/2 - (index.top-2) * dragging.h;
|
||||
const diffX = dragging.x - paddingLeft / 2 - (index.left - 2) * paddingLeft;
|
||||
const diffY = dragging.y - dragging.h / 2 - (index.top - 2) * dragging.h;
|
||||
|
||||
if(diffX < 0) { // left
|
||||
if(index.parent && !index.next) {
|
||||
if (diffX < 0) {
|
||||
// left
|
||||
if (index.parent && !index.next) {
|
||||
newIndex = tree.move(index.id, index.parent, 'after');
|
||||
}
|
||||
} else if(diffX > paddingLeft) { // right
|
||||
if(index.prev) {
|
||||
var prevNode = tree.getIndex(index.prev).node;
|
||||
if(!prevNode.collapsed && !prevNode.leaf) {
|
||||
} else if (diffX > paddingLeft) {
|
||||
// right
|
||||
if (index.prev) {
|
||||
const prevNode = tree.getIndex(index.prev).node;
|
||||
if (!prevNode.collapsed && !prevNode.leaf) {
|
||||
newIndex = tree.move(index.id, index.prev, 'append');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(newIndex) {
|
||||
if (newIndex) {
|
||||
index = newIndex;
|
||||
newIndex.node.collapsed = collapsed;
|
||||
dragging.id = newIndex.id;
|
||||
}
|
||||
|
||||
if(diffY < 0) { // up
|
||||
var above = tree.getNodeByTop(index.top-1);
|
||||
if (diffY < 0) {
|
||||
// up
|
||||
const above = tree.getNodeByTop(index.top - 1);
|
||||
newIndex = tree.move(index.id, above.id, 'before');
|
||||
} else if(diffY > dragging.h) { // down
|
||||
if(index.next) {
|
||||
} else if (diffY > dragging.h) {
|
||||
// down
|
||||
if (index.next) {
|
||||
var below = tree.getIndex(index.next);
|
||||
if(below.children && below.children.length && !below.node.collapsed) {
|
||||
if (below.children && below.children.length && !below.node.collapsed) {
|
||||
newIndex = tree.move(index.id, index.next, 'prepend');
|
||||
} else {
|
||||
newIndex = tree.move(index.id, index.next, 'after');
|
||||
}
|
||||
} else {
|
||||
var below = tree.getNodeByTop(index.top+index.height);
|
||||
if(below && below.parent !== index.id) {
|
||||
if(below.children && below.children.length) {
|
||||
var below = tree.getNodeByTop(index.top + index.height);
|
||||
if (below && below.parent !== index.id) {
|
||||
if (below.children && below.children.length) {
|
||||
newIndex = tree.move(index.id, below.id, 'prepend');
|
||||
} else {
|
||||
newIndex = tree.move(index.id, below.id, 'after');
|
||||
@ -189,14 +193,14 @@ module.exports = React.createClass({
|
||||
}
|
||||
}
|
||||
|
||||
if(newIndex) {
|
||||
if (newIndex) {
|
||||
newIndex.node.collapsed = collapsed;
|
||||
dragging.id = newIndex.id;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
tree: tree,
|
||||
dragging: dragging
|
||||
tree,
|
||||
dragging,
|
||||
});
|
||||
},
|
||||
|
||||
@ -207,8 +211,8 @@ module.exports = React.createClass({
|
||||
x: null,
|
||||
y: null,
|
||||
w: null,
|
||||
h: null
|
||||
}
|
||||
h: null,
|
||||
},
|
||||
});
|
||||
|
||||
this.change(this.state.tree);
|
||||
@ -218,21 +222,21 @@ module.exports = React.createClass({
|
||||
|
||||
change(tree) {
|
||||
this._updated = true;
|
||||
if(this.props.onChange) this.props.onChange(tree.obj);
|
||||
if (this.props.onChange) this.props.onChange(tree.obj);
|
||||
},
|
||||
|
||||
toggleCollapse(nodeId) {
|
||||
var tree = this.state.tree;
|
||||
var index = tree.getIndex(nodeId);
|
||||
var node = index.node;
|
||||
const tree = this.state.tree;
|
||||
const index = tree.getIndex(nodeId);
|
||||
const node = index.node;
|
||||
node.collapsed = !node.collapsed;
|
||||
tree.updateNodesPosition();
|
||||
|
||||
this.setState({
|
||||
tree: tree
|
||||
tree,
|
||||
});
|
||||
|
||||
if(this.props.onCollapse) this.props.onCollapse(node.id, node.collapsed);
|
||||
if (this.props.onCollapse) this.props.onCollapse(node.id, node.collapsed);
|
||||
},
|
||||
|
||||
// buildTreeNumbering(tree) {
|
||||
|
||||
Reference in New Issue
Block a user