linkmore-design 1.1.27-beta.4 → 1.1.27-beta.6

package/lib/LmTable/components/DndContainer.js

@@ -1,114 +1,148 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TRASH_ID = void 0;
 exports.default = DndContainer;
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _reactDom = require("react-dom");
+
 var _core = require("@dnd-kit/core");
+
 var _sortable = require("@dnd-kit/sortable");
+
 var _utilities = require("@dnd-kit/utilities");
+
 var _multipleContainersKeyboardCoordinates = _interopRequireDefault(require("../multipleContainersKeyboardCoordinates"));
+
 var _Item = require("./Item");
+
 var _Container = require("./Container");
+
 var _classnames = _interopRequireDefault(require("classnames"));
+
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
+
   for (var p in s) {
     if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   }
+
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
+
 var defaultDropAnimationSideEffects = function defaultDropAnimationSideEffects(options) {
   return function (_ref) {
     var active = _ref.active,
-      dragOverlay = _ref.dragOverlay;
+        dragOverlay = _ref.dragOverlay;
     var originalStyles = {};
     var styles = options.styles,
-      className = options.className;
+        className = options.className;
+
     if (styles === null || styles === void 0 ? void 0 : styles.active) {
       for (var _i = 0, _Object$entries = Object.entries(styles.active); _i < _Object$entries.length; _i++) {
         var _Object$entries$_i = (0, _slicedToArray2.default)(_Object$entries[_i], 2),
-          key = _Object$entries$_i[0],
-          value = _Object$entries$_i[1];
+            key = _Object$entries$_i[0],
+            value = _Object$entries$_i[1];
+
         if (value === undefined) {
           continue;
         }
+
         originalStyles[key] = active.node.style.getPropertyValue(key);
         active.node.style.setProperty(key, value);
       }
     }
+
     if (styles === null || styles === void 0 ? void 0 : styles.dragOverlay) {
       for (var _i2 = 0, _Object$entries2 = Object.entries(styles.dragOverlay); _i2 < _Object$entries2.length; _i2++) {
         var _Object$entries2$_i = (0, _slicedToArray2.default)(_Object$entries2[_i2], 2),
-          _key = _Object$entries2$_i[0],
-          _value = _Object$entries2$_i[1];
+            _key = _Object$entries2$_i[0],
+            _value = _Object$entries2$_i[1];
+
         if (_value === undefined) {
           continue;
         }
+
         dragOverlay.node.style.setProperty(_key, _value);
       }
     }
+
     if (className === null || className === void 0 ? void 0 : className.active) {
       active.node.classList.add(className.active);
     }
+
     if (className === null || className === void 0 ? void 0 : className.dragOverlay) {
       dragOverlay.node.classList.add(className.dragOverlay);
     }
+
     return function cleanup() {
       for (var _i3 = 0, _Object$entries3 = Object.entries(originalStyles); _i3 < _Object$entries3.length; _i3++) {
         var _Object$entries3$_i = (0, _slicedToArray2.default)(_Object$entries3[_i3], 2),
-          _key2 = _Object$entries3$_i[0],
-          _value2 = _Object$entries3$_i[1];
+            _key2 = _Object$entries3$_i[0],
+            _value2 = _Object$entries3$_i[1];
+
         active.node.style.setProperty(_key2, _value2);
       }
+
       if (className === null || className === void 0 ? void 0 : className.active) {
         active.node.classList.remove(className.active);
       }
     };
   };
 };
+
 var animateLayoutChanges = function animateLayoutChanges(args) {
   return (0, _sortable.defaultAnimateLayoutChanges)(Object.assign(Object.assign({}, args), {
     wasDragging: true
   }));
 };
