@6thquake/react-material/esm/ManualDrag/ManuallyDropTarget.js

React components that implement Google's Material Design.

"use strict";

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

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

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

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

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

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

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 _react = _interopRequireWildcard(require("react"));

var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"));

var _DragBase = require("../DragBase");

/**
 * @ignore - do not document.
 */
var rootstyles = {
  width: '600px',
  border: '1px solid',
  height: '280px',
  position: 'relative'
};

function snapToGrid(x, y) {
  var snappedX = Math.round(x / 32) * 32;
  var snappedY = Math.round(y / 32) * 32;
  return [snappedX, snappedY];
}

var TargetBox =
/*#__PURE__*/
function (_TargetWrapper) {
  (0, _inherits2.default)(TargetBox, _TargetWrapper);

  function TargetBox(props) {
    var _this;

    (0, _classCallCheck2.default)(this, TargetBox);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(TargetBox).call(this, props));

    _this.drop = function (props, monitor, component) {
      var item = monitor.getItem();
      var delta = monitor.getDifferenceFromInitialOffset();
      var left = Math.round(item.left + delta.x);
      var top = Math.round(item.top + delta.y);

      if (_this.props.snapToGrid) {
        var _snapToGrid = snapToGrid(left, top);

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

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

      if (!item.component) {
        // 内部元素被拖动
        _this.hasDroped = true;

        _this.moveBox(item.sortFrom, left, top);
      }

      if (item.component) {
        // 外部元素
        var temp = _this.state.childComponents;
        temp.push({
          component: item.component,
          left: left,
          top: top
        });

        _this.setState({
          childComponents: temp
        });
      }
    };

    _this.removeComponent = function (index) {
      if (!index && index != 0) {
        return;
      }

      if (_this.hasDroped) {// 说明drop在了panel内部 不作处理
      } else {
        // 说明drop在了panle外部 需要删除指定index
        var _cc = _this.state.childComponents;

        if (!_cc) {
          return;
        }

        _cc.splice(index, 1);

        _this.setState({
          childComponents: _cc
        });
      }

      _this.hasDroped = false;
    };

    _this.state = {
      childComponents: [],
      droptTargetTop: 0,
      droptTargetLeft: 0
    };
    return _this;
  }

  (0, _createClass2.default)(TargetBox, [{
    key: "moveBox",
    value: function moveBox(sortFrom, left, top) {
      var _this2 = this;

      this.state.childComponents.map(function (currentV, index) {
        _this2.setState((0, _immutabilityHelper.default)(_this2.state, {
          childComponents: (0, _defineProperty2.default)({}, sortFrom, {
            $merge: {
              left: left,
              top: top
            }
          })
        }));
      });
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      this.props.register(this);
      this.setState({
        droptTargetLeft: this.dragBox.getBoundingClientRect().left,
        droptTargetTop: this.dragBox.getBoundingClientRect().top
      });
      var acceptSource = ['BoxA'];
      acceptSource = [].concat((0, _toConsumableArray2.default)(acceptSource), (0, _toConsumableArray2.default)(this.props.acceptItem));
      this.props.accept(acceptSource); // 给DropTartget传递自己的acceptItem
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var _this$state = this.state,
          childComponents = _this$state.childComponents,
          droptTargetLeft = _this$state.droptTargetLeft,
          droptTargetTop = _this$state.droptTargetTop;
      var _childComponents = null;

      if (childComponents.length > 0) {
        var tempChild = childComponents.map(function (o, i) {
          return _react.default.cloneElement(o.component, {
            key: Math.random(),
            type: 'INNERITEM',
            left: o.left,
            top: o.top,
            droptTargetLeft: droptTargetLeft,
            droptTargetTop: droptTargetTop
          });
        });
        _childComponents = tempChild.map(function (currentValue, index) {
          return _react.default.createElement(_DragBase.DragSource, {
            index: index,
            remove: _this3.removeComponent
          }, currentValue);
        });
      }

      return _react.default.createElement("div", {
        style: rootstyles,
        ref: function ref(box) {
          _this3.dragBox = box;
        }
      }, _childComponents);
    }
  }]);
  return TargetBox;
}(_DragBase.TargetWrapper);

var _default = TargetBox;
exports.default = _default;