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

wix-style-react

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

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

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

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

var _reactDom = _interopRequireDefault(require("react-dom"));

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

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

var _noop = _interopRequireDefault(require("lodash/noop"));

var _DragLayer = _interopRequireDefault(require("./DragLayer"));

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

var _constants = require("../constants");

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

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(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; } }

/* eslint-disable new-cap */
var source = {
  beginDrag: function beginDrag(_ref) {
    var id = _ref.id,
        index = _ref.index,
        containerId = _ref.containerId,
        groupName = _ref.groupName,
        item = _ref.item,
        onMoveOut = _ref.onMoveOut,
        onDragStart = _ref.onDragStart,
        onDrop = _ref.onDrop;

    if (onDragStart) {
      onDragStart({
        id: id,
        index: index,
        containerId: containerId,
        groupName: groupName,
        item: item
      });
    }
    /** we setup monitor.getItem() snapshot, so we will be always able to get info about item that we drag */


    return {
      id: id,
      index: index,
      containerId: containerId,
      groupName: groupName,
      originalIndex: index,
      // as index is mutable during d&d, we need another storage for original index
      originalItem: item,
      onMoveOut: onMoveOut,
      realTime: {
        onMoveOut: onMoveOut,
        onDrop: onDrop,
        containerId: containerId
      }
    };
  },
  endDrag: function endDrag(_ref2, monitor) {
    var id = _ref2.id,
        index = _ref2.index,
        containerId = _ref2.containerId,
        groupName = _ref2.groupName,
        item = _ref2.item,
        onDragEnd = _ref2.onDragEnd;

    /** if drop was called, on drop target and drag is end, then we notify parent about this */
    var onDrop = monitor.getItem().realTime.onDrop;

    if (onDragEnd) {
      onDragEnd({
        id: id,
        index: index,
        containerId: containerId,
        groupName: groupName,
        item: item
      });
    }

    if (monitor.getDropResult()) {
      var isSameGroup = groupName && monitor.getItem().groupName && groupName === monitor.getDropResult().groupName;
      var isSameContainer = containerId === monitor.getDropResult().containerId;

      if (isSameGroup || isSameContainer) {
        onDrop({
          payload: monitor.getItem().originalItem,
          // original item
          removedIndex: monitor.getItem().originalIndex,
          // original item index
          addedIndex: monitor.getItem().index,
          // new item index
          addedToContainerId: monitor.getDropResult().containerId,
          // new container for item
          removedFromContainerId: containerId // original item container

        });
      }
    }
  },
  canDrag: function canDrag(_ref3) {
    var id = _ref3.id,
        index = _ref3.index,
        containerId = _ref3.containerId,
        groupName = _ref3.groupName,
        item = _ref3.item,
        _canDrag = _ref3.canDrag;
    return _canDrag ? _canDrag({
      id: id,
      index: index,
      containerId: containerId,
      groupName: groupName,
      item: item
    }) : true;
  },
  isDragging: function isDragging(_ref4, monitor) {
    var id = _ref4.id,
        containerId = _ref4.containerId,
        groupName = _ref4.groupName;
    var item = monitor.getItem();
    var isSameGroup = groupName && item.groupName && groupName === item.groupName;
    var isSameContainer = containerId === item.containerId;
    return (isSameGroup || isSameContainer) && item.id === id;
  }
};

var collect = function collect(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isDragging: monitor.isDragging()
  };
};

var DraggableSource = /*#__PURE__*/function (_React$Component) {
  (0, _inherits2["default"])(DraggableSource, _React$Component);

  var _super = _createSuper(DraggableSource);

  function DraggableSource() {
    var _this;

    (0, _classCallCheck2["default"])(this, DraggableSource);

    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));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
      offsetOfHandle: {
        x: 0,
        y: 0
      },
      itemWidth: null
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "rootNode", null);
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "updateItemWidth", function () {
      if (_this.rootNode) {
        _this.setState({
          itemWidth: _this.rootNode.getBoundingClientRect().width
        });
      }
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_setRootNode", function (node) {
      // Don't need to reset the values if node remains the same
      if (node && _this.rootNode !== node) {
        _this.rootNode = node;
      }
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderPreview", function (_ref5) {
      var previewStyles = _ref5.previewStyles;
      var _this$props = _this.props,
          renderItem = _this$props.renderItem,
          id = _this$props.id,
          item = _this$props.item,
          delayed = _this$props.delayed;
      return renderItem({
        id: id,
        item: item,
        previewStyles: _objectSpread({
          width: _this.state.itemWidth
        }, previewStyles),
        isPreview: true,
        connectHandle: _noop["default"],
        delayed: delayed
      });
    });
    return _this;
  }

  (0, _createClass2["default"])(DraggableSource, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      if (this.props.connectDragPreview) {
        this.props.connectDragPreview((0, _DragUtils.getEmptyImage)(), {
          captureDraggingState: true
        });
      }

      this.updateDiff();
      this.updateItemWidth();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      if (prevProps.id !== this.props.id || prevProps.containerId !== this.props.containerId) {
        this.updateDiff();
      }

      if (prevProps.isDragging !== this.props.isDragging) {
        this.updateItemWidth();
      }
    }
  }, {
    key: "updateDiff",
    value: function updateDiff() {
      /* in case if we have handle, the drag will start in wrong position and we need to fix this */
      if (this.props.withHandle && this.handleNode) {
        this.setState({
          offsetOfHandle: {
            x: this.handleNode.getBoundingClientRect().x - this.rootNode.getBoundingClientRect().x,
            y: this.handleNode.getBoundingClientRect().y - this.rootNode.getBoundingClientRect().y
          }
        });
      }
    }
  }, {
    key: "_getWrapperStyles",
    value: function _getWrapperStyles() {
      var _this$props2 = this.props,
          shift = _this$props2.shift,
          ignoreMouseEvents = _this$props2.ignoreMouseEvents,
          animationDuration = _this$props2.animationDuration,
          animationTiming = _this$props2.animationTiming;

      var _ref6 = shift || [0, 0],
          _ref7 = (0, _slicedToArray2["default"])(_ref6, 2),
          xShift = _ref7[0],
          yShift = _ref7[1];

      var hasShift = xShift || yShift;
      var transition = ignoreMouseEvents ? "transform ".concat(animationDuration, "ms ").concat(animationTiming) : undefined;
      var transform = hasShift ? "translate(".concat(xShift, "px, ").concat(yShift, "px)") : undefined;
      var willChange = hasShift ? 'transform' : undefined;
      var pointerEvents = ignoreMouseEvents || hasShift ? 'none' : undefined;
      return {
        willChange: willChange,
        transition: transition,
        transform: transform,
        pointerEvents: pointerEvents
      };
    }
  }, {
    key: "_renderDraggableItem",
    value: function _renderDraggableItem() {
      var _this2 = this,
          _React$cloneElement;

      var _this$props3 = this.props,
          isDragging = _this$props3.isDragging,
          connectDragSource = _this$props3.connectDragSource,
          withHandle = _this$props3.withHandle,
          renderItem = _this$props3.renderItem,
          id = _this$props3.id,
          item = _this$props3.item,
          delayed = _this$props3.delayed,
          withStrip = _this$props3.withStrip,
          isInitialPositionToDrop = _this$props3.isInitialPositionToDrop;

      var content = /*#__PURE__*/_react["default"].cloneElement(withHandle ? renderItem({
        id: id,
        item: item,
        isPlaceholder: isDragging,
        connectHandle: function connectHandle(handle) {
          var handleWithRef = /*#__PURE__*/_react["default"].cloneElement(handle, {
            ref: function ref(node) {
              return _this2.handleNode = _reactDom["default"].findDOMNode(node);
            }
          });

          return connectDragSource(handleWithRef);
        },
        delayed: delayed,
        withStrip: withStrip,
        isInitialPositionToDrop: isInitialPositionToDrop
      }) : connectDragSource(renderItem({
        id: id,
        item: item,
        isPlaceholder: isDragging,
        connectHandle: _noop["default"],
        delayed: delayed,
        withStrip: withStrip,
        isInitialPositionToDrop: isInitialPositionToDrop
      })), (_React$cloneElement = {}, (0, _defineProperty2["default"])(_React$cloneElement, _constants.dataAttributes.draggableSource, true), (0, _defineProperty2["default"])(_React$cloneElement, _constants.dataAttributes.id, id), _React$cloneElement));

      return /*#__PURE__*/_react["default"].createElement("div", {
        style: this._getWrapperStyles()
      }, content);
    }
  }, {
    key: "_renderPreviewItem",
    value: function _renderPreviewItem() {
      var _this$props4 = this.props,
          id = _this$props4.id,
          usePortal = _this$props4.usePortal;
      return /*#__PURE__*/_react["default"].createElement(_DragLayer["default"], {
        offsetOfHandle: this.state.offsetOfHandle,
        usePortal: usePortal,
        renderPreview: this._renderPreview,
        id: id // pass 'width' this prop to rerender element with changed width from state
        ,
        width: this.state.itemWidth,
        draggedType: _types.ItemTypes.DRAGGABLE
      });
    }
  }, {
    key: "render",
    value: function render() {
      var connectDragSource = this.props.connectDragSource;
      return connectDragSource ? /*#__PURE__*/_react["default"].createElement("div", {
        ref: this._setRootNode
      }, this._renderDraggableItem(), this._renderPreviewItem()) : null;
    }
  }]);
  return DraggableSource;
}(_react["default"].Component);

DraggableSource.propTypes = {
  isDragging: _propTypes["default"].bool,
  // from react-dnd
  connectDragSource: _propTypes["default"].func,
  // from react-dnd
  connectDragPreview: _propTypes["default"].func,
  // from react-dnd
  usePortal: _propTypes["default"].bool,
  groupName: _propTypes["default"].string,
  containerId: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
  renderItem: _propTypes["default"].func,
  index: _propTypes["default"].number,
  id: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
  item: _propTypes["default"].object,
  withHandle: _propTypes["default"].bool,
  onDrop: _propTypes["default"].func,
  onMoveOut: _propTypes["default"].func,
  onDragStart: _propTypes["default"].func,
  onDragEnd: _propTypes["default"].func,

  /** visual positioning shifting for an element (transform: translate) without moving it from its real position at DOM (left, top) */
  shift: _propTypes["default"].arrayOf(_propTypes["default"].number),
  ignoreMouseEvents: _propTypes["default"].bool,

  /** animation duration in ms, default = 0 - disabled */
  animationDuration: _propTypes["default"].number,

  /** animation timing function, default = linear */
  animationTiming: _propTypes["default"].string,

  /** callback that could prevent item from dragging */
  canDrag: _propTypes["default"].func,

  /** Is delay timer still waiting before user can drag the item */
  delayed: _propTypes["default"].bool
};

var _default = (0, _reactDnd.DragSource)(_types.ItemTypes.DRAGGABLE, source, collect)(DraggableSource);

exports["default"] = _default;