@wix/design-system
Version:
@wix/design-system
337 lines (335 loc) • 14 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
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 _Container = _interopRequireDefault(require("../DragAndDrop/Draggable/components/Container"));
var _Draggable = require("../DragAndDrop/Draggable");
var _withDNDContext = _interopRequireDefault(require("./withDNDContext"));
var _SortableGridBaseSt = require("./SortableGridBase.st.css.js");
var _constants = require("./constants");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/SortableGridBase/SortableGridBase.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; })(); }
/** component allow you to implement drag and drop in grid layout */
var SortableGridBase = /*#__PURE__*/function (_React$PureComponent) {
function SortableGridBase() {
var _this;
(0, _classCallCheck2["default"])(this, SortableGridBase);
for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
_args[_key] = arguments[_key];
}
_this = _callSuper(this, SortableGridBase, [].concat(_args));
_this.state = {
items: _this.props.items || [],
animationShifts: {},
draggedId: null,
indexToInsert: null,
originalIndex: null
};
_this.wrapperNodes = [];
_this.setWrapperNode = function (node, index, item) {
_this.wrapperNodes[index] = {
node: node,
index: index,
item: item
};
};
_this.reSetAnimationState = function () {
var overrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
_this.setState(_objectSpread({
animationShifts: {},
draggedId: null
}, overrides));
};
_this.handleMoveOut = function (id) {
_this.reSetAnimationState({
items: _this.state.items.filter(function (it) {
return it.id !== id;
})
});
_this.wrapperNodes = _this.wrapperNodes.filter(function (_ref) {
var item = _ref.item;
return item.id !== id;
});
};
_this.getInsertionIndex = function (addedIndex, item) {
var insertPosition = _this.props.insertPosition;
var items = _this.state.items;
if (insertPosition === 'start') {
return 0;
}
if (insertPosition === 'end') {
return items.includes(item) ? items.length - 1 : items.length;
}
return addedIndex;
};
/**
* Called when DragSource (list item) is hovered over DragTarget (other list item)
* Calculates animation shifts & adds new element if it was dragged from another list
*
* @param {object} prop Prop
* @param {number} prop.addedIndex Index to where dragged element should be added
* @param {number} prop.removedIndex Index from where dragged element was removed
* @param {number|string} prop.id item's `id`
* @param {object} prop.item item from `items` prop that is being dragged
* */
_this.handleHover = function (prop) {
var addedIndex = prop.addedIndex,
item = prop.item;
var indexToInsert = _this.getInsertionIndex(addedIndex, item);
var originalIndex = _this.state.items.findIndex(function (_ref2) {
var id = _ref2.id;
return id === item.id;
});
_this.setState(function () {
return {
indexToInsert: indexToInsert,
originalIndex: originalIndex
};
});
};
_this.handleDrop = function (_ref3) {
var payload = _ref3.payload,
addedIndex = _ref3.addedIndex,
removedIndex = _ref3.removedIndex,
addedToContainerId = _ref3.addedToContainerId,
removedFromContainerId = _ref3.removedFromContainerId;
var index = _this.getInsertionIndex(addedIndex, payload);
_this.reSetAnimationState();
_this.changeItemPlace(payload, index); // put element at right place after drop
_this.props.onDrop({
payload: payload,
addedIndex: index,
removedIndex: removedIndex,
addedToContainerId: addedToContainerId,
removedFromContainerId: removedFromContainerId
});
};
_this.changeItemPlace = function (item, index) {
var items = (0, _toConsumableArray2["default"])(_this.state.items);
var originalIndex = items.indexOf(item);
if (originalIndex !== -1) {
items.splice(originalIndex, 1);
}
items.splice(index, 0, item);
_this.setState({
items: items
});
};
_this.handleDragStart = function (data) {
_this.reSetAnimationState({
draggedId: data.id
});
if (_this.props.onDragStart) {
_this.props.onDragStart(data);
}
_this.setState({
indexToInsert: null
});
};
_this.handleDragEnd = function (data) {
_this.reSetAnimationState();
if (_this.props.onDragEnd) {
_this.props.onDragEnd(data);
}
_this.setState({
indexToInsert: null
});
};
_this.renderItem = function (args) {
var dropped = _this.context.dragDropManager.monitor.didDrop();
var dragging = _this.context.dragDropManager.monitor.isDragging();
return _this.props.renderItem(_objectSpread(_objectSpread({}, args), {}, {
isListInDragState: dragging && !dropped
}));
};
return _this;
}
(0, _inherits2["default"])(SortableGridBase, _React$PureComponent);
return (0, _createClass2["default"])(SortableGridBase, [{
key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(_ref4) {
var items = _ref4.items;
// We clear state on drag end if element was dragged from another list,
// `onDragEnd` will be called on "source" list, not "target" one.
this.reSetAnimationState({
items: items ? items : this.state.items
});
}
}, {
key: "renderPreview",
value: function renderPreview() {
var _this2 = this;
var _this$props = this.props,
className = _this$props.className,
contentClassName = _this$props.contentClassName,
renderItem = _this$props.renderItem;
return /*#__PURE__*/_react["default"].createElement("div", {
className: className,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 135,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: contentClassName,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 136,
columnNumber: 9
}
}, this.state.items.map(function (item, index) {
return /*#__PURE__*/_react["default"].createElement("div", {
key: "".concat(item.id, "-").concat(index, "-").concat(_this2.props.containerId),
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 138,
columnNumber: 13
}
}, renderItem({
item: item,
id: item.id,
isPlaceholder: false,
isPreview: false
}));
})));
}
}, {
key: "render",
value: function render() {
var _this3 = this;
var _this$props2 = this.props,
dataHook = _this$props2.dataHook,
className = _this$props2.className,
contentClassName = _this$props2.contentClassName,
groupName = _this$props2.groupName,
dragPreview = _this$props2.dragPreview,
containerId = _this$props2.containerId,
withHandle = _this$props2.withHandle,
usePortal = _this$props2.usePortal,
animationDuration = _this$props2.animationDuration,
animationTiming = _this$props2.animationTiming,
droppable = _this$props2.droppable,
startFixedElement = _this$props2.startFixedElement,
endFixedElement = _this$props2.endFixedElement;
var _this$state = this.state,
items = _this$state.items,
animationShifts = _this$state.animationShifts,
draggedId = _this$state.draggedId,
indexToInsert = _this$state.indexToInsert,
originalIndex = _this$state.originalIndex;
var common = {
groupName: groupName,
droppable: droppable,
containerId: containerId,
onHover: this.handleHover,
onMoveOut: this.handleMoveOut
};
if (dragPreview) {
return this.renderPreview();
}
return /*#__PURE__*/_react["default"].createElement(_Container["default"], (0, _extends2["default"])({
dataHook: dataHook,
className: className,
onDrop: this.handleDrop,
total: this.state.items.length
}, common, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 193,
columnNumber: 7
}
}), /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _SortableGridBaseSt.st)(_SortableGridBaseSt.classes.sortableGridBaseContent, contentClassName),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 200,
columnNumber: 9
}
}, startFixedElement && /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": _constants.dataHooks.START_FIXED_ELEMENT,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 202,
columnNumber: 13
}
}, startFixedElement), items.map(function (item, index) {
var isInitialPositionToDrop = indexToInsert === originalIndex;
/**
* define the strip position: in case when item is moved before the initial index, then
* the strip between the grid items must be appeared on the right side of hovered item. Otherwise, strip
* is on the left side of hovered item
* */
var stripPosition = indexToInsert < originalIndex ? _constants.StripPosition.RIGHT : _constants.StripPosition.LEFT;
return /*#__PURE__*/_react["default"].createElement(_Draggable.Draggable, (0, _extends2["default"])({
key: "".concat(item.id, "-").concat(containerId),
shift: animationShifts[index],
hasDragged: !!draggedId && draggedId !== item.id,
setWrapperNode: _this3.setWrapperNode,
animationDuration: animationDuration,
animationTiming: animationTiming
}, common, {
id: item.id,
index: index,
item: item,
renderItem: _this3.renderItem,
withHandle: withHandle,
usePortal: usePortal,
onDrop: _this3.handleDrop,
onDragStart: _this3.handleDragStart,
onDragEnd: _this3.handleDragEnd,
canDrag: _this3.props.canDrag,
delay: _this3.props.delay,
withStrip: !isInitialPositionToDrop && index === indexToInsert && stripPosition,
isInitialPositionToDrop: isInitialPositionToDrop,
listOfPropsThatAffectItems: _this3.props.listOfPropsThatAffectItems,
__self: _this3,
__source: {
fileName: _jsxFileName,
lineNumber: 221,
columnNumber: 15
}
}));
}), endFixedElement && /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": _constants.dataHooks.END_FIXED_ELEMENT,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 254,
columnNumber: 13
}
}, endFixedElement)));
}
}]);
}(_react["default"].PureComponent);
SortableGridBase.defaultProps = {
animationDuration: 0,
animationTiming: '',
droppable: true,
insertPosition: 'any'
};
SortableGridBase.displayName = 'SortableGridBase';
SortableGridBase.contextTypes = {
dragDropManager: function dragDropManager() {
return null;
}
};
SortableGridBase.defaultProps = {};
var _default = exports["default"] = (0, _withDNDContext["default"])(SortableGridBase);