wix-style-react
Version:
wix-style-react
377 lines (375 loc) • 13.1 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Container = _interopRequireDefault(require("../DragAndDrop/Draggable/components/Container"));
var _Draggable = require("../DragAndDrop/Draggable");
var _withDNDContext = _interopRequireDefault(require("./withDNDContext"));
var _SortableGridBaseSt = require("./SortableGridBase.st.css");
var _constants = require("./constants");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/SortableGridBase/SortableGridBase.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; }
/** component allow you to implement drag and drop in grid layout */
class SortableGridBase extends _react.default.PureComponent {
constructor() {
var _this;
super(...arguments);
_this = this;
this.state = {
items: this.props.items || [],
animationShifts: {},
draggedId: null,
indexToInsert: null,
originalIndex: null
};
this.wrapperNodes = [];
this.setWrapperNode = (node, index, item) => {
this.wrapperNodes[index] = {
node,
index,
item
};
};
this.reSetAnimationState = function () {
var overrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
_this.setState(_objectSpread({
animationShifts: {},
draggedId: null
}, overrides));
};
this.handleMoveOut = id => {
this.reSetAnimationState({
items: this.state.items.filter(it => it.id !== id)
});
this.wrapperNodes = this.wrapperNodes.filter(_ref => {
var {
item
} = _ref;
return item.id !== id;
});
};
this.getInsertionIndex = (addedIndex, item) => {
var {
insertPosition
} = this.props;
var {
items
} = this.state;
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 = prop => {
var {
addedIndex,
item
} = prop;
var indexToInsert = this.getInsertionIndex(addedIndex, item);
var originalIndex = this.state.items.findIndex(_ref2 => {
var {
id
} = _ref2;
return id === item.id;
});
this.setState(() => ({
indexToInsert,
originalIndex
}));
};
this.handleDrop = _ref3 => {
var {
payload,
addedIndex,
removedIndex,
addedToContainerId,
removedFromContainerId
} = _ref3;
var index = this.getInsertionIndex(addedIndex, payload);
this.reSetAnimationState();
this.changeItemPlace(payload, index); // put element at right place after drop
this.props.onDrop({
payload,
addedIndex: index,
removedIndex,
addedToContainerId,
removedFromContainerId
});
};
this.changeItemPlace = (item, index) => {
var items = [...this.state.items];
var originalIndex = items.indexOf(item);
if (originalIndex !== -1) {
items.splice(originalIndex, 1);
}
items.splice(index, 0, item);
this.setState({
items
});
};
this.handleDragStart = data => {
this.reSetAnimationState({
draggedId: data.id
});
if (this.props.onDragStart) {
this.props.onDragStart(data);
}
this.setState({
indexToInsert: null
});
};
this.handleDragEnd = data => {
this.reSetAnimationState();
if (this.props.onDragEnd) {
this.props.onDragEnd(data);
}
this.setState({
indexToInsert: null
});
};
this.renderItem = 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
}));
};
}
UNSAFE_componentWillReceiveProps(_ref4) {
var {
items
} = _ref4;
// 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
});
}
renderPreview() {
var {
className,
contentClassName,
renderItem
} = this.props;
return /*#__PURE__*/_react.default.createElement("div", {
className: className,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 136,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: contentClassName,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 137,
columnNumber: 9
}
}, this.state.items.map((item, index) => /*#__PURE__*/_react.default.createElement("div", {
key: "".concat(item.id, "-").concat(index, "-").concat(this.props.containerId),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 139,
columnNumber: 13
}
}, renderItem({
item,
id: item.id,
isPlaceholder: false,
isPreview: false
})))));
}
render() {
var {
dataHook,
className,
contentClassName,
groupName,
dragPreview,
containerId,
withHandle,
usePortal,
animationDuration,
animationTiming,
droppable,
startFixedElement,
endFixedElement
} = this.props;
var {
items,
animationShifts,
draggedId,
indexToInsert,
originalIndex
} = this.state;
var common = {
groupName,
droppable,
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: 194,
columnNumber: 7
}
}), /*#__PURE__*/_react.default.createElement("div", {
className: (0, _SortableGridBaseSt.st)(_SortableGridBaseSt.classes.sortableGridBaseContent, contentClassName),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 201,
columnNumber: 9
}
}, startFixedElement && /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _constants.dataHooks.START_FIXED_ELEMENT,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 203,
columnNumber: 13
}
}, startFixedElement), items.map((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: this.setWrapperNode,
animationDuration: animationDuration,
animationTiming: animationTiming
}, common, {
id: item.id,
index: index,
item: item,
renderItem: this.renderItem,
withHandle: withHandle,
usePortal: usePortal,
onDrop: this.handleDrop,
onDragStart: this.handleDragStart,
onDragEnd: this.handleDragEnd,
canDrag: this.props.canDrag,
delay: this.props.delay,
withStrip: !isInitialPositionToDrop && index === indexToInsert && stripPosition,
isInitialPositionToDrop: isInitialPositionToDrop,
listOfPropsThatAffectItems: this.props.listOfPropsThatAffectItems,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 222,
columnNumber: 15
}
}));
}), endFixedElement && /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _constants.dataHooks.END_FIXED_ELEMENT,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 255,
columnNumber: 13
}
}, endFixedElement)));
}
}
SortableGridBase.defaultProps = {
animationDuration: 0,
animationTiming: '',
droppable: true,
insertPosition: 'any'
};
SortableGridBase.displayName = 'SortableGridBase';
SortableGridBase.contextTypes = {
dragDropManager: _propTypes.default.object
};
SortableGridBase.propTypes = _objectSpread(_objectSpread({
/** indicates if user can drop item in the list by default it's true */
droppable: _propTypes.default.bool
}, _Draggable.Draggable.propTypes), {}, {
/** function that specifying where the item can be inserted */
insertPosition: _propTypes.default.oneOf(['start', 'end', 'any']),
/** in case of wrong position of item during drag you can force SortableListBase to use portals */
usePortal: _propTypes.default.bool,
/**
if you are having nested SortableListBases,
list that you are currently dragging need to be marked as dragPreview
inside of renderItem callback
*/
dragPreview: _propTypes.default.bool,
/** list of items with {id: any} */
items: _propTypes.default.array,
/** callback for drag start */
onDragStart: _propTypes.default.func,
/** callback for drag end */
onDragEnd: _propTypes.default.func,
/** className of the root container */
className: _propTypes.default.string,
/** className of the first items parent container */
contentClassName: _propTypes.default.string,
/** animation duration in ms, default = 0 - disabled */
animationDuration: _propTypes.default.number,
/** animation timing function, default = '' (ease) */
animationTiming: _propTypes.default.string,
/** callback that could prevent item from dragging */
canDrag: _propTypes.default.func,
/** number in seconds to add delay between initial mouseDown and drag start */
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,
/** Node which will be rendered before draggable items and this element won't be draggable */
startFixedElement: _propTypes.default.node,
/** Node which will be rendered after draggable items and this element won't be draggable */
endFixedElement: _propTypes.default.node
});
SortableGridBase.defaultProps = {};
var _default = exports.default = (0, _withDNDContext.default)(SortableGridBase);
//# sourceMappingURL=SortableGridBase.js.map