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

wix-style-react

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
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";
var _excluded = ["listOfPropsThatAffectItems"],
    _excluded2 = ["listOfPropsThatAffectItems"],
    _excluded3 = ["hasDragged"];

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 shallowEqual from 'shallowequal';
import DraggableSource from './components/DraggableSource';
import DraggableTarget from './components/DraggableTarget';
import DraggableManager from './components/DraggableManager';
export var Draggable = /*#__PURE__*/function (_React$Component) {
  _inherits(Draggable, _React$Component);

  var _super = _createSuper(Draggable);

  function Draggable() {
    var _this;

    _classCallCheck(this, Draggable);

    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", {
      delayed: false
    });

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

    _defineProperty(_assertThisInitialized(_this), "resetDelayState", function () {
      if (!!_this.props.delay) {
        _this.setState({
          delayed: false
        });

        _this.resetDelayTimer();
      }
    });

    _defineProperty(_assertThisInitialized(_this), "resetDelayTimer", function () {
      clearTimeout(_this.delayTimer);
      _this.delayTimer = null;
    });

    _defineProperty(_assertThisInitialized(_this), "countDelay", function () {
      if (!!_this.props.delay) {
        _this.setState({
          delayed: true
        });

        _this.resetDelayTimer();

        _this.delayTimer = setTimeout(function () {
          return _this.setState({
            delayed: false
          });
        }, _this.props.delay);
      }
    });

    _defineProperty(_assertThisInitialized(_this), "onDragStart", function (_ref) {
      var id = _ref.id,
          index = _ref.index,
          containerId = _ref.containerId,
          groupName = _ref.groupName,
          item = _ref.item;

      if (_this.props.onDragStart) {
        _this.props.onDragStart({
          id: id,
          index: index,
          containerId: containerId,
          groupName: groupName,
          item: item
        });
      }

      _this.resetDelayTimer();
    });

    _defineProperty(_assertThisInitialized(_this), "onDragEnd", function (_ref2) {
      var id = _ref2.id,
          index = _ref2.index,
          containerId = _ref2.containerId,
          groupName = _ref2.groupName,
          item = _ref2.item;

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

      _this.resetDelayState();
    });

    _defineProperty(_assertThisInitialized(_this), "canDrag", function (_ref3) {
      var id = _ref3.id,
          index = _ref3.index,
          containerId = _ref3.containerId,
          groupName = _ref3.groupName,
          item = _ref3.item;
      var canDragByDelay = !!_this.props.delay ? !_this.state.delayed : true;
      var propsCanDrag = _this.props.canDrag ? _this.props.canDrag({
        id: id,
        index: index,
        containerId: containerId,
        groupName: groupName,
        item: item
      }) : true;

      if (!canDragByDelay) {
        _this.resetDelayState();
      }

      return canDragByDelay && propsCanDrag;
    });

    return _this;
  }

  _createClass(Draggable, [{
    key: "shouldComponentUpdate",
    value: function shouldComponentUpdate(_ref4, nextState) {
      var listOfPropsThatAffectItems = _ref4.listOfPropsThatAffectItems,
          nextProps = _objectWithoutProperties(_ref4, _excluded);

      var _this$props = this.props,
          prevListOfPropsThatAffectItems = _this$props.listOfPropsThatAffectItems,
          prevProps = _objectWithoutProperties(_this$props, _excluded2);

      if (!shallowEqual(nextProps, prevProps) || !shallowEqual(listOfPropsThatAffectItems, prevListOfPropsThatAffectItems)) {
        return true;
      }

      if (!shallowEqual(nextState, this.state)) {
        return true;
      }

      return false;
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.resetDelayTimer();
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          hasDragged = _this$props2.hasDragged,
          restProps = _objectWithoutProperties(_this$props2, _excluded3);

      return /*#__PURE__*/React.createElement(DraggableTarget, restProps, /*#__PURE__*/React.createElement("div", {
        onMouseDown: this.countDelay,
        onMouseUp: this.resetDelayState,
        "data-hook": "delay-wrapper"
      }, /*#__PURE__*/React.createElement(DraggableSource, _extends({}, restProps, {
        ignoreMouseEvents: hasDragged,
        onDragStart: this.onDragStart,
        onDragEnd: this.onDragEnd,
        canDrag: this.canDrag,
        delayed: !!this.props.delay && this.state.delayed
      }))));
    }
  }]);

  return Draggable;
}(React.Component);
Draggable.defaultProps = {
  droppable: true
};
Draggable.propTypes = {
  /** indicates if element can be drop at this place */
  droppable: PropTypes.bool,

  /** decide whether to render a handle using `connectHandle` (see below) */
  withHandle: PropTypes.bool,

  /** uniq id of container that contain current draggable item */
  containerId: PropTypes.string,

  /* name of group between inside of each dnd is allowed */
  groupName: PropTypes.string,

  /* custom renderer for item */
  renderItem: PropTypes.func,

  /* position of item in container items array */
  index: PropTypes.number,

  /* uniq id of an item */
  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

  /* model that represent item */
  item: PropTypes.object,

  /** callback when item was moved out from current container to another container */
  onMoveOut: PropTypes.func,

  /** callback when item was dropped in a new location */
  onDrop: PropTypes.func,

  /** callback when item is hovered*/
  onHover: PropTypes.func,

  /** callback for drag start */
  onDragStart: PropTypes.func,

  /** callback for drag end */
  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),

  /** flag that indicates that there's an item being dragged */
  hasDragged: PropTypes.bool,

  /** sets draggable item node & additional info for animation positions calculations */
  setWrapperNode: PropTypes.func,

  /** 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,
  delay: PropTypes.number,

  /**
   In case that you are using some external props inside of renderItems method,
   you need to define them here.
    renderItem = ({ item }) => <div key={item.id}>{this.props.myAwesomeProp}</div>
    render() {
      return (
        <SortableList
          ...
          listOfPropsThatAffectItems={[this.props.myAwesomeProp]}
        />
      )
    }
   */
  listOfPropsThatAffectItems: PropTypes.array
};
Draggable.Item = Draggable;
Draggable.Manager = DraggableManager;
export default Draggable;