@6thquake/react-material/esm/DragableLayer/Container.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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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

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 _reactAddonsUpdate = _interopRequireDefault(require("react-addons-update"));

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

var _shouldPureComponentUpdate = _interopRequireDefault(require("./shouldPureComponentUpdate"));

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

var _DraggableBox = _interopRequireDefault(require("./DraggableBox"));

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

var _class, _temp;

var styles = {
  width: 300,
  height: 300,
  border: '1px solid black',
  position: 'relative'
};
var boxTarget = {
  drop: function drop(props, monitor, component) {
    var delta = monitor.getDifferenceFromInitialOffset();
    var item = monitor.getItem();
    var left = Math.round(item.left + delta.x);
    var top = Math.round(item.top + delta.y);

    if (props.snapToGrid) {
      var _snapToGrid = (0, _snapToGrid3.default)(left, top);

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

      left = _snapToGrid2[0];
      top = _snapToGrid2[1];
    }

    component.moveBox(item.id, left, top);
  }
};
var con = (_temp = _class =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(Container, _Component);

  function Container(props) {
    var _this;

    (0, _classCallCheck2.default)(this, Container);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Container).call(this, props));
    _this.shouldComponentUpdate = _shouldPureComponentUpdate.default;
    _this.state = {
      boxes: {
        a: {
          top: 20,
          left: 80,
          title: 'Drag me around'
        },
        b: {
          top: 180,
          left: 20,
          title: 'Drag me too'
        }
      }
    };
    return _this;
  }

  (0, _createClass2.default)(Container, [{
    key: "moveBox",
    value: function moveBox(id, left, top) {
      this.setState((0, _reactAddonsUpdate.default)(this.state, {
        boxes: (0, _defineProperty2.default)({}, id, {
          $merge: {
            left: left,
            top: top
          }
        })
      }));
    }
  }, {
    key: "renderBox",
    value: function renderBox(item, key) {
      return _react.default.createElement(_DraggableBox.default, (0, _extends2.default)({
        key: key,
        id: key
      }, item));
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var connectDropTarget = this.props.connectDropTarget;
      var boxes = this.state.boxes;
      return connectDropTarget(_react.default.createElement("div", {
        style: styles
      }, Object.keys(boxes).map(function (key) {
        return _this2.renderBox(boxes[key], key);
      })));
    }
  }]);
  return Container;
}(_react.Component), _class.propTypes = {
  connectDropTarget: _propTypes.default.func.isRequired,
  snapToGrid: _propTypes.default.bool.isRequired
}, _temp);

var _default = (0, _reactDnd.DropTarget)(_ItemTypes.default.BOX, boxTarget, function (connect) {
  return {
    connectDropTarget: connect.dropTarget()
  };
})(con);

exports.default = _default;