@wix/design-system/dist/cjs/DragAndDrop/Draggable/Draggable.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = exports.Draggable = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _shallowequal = _interopRequireDefault(require("shallowequal"));
var _DraggableSource = _interopRequireDefault(require("./components/DraggableSource"));
var _DraggableTarget = _interopRequireDefault(require("./components/DraggableTarget"));
var _DraggableManager = _interopRequireDefault(require("./components/DraggableManager"));
var _excluded = ["listOfPropsThatAffectItems"],
  _excluded2 = ["listOfPropsThatAffectItems"],
  _excluded3 = ["hasDragged"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/DragAndDrop/Draggable/Draggable.jsx";
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var Draggable = exports.Draggable = /*#__PURE__*/function (_React$Component) {
  function Draggable() {
    var _this;
    (0, _classCallCheck2["default"])(this, Draggable);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, Draggable, [].concat(args));
    _this.state = {
      delayed: false
    };
    _this.delayTimer = null;
    _this.resetDelayState = function () {
      if (!!_this.props.delay) {
        _this.setState({
          delayed: false
        });
        _this.resetDelayTimer();
      }
    };
    _this.resetDelayTimer = function () {
      clearTimeout(_this.delayTimer);
      _this.delayTimer = null;
    };
    _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);
      }
    };
    _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();
    };
    _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();
    };
    _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;
  }
  (0, _inherits2["default"])(Draggable, _React$Component);
  return (0, _createClass2["default"])(Draggable, [{
    key: "shouldComponentUpdate",
    value: function shouldComponentUpdate(_ref4, nextState) {
      var listOfPropsThatAffectItems = _ref4.listOfPropsThatAffectItems,
        nextProps = (0, _objectWithoutProperties2["default"])(_ref4, _excluded);
      var _this$props = this.props,
        prevListOfPropsThatAffectItems = _this$props.listOfPropsThatAffectItems,
        prevProps = (0, _objectWithoutProperties2["default"])(_this$props, _excluded2);
      if (!(0, _shallowequal["default"])(nextProps, prevProps) || !(0, _shallowequal["default"])(listOfPropsThatAffectItems, prevListOfPropsThatAffectItems)) {
        return true;
      }
      if (!(0, _shallowequal["default"])(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 = (0, _objectWithoutProperties2["default"])(_this$props2, _excluded3);
      return /*#__PURE__*/_react["default"].createElement(_DraggableTarget["default"], (0, _extends2["default"])({}, restProps, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 102,
          columnNumber: 7
        }
      }), /*#__PURE__*/_react["default"].createElement("div", {
        onMouseDown: this.countDelay,
        onMouseUp: this.resetDelayState,
        "data-hook": "delay-wrapper",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 103,
          columnNumber: 9
        }
      }, /*#__PURE__*/_react["default"].createElement(_DraggableSource["default"], (0, _extends2["default"])({}, restProps, {
        ignoreMouseEvents: hasDragged,
        onDragStart: this.onDragStart,
        onDragEnd: this.onDragEnd,
        canDrag: this.canDrag,
        delayed: !!this.props.delay && this.state.delayed,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 108,
          columnNumber: 11
        }
      }))));
    }
  }]);
}(_react["default"].Component);
Draggable.defaultProps = {
  droppable: true
};
Draggable.Item = Draggable;
Draggable.Manager = _DraggableManager["default"];
var _default = exports["default"] = Draggable;