@6thquake/react-material/esm/ManualDrag/ManuallyDragSource.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.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 _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

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

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

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

/**
 * @ignore - do not document.
 */
var boxstyles = {
  border: '1px dashed gray',
  padding: '0.5rem 1rem',
  cursor: 'move',
  backgroundColor: 'white',
  display: 'inline-block'
};

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

  function BoxA() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, BoxA);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(BoxA)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _this.beginDrag = function (props, monitor, component) {
      var item = {}; // 外部item，没有Index,拖入时把DragSource里面的东西拖入

      item.sourceType = 'BoxA';
      item.left = _this.refs.myRef.getBoundingClientRect().left + document.documentElement.scrollLeft;
      item.top = _this.refs.myRef.getBoundingClientRect().top + document.documentElement.scrollTop;

      if (_this.props.type === 'OUTITEM') {
        item.component = component.props.children;
      } else if (_this.props.type === 'INNERITEM') {
        item.sortFrom = component.props.index || 0;
      }

      return item;
    };

    _this.endDrag = function (props, monitor, component) {
      var item = monitor.getItem();

      if ((!!item.sortFrom || item.sortFrom === 0) && typeof component.props.remove === 'function') {
        component.props.remove(item.sortFrom);
      }
    };

    return _this;
  }

  (0, _createClass2.default)(BoxA, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.props.register(this);
    }
  }, {
    key: "getStyles",
    value: function getStyles() {
      var _this$props = this.props,
          left = _this$props.left,
          top = _this$props.top,
          monitor = _this$props.monitor,
          droptTargetLeft = _this$props.droptTargetLeft,
          droptTargetTop = _this$props.droptTargetTop;

      if (left) {
        var transform = "translate3d(".concat(left - droptTargetLeft, "px, ").concat(top - droptTargetTop, "px, 0)");
        return {
          position: 'absolute',
          // transform : transform,
          left: "".concat(left - droptTargetLeft, "px"),
          top: "".concat(top - droptTargetTop, "px"),
          opacity: monitor.isDragging() ? 0 : 1
        };
      }
    }
  }, {
    key: "render",
    value: function render() {
      return _react.default.createElement("div", {
        style: this.getStyles(),
        ref: 'myRef'
      }, _react.default.createElement("div", {
        style: boxstyles
      }, this.props.children.props.children));
    }
  }]);
  return BoxA;
}(_DragBase.SourceWrapper);

exports.default = BoxA;