UNPKG

@bigfishtv/cockpit

Version:

120 lines (103 loc) 4.14 kB
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 };