134 lines
2.9 KiB
JavaScript
134 lines
2.9 KiB
JavaScript
var React = require('react');
|
|
var connect = require('react-redux').connect;
|
|
var actions = require('../../store/actions');
|
|
var TreeItem = require('./tree-item.js');
|
|
var DropTarget = require('react-dnd').DropTarget;
|
|
var _ = require('lodash');
|
|
|
|
var TreeNode = React.createClass({
|
|
|
|
render: function() {
|
|
|
|
var data = this.props.data || {};
|
|
var subItems = data.items || [];
|
|
|
|
var listElements = subItems.map(function(subItem, i) {
|
|
return (
|
|
<li key={i} >
|
|
<TreeNode data={subItem}
|
|
selectedItem={this.props.selectedItem}
|
|
onItemClicked={this.props.onItemClicked}
|
|
onItemMoved={this.props.onItemMoved}
|
|
onItemRemoved={this.props.onItemRemoved}
|
|
theme={this.props.theme} />
|
|
</li>
|
|
);
|
|
}.bind(this));
|
|
|
|
var appEntry = data.icon || data.label ?
|
|
this.renderTreeItem(data):
|
|
null
|
|
;
|
|
|
|
return (
|
|
<div className="tree-item">
|
|
{appEntry}
|
|
<ul>
|
|
{listElements}
|
|
</ul>
|
|
</div>
|
|
);
|
|
|
|
},
|
|
|
|
renderTreeItem: function(data) {
|
|
return (
|
|
<TreeItem data={data}
|
|
selected={data === this.props.selectedItem}
|
|
{...this.props} />
|
|
);
|
|
}
|
|
|
|
});
|
|
|
|
var ProfileTree = React.createClass({
|
|
|
|
render: function() {
|
|
|
|
var connectDropTarget = this.props.connectDropTarget;
|
|
|
|
return connectDropTarget(
|
|
<div className="profile-tree">
|
|
{this.renderTreeNode(this.props.profile)}
|
|
</div>
|
|
);
|
|
|
|
},
|
|
|
|
renderTreeNode: function(data) {
|
|
return (
|
|
<TreeNode data={data}
|
|
selectedItem={this.props.selectedItem}
|
|
onItemClicked={this.onItemSelected}
|
|
onItemMoved={this.onItemMoved}
|
|
onItemRemoved={this.onItemRemoved}
|
|
theme={this.props.theme} />
|
|
);
|
|
},
|
|
|
|
onItemMoved: function(movedItem, targetItem) {
|
|
this.props.dispatch(actions.edit.moveProfileItem(movedItem, targetItem));
|
|
},
|
|
|
|
onItemSelected: function(selectedItem) {
|
|
this.props.dispatch(actions.edit.selectProfileItem(selectedItem));
|
|
},
|
|
|
|
onItemRemoved: function(selectedItem) {
|
|
this.props.dispatch(actions.edit.removeProfileItem(selectedItem));
|
|
}
|
|
|
|
});
|
|
|
|
function select(state) {
|
|
return {
|
|
profile: state.profile,
|
|
theme: state.theme,
|
|
selectedItem: state.selectedItem
|
|
};
|
|
}
|
|
|
|
var dropTargetSpec = {
|
|
|
|
drop: function(props, monitor, component) {
|
|
if(!monitor.didDrop()) {
|
|
return props.profile;
|
|
}
|
|
},
|
|
|
|
canDrop: function(props, monitor) {
|
|
var draggedItem = monitor.getItem();
|
|
return !_.isEqual(draggedItem, props.data);
|
|
}
|
|
|
|
};
|
|
|
|
function dragSourceCollect(connect, monitor) {
|
|
return {
|
|
connectDragSource: connect.dragSource(),
|
|
isDragging: monitor.isDragging()
|
|
};
|
|
}
|
|
|
|
function dropTargetCollect(connect, monitor) {
|
|
return {
|
|
connectDropTarget: connect.dropTarget(),
|
|
isOver: monitor.isOver(),
|
|
canDrop: monitor.canDrop()
|
|
};
|
|
}
|
|
|
|
module.exports = connect(select)(
|
|
DropTarget(['ITEM', 'NEW_ITEM'], dropTargetSpec, dropTargetCollect)(ProfileTree)
|
|
);
|