wix-style-react
Version:
wix-style-react
229 lines (228 loc) • 7.6 kB
JavaScript
"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 _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"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/DragAndDrop/Draggable/Draggable.js";
class Draggable extends _react.default.Component {
constructor() {
super(...arguments);
this.state = {
delayed: false
};
this.delayTimer = null;
this.resetDelayState = () => {
if (!!this.props.delay) {
this.setState({
delayed: false
});
this.resetDelayTimer();
}
};
this.resetDelayTimer = () => {
clearTimeout(this.delayTimer);
this.delayTimer = null;
};
this.countDelay = () => {
if (!!this.props.delay) {
this.setState({
delayed: true
});
this.resetDelayTimer();
this.delayTimer = setTimeout(() => this.setState({
delayed: false
}), this.props.delay);
}
};
this.onDragStart = _ref => {
var {
id,
index,
containerId,
groupName,
item
} = _ref;
if (this.props.onDragStart) {
this.props.onDragStart({
id,
index,
containerId,
groupName,
item
});
}
this.resetDelayTimer();
};
this.onDragEnd = _ref2 => {
var {
id,
index,
containerId,
groupName,
item
} = _ref2;
if (this.props.onDragEnd) {
this.props.onDragEnd({
id,
index,
containerId,
groupName,
item
});
}
this.resetDelayState();
};
this.canDrag = _ref3 => {
var {
id,
index,
containerId,
groupName,
item
} = _ref3;
var canDragByDelay = !!this.props.delay ? !this.state.delayed : true;
var propsCanDrag = this.props.canDrag ? this.props.canDrag({
id,
index,
containerId,
groupName,
item
}) : true;
if (!canDragByDelay) {
this.resetDelayState();
}
return canDragByDelay && propsCanDrag;
};
}
shouldComponentUpdate(_ref4, nextState) {
var {
listOfPropsThatAffectItems
} = _ref4,
nextProps = (0, _objectWithoutProperties2.default)(_ref4, _excluded);
var _this$props = this.props,
{
listOfPropsThatAffectItems: prevListOfPropsThatAffectItems
} = _this$props,
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;
}
componentWillUnmount() {
this.resetDelayTimer();
}
render() {
var _this$props2 = this.props,
{
hasDragged
} = _this$props2,
restProps = (0, _objectWithoutProperties2.default)(_this$props2, _excluded3);
return /*#__PURE__*/_react.default.createElement(_DraggableTarget.default, (0, _extends2.default)({}, restProps, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 104,
columnNumber: 7
}
}), /*#__PURE__*/_react.default.createElement("div", {
onMouseDown: this.countDelay,
onMouseUp: this.resetDelayState,
"data-hook": "delay-wrapper",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 105,
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: 110,
columnNumber: 11
}
}))));
}
}
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 (
<SortableListBase
...
listOfPropsThatAffectItems={[this.props.myAwesomeProp]}
/>
)
}
*/
listOfPropsThatAffectItems: _propTypes.default.array
};
Draggable.Item = Draggable;
Draggable.Manager = _DraggableManager.default;
var _default = exports.default = Draggable;
//# sourceMappingURL=Draggable.js.map