wix-style-react
Version:
239 lines (195 loc) • 9.13 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _utils = require("./utils");
var _DragLayer = _interopRequireDefault(require("./DragLayer"));
var _Container = _interopRequireDefault(require("./Container"));
var _NestableListContext = require("./NestableListContext");
var _withDNDContext = _interopRequireDefault(require("./withDNDContext"));
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
function replaceNegativeIndex(items, nextPosition, childrenProperty) {
var currItems = items;
return nextPosition.map(function (nextIndex) {
if (nextIndex !== -1) {
currItems = currItems[nextIndex][childrenProperty] || [];
return nextIndex;
}
return currItems.length;
});
} // fixing a bug where the new path is increased in nesting
// and the first position jumps too far by 2, and that's why it decreased by 1
// need to check if the jump can become more severe
function getRealNextPosition(prev, next) {
// moving up a level
if (prev.length < next.length) {
return next.map(function (nextIndex, i) {
if (typeof prev[i] !== 'number') {
return nextIndex;
}
return nextIndex > prev[i] ? nextIndex - 1 : nextIndex;
});
}
return next;
}
var NestableList = /*#__PURE__*/function (_React$PureComponent) {
(0, _inherits2["default"])(NestableList, _React$PureComponent);
var _super = _createSuper(NestableList);
function NestableList() {
var _this;
(0, _classCallCheck2["default"])(this, NestableList);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
items: _this.props.items,
dragging: false
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "groupName", (0, _utils.generateUniqueGroupId)());
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "moveItem", function (_ref) {
var dragItem = _ref.dragItem,
prevPosition = _ref.prevPosition,
nextPosition = _ref.nextPosition;
var _this$props = _this.props,
childrenProperty = _this$props.childrenProperty,
preventChangeDepth = _this$props.preventChangeDepth,
items = _this$props.items;
var newItems = _this.state.items.slice();
if (preventChangeDepth && nextPosition.length > 1) {
var parent = (0, _utils.getDropParent)(items, nextPosition, childrenProperty);
if (!parent) {
return prevPosition;
}
} // the remove action might affect the next position,
// so update next coordinates accordingly
var realNextPosition = getRealNextPosition(prevPosition, nextPosition);
if (realNextPosition[realNextPosition.length - 1] === -1) {
realNextPosition = replaceNegativeIndex(newItems, realNextPosition, childrenProperty);
}
newItems = (0, _utils.removeFromTree)(newItems, prevPosition, childrenProperty);
newItems = (0, _utils.addToTree)(newItems, dragItem, realNextPosition, childrenProperty);
_this.setState({
items: newItems
});
return realNextPosition;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dropItem", function (item) {
_this.props.onUpdate && _this.props.onUpdate({
items: _this.state.items,
item: item
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onDragStart", function (itemProps) {
_this.props.onDragStart && _this.props.onDragStart(itemProps);
_this.setState({
dragging: true
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onDragEnd", function (itemProps) {
_this.props.onDragEnd && _this.props.onDragEnd(itemProps);
_this.setState({
dragging: false
});
});
return _this;
}
(0, _createClass2["default"])(NestableList, [{
key: "UNSAFE_componentWillReceiveProps",
value: // tried to use getDerivedStateFromProps but encounter an issue where the state was
// updated internally but props items stayed the same and it caused the new state to be
// overridden with the old state
// can be done if component is controlled but requires refactor
function UNSAFE_componentWillReceiveProps(newProps) {
if (newProps.items !== this.state.items) {
this.setState({
items: newProps.items
});
}
}
}, {
key: "render",
value: function render() {
var items = this.state.items;
var _this$props2 = this.props,
renderItem = _this$props2.renderItem,
readOnly = _this$props2.readOnly,
childrenProperty = _this$props2.childrenProperty,
childrenStyle = _this$props2.childrenStyle,
renderAction = _this$props2.renderAction,
isRenderDraggingChildren = _this$props2.isRenderDraggingChildren,
useDragHandle = _this$props2.useDragHandle,
maxDepth = _this$props2.maxDepth,
preventChangeDepth = _this$props2.preventChangeDepth,
threshold = _this$props2.threshold,
theme = _this$props2.theme,
renderPrefix = _this$props2.renderPrefix,
dragLayerZIndex = _this$props2.dragLayerZIndex;
return /*#__PURE__*/_react["default"].createElement(_NestableListContext.NestableListContext.Provider, {
value: {
groupName: this.groupName,
useDragHandle: useDragHandle,
maxDepth: maxDepth,
preventChangeDepth: preventChangeDepth,
threshold: threshold,
readOnly: readOnly,
renderItem: renderItem,
renderPrefix: renderPrefix,
moveItem: this.moveItem,
dropItem: this.dropItem,
onDragStart: this.onDragStart,
onDragEnd: this.onDragEnd
}
}, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Container["default"], {
treeDepth: 1,
items: items,
renderAction: renderAction,
parentPosition: [],
childrenProperty: childrenProperty,
childrenStyle: childrenStyle,
isRenderDraggingChildren: isRenderDraggingChildren,
topLevel: true,
theme: theme
}), this.state.dragging && /*#__PURE__*/_react["default"].createElement(_DragLayer["default"], {
isRenderDraggingChildren: isRenderDraggingChildren,
renderItem: renderItem,
childrenProperty: childrenProperty,
childrenStyle: childrenStyle,
theme: theme,
dragLayerZIndex: dragLayerZIndex
})));
}
}]);
return NestableList;
}(_react["default"].PureComponent);
(0, _defineProperty2["default"])(NestableList, "defaultProps", {
items: [],
isRenderDraggingChildren: false,
childrenProperty: 'children',
childrenStyle: {},
renderPrefix: function renderPrefix() {
return null;
},
renderAction: function renderAction() {
return null;
},
onUpdate: function onUpdate() {},
useDragHandle: false,
preventChangeDepth: false,
maxDepth: Infinity,
threshold: 30,
dragLayerZIndex: 100
});
var _default = (0, _withDNDContext["default"])(NestableList);
exports["default"] = _default;