+
 function DroppableContainer(_a) {
   var _b;
+
   var children = _a.children,
-    _a$columns = _a.columns,
-    columns = _a$columns === void 0 ? 1 : _a$columns,
-    disabled = _a.disabled,
-    id = _a.id,
-    items = _a.items,
-    style = _a.style,
-    props = __rest(_a, ["children", "columns", "disabled", "id", "items", "style"]);
+      _a$columns = _a.columns,
+      columns = _a$columns === void 0 ? 1 : _a$columns,
+      disabled = _a.disabled,
+      id = _a.id,
+      items = _a.items,
+      style = _a.style,
+      props = __rest(_a, ["children", "columns", "disabled", "id", "items", "style"]);
+
   var _useSortable = (0, _sortable.useSortable)({
-      id: id,
-      data: {
-        type: 'container',
-        children: items
-      },
-      animateLayoutChanges: animateLayoutChanges
-    }),
-    active = _useSortable.active,
-    attributes = _useSortable.attributes,
-    isDragging = _useSortable.isDragging,
-    listeners = _useSortable.listeners,
-    over = _useSortable.over,
-    setNodeRef = _useSortable.setNodeRef,
-    transition = _useSortable.transition,
-    transform = _useSortable.transform;
+    id: id,
+    data: {
+      type: 'container',
+      children: items
+    },
+    animateLayoutChanges: animateLayoutChanges
+  }),
+      active = _useSortable.active,
+      attributes = _useSortable.attributes,
+      isDragging = _useSortable.isDragging,
+      listeners = _useSortable.listeners,
+      over = _useSortable.over,
+      setNodeRef = _useSortable.setNodeRef,
+      transition = _useSortable.transition,
+      transform = _useSortable.transform;
+
   var isOverContainer = over ? id === over.id && ((_b = active === null || active === void 0 ? void 0 : active.data.current) === null || _b === void 0 ? void 0 : _b.type) !== 'container' || items.includes(over.id) : false;
   return /*#__PURE__*/_react.default.createElement(_Container.Container, Object.assign({
     ref: disabled ? undefined : setNodeRef,
@@ -122,6 +156,7 @@ function DroppableContainer(_a) {
     columns: columns
   }, props), children);
 }
