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

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

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

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

/**
 * @ignore - do not document.
 */
var activeStyle = {
  height: '30px',
  minWidth: '80px',
  position: 'absolute',
  top: '15px',
  left: '50%',
  transform: 'translate(-50%, 0%)'
};
var boxTarget = {
  drop: function drop(props, monitor) {
    if (props.onDrop) {
      props.onDrop(props, monitor);
    }
  }
};

function collect(connect, monitor) {
  return {
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
    canDrop: monitor.canDrop()
  };
}

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

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

  (0, _createClass2.default)(TargetBox, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          canDrop = _this$props.canDrop,
          isOver = _this$props.isOver,
          connectDropTarget = _this$props.connectDropTarget,
          beforeDragMention = _this$props.beforeDragMention,
          onDragMention = _this$props.onDragMention;
      var isActive = canDrop && isOver;
      return connectDropTarget(_react.default.createElement("div", null, _react.default.createElement("div", {
        style: activeStyle
      }, " ", isActive ? onDragMention : beforeDragMention, " "), this.props.children));
    }
  }]);
  return TargetBox;
}(_react.Component);

var _default = (0, _reactDnd.DropTarget)(function (props) {
  return props.accepts;
}, boxTarget, collect)(TargetBox);

exports.default = _default;