@wix/design-system
Version:
@wix/design-system
324 lines (323 loc) • 12.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
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 _reactDnd = require("react-dnd");
var _noop = _interopRequireDefault(require("lodash/noop"));
var _DragLayer = _interopRequireDefault(require("./DragLayer"));
var _types = require("../types");
var _constants = require("../constants");
var _DragUtils = require("../DragUtils");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/DragAndDrop/Draggable/components/DraggableSource.jsx";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
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 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) {
function DraggableSource() {
var _this;
(0, _classCallCheck2["default"])(this, DraggableSource);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, DraggableSource, [].concat(args));
_this.state = {
offsetOfHandle: {
x: 0,
y: 0
},
itemWidth: null
};
_this.rootNode = null;
_this.updateItemWidth = function () {
if (_this.rootNode) {
_this.setState({
itemWidth: _this.rootNode.getBoundingClientRect().width
});
}
};
_this._setRootNode = function (node) {
// Don't need to reset the values if node remains the same
if (node && _this.rootNode !== node) {
_this.rootNode = node;
}
};
_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["default"],
delayed: delayed
});
};
return _this;
}
(0, _inherits2["default"])(DraggableSource, _React$Component);
return (0, _createClass2["default"])(DraggableSource, [{
key: "componentDidMount",
value: function componentDidMount() {
if (this.props.connectDragPreview) {
this.props.connectDragPreview((0, _DragUtils.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 = (0, _slicedToArray2["default"])(_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;
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["default"].cloneElement(withHandle ? renderItem({
id: id,
item: item,
isPlaceholder: isDragging,
connectHandle: function connectHandle(handle) {
var handleWithRef = /*#__PURE__*/_react["default"].cloneElement(handle, {
ref: function ref(node) {
return _this2.handleNode = node;
}
});
return connectDragSource(handleWithRef);
},
delayed: delayed,
withStrip: withStrip,
isInitialPositionToDrop: isInitialPositionToDrop
}) : connectDragSource(renderItem({
id: id,
item: item,
isPlaceholder: isDragging,
connectHandle: _noop["default"],
delayed: delayed,
withStrip: withStrip,
isInitialPositionToDrop: isInitialPositionToDrop
})), (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _constants.dataAttributes.draggableSource, true), _constants.dataAttributes.id, id));
return /*#__PURE__*/_react["default"].createElement("div", {
style: this._getWrapperStyles(),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 227,
columnNumber: 12
}
}, content);
}
}, {
key: "_renderPreviewItem",
value: function _renderPreviewItem() {
var _this$props4 = this.props,
id = _this$props4.id,
usePortal = _this$props4.usePortal;
return /*#__PURE__*/_react["default"].createElement(_DragLayer["default"], {
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: _types.ItemTypes.DRAGGABLE,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 251,
columnNumber: 7
}
});
}
}, {
key: "render",
value: function render() {
var connectDragSource = this.props.connectDragSource;
return connectDragSource ? /*#__PURE__*/_react["default"].createElement("div", {
ref: this._setRootNode,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 266,
columnNumber: 7
}
}, this._renderDraggableItem(), this._renderPreviewItem()) : null;
}
}]);
}(_react["default"].Component);
var _default = exports["default"] = (0, _reactDnd.DragSource)(_types.ItemTypes.DRAGGABLE, source, collect)(DraggableSource);