pitaya-launcher/js/components/edit/tree-item.jsx

87 lines
1.9 KiB
React
Raw Normal View History

2015-09-11 16:25:45 +02:00
var React = require('react/addons');
var classNames = require('classnames');
var AppIcon = require('../common/app-icon.jsx');
var DragSource = require('react-dnd').DragSource;
var DropTarget = require('react-dnd').DropTarget;
var _ = require('lodash');
var TreeItem = React.createClass({
render: function() {
var data = this.props.data;
var appIcon = data.icon ? <AppIcon icon={data.icon} /> : null;
var connectDragSource = this.props.connectDragSource;
var connectDropTarget = this.props.connectDropTarget;
var classes = classNames({
'alert': true,
'alert-default': !this.props.isDragging && !this.props.isOver,
'alert-info': this.props.isDragging,
'alert-success': this.props.isOver
});
return connectDropTarget(connectDragSource(
<div className={classes}>
{appIcon}
<span className="app-label">{data.label}</span>
</div>
));
},
});
var dragSourceSpec = {
beginDrag: function(props) {
return props.data;
},
endDrag: function(props, monitor) {
if (!monitor.didDrop()) {
return;
}
var dropResult = monitor.getDropResult();
return props.onItemMoved(props.data, dropResult);
}
};
var dropTargetSpec = {
drop: function(props, monitor, component) {
return props.data;
},
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()
};
}
module.exports = DropTarget(['ITEM', 'NEW_ITEM'], dropTargetSpec, dropTargetCollect)(
DragSource('ITEM', dragSourceSpec, dragSourceCollect)(TreeItem)
);