wix-style-react/dist/src/DragAndDrop/Draggable/components/Container.js

wix-style-react

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _dec, _class;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _WixComponent2 = require('../../../BaseComponents/WixComponent');

var _WixComponent3 = _interopRequireDefault(_WixComponent2);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _DragUtils = require('../DragUtils');

var _types = require('../types');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

/* eslint-disable new-cap */

var getRelativePositions = function getRelativePositions(child, parent) {
  var topPositionOfChild = child.getBoundingClientRect().top - parent.getBoundingClientRect().top;
  var bottomPositionOfChild = topPositionOfChild + child.getBoundingClientRect().height;

  return {
    top: topPositionOfChild,
    bottom: bottomPositionOfChild
  };
};

var target = {
  drop: function drop(props, monitor) {
    /** if drop was already done(on child), we skip this drop call */
    if (monitor.getDropResult()) {
      return;
    }
    return {
      containerId: props.containerId,
      groupName: props.groupName,
      index: monitor.getItem().index
    };
  },
  hover: function hover(props, monitor, component) {
    if (!component) {
      return;
    }
    /**
      in this block we check that user dragging item over container empty pars
      and not over other draggable(sortable items)
    */

    var _getRelativePositions = getRelativePositions(component.childNode, component.rootNode),
        top = _getRelativePositions.top,
        bottom = _getRelativePositions.bottom;

    var _dragCoordinates = (0, _DragUtils.dragCoordinates)({ monitor: monitor, component: component }),
        hoverClientY = _dragCoordinates.hoverClientY;

    var isHoverInBannedArea = hoverClientY > top && hoverClientY < bottom || !monitor.isOver();
    if (isHoverInBannedArea) {
      return;
    }
    /** end of block */

    /**
      in this block we check, that user dragging item(from some container with group)
      over container with same group
    */
    var monitorItem = monitor.getItem();
    var isSameGroup = props.groupName && monitorItem.groupName && props.groupName === monitorItem.groupName;
    if (!isSameGroup || !component) {
      return;
    }
    /** end of block */
    var dragIndex = monitorItem.index; // position of item that we drag in items array
    var hoverIndex = hoverClientY < top ? 0 : props.total; // if user drag item above other items - add to the top, otherwise - add to the bottom
    var isSameContainer = props.containerId === monitorItem.realTime.containerId; // check do we hover over same container(from which item is)

    /** in case that we hover over itself - do nothing */
    if (!component || hoverIndex === dragIndex && isSameContainer) {
      return;
    }

    /**
      if item is from same group but different container, thats mean that we move item
      from one container to another, and we need to move out item from previous container
    */
    if (isSameGroup && !isSameContainer) {
      monitorItem.realTime.onMoveOut(monitorItem.id);
    }
    /**
      as react-dnd store same snapshot in monitor(so containerId of item will be same, even if we moved it with hover to another container)
      after any hovers, we need to save also real position of monitor, with real links to current container
    */
    monitorItem.realTime.onMoveOut = props.onMoveOut;
    monitorItem.realTime.containerId = props.containerId;
    /**
      call callback, to ask parent to do some action, for example swap items or add new one,
      we send original position of item and new one, also id of item and original item state(
        it required for case, when we moving item from 1 container to another
      )
    */
    props.onHover(dragIndex, hoverIndex, {
      id: monitorItem.id,
      item: monitorItem.originalItem
    });
    /** set new index for item */
    monitor.getItem().index = hoverIndex;
  }
};

var Container = (_dec = (0, _reactDnd.DropTarget)(_types.ItemTypes.DRAGGABLE, target, function (connect) {
  return {
    connectDropTarget: connect.dropTarget()
  };
}), _dec(_class = function (_WixComponent) {
  _inherits(Container, _WixComponent);

  function Container() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, Container);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Container.__proto__ || Object.getPrototypeOf(Container)).call.apply(_ref, [this].concat(args))), _this), _this.setRootRef = function (node) {
      return _this.rootNode = node;
    }, _this.setChildRef = function (node) {
      return _this.childNode = node;
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(Container, [{
    key: 'render',
    value: function render() {
      if (!this.props.connectDropTarget) {
        return null;
      }
      return this.props.connectDropTarget(_react2.default.createElement(
        'div',
        { className: this.props.className, ref: this.setRootRef },
        _react2.default.cloneElement(this.props.children, { ref: this.setChildRef })
      ));
    }
  }]);

  return Container;
}(_WixComponent3.default)) || _class);


Container.propTypes = {
  children: _propTypes2.default.element.isRequired,
  className: _propTypes2.default.string,
  containerId: _propTypes2.default.string,
  groupName: _propTypes2.default.string,
  index: _propTypes2.default.number,
  onMoveOut: _propTypes2.default.func,
  onHover: _propTypes2.default.func
};

exports.default = Container;