linkmore-design 1.1.30 → 1.1.32

package/lib/LmTable/components/DndContainer.js

@@ -1,148 +1,114 @@
 "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,
@@ -156,7 +122,6 @@ function DroppableContainer(_a) {
     columns: columns
   }, props), children);
 }
-
 var dropAnimation = {
   sideEffects: defaultDropAnimationSideEffects({
     styles: {
@@ -166,75 +131,69 @@ 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
    * 针对多个容器优化的自定义碰撞检测策略
@@ -243,34 +202,30 @@ 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
@@ -281,69 +236,56 @@ 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;
@@ -352,23 +294,18 @@ 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';
   });
@@ -390,34 +327,27 @@ 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 {
@@ -426,7 +356,6 @@ 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;
@@ -436,8 +365,7 @@ 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) {
@@ -446,21 +374,16 @@ 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) {
@@ -471,22 +394,18 @@ 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,
@@ -557,7 +476,6 @@ 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,
@@ -579,7 +497,6 @@ function DndContainer(_ref2) {
       dragOverlay: true
     });
   }
-
   function renderContainerDragOverlay(containerId) {
     return /*#__PURE__*/_react.default.createElement(_Container.Container, {
       label: "Column ".concat(containerId),
@@ -610,41 +527,34 @@ 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: {
@@ -663,31 +573,28 @@ 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, {
@@ -718,13 +625,11 @@ 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);