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

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

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

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

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

var _reactDndHtml5Backend = require("react-dnd-html5-backend");

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

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

var _Box = _interopRequireDefault(require("./Box"));

var _class, _temp;

var boxSource = {
  beginDrag: function beginDrag(props) {
    var id = props.id,
        title = props.title,
        left = props.left,
        top = props.top;
    return {
      id: id,
      title: title,
      left: left,
      top: top
    };
  }
};

function getStyles(props) {
  var left = props.left,
      top = props.top,
      isDragging = props.isDragging;
  var transform = "translate3d(".concat(left, "px, ").concat(top, "px, 0)");
  return {
    position: 'absolute',
    transform: transform,
    WebkitTransform: transform,
    // IE fallback: hide the real node using CSS when dragging
    // because IE will ignore our custom "empty image" drag preview.
    opacity: isDragging ? 0 : 1,
    height: isDragging ? 0 : ''
  };
}

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

  function DraggableBox() {
    var _getPrototypeOf2;

    var _this;

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

    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)(DraggableBox)).call.apply(_getPrototypeOf2, [this].concat(args)));
    _this.shouldComponentUpdate = _shouldPureComponentUpdate.default;
    return _this;
  }

  (0, _createClass2.default)(DraggableBox, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      // Use empty image as a drag preview so browsers don't draw it
      // and we can draw whatever we want on the custom drag layer instead.
      this.props.connectDragPreview((0, _reactDndHtml5Backend.getEmptyImage)(), {
        // IE fallback: specify that we'd rather screenshot the node
        // when it already knows it's being dragged so we can hide it with CSS.
        captureDraggingState: true
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          title = _this$props.title,
          connectDragSource = _this$props.connectDragSource;
      return connectDragSource(_react.default.createElement("div", {
        style: getStyles(this.props)
      }, _react.default.createElement(_Box.default, {
        title: title
      })));
    }
  }]);
  return DraggableBox;
}(_react.Component), _class.propTypes = {
  connectDragPreview: _propTypes.default.func.isRequired,
  connectDragSource: _propTypes.default.func.isRequired,
  id: _propTypes.default.any.isRequired,
  isDragging: _propTypes.default.bool.isRequired,
  left: _propTypes.default.number.isRequired,
  title: _propTypes.default.string.isRequired,
  top: _propTypes.default.number.isRequired
}, _temp);

var _default = (0, _reactDnd.DragSource)(_ItemTypes.default.BOX, boxSource, function (connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isDragging: monitor.isDragging()
  };
})(db);

exports.default = _default;