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

wix-style-react

import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

import React from 'react';
import PropTypes from 'prop-types';
import { DropTarget } from 'react-dnd';
import { ItemTypes } from '../types';
import { dataAttributes } from '../constants';
/* eslint-disable new-cap */

var target = {
  drop: function drop(props, monitor) {
    /** if drop was already done(on child), we skip this drop call */
    if (monitor.getDropResult()) {
      return;
    }
    /**
      after drop released we send containerId and index of dropped item to dropResult,
      so endDrag inside of drag source can use this data
    */


    return {
      containerId: props.containerId,
      index: props.index,
      groupName: props.groupName
    };
  },
  canDrop: function canDrop(props) {
    return props.droppable;
  },
  hover: function hover(props, monitor, component) {
    var monitorItem = monitor.getItem();
    var dragIndex = monitorItem.index; // position of item that we drag

    var hoverIndex = props.index; // position of item that we hover(want to put draggable item on it)

    var isSameGroup = props.groupName && monitorItem.groupName && props.groupName === monitorItem.groupName; // check that items from same group

    var isSameContainer = props.containerId === monitorItem.realTime.containerId; // check that items from same container

    /** in case that item not in same group and not from same container - do nothing */

    if (!isSameContainer && !isSameGroup) {
      return;
    }
    /** in case that we hover over itself - do nothing */


    if (!props.droppable || !component || hoverIndex === dragIndex && isSameContainer) {
      return;
    }
    /**
      if item is from same group but different container, that's 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.onDrop = props.onDrop;
    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({
      removedIndex: dragIndex,
      addedIndex: hoverIndex,
      id: monitorItem.id,
      item: monitorItem.originalItem
    });
    /** set new index for item */

    monitorItem.index = hoverIndex;
  }
};

var collect = function collect(connect) {
  return {
    connectDropTarget: connect.dropTarget()
  };
};

var DraggableTarget = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(DraggableTarget, _React$PureComponent);

  var _super = _createSuper(DraggableTarget);

  function DraggableTarget() {
    var _this;

    _classCallCheck(this, DraggableTarget);

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

    _this = _super.call.apply(_super, [this].concat(args));

    _defineProperty(_assertThisInitialized(_this), "registerNode", function (node) {
      _this.props.setWrapperNode(node, _this.props.index, _this.props.item);
    });

    return _this;
  }

  _createClass(DraggableTarget, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          children = _this$props.children,
          connectDropTarget = _this$props.connectDropTarget;
      if (!connectDropTarget) return null;
      return connectDropTarget( /*#__PURE__*/React.createElement("div", _extends({
        ref: this.registerNode
      }, _defineProperty({}, dataAttributes.draggableTarget, true)), children));
    }
  }]);

  return DraggableTarget;
}(React.PureComponent);

DraggableTarget.defaultProps = {
  droppable: true
};
DraggableTarget.propTypes = {
  dataHook: PropTypes.string,
  children: PropTypes.any,
  connectDropTarget: PropTypes.func,
  // from react-dnd
  containerId: PropTypes.string,
  droppable: PropTypes.bool,
  groupName: PropTypes.string,
  index: PropTypes.number,
  onMoveOut: PropTypes.func,
  onDrop: PropTypes.func,
  onHover: PropTypes.func,
  setWrapperNode: PropTypes.func,
  item: PropTypes.object
};
export default DropTarget(ItemTypes.DRAGGABLE, target, collect)(DraggableTarget);