+
 var dropAnimation = {
   sideEffects: defaultDropAnimationSideEffects({
     styles: {
@@ -131,69 +166,75 @@ var dropAnimation = {
     }
   })
 };
-var TRASH_ID = 'void';
-// const PLACEHOLDER_ID = 'placeholder';
+var TRASH_ID = 'void'; // const PLACEHOLDER_ID = 'placeholder';
 // const empty: UniqueIdentifier[] = [];
+
 exports.TRASH_ID = TRASH_ID;
+
 function DndContainer(_ref2) {
   var _ref2$adjustScale = _ref2.adjustScale,
-    adjustScale = _ref2$adjustScale === void 0 ? false : _ref2$adjustScale,
-    _ref2$itemCount = _ref2.itemCount,
-    itemCount = _ref2$itemCount === void 0 ? 3 : _ref2$itemCount,
-    cancelDrop = _ref2.cancelDrop,
-    columns = _ref2.columns,
-    _ref2$handle = _ref2.handle,
-    handle = _ref2$handle === void 0 ? false : _ref2$handle,
-    initialItems = _ref2.items,
-    containerStyle = _ref2.containerStyle,
-    _ref2$coordinateGette = _ref2.coordinateGetter,
-    coordinateGetter = _ref2$coordinateGette === void 0 ? _multipleContainersKeyboardCoordinates.default : _ref2$coordinateGette,
-    _ref2$getItemStyles = _ref2.getItemStyles,
-    getItemStyles = _ref2$getItemStyles === void 0 ? function () {
-      return {};
-    } : _ref2$getItemStyles,
-    _ref2$wrapperStyle = _ref2.wrapperStyle,
-    wrapperStyle = _ref2$wrapperStyle === void 0 ? function () {
-      return {};
-    } : _ref2$wrapperStyle,
-    modifiers = _ref2.modifiers,
-    renderItem = _ref2.renderItem,
-    _ref2$trashable = _ref2.trashable,
-    trashable = _ref2$trashable === void 0 ? false : _ref2$trashable,
-    scrollable = _ref2.scrollable,
-    children = _ref2.children,
-    _ref2$updateItems = _ref2.updateItems,
-    updateItems = _ref2$updateItems === void 0 ? function () {
-      return {};
-    } : _ref2$updateItems,
-    _ref2$rowGroupTitle = _ref2.rowGroupTitle,
-    rowGroupTitle = _ref2$rowGroupTitle === void 0 ? '行分组' : _ref2$rowGroupTitle,
-    _ref2$colGroupTitle = _ref2.colGroupTitle,
-    colGroupTitle = _ref2$colGroupTitle === void 0 ? '列分组' : _ref2$colGroupTitle,
-    _ref2$filterColumns = _ref2.filterColumns,
-    filterColumns = _ref2$filterColumns === void 0 ? [] : _ref2$filterColumns;
+      adjustScale = _ref2$adjustScale === void 0 ? false : _ref2$adjustScale,
+      _ref2$itemCount = _ref2.itemCount,
+      itemCount = _ref2$itemCount === void 0 ? 3 : _ref2$itemCount,
+      cancelDrop = _ref2.cancelDrop,
+      columns = _ref2.columns,
+      _ref2$handle = _ref2.handle,
+      handle = _ref2$handle === void 0 ? false : _ref2$handle,
+      initialItems = _ref2.items,
+      containerStyle = _ref2.containerStyle,
+      _ref2$coordinateGette = _ref2.coordinateGetter,
+      coordinateGetter = _ref2$coordinateGette === void 0 ? _multipleContainersKeyboardCoordinates.default : _ref2$coordinateGette,
+      _ref2$getItemStyles = _ref2.getItemStyles,
+      getItemStyles = _ref2$getItemStyles === void 0 ? function () {
+    return {};
+  } : _ref2$getItemStyles,
+      _ref2$wrapperStyle = _ref2.wrapperStyle,
+      wrapperStyle = _ref2$wrapperStyle === void 0 ? function () {
+    return {};
+  } : _ref2$wrapperStyle,
+      modifiers = _ref2.modifiers,
+      renderItem = _ref2.renderItem,
+      _ref2$trashable = _ref2.trashable,
+      trashable = _ref2$trashable === void 0 ? false : _ref2$trashable,
+      scrollable = _ref2.scrollable,
+      children = _ref2.children,
+      _ref2$updateItems = _ref2.updateItems,
+      updateItems = _ref2$updateItems === void 0 ? function () {
+    return {};
+  } : _ref2$updateItems,
+      _ref2$rowGroupTitle = _ref2.rowGroupTitle,
+      rowGroupTitle = _ref2$rowGroupTitle === void 0 ? '行分组' : _ref2$rowGroupTitle,
+      _ref2$colGroupTitle = _ref2.colGroupTitle,
+      colGroupTitle = _ref2$colGroupTitle === void 0 ? '列分组' : _ref2$colGroupTitle,
+      _ref2$filterColumns = _ref2.filterColumns,
+      filterColumns = _ref2$filterColumns === void 0 ? [] : _ref2$filterColumns;
+
   var _useState = (0, _react.useState)(function () {
-      return initialItems;
-    }),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    items = _useState2[0],
-    setItems = _useState2[1];
+    return initialItems;
+  }),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      items = _useState2[0],
+      setItems = _useState2[1];
+
   (0, _react.useEffect)(function () {
     setItems(initialItems);
   }, [initialItems]);
+
   var _useState3 = (0, _react.useState)(Object.keys(items)),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    containers = _useState4[0],
-    setContainers = _useState4[1];
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      containers = _useState4[0],
+      setContainers = _useState4[1];
+
   var _useState5 = (0, _react.useState)(null),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    activeId = _useState6[0],
-    setActiveId = _useState6[1];
-  var lastOverId = (0, _react.useRef)(null);
-  // 是否移动到新容器
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      activeId = _useState6[0],
+      setActiveId = _useState6[1];
+
+  var lastOverId = (0, _react.useRef)(null); // 是否移动到新容器
+
   var recentlyMovedToNewContainer = (0, _react.useRef)(false);
-  var isSortingContainer = activeId ? containers.includes(activeId) : false;
-  // 执行顺序: onDragStart,collisionDetection,onDragOver，[...collisionDetection],onDragEnd 
+  var isSortingContainer = activeId ? containers.includes(activeId) : false; // 执行顺序: onDragStart,collisionDetection,onDragOver，[...collisionDetection],onDragEnd 
+
   /**
    * Custom collision detection strategy optimized for multiple containers
    * 针对多个容器优化的自定义碰撞检测策略
@@ -202,30 +243,34 @@ function DndContainer(_ref2) {
    * - If there are no intersecting containers, return the last matched intersection
    * 1.首先，找到与指针相交的任何可放置容器。2.如果没有，则查找具有活动可拖动对象的相交容器。3.如果没有交叉容器，则返回最后匹配的交叉
    */
+
   var collisionDetectionStrategy = (0, _react.useCallback)(function (args) {
     var _a;
+
     if (activeId && activeId in items) {
       return (0, _core.closestCenter)(Object.assign(Object.assign({}, args), {
         droppableContainers: args.droppableContainers.filter(function (container) {
           return container.id in items;
         })
       }));
-    }
-    // Start by finding any intersecting droppable
+    } // Start by finding any intersecting droppable
+
+
     var pointerIntersections = (0, _core.pointerWithin)(args);
-    var intersections = pointerIntersections.length > 0 ?
-    // If there are droppables intersecting with the pointer, return those
+    var intersections = pointerIntersections.length > 0 ? // If there are droppables intersecting with the pointer, return those
     pointerIntersections : (0, _core.rectIntersection)(args);
     var overId = (0, _core.getFirstCollision)(intersections, 'id');
+
     if (overId != null) {
       if (overId === TRASH_ID) {
         // If the intersecting droppable is the trash, return early
         // Remove this if you're not using trashable functionality in your app
         return intersections;
       }
+
       if (overId in items) {
-        var containerItems = items[overId];
-        // If a container is matched and it contains items (columns 'A', 'B', 'C')
+        var containerItems = items[overId]; // If a container is matched and it contains items (columns 'A', 'B', 'C')
+
         if (containerItems.length > 0) {
           // Return the closest droppable within that container
           overId = (_a = (0, _core.closestCenter)(Object.assign(Object.assign({}, args), {
@@ -235,56 +280,69 @@ function DndContainer(_ref2) {
           }))[0]) === null || _a === void 0 ? void 0 : _a.id;
         }
       }
+
       lastOverId.current = overId;
       return [{
         id: overId
       }];
-    }
-    // When a draggable item moves to a new container, the layout may shift
+    } // When a draggable item moves to a new container, the layout may shift
     // and the `overId` may become `null`. We manually set the cached `lastOverId`
     // to the id of the draggable item that was moved to the new container, otherwise
     // the previous `overId` will be returned which can cause items to incorrectly shift positions
+
+
     if (recentlyMovedToNewContainer.current) {
       lastOverId.current = activeId;
-    }
-    // If no droppable is matched, return the last match
+    } // If no droppable is matched, return the last match
+
+
     return lastOverId.current ? [{
       id: lastOverId.current
     }] : [];
   }, [activeId, items]);
+
   var _useState7 = (0, _react.useState)(null),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    clonedItems = _useState8[0],
-    setClonedItems = _useState8[1];
-  // 传感器
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      clonedItems = _useState8[0],
+      setClonedItems = _useState8[1]; // 传感器
+
+
   var sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.MouseSensor), (0, _core.useSensor)(_core.TouchSensor), (0, _core.useSensor)(_core.KeyboardSensor, {
     coordinateGetter: coordinateGetter
   }));
+
   var findContainer = function findContainer(id) {
     if (id in items) {
       return id;
     }
+
     return Object.keys(items).find(function (key) {
       return items[key].includes(id);
     });
   };
+
   var getIndex = function getIndex(id) {
     var container = findContainer(id);
+
     if (!container) {
       return -1;
     }
+
     var index = items[container].indexOf(id);
     return index;
   };
+
   var onDragCancel = function onDragCancel() {
     if (clonedItems) {
       // Reset items to their original state in case items have been
       // Dragged across containers
       setItems(clonedItems);
     }
+
     setActiveId(null);
     setClonedItems(null);
   };
