react-reorderable-list-fork
Version:
A simple UI framework friendly reorderable list component for React.
851 lines (837 loc) • 30.1 kB
JavaScript
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
var ReactDOMServer = _interopDefault(require('react-dom/server'));
var cryptoRandomString = _interopDefault(require('crypto-random-string'));
var isEmpty = _interopDefault(require('is-empty'));
var PropTypes = _interopDefault(require('prop-types'));
var arrayMove = _interopDefault(require('array-move'));
function _defineProperties(e, r) {
for (var t = 0; t < r.length; t++) {
var o = r[t];
o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o);
}
}
function _createClass(e, r, t) {
return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
writable: !1
}), e;
}
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
function _inheritsLoose(t, o) {
t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
}
function _setPrototypeOf(t, e) {
return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
return t.__proto__ = e, t;
}, _setPrototypeOf(t, e);
}
function _toPrimitive(t, r) {
if ("object" != typeof t || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != typeof i) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function _toPropertyKey(t) {
var i = _toPrimitive(t, "string");
return "symbol" == typeof i ? i : i + "";
}
function distance(pointA, pointB) {
var xDiff = pointA.x - pointB.x;
var yDiff = pointA.y - pointB.y;
return Math.sqrt(xDiff * xDiff + yDiff * yDiff);
}
function insertBefore(container, referenceElement, newElement) {
container.insertBefore(newElement, referenceElement);
}
function insertAfter(container, referenceElement, newElement) {
container.insertBefore(newElement, referenceElement.nextSibling);
}
function getClosestElement(nodeList, targetElement) {
var closestElement = nodeList[0];
var dist = distance(closestElement.getBoundingClientRect(), targetElement.getBoundingClientRect());
nodeList.forEach(function (element) {
var currentDist = distance(element.getBoundingClientRect(), targetElement.getBoundingClientRect());
if (currentDist < dist) {
dist = currentDist;
closestElement = element;
}
});
return closestElement;
}
function createElementFromHTML(htmlString) {
var div = document.createElement('div');
div.innerHTML = htmlString.trim();
return div.firstElementChild;
}
function JSXToDOMElement(jsx) {
return createElementFromHTML(ReactDOMServer.renderToStaticMarkup(jsx));
}
function intersectRect(r1, r2) {
return !(r2.left > r1.right || r2.right < r1.left || r2.top > r1.bottom || r2.bottom < r1.top);
}
function getIntersectingElementOnList(target, list) {
var targetRect = target.getBoundingClientRect();
list = list.filter(function (node) {
var nodeRect = node.getBoundingClientRect();
return intersectRect(nodeRect, targetRect);
});
if (list.length <= 0) return null;
return list[0];
}
function isTouchDevice() {
return 'ontouchstart' in window || navigator.MaxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
}
function appendClassIfNotExists(element, className) {
if (Array.isArray(className)) {
className.forEach(function (val) {
if (!element.classList.contains(val)) {
element.classList.add(val);
}
});
} else {
if (!element.classList.contains(className)) {
element.classList.add(className);
}
}
}
function removeClassIfExists(element, className) {
if (Array.isArray(className)) {
className.forEach(function (val) {
if (element.classList.contains(val)) {
element.classList.remove(val);
}
});
} else {
if (element.classList.contains(className)) {
element.classList.remove(className);
}
}
}
var ListItem = /*#__PURE__*/function () {
function ListItem(props) {
this._itemIndex = props.itemIndex || 0;
this._itemData = props.itemData || null;
this._isEnabled = props.enabled || true;
this._removeByDragging = props.removeByDragging || false;
this._instanceID = 'item-instance-' + (props._instanceID ? props._instanceID : cryptoRandomString({
length: 8
}));
}
return _createClass(ListItem, [{
key: "instanceID",
get: function get() {
return this._instanceID;
}
}, {
key: "data",
get: function get() {
return this._itemData;
},
set: function set(value) {
this._itemData = value;
}
}, {
key: "enabled",
get: function get() {
return this._isEnabled;
},
set: function set(value) {
this._isEnabled = value;
}
}, {
key: "index",
get: function get() {
return this._itemIndex;
},
set: function set(value) {
this._itemIndex = value;
}
}]);
}();
var styles = {"noDrop":"_2onRf","uiItem":"_3ks3y"};
var ReOrderableItem = /*#__PURE__*/function (_Component) {
function ReOrderableItem(props) {
var _this;
_this = _Component.call(this, props) || this;
_this._onItemMouseMove = function (event) {
var input = isTouchDevice() ? event.changedTouches[0] : event;
if (_this._dragTrigger.mouseDown && !_this._isDragging) {
var dist = distance({
x: input.pageX,
y: input.pageY
}, {
x: _this._dragTrigger.prevX,
y: _this._dragTrigger.prevY
});
if (dist >= 1) {
_this._dragTrigger.mouseDown = false;
_this._handleDragStart(event);
}
}
};
_this._onItemMouseUp = function (event) {
if (_this._dragTrigger.mouseDown) {
_this._dragTrigger.mouseDown = false;
}
};
_this._onItemMouseDown = function (event) {
var input = isTouchDevice() ? event.changedTouches[0] : event;
var firstMatch = document.elementsFromPoint(input.clientX, input.clientY).find(function (e) {
return e.classList.contains('ui-reorderable-item');
});
if (firstMatch !== _this._itemRef || _this._dragTrigger.mouseDown) return;
_this._dragTrigger.mouseDown = true;
_this._dragTrigger.prevX = input.pageX;
_this._dragTrigger.prevY = input.pageY;
};
_this._beforeDragRect = null;
_this._halfWidth = null;
_this._halfHeight = null;
_this._offset = {
x: 0,
y: 0
};
_this._dragTrigger = {
mouseDown: false,
prevX: 0,
prevY: 0
};
_this._inputEvents = {
touch: {
down: 'touchstart',
up: 'touchend',
move: 'touchmove'
},
click: {
down: 'mousedown',
up: 'mouseup',
move: 'mousemove'
}
};
_this._itemRef = null;
_this._isDragging = false;
_this._draggedElement = null;
_this._overlappingList = null;
_this._clonedItem = null;
_this._model = new ListItem(props);
_this._onItemMouseMove = _this._onItemMouseMove.bind(_this);
_this._onItemMouseUp = _this._onItemMouseUp.bind(_this);
_this._onItemMouseDown = _this._onItemMouseDown.bind(_this);
_this._handleDrag = _this._handleDrag.bind(_this);
_this._handleDragStart = _this._handleDragStart.bind(_this);
_this._handleDragEnd = _this._handleDragEnd.bind(_this);
_this._itemRef = React.createRef();
return _this;
}
_inheritsLoose(ReOrderableItem, _Component);
var _proto = ReOrderableItem.prototype;
_proto.componentDidMount = function componentDidMount() {
var inputControl = isTouchDevice() ? 'touch' : 'click';
var inputEvents = this._inputEvents[inputControl];
document.addEventListener(inputEvents.move, this._handleDrag, {
passive: false
});
document.addEventListener(inputEvents.up, this._handleDragEnd);
this._itemRef.addEventListener(inputEvents.down, this._onItemMouseDown);
this._itemRef.addEventListener(inputEvents.move, this._onItemMouseMove);
this._itemRef.addEventListener(inputEvents.up, this._onItemMouseUp);
};
_proto.componentWillUnmount = function componentWillUnmount() {
var inputControl = isTouchDevice() ? 'touch' : 'click';
var inputEvents = this._inputEvents[inputControl];
document.removeEventListener(inputEvents.move, this._handleDrag, {
passive: false
});
document.removeEventListener(inputEvents.up, this._handleDragEnd);
this._itemRef.removeEventListener(inputEvents.down, this._onItemMouseDown);
this._itemRef.removeEventListener(inputEvents.move, this._onItemMouseMove);
this._itemRef.removeEventListener(inputEvents.up, this._onItemMouseUp);
};
_proto._dispatchCustomEvent = function _dispatchCustomEvent(targetElement, event, detail) {
targetElement.dispatchEvent(new CustomEvent(event, {
bubbles: true,
cancelable: true,
detail: detail
}));
};
_proto._checkOverlappingElements = function _checkOverlappingElements() {
var list = Array.prototype.slice.call(this._groupListElements);
var previousList = this._overlappingList;
this._overlappingList = getIntersectingElementOnList(this.draggedElement, list);
if (previousList && !this._overlappingList) {
this._dispatchCustomEvent(previousList, 'dragexit', {
item: this
});
}
if (!this._overlappingList) {
appendClassIfNotExists(document.body, styles.noDrop);
return;
}
if (!previousList || previousList && previousList !== this._overlappingList) {
if (previousList && previousList !== this._overlappingList) {
this._dispatchCustomEvent(previousList, 'dragexit', {
item: this
});
}
this._dispatchCustomEvent(this._overlappingList, 'dragenter', {
item: this
});
removeClassIfExists(document.body, styles.noDrop);
}
this._dispatchCustomEvent(this._overlappingList, 'dragover', {
item: this
});
};
_proto._handleDrag = function _handleDrag(event) {
var _this$props$onItemDra, _this$props;
if (!this._isDragging) return;
if (isTouchDevice()) event.preventDefault();
var input = isTouchDevice() ? event.changedTouches[0] : event;
var dragX = input.pageX - this._halfWidth - this._offset.x;
var dragY = input.pageY - this._halfHeight - this._offset.y;
this.draggedElement.style.left = dragX + "px";
this.draggedElement.style.top = dragY + "px";
this._checkOverlappingElements();
(_this$props$onItemDra = (_this$props = this.props).onItemDrag) === null || _this$props$onItemDra === void 0 ? void 0 : _this$props$onItemDra.call(_this$props, {
item: this,
dragX: dragX,
dragY: dragY,
pageX: input.pageX,
pageY: input.pageY,
clientX: input.clientX,
clientY: input.clientY
});
};
_proto._handleDragEnd = function _handleDragEnd(event) {
var _this$props$onItemDra2, _this$props2, _this$_draggedElement;
if (!this._isDragging) return;
var input = isTouchDevice() ? event.changedTouches[0] : event;
removeClassIfExists(document.body, styles.noDrop);
if (this._overlappingList) {
this._overlappingList.dispatchEvent(new CustomEvent('drop', {
bubbles: true,
cancelable: true,
detail: {
item: this,
list: this.listComponent
}
}));
}
(_this$props$onItemDra2 = (_this$props2 = this.props).onItemDragEnd) === null || _this$props$onItemDra2 === void 0 ? void 0 : _this$props$onItemDra2.call(_this$props2, {
item: this,
pageX: input.pageX,
pageY: input.pageY,
clientX: input.clientX,
clientY: input.clientY
});
this._overlappingList = null;
this._isDragging = false;
if (this._itemRef) {
this._itemRef.style.display = '';
this._itemRef.hidden = false;
}
this._clonedItem = null;
(_this$_draggedElement = this._draggedElement) === null || _this$_draggedElement === void 0 ? void 0 : _this$_draggedElement.remove();
this._draggedElement = null;
};
_proto._handleDragStart = function _handleDragStart(event) {
var _this$props$onItemDra3, _this$props3;
if (this._isDragging) return;
document.getSelection().empty();
var input = isTouchDevice() ? event.changedTouches[0] : event;
this._clonedItem = null;
this._beforeDragRect = this._itemRef.getBoundingClientRect();
this._groupListElements = document.querySelectorAll("." + this.listComponent.model.groupID);
if (!this._halfWidth && !this._halfHeight) {
this._halfWidth = this._beforeDragRect.width / 2;
this._halfHeight = this._beforeDragRect.height / 2;
}
this._offset = {
x: input.clientX - this._beforeDragRect.left - this._halfWidth,
y: input.clientY - this._beforeDragRect.top - this._halfHeight
};
var dragX = input.pageX - this._halfWidth - this._offset.x;
var dragY = input.pageY - this._halfHeight - this._offset.y;
this._isDragging = true;
this.draggedElement.style.position = 'absolute';
this.draggedElement.style.left = dragX + "px";
this.draggedElement.style.top = dragY + "px";
document.body.appendChild(this.draggedElement);
this._itemRef.style.display = 'none';
this._itemRef.hidden = true;
(_this$props$onItemDra3 = (_this$props3 = this.props).onItemDragStart) === null || _this$props$onItemDra3 === void 0 ? void 0 : _this$props$onItemDra3.call(_this$props3, {
item: this,
dragX: dragX,
dragY: dragY,
pageX: input.pageX,
pageY: input.pageY,
clientX: input.clientX,
clientY: input.clientY
});
this._checkOverlappingElements();
};
_proto.render = function render() {
var _this$props$component,
_this2 = this;
var Component = this.props.component;
this._model = new ListItem(this.props);
return /*#__PURE__*/React__default.createElement(Component, _extends({}, this.props.componentProps, {
className: ['ui-reorderable-item', styles.uiItem, this.listComponent.instanceID, this.instanceID, (_this$props$component = this.props.componentProps) === null || _this$props$component === void 0 ? void 0 : _this$props$component.className].join(' '),
ref: function ref(_ref) {
return _this2._itemRef = _ref;
}
}), React__default.Children.only(this.props.children));
};
return _createClass(ReOrderableItem, [{
key: "instanceID",
get: function get() {
return this._model.instanceID;
}
}, {
key: "model",
get: function get() {
return this._model;
}
}, {
key: "draggedElement",
get: function get() {
if (!this._draggedElement) {
var _this$props$drag, _this$props4;
var element = (_this$props$drag = (_this$props4 = this.props).drag) === null || _this$props$drag === void 0 ? void 0 : _this$props$drag.call(_this$props4, this);
this._draggedElement = React__default.isValidElement(element) ? JSXToDOMElement(element) : element;
}
return this._draggedElement;
}
}, {
key: "listComponent",
get: function get() {
return this.props.list;
}
}, {
key: "overlappingListElement",
get: function get() {
return this._overlappingList;
}
}, {
key: "clonedItemElement",
get: function get() {
if (!this._clonedItem) {
this._clonedItem = this._itemRef.cloneNode(true);
}
return this._clonedItem;
}
}, {
key: "rect",
get: function get() {
return this._beforeDragRect;
}
}]);
}(React.Component);
ReOrderableItem.defaultProps = {
drag: function drag(item) {
var itemCopy = item.clonedItemElement;
itemCopy.style.width = item.rect.width + "px";
itemCopy.style.height = item.rect.height + "px";
itemCopy.style.zIndex = '9000';
return itemCopy;
},
enabled: true,
component: "div",
componentProps: null,
itemIndex: 0,
itemData: null
};
function get(path, object) {
path = path + '';
var tokens = path.split('.');
var currentProperty = object;
for (var i = 0; i < tokens.length; i++) {
currentProperty = currentProperty[tokens[i]];
}
return currentProperty;
}
function set(path, object, newValue) {
path = path + '';
path = path.split('.');
while (path.length > 1) object = object[path.shift()];
return object[path.shift()] = newValue;
}
var List = /*#__PURE__*/function () {
function List(props) {
this._name = props.name || '';
this._list = props.list || [];
this._path = props.path || 0;
this._group = props.group || null;
this._listItems = null;
this._groupID = 'list-group-' + props.name.replace(/ /g, '-');
this._instanceID = 'list-instance-' + (props._instanceID ? props._instanceID : cryptoRandomString({
length: 8
}));
}
return _createClass(List, [{
key: "group",
get: function get() {
return this._group;
},
set: function set(value) {
this._group = value;
}
}, {
key: "groupID",
get: function get() {
return this._groupID;
}
}, {
key: "instanceID",
get: function get() {
return this._instanceID;
}
}, {
key: "listData",
get: function get$1() {
return this._group ? get(this._path, this._group) : this._list;
},
set: function set$1(value) {
this._group ? set(this._path, this._group, value) : this._list = value;
this._listItems = this.listData.map(function (data, index) {
return new ListItem({
itemData: data,
itemIndex: index
});
});
}
}, {
key: "listItems",
get: function get() {
if (!this._listItems) {
this._listItems = this.listData.map(function (data, index) {
return new ListItem({
itemData: data,
itemIndex: index
});
});
}
return this._listItems;
}
}, {
key: "path",
get: function get() {
return this._path;
},
set: function set(value) {
this._path = value;
}
}]);
}();
var ListController = /*#__PURE__*/function () {
function ListController(props) {
this._model = new List(props);
}
var _proto = ListController.prototype;
_proto.moveItem = function moveItem(sourceItem, targetIndex) {
var targetList = [].concat(this.model.listData);
var itemIndex = sourceItem.index;
targetList = arrayMove(targetList, itemIndex, targetIndex);
var params = [targetList, this.model.path];
if (this.model.group) {
var groupCopy = [].concat(this.model.group);
set(this.model.path, groupCopy, targetList);
params = [groupCopy];
}
return params;
};
_proto.transferItem = function transferItem(sourceItem, sourceList, targetIndex) {
var targetList = [].concat(this.model.listData);
var itemData = sourceItem.data;
var itemIndex = sourceItem.index;
var sourceListPath = sourceList.path;
var groupCopy = [].concat(this.model.group);
var sourceListData = sourceList.listData.filter(function (item, index) {
return index !== itemIndex;
});
targetList.push(itemData);
targetList = arrayMove(targetList, targetList.length - 1, targetIndex);
set(sourceListPath, groupCopy, sourceListData);
set(this.model.path, groupCopy, targetList);
return [groupCopy];
};
_proto.updateList = function updateList(sourceItem, sourceList, targetIndex) {
sourceList = !sourceList ? this.model : sourceList;
if (this.model.instanceID === sourceList.instanceID) {
return this.moveItem(sourceItem, targetIndex);
}
return this.transferItem(sourceItem, sourceList, targetIndex);
};
return _createClass(ListController, [{
key: "model",
get: function get() {
return this._model;
}
}]);
}();
var ReOrderableList = /*#__PURE__*/function (_Component) {
function ReOrderableList(props) {
var _this;
_this = _Component.call(this, props) || this;
_this._onItemDragStart = function (_ref) {
var item = _ref.item;
_this._initDragData(item);
};
_this._onItemDragEnd = function () {
_this._resetDragData();
};
_this._onDragExit = function () {
_this._removePlaceholders();
};
_this._onDragOver = function (event) {
if (!_this.itemPlaceholder) return;
var item = event.detail.item;
event.stopPropagation();
_this.itemPlaceholder.remove();
var filteredItems = Array.prototype.slice.call(_this.element.querySelectorAll(".ui-reorderable-item." + _this.instanceID + ":not([hidden])"));
if (filteredItems.length <= 0) {
_this.element.appendChild(_this.itemPlaceholder);
return;
}
var closestElement = getClosestElement(filteredItems, item.draggedElement);
var closestElementRect = closestElement.getBoundingClientRect();
var draggedElementRect = item.draggedElement.getBoundingClientRect();
var draggedElementAxis = Math.floor(draggedElementRect[_this.orientationSettings.axis]);
var closestRectYAxis = Math.floor(closestElementRect[_this.orientationSettings.axis] + closestElementRect[_this.orientationSettings.size] / 2);
var insertFunction = closestRectYAxis > draggedElementAxis ? insertBefore : insertAfter;
insertFunction(_this.element, closestElement, _this.itemPlaceholder);
};
_this._onDrop = function (event) {
var item = event.detail.item;
event.stopPropagation();
var filteredItems = Array.prototype.slice.call(_this.element.querySelectorAll(".ui-reorderable-item:not([hidden])"));
var index = filteredItems.findIndex(function (item) {
return item.classList.contains('item-placeholder');
});
_this._updateList(item, index);
};
_this._itemPlaceholder = null;
_this._controller = new ListController(props);
return _this;
}
_inheritsLoose(ReOrderableList, _Component);
var _proto = ReOrderableList.prototype;
_proto._initializeChildren = function _initializeChildren() {
var _this2 = this;
var index = 0;
var childrenWithProps = React__default.Children.map(this.props.children, function (child) {
if (React__default.isValidElement(child) && child.type === ReOrderableItem) {
var props = {
list: _this2,
onItemDragStart: function onItemDragStart(item) {
_this2._onItemDragStart(item);
if (child.props.onItemDragStart) {
child.props.onItemDragStart(item);
}
},
onItemDragEnd: function onItemDragEnd(item) {
_this2._onItemDragEnd(item);
if (child.props.onItemDragEnd) {
child.props.onItemDragEnd(item);
}
},
itemData: isEmpty(child.props.itemData) ? _this2.model.listData[index] : child.props.itemData,
itemIndex: isEmpty(child.props.itemIndex) ? index : child.props.itemIndex
};
index++;
return React__default.cloneElement(child, props);
}
return child;
});
return childrenWithProps;
};
_proto._updateList = function _updateList(item, targetIndex) {
var _this$props$onListUpd;
var params = this.controller.updateList(item.model, item.listComponent.model, targetIndex);
(_this$props$onListUpd = this.props.onListUpdate) === null || _this$props$onListUpd === void 0 ? void 0 : _this$props$onListUpd.apply(this, params);
};
_proto._initDragData = function _initDragData(item) {
ReOrderableList._currentDraggedItem = item;
};
_proto._resetDragData = function _resetDragData() {
ReOrderableList._currentDraggedItem = null;
this._removePlaceholders();
this._itemPlaceholder = null;
};
_proto._removePlaceholders = function _removePlaceholders() {
var placeholder = document.querySelector('.ui-reorderable-list .ui-reorderable-item.item-placeholder');
placeholder === null || placeholder === void 0 ? void 0 : placeholder.remove();
};
_proto.render = function render() {
var _this3 = this,
_this$props$component;
var CustomComponent = this.props.component;
this._controller = new ListController(this.props);
return /*#__PURE__*/React__default.createElement(CustomComponent, _extends({}, this.props.componentProps, {
ref: function ref(_ref2) {
return _this3._listRef = _ref2;
},
className: ['ui-reorderable-list', this.instanceID, this.groupID, (_this$props$component = this.props.componentProps) === null || _this$props$component === void 0 ? void 0 : _this$props$component.className].join(' '),
onDrop: this._onDrop,
onDragOver: this._onDragOver,
onDragExit: this._onDragExit
}), this._initializeChildren());
};
return _createClass(ReOrderableList, [{
key: "instanceID",
get: function get() {
return this.controller.model.instanceID;
}
}, {
key: "groupID",
get: function get() {
return this.controller.model.groupID;
}
}, {
key: "controller",
get: function get() {
return this._controller;
}
}, {
key: "model",
get: function get() {
return this._controller.model;
}
}, {
key: "element",
get: function get() {
return this._listRef;
}
}, {
key: "currentDraggedItem",
get: function get() {
return ReOrderableList._currentDraggedItem;
}
}, {
key: "itemPlaceholder",
get: function get() {
if (!this.currentDraggedItem) return null;
if (!this._itemPlaceholder) {
var _this$props$placehold, _this$props;
var element = (_this$props$placehold = (_this$props = this.props).placeholder) === null || _this$props$placehold === void 0 ? void 0 : _this$props$placehold.call(_this$props, this.currentDraggedItem);
this._itemPlaceholder = React__default.isValidElement(element) ? JSXToDOMElement(element) : element;
if (!this._itemPlaceholder.classList.contains('ui-reorderable-item')) {
this._itemPlaceholder.classList.add('ui-reorderable-item');
}
if (!this._itemPlaceholder.classList.contains('item-placeholder')) {
this._itemPlaceholder.classList.add('item-placeholder');
}
}
return this._itemPlaceholder;
}
}, {
key: "orientationSettings",
get: function get() {
return ReOrderableList._orientationSettings[this.props.orientation];
}
}]);
}(React.Component);
ReOrderableList.propTypes = {
name: PropTypes.string,
list: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
path: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]).isRequired,
componentProps: PropTypes.object,
orientation: PropTypes.oneOf(['vertical', 'horizontal']).isRequired,
placeholder: PropTypes.oneOfType([PropTypes.instanceOf(Object), PropTypes.instanceOf(React.ReactElement)]).isRequired,
group: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
};
ReOrderableList.defaultProps = {
name: '',
component: "div",
list: [],
path: 0,
group: null,
orientation: 'vertical',
placeholder: function placeholder(item) {
return /*#__PURE__*/React__default.createElement("div", {
style: {
width: item.rect.width + "px",
height: item.rect.height + "px",
backgroundColor: 'rgba(0, 0, 0, 0.1)'
}
});
}
};
ReOrderableList._currentDraggedItem = null;
ReOrderableList._orientationSettings = {
vertical: {
axis: 'y',
size: 'height'
},
horizontal: {
axis: 'x',
size: 'width'
}
};
var ReOrderableListGroup = /*#__PURE__*/function (_Component) {
function ReOrderableListGroup() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _Component.call.apply(_Component, [this].concat(args)) || this;
_this._onListUpdate = function (newList, path) {
var _this$props$onListGro, _this$props;
var listCopy = [].concat(_this.props.group);
if (path) {
set(path, listCopy, newList);
} else {
listCopy = newList;
}
(_this$props$onListGro = (_this$props = _this.props).onListGroupUpdate) === null || _this$props$onListGro === void 0 ? void 0 : _this$props$onListGro.call(_this$props, listCopy);
};
return _this;
}
_inheritsLoose(ReOrderableListGroup, _Component);
var _proto = ReOrderableListGroup.prototype;
_proto._initializeChildren = function _initializeChildren() {
var _this2 = this;
var index = 0;
var childrenWithProps = React__default.Children.map(this.props.children, function (child) {
if (React__default.isValidElement(child) && child.type === ReOrderableList) {
var props = {
name: _this2.props.name,
list: isEmpty(child.props.list) ? get(index, _this2.props.group) : child.props.list,
path: isEmpty(child.props.path) ? index : child.props.path,
onListUpdate: _this2._onListUpdate,
group: _this2.props.group
};
index++;
return React__default.cloneElement(child, props);
}
return child;
});
return childrenWithProps;
};
_proto.render = function render() {
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, this._initializeChildren());
};
return ReOrderableListGroup;
}(React.Component);
ReOrderableListGroup.defaultProps = {
name: 'list',
listGroup: []
};
exports.ReOrderableItem = ReOrderableItem;
exports.ReOrderableList = ReOrderableList;
exports.ReOrderableListGroup = ReOrderableListGroup;
//# sourceMappingURL=index.js.map