wix-style-react
Version:
284 lines (225 loc) • 10.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: 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 _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 _propTypes = _interopRequireDefault(require("prop-types"));
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"];
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; } }
var Draggable = /*#__PURE__*/function (_React$Component) {
(0, _inherits2["default"])(Draggable, _React$Component);
var _super = _createSuper(Draggable);
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 = _super.call.apply(_super, [this].concat(args));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
delayed: false
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "delayTimer", null);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "resetDelayState", function () {
if (!!_this.props.delay) {
_this.setState({
delayed: false
});
_this.resetDelayTimer();
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "resetDelayTimer", function () {
clearTimeout(_this.delayTimer);
_this.delayTimer = null;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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);
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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();
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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();
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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, _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"], restProps, /*#__PURE__*/_react["default"].createElement("div", {
onMouseDown: this.countDelay,
onMouseUp: this.resetDelayState,
"data-hook": "delay-wrapper"
}, /*#__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
}))));
}
}]);
return Draggable;
}(_react["default"].Component);
exports.Draggable = Draggable;
Draggable.defaultProps = {
droppable: true
};
Draggable.propTypes = {
/** indicates if element can be drop at this place */
droppable: _propTypes["default"].bool,
/** decide whether to render a handle using `connectHandle` (see below) */
withHandle: _propTypes["default"].bool,
/** uniq id of container that contain current draggable item */
containerId: _propTypes["default"].string,
/* name of group between inside of each dnd is allowed */
groupName: _propTypes["default"].string,
/* custom renderer for item */
renderItem: _propTypes["default"].func,
/* position of item in container items array */
index: _propTypes["default"].number,
/* uniq id of an item */
id: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
/* model that represent item */
item: _propTypes["default"].object,
/** callback when item was moved out from current container to another container */
onMoveOut: _propTypes["default"].func,
/** callback when item was dropped in a new location */
onDrop: _propTypes["default"].func,
/** callback when item is hovered*/
onHover: _propTypes["default"].func,
/** callback for drag start */
onDragStart: _propTypes["default"].func,
/** callback for drag end */
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),
/** flag that indicates that there's an item being dragged */
hasDragged: _propTypes["default"].bool,
/** sets draggable item node & additional info for animation positions calculations */
setWrapperNode: _propTypes["default"].func,
/** 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,
delay: _propTypes["default"].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["default"].array
};
Draggable.Item = Draggable;
Draggable.Manager = _DraggableManager["default"];
var _default = Draggable;
exports["default"] = _default;