wix-style-react
Version:
wix-style-react
344 lines (341 loc) • 10.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _propTypes = _interopRequireDefault(require("prop-types"));
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/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/DragAndDrop/Draggable/components/DraggableSource.js";
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; }
/* eslint-disable new-cap */
var source = {
beginDrag: _ref => {
var {
id,
index,
containerId,
groupName,
item,
onMoveOut,
onDragStart,
onDrop
} = _ref;
if (onDragStart) {
onDragStart({
id,
index,
containerId,
groupName,
item
});
}
/** we setup monitor.getItem() snapshot, so we will be always able to get info about item that we drag */
return {
id,
index,
containerId,
groupName,
originalIndex: index,
// as index is mutable during d&d, we need another storage for original index
originalItem: item,
onMoveOut,
realTime: {
onMoveOut,
onDrop,
containerId
}
};
},
endDrag: (_ref2, monitor) => {
var {
id,
index,
containerId,
groupName,
item,
onDragEnd
} = _ref2;
/** if drop was called, on drop target and drag is end, then we notify parent about this */
var {
onDrop
} = monitor.getItem().realTime;
if (onDragEnd) {
onDragEnd({
id,
index,
containerId,
groupName,
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: _ref3 => {
var {
id,
index,
containerId,
groupName,
item,
canDrag: _canDrag
} = _ref3;
return _canDrag ? _canDrag({
id,
index,
containerId,
groupName,
item
}) : true;
},
isDragging: (_ref4, monitor) => {
var {
id,
containerId,
groupName
} = _ref4;
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 = (connect, monitor) => ({
connectDragSource: connect.dragSource(),
connectDragPreview: connect.dragPreview(),
isDragging: monitor.isDragging()
});
class DraggableSource extends _react.default.Component {
constructor() {
super(...arguments);
this.state = {
offsetOfHandle: {
x: 0,
y: 0
},
itemWidth: null
};
this.rootNode = null;
this.updateItemWidth = () => {
if (this.rootNode) {
this.setState({
itemWidth: this.rootNode.getBoundingClientRect().width
});
}
};
this._setRootNode = node => {
// Don't need to reset the values if node remains the same
if (node && this.rootNode !== node) {
this.rootNode = node;
}
};
this._renderPreview = _ref5 => {
var {
previewStyles
} = _ref5;
var {
renderItem,
id,
item,
delayed
} = this.props;
return renderItem({
id,
item,
previewStyles: _objectSpread({
width: this.state.itemWidth
}, previewStyles),
isPreview: true,
connectHandle: _noop.default,
delayed
});
};
}
componentDidMount() {
if (this.props.connectDragPreview) {
this.props.connectDragPreview((0, _DragUtils.getEmptyImage)(), {
captureDraggingState: true
});
}
this.updateDiff();
this.updateItemWidth();
}
componentDidUpdate(prevProps) {
if (prevProps.id !== this.props.id || prevProps.containerId !== this.props.containerId) {
this.updateDiff();
}
if (prevProps.isDragging !== this.props.isDragging) {
this.updateItemWidth();
}
}
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
}
});
}
}
_getWrapperStyles() {
var {
shift,
ignoreMouseEvents,
animationDuration,
animationTiming
} = this.props;
var [xShift, yShift] = shift || [0, 0];
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,
transition,
transform,
pointerEvents
};
}
_renderDraggableItem() {
var {
isDragging,
connectDragSource,
withHandle,
renderItem,
id,
item,
delayed,
withStrip,
isInitialPositionToDrop
} = this.props;
var content = /*#__PURE__*/_react.default.cloneElement(withHandle ? renderItem({
id,
item,
isPlaceholder: isDragging,
connectHandle: handle => {
var handleWithRef = /*#__PURE__*/_react.default.cloneElement(handle, {
ref: node => this.handleNode = _reactDom.default.findDOMNode(node)
});
return connectDragSource(handleWithRef);
},
delayed,
withStrip,
isInitialPositionToDrop
}) : connectDragSource(renderItem({
id,
item,
isPlaceholder: isDragging,
connectHandle: _noop.default,
delayed,
withStrip,
isInitialPositionToDrop
})), {
[_constants.dataAttributes.draggableSource]: true,
[_constants.dataAttributes.id]: id
});
return /*#__PURE__*/_react.default.createElement("div", {
style: this._getWrapperStyles(),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 231,
columnNumber: 12
}
}, content);
}
_renderPreviewItem() {
var {
id,
usePortal
} = this.props;
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: 255,
columnNumber: 7
}
});
}
render() {
var {
connectDragSource
} = this.props;
return connectDragSource ? /*#__PURE__*/_react.default.createElement("div", {
ref: this._setRootNode,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 270,
columnNumber: 7
}
}, this._renderDraggableItem(), this._renderPreviewItem()) : null;
}
}
DraggableSource.propTypes = {
isDragging: _propTypes.default.bool,
// from react-dnd
connectDragSource: _propTypes.default.func,
// from react-dnd
connectDragPreview: _propTypes.default.func,
// from react-dnd
usePortal: _propTypes.default.bool,
groupName: _propTypes.default.string,
containerId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
renderItem: _propTypes.default.func,
index: _propTypes.default.number,
id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
item: _propTypes.default.object,
withHandle: _propTypes.default.bool,
onDrop: _propTypes.default.func,
onMoveOut: _propTypes.default.func,
onDragStart: _propTypes.default.func,
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),
ignoreMouseEvents: _propTypes.default.bool,
/** 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,
/** Is delay timer still waiting before user can drag the item */
delayed: _propTypes.default.bool
};
var _default = exports.default = (0, _reactDnd.DragSource)(_types.ItemTypes.DRAGGABLE, source, collect)(DraggableSource);
//# sourceMappingURL=DraggableSource.js.map