react-conventions/lib/components/SortableList/CustomDragLayer.js

An open source set of React components that implement Ambassador's Design and UX patterns.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _SortableItemPreview = require('./SortableItemPreview');

var _SortableItemPreview2 = _interopRequireDefault(_SortableItemPreview);

var _reactDnd = require('react-dnd');

var _style = require('./style.scss');

var _style2 = _interopRequireDefault(_style);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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; }

function getItemStyles(props) {
  var initialOffset = props.initialOffset,
      currentOffset = props.currentOffset;

  if (!initialOffset || !currentOffset) {
    return {
      display: 'none'
    };
  }

  var x = currentOffset.x,
      y = currentOffset.y;


  var transform = 'translate(0px, ' + (y - props.dimensions.top - 10) + 'px)';
  return {
    width: props.dimensions.width + 'px',
    transform: transform,
    WebkitTransform: transform
  };
}

var CustomDragLayer = function (_React$Component) {
  _inherits(CustomDragLayer, _React$Component);

  function CustomDragLayer(props) {
    _classCallCheck(this, CustomDragLayer);

    var _this = _possibleConstructorReturn(this, (CustomDragLayer.__proto__ || Object.getPrototypeOf(CustomDragLayer)).call(this, props));

    _this.renderItem = function (type, item, count) {
      return _react2.default.createElement(_SortableItemPreview2.default, { item: item, count: count });
    };

    _this.render = function () {
      var _this$props = _this.props,
          item = _this$props.item,
          itemType = _this$props.itemType,
          isDragging = _this$props.isDragging;


      if (!isDragging) {
        return null;
      }

      return _react2.default.createElement(
        'div',
        { className: _style2.default['drag-layer'] },
        _react2.default.createElement(
          'div',
          { style: getItemStyles(_this.props) },
          _this.renderItem(itemType, item, _this.props.count)
        )
      );
    };

    return _this;
  }

  return CustomDragLayer;
}(_react2.default.Component);

CustomDragLayer.propTypes = {
  item: _react2.default.PropTypes.object,
  itemType: _react2.default.PropTypes.string,
  initialOffset: _react2.default.PropTypes.shape({
    x: _react2.default.PropTypes.number.isRequired,
    y: _react2.default.PropTypes.number.isRequired
  }),
  currentOffset: _react2.default.PropTypes.shape({
    x: _react2.default.PropTypes.number.isRequired,
    y: _react2.default.PropTypes.number.isRequired
  }),
  isDragging: _react2.default.PropTypes.bool.isRequired
};
exports.default = (0, _reactDnd.DragLayer)(function (monitor) {
  return {
    item: monitor.getItem(),
    itemType: monitor.getItemType(),
    initialOffset: monitor.getInitialSourceClientOffset(),
    currentOffset: monitor.getSourceClientOffset(),
    isDragging: monitor.isDragging()
  };
})(CustomDragLayer);