@bigfishtv/cockpit
Version:
120 lines (103 loc) • 4.14 kB
JavaScript
var _dec, _class, _class2, _temp;
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { DragLayer } from 'react-dnd';
import { getChildByIdImmutable } from '../../utils/treeUtils';
/**
* Wrapper for TreeItem being dragged
*/
var TreeDragLayer = (_dec = DragLayer(function (monitor) {
return {
item: monitor.getItem(),
itemType: monitor.getItemType(),
initialOffset: monitor.getInitialSourceClientOffset(),
currentOffset: monitor.getSourceClientOffset()
};
}), _dec(_class = (_temp = _class2 = function (_Component) {
_inherits(TreeDragLayer, _Component);
function TreeDragLayer() {
_classCallCheck(this, TreeDragLayer);
var _this = _possibleConstructorReturn(this, _Component.call(this));
_this.state = {
title: '',
count: 0
};
return _this;
}
TreeDragLayer.prototype.componentWillUpdate = function componentWillUpdate(nextProps, nextState) {
if (!this.props.dragging && nextProps.dragging) {
var selectedIds = nextProps.selectedIds,
InflatedTree = nextProps.InflatedTree;
var title = '';
var count = 0;
if (selectedIds.length == 1) {
var item = getChildByIdImmutable(selectedIds[0], InflatedTree).toObject();
title = item.title || item.name;
} else if (selectedIds.length > 1) {
var titles = selectedIds.map(function (id) {
var item = getChildByIdImmutable(id, InflatedTree).toObject();
return item.title || item.name;
});
count = selectedIds.length;
title = titles.join(', ');
}
this.setState({ title: title, count: count });
}
};
TreeDragLayer.prototype.render = function render() {
var _props = this.props,
initialOffset = _props.initialOffset,
currentOffset = _props.currentOffset,
dragging = _props.dragging;
if (!dragging || !initialOffset || !currentOffset) return null;
var title = this.state.title;
var count = this.state.count;
var transform = 'translate(' + currentOffset.x + 'px, ' + currentOffset.y + 'px)';
var styles = { transform: transform, WebkitTransform: transform };
return React.createElement(
'div',
{ className: 'tree-overlay' },
React.createElement(
'div',
{ className: 'tree-node', style: styles },
React.createElement(
'div',
{ className: 'tree-cell' },
count > 1 && React.createElement(
'div',
{ className: 'tree-cell-count' },
count
),
React.createElement(
'div',
{ className: 'tree-cell-title' },
title
)
)
)
);
};
return TreeDragLayer;
}(Component), _class2.propTypes = {
/** disregard - provided by react-dnd */
initialOffset: PropTypes.shape({
x: PropTypes.number.isRequired,
y: PropTypes.number.isRequired
}),
/** disregard - provided by react-dnd */
currentOffset: PropTypes.shape({
x: PropTypes.number.isRequired,
y: PropTypes.number.isRequired
}),
/** if item is being dragged */
dragging: PropTypes.bool,
/** list of ids for selected items */
selectedIds: PropTypes.array,
/** immutable tree, list of maps of list of maps etc. */
InflatedTree: ImmutablePropTypes.listOf(ImmutablePropTypes.map)
}, _temp)) || _class);
export { TreeDragLayer as default };