@6thquake/react-material/DragableLayer/CustomDragLayer.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

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

var _ItemTypes = _interopRequireDefault(require("./ItemTypes"));

var _BoxDragPreview = _interopRequireDefault(require("./BoxDragPreview"));

var _snapToGrid3 = _interopRequireDefault(require("./snapToGrid"));

var _class, _temp;

var layerStyles = {
  position: 'fixed',
  pointerEvents: 'none',
  zIndex: 100,
  left: 0,
  top: 0,
  width: '100%',
  height: '100%'
};

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

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

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

  if (props.snapToGrid) {
    x -= initialOffset.x;
    y -= initialOffset.y;

    var _snapToGrid = (0, _snapToGrid3.default)(x, y);

    var _snapToGrid2 = (0, _slicedToArray2.default)(_snapToGrid, 2);

    x = _snapToGrid2[0];
    y = _snapToGrid2[1];
    x += initialOffset.x;
    y += initialOffset.y;
  }

  var transform = "translate(".concat(x, "px, ").concat(y, "px)");
  return {
    transform: transform,
    WebkitTransform: transform
  };
}

var cdl = (_temp = _class =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(CustomDragLayer, _Component);

  function CustomDragLayer() {
    (0, _classCallCheck2.default)(this, CustomDragLayer);
    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CustomDragLayer).apply(this, arguments));
  }

  (0, _createClass2.default)(CustomDragLayer, [{
    key: "renderItem",
    value: function renderItem(type, item) {
      switch (type) {
        case _ItemTypes.default.BOX:
          return _react.default.createElement(_BoxDragPreview.default, {
            title: item.title
          });

        default:
          return null;
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          item = _this$props.item,
          itemType = _this$props.itemType,
          isDragging = _this$props.isDragging;

      if (!isDragging) {
        return null;
      }

      return _react.default.createElement("div", {
        style: layerStyles
      }, _react.default.createElement("div", {
        style: getItemStyles(this.props)
      }, this.renderItem(itemType, item)));
    }
  }]);
  return CustomDragLayer;
}(_react.Component), _class.propTypes = {
  currentOffset: _propTypes.default.shape({
    x: _propTypes.default.number.isRequired,
    y: _propTypes.default.number.isRequired
  }),
  initialOffset: _propTypes.default.shape({
    x: _propTypes.default.number.isRequired,
    y: _propTypes.default.number.isRequired
  }),
  isDragging: _propTypes.default.bool.isRequired,
  item: _propTypes.default.object,
  itemType: _propTypes.default.string,
  snapToGrid: _propTypes.default.bool.isRequired
}, _temp);

var _default = (0, _reactDnd.DragLayer)(function (monitor) {
  return {
    item: monitor.getItem(),
    itemType: monitor.getItemType(),
    initialOffset: monitor.getInitialSourceClientOffset(),
    currentOffset: monitor.getSourceClientOffset(),
    isDragging: monitor.isDragging()
  };
})(cdl);

exports.default = _default;