+
   (0, _react.useEffect)(function () {
     var id = requestAnimationFrame(function () {
       recentlyMovedToNewContainer.current = false;
@@ -293,18 +351,23 @@ function DndContainer(_ref2) {
       return cancelAnimationFrame(id);
     };
   }, [items]);
+
   var isOk = function isOk(active, over) {
     var _a, _b;
+
     var item = filterColumns.find(function (item) {
       return item.title === active.id;
     });
+
     if (over.id === 'row' || ((_a = items === null || items === void 0 ? void 0 : items.row) === null || _a === void 0 ? void 0 : _a.includes(over.id))) {
       return item && item.rowGroup;
     } else if (over.id === 'col' || ((_b = items === null || items === void 0 ? void 0 : items.col) === null || _b === void 0 ? void 0 : _b.includes(over.id))) {
       return item && item.colGroup;
     }
+
     return true;
   };
+
   var topContainers = containers.filter(function (item) {
     return item !== 'tableHeader';
   });
@@ -326,27 +389,34 @@ function DndContainer(_ref2) {
     },
     onDragOver: function onDragOver(_ref4) {
       var active = _ref4.active,
-        over = _ref4.over;
+          over = _ref4.over;
       var overId = over === null || over === void 0 ? void 0 : over.id;
+
       if (overId == null || overId === TRASH_ID || active.id in items) {
         return;
       }
+
       if (!isOk(active, over)) {
         return;
       }
+
       var overContainer = findContainer(overId);
       var activeContainer = findContainer(active.id);
+
       if (!overContainer || !activeContainer) {
         return;
       }
+
       if (activeContainer !== overContainer) {
         setItems(function (items) {
           var _Object$assign;
+
           var activeItems = items[activeContainer];
           var overItems = items[overContainer];
           var overIndex = overItems.indexOf(overId);
           var activeIndex = activeItems.indexOf(active.id);
           var newIndex;
+
           if (overId in items) {
             newIndex = overItems.length + 1;
           } else {
@@ -355,6 +425,7 @@ function DndContainer(_ref2) {
             var modifier = isBelowOverItem ? 1 : 0;
             newIndex = overIndex >= 0 ? overIndex + modifier : overItems.length + 1;
           }
+
           recentlyMovedToNewContainer.current = true;
           return Object.assign(Object.assign({}, items), (_Object$assign = {}, (0, _defineProperty2.default)(_Object$assign, activeContainer, items[activeContainer].filter(function (item) {
             return item !== active.id;
@@ -364,7 +435,8 @@ function DndContainer(_ref2) {
     },
     onDragEnd: function onDragEnd(_ref5) {
       var active = _ref5.active,
-        over = _ref5.over;
+          over = _ref5.over;
+
       // 容器拖拽
       if (active.id in items && (over === null || over === void 0 ? void 0 : over.id)) {
         setContainers(function (containers) {
@@ -373,16 +445,21 @@ function DndContainer(_ref2) {
           return (0, _sortable.arrayMove)(containers, activeIndex, overIndex);
         });
       }
+
       var activeContainer = findContainer(active.id);
+
       if (!activeContainer) {
         setActiveId(null);
         return;
       }
+
       var overId = over === null || over === void 0 ? void 0 : over.id;
+
       if (overId == null) {
         setActiveId(null);
         return;
       }
+
       if (overId === TRASH_ID) {
         console.log('TRASH_ID', overId);
         setItems(function (items) {
@@ -393,18 +470,22 @@ function DndContainer(_ref2) {
         setActiveId(null);
         return;
       }
+
       var overContainer = findContainer(overId);
+
       if (overContainer) {
         var activeIndex = items[activeContainer].indexOf(active.id);
         var overIndex = items[overContainer].indexOf(overId);
+
         if (activeIndex !== overIndex) {
-          var newItems = Object.assign(Object.assign({}, items), (0, _defineProperty2.default)({}, overContainer, (0, _sortable.arrayMove)(items[overContainer], activeIndex, overIndex)));
-          // setItems(newItems);
+          var newItems = Object.assign(Object.assign({}, items), (0, _defineProperty2.default)({}, overContainer, (0, _sortable.arrayMove)(items[overContainer], activeIndex, overIndex))); // setItems(newItems);
+
           updateItems(newItems);
         } else {
           updateItems(items);
         }
       }
+
       setActiveId(null);
     },
     cancelDrop: cancelDrop,
@@ -475,6 +556,7 @@ function DndContainer(_ref2) {
   }, activeId ? containers.includes(activeId) ? renderContainerDragOverlay(activeId) : renderSortableItemDragOverlay(activeId) : null), document.body), trashable && activeId && !containers.includes(activeId) ? /*#__PURE__*/_react.default.createElement(Trash, {
     id: TRASH_ID
   }) : null);
+
   function renderSortableItemDragOverlay(id) {
     return /*#__PURE__*/_react.default.createElement(_Item.Item, {
       value: id,
@@ -496,6 +578,7 @@ function DndContainer(_ref2) {
       dragOverlay: true
     });
   }
+
   function renderContainerDragOverlay(containerId) {
     return /*#__PURE__*/_react.default.createElement(_Container.Container, {
       label: "Column ".concat(containerId),
@@ -526,34 +609,41 @@ function DndContainer(_ref2) {
         renderItem: renderItem
       });
     }));
-  }
-  // function getNextContainerId() {
+  } // function getNextContainerId() {
   //   const containerIds = Object.keys(items);
   //   const lastContainerId = containerIds[containerIds.length - 1];
   //   return String.fromCharCode(lastContainerId.charCodeAt(0) + 1);
   // }
+
 }
 
 function getColor(id) {
   switch (String(id)[0]) {
     case 'A':
       return '#7193f1';
+
     case 'B':
       return '#ffda6c';
+
     case 'C':
       return '#00bcd4';
+
     case 'D':
       return '#ef769f';
   }
+
   return undefined;
 }
+
 function Trash(_ref6) {
   var id = _ref6.id;
+
   var _useDroppable = (0, _core.useDroppable)({
-      id: id
-    }),
-    setNodeRef = _useDroppable.setNodeRef,
-    isOver = _useDroppable.isOver;
+    id: id
+  }),
+      setNodeRef = _useDroppable.setNodeRef,
+      isOver = _useDroppable.isOver;
+
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: setNodeRef,
     style: {
@@ -572,28 +662,31 @@ function Trash(_ref6) {
     }
   }, "Drop here to delete");
 }
+
 function SortableItem(_ref7) {
   var disabled = _ref7.disabled,
-    id = _ref7.id,
-    index = _ref7.index,
-    handle = _ref7.handle,
-    renderItem = _ref7.renderItem,
-    style = _ref7.style,
-    containerId = _ref7.containerId,
-    getIndex = _ref7.getIndex,
-    wrapperStyle = _ref7.wrapperStyle,
-    onRemove = _ref7.onRemove;
+      id = _ref7.id,
+      index = _ref7.index,
+      handle = _ref7.handle,
+      renderItem = _ref7.renderItem,
+      style = _ref7.style,
+      containerId = _ref7.containerId,
+      getIndex = _ref7.getIndex,
+      wrapperStyle = _ref7.wrapperStyle,
+      onRemove = _ref7.onRemove;
+
   var _useSortable2 = (0, _sortable.useSortable)({
-      id: id
-    }),
-    setNodeRef = _useSortable2.setNodeRef,
-    listeners = _useSortable2.listeners,
-    isDragging = _useSortable2.isDragging,
-    isSorting = _useSortable2.isSorting,
-    over = _useSortable2.over,
-    overIndex = _useSortable2.overIndex,
-    transform = _useSortable2.transform,
-    transition = _useSortable2.transition;
+    id: id
+  }),
+      setNodeRef = _useSortable2.setNodeRef,
+      listeners = _useSortable2.listeners,
+      isDragging = _useSortable2.isDragging,
+      isSorting = _useSortable2.isSorting,
+      over = _useSortable2.over,
+      overIndex = _useSortable2.overIndex,
+      transform = _useSortable2.transform,
+      transition = _useSortable2.transition;
+
   var mounted = useMountStatus();
   var mountedWhileDragging = isDragging && !mounted;
   return /*#__PURE__*/_react.default.createElement(_Item.Item, {
@@ -624,11 +717,13 @@ function SortableItem(_ref7) {
     onRemove: onRemove
   });
 }
+
 function useMountStatus() {
   var _useState9 = (0, _react.useState)(false),
-    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    isMounted = _useState10[0],
-    setIsMounted = _useState10[1];
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      isMounted = _useState10[0],
+      setIsMounted = _useState10[1];
+
   (0, _react.useEffect)(function () {
     var timeout = setTimeout(function () {
       return setIsMounted(true);