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

wix-style-react

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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 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) { _defineProperty(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 = _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 ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import { DragSource } from 'react-dnd';
import noop from 'lodash/noop';
import DragLayer from './DragLayer';
import { ItemTypes } from '../types';
import { dataAttributes } from '../constants';
import { getEmptyImage } from '../DragUtils';
/* 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) {
  _inherits(DraggableSource, _React$Component);

  var _super = _createSuper(DraggableSource);

  function DraggableSource() {
    var _this;

    _classCallCheck(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));

    _defineProperty(_assertThisInitialized(_this), "state", {
      offsetOfHandle: {
        x: 0,
        y: 0
      },
      itemWidth: null
    });

    _defineProperty(_assertThisInitialized(_this), "rootNode", null);

    _defineProperty(_assertThisInitialized(_this), "updateItemWidth", function () {
      if (_this.rootNode) {
        _this.setState({
          itemWidth: _this.rootNode.getBoundingClientRect().width
        });
      }
    });

    _defineProperty(_assertThisInitialized(_this), "_setRootNode", function (node) {
      // Don't need to reset the values if node remains the same
      if (node && _this.rootNode !== node) {
        _this.rootNode = node;
      }
    });

    _defineProperty(_assertThisInitialized(_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,
        delayed: delayed
      });
    });

    return _this;
  }

  _createClass(DraggableSource, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      if (this.props.connectDragPreview) {
        this.props.connectDragPreview(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 = _slicedToArray(_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.cloneElement(withHandle ? renderItem({
        id: id,
        item: item,
        isPlaceholder: isDragging,
        connectHandle: function connectHandle(handle) {
          var handleWithRef = /*#__PURE__*/React.cloneElement(handle, {
            ref: function ref(node) {
              return _this2.handleNode = ReactDOM.findDOMNode(node);
            }
          });
          return connectDragSource(handleWithRef);
        },
        delayed: delayed,
        withStrip: withStrip,
        isInitialPositionToDrop: isInitialPositionToDrop
      }) : connectDragSource(renderItem({
        id: id,
        item: item,
        isPlaceholder: isDragging,
        connectHandle: noop,
        delayed: delayed,
        withStrip: withStrip,
        isInitialPositionToDrop: isInitialPositionToDrop
      })), (_React$cloneElement = {}, _defineProperty(_React$cloneElement, dataAttributes.draggableSource, true), _defineProperty(_React$cloneElement, dataAttributes.id, id), _React$cloneElement));
      return /*#__PURE__*/React.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.createElement(DragLayer, {
        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: ItemTypes.DRAGGABLE
      });
    }
  }, {
    key: "render",
    value: function render() {
      var connectDragSource = this.props.connectDragSource;
      return connectDragSource ? /*#__PURE__*/React.createElement("div", {
        ref: this._setRootNode
      }, this._renderDraggableItem(), this._renderPreviewItem()) : null;
    }
  }]);

  return DraggableSource;
}(React.Component);

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

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

  /** animation duration in ms, default = 0 - disabled */
  animationDuration: PropTypes.number,

  /** animation timing function, default = linear */
  animationTiming: PropTypes.string,

  /** callback that could prevent item from dragging */
  canDrag: PropTypes.func,

  /** Is delay timer still waiting before user can drag the item */
  delayed: PropTypes.bool
};
export default DragSource(ItemTypes.DRAGGABLE, source, collect)(DraggableSource);