linkmore-design 1.1.22-beta.2 → 1.1.23

package/lib/LmTable/components/DndContainer.js

@@ -1,639 +1,49 @@
 "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");
+exports.default = void 0;
+
 var _core = require("@dnd-kit/core");
+
+var _modifiers = require("@dnd-kit/modifiers");
+
 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"));
-require("./DndContainer.module.css");
-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;
-    var originalStyles = {};
-    var styles = options.styles,
-      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];
-        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];
-        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];
-        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"]);
-  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;
-  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,
-    style: Object.assign(Object.assign({}, style), {
-      transition: transition,
-      transform: _utilities.CSS.Translate.toString(transform),
-      opacity: isDragging ? 0.5 : undefined
-    }),
-    hover: isOverContainer,
-    handleProps: Object.assign(Object.assign({}, attributes), listeners),
-    columns: columns
-  }, props), children);
-}
-var dropAnimation = {
-  sideEffects: defaultDropAnimationSideEffects({
-    styles: {
-      active: {
-        opacity: '0.5'
-      }
-    }
-  })
-};
-var TRASH_ID = 'void';
-exports.TRASH_ID = TRASH_ID;
-var PLACEHOLDER_ID = 'placeholder';
-// const empty: UniqueIdentifier[] = [];
-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;
-  var _useState = (0, _react.useState)(function () {
-      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];
-  var _useState5 = (0, _react.useState)(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 
-  /**
-   * Custom collision detection strategy optimized for multiple containers
-   * 针对多个容器优化的自定义碰撞检测策略
-   * - First, find any droppable containers intersecting with the pointer.
-   * - If there are none, find intersecting containers with the active draggable.
-   * - 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
-    var pointerIntersections = (0, _core.pointerWithin)(args);
-    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')
-        if (containerItems.length > 0) {
-          // Return the closest droppable within that container
-          overId = (_a = (0, _core.closestCenter)(Object.assign(Object.assign({}, args), {
-            droppableContainers: args.droppableContainers.filter(function (container) {
-              return container.id !== overId && containerItems.includes(container.id);
-            })
-          }))[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
-    // 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
-    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];
-  // 传感器
-  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);
+
+var _react = _interopRequireDefault(require("react"));
+
+// 可拖拽容器
+var DndContainer = function DndContainer(_ref) {
+  var children = _ref.children,
+      move = _ref.move;
+  var sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.PointerSensor), (0, _core.useSensor)(_core.KeyboardSensor, {
+    coordinateGetter: _sortable.sortableKeyboardCoordinates
+  })); // 拖拽结束
+
+  var handleDragEnd = function handleDragEnd(event) {
+    var active = event.active,
+        over = event.over; // 未移入时触发
+
+    if (!(over === null || over === void 0 ? void 0 : over.id)) {
+      return;
+    } // 移入时触发更新数据
+
+
+    if (active.id !== over.id) {
+      move(active.id, over.id);
     }
-    setActiveId(null);
-    setClonedItems(null);
   };
-  (0, _react.useEffect)(function () {
-    var id = requestAnimationFrame(function () {
-      recentlyMovedToNewContainer.current = false;
-    });
-    return function () {
-      return cancelAnimationFrame(id);
-    };
-  }, [items]);
-  var topContainers = containers.filter(function (item) {
-    return item !== 'tableHeader';
-  });
-  var tableContainer = containers.filter(function (item) {
-    return item === 'tableHeader';
-  })[0];
+
   return /*#__PURE__*/_react.default.createElement(_core.DndContext, {
     sensors: sensors,
-    collisionDetection: collisionDetectionStrategy,
-    measuring: {
-      droppable: {
-        strategy: _core.MeasuringStrategy.Always
-      }
-    },
-    onDragStart: function onDragStart(_ref3) {
-      var active = _ref3.active;
-      setActiveId(active.id);
-      setClonedItems(items);
-    },
-    onDragOver: function onDragOver(_ref4) {
-      var active = _ref4.active,
-        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;
-      }
-      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 {
-            // 当前激活的是否在目标下面
-            var isBelowOverItem = over && active.rect.current.translated && active.rect.current.translated.top > over.rect.top + over.rect.height;
-            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;
-          })), (0, _defineProperty2.default)(_Object$assign, overContainer, [].concat((0, _toConsumableArray2.default)(items[overContainer].slice(0, newIndex)), [items[activeContainer][activeIndex]], (0, _toConsumableArray2.default)(items[overContainer].slice(newIndex, items[overContainer].length)))), _Object$assign));
-        });
-      }
-    },
-    onDragEnd: function onDragEnd(_ref5) {
-      var active = _ref5.active,
-        over = _ref5.over;
-      // 容器拖拽
-      if (active.id in items && (over === null || over === void 0 ? void 0 : over.id)) {
-        setContainers(function (containers) {
-          var activeIndex = containers.indexOf(active.id);
-          var overIndex = containers.indexOf(over.id);
-          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) {
-          return Object.assign(Object.assign({}, items), (0, _defineProperty2.default)({}, activeContainer, items[activeContainer].filter(function (id) {
-            return id !== activeId;
-          })));
-        });
-        setActiveId(null);
-        return;
-      }
-      if (overId === PLACEHOLDER_ID) {
-        var newContainerId = getNextContainerId();
-        (0, _reactDom.unstable_batchedUpdates)(function () {
-          setContainers(function (containers) {
-            return [].concat((0, _toConsumableArray2.default)(containers), [newContainerId]);
-          });
-          console.log('PLACEHOLDER_ID', overId);
-          setItems(function (items) {
-            var _Object$assign3;
-            return Object.assign(Object.assign({}, items), (_Object$assign3 = {}, (0, _defineProperty2.default)(_Object$assign3, activeContainer, items[activeContainer].filter(function (id) {
-              return id !== activeId;
-            })), (0, _defineProperty2.default)(_Object$assign3, newContainerId, [active.id]), _Object$assign3));
-          });
-          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);
-          updateItems(newItems);
-        } else {
-          updateItems(items);
-        }
-      }
-      setActiveId(null);
-    },
-    cancelDrop: cancelDrop,
-    onDragCancel: onDragCancel,
-    modifiers: modifiers
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      display: 'flex',
-      boxSizing: 'border-box'
-    }
-  }, topContainers.map(function (containerId) {
-    return /*#__PURE__*/_react.default.createElement(DroppableContainer, {
-      key: containerId,
-      id: containerId,
-      label: containerId === 'row' ? rowGroupTitle : colGroupTitle,
-      columns: columns,
-      items: items[containerId],
-      scrollable: true,
-      style: containerStyle,
-      unstyled: false
-    }, /*#__PURE__*/_react.default.createElement(_sortable.SortableContext, {
-      items: items[containerId],
-      strategy: _sortable.horizontalListSortingStrategy
-    }, items[containerId].map(function (value, index) {
-      return /*#__PURE__*/_react.default.createElement(SortableItem, {
-        disabled: isSortingContainer,
-        key: value,
-        id: value,
-        index: index,
-        handle: true,
-        style: getItemStyles,
-        wrapperStyle: wrapperStyle,
-        renderItem: renderItem,
-        containerId: containerId,
-        getIndex: getIndex,
-        onRemove: function onRemove() {
-          updateItems(items, value);
-        }
-      });
-    })));
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('dnd_table_container'),
-    style: {
-      display: 'flex',
-      boxSizing: 'border-box',
-      justifyContent: 'column'
-    }
-  }, /*#__PURE__*/_react.default.createElement(DroppableContainer, {
-    key: tableContainer,
-    id: tableContainer,
-    columns: 1,
-    items: items[tableContainer],
-    scrollable: scrollable,
-    style: containerStyle,
-    unstyled: false
-  }, /*#__PURE__*/_react.default.createElement(_sortable.SortableContext, {
-    items: items[tableContainer],
-    strategy: _sortable.horizontalListSortingStrategy
-  }, /*#__PURE__*/_react.default.createElement("li", {
-    style: {
-      width: '100%'
-    }
-  }, children)))), /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(_core.DragOverlay, {
-    adjustScale: adjustScale,
-    dropAnimation: dropAnimation
-  }, 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,
-      handle: handle,
-      style: getItemStyles({
-        containerId: findContainer(id),
-        overIndex: -1,
-        index: getIndex(id),
-        value: id,
-        isSorting: true,
-        isDragging: true,
-        isDragOverlay: true
-      }),
-      color: getColor(id),
-      wrapperStyle: wrapperStyle({
-        index: 0
-      }),
-      renderItem: renderItem,
-      dragOverlay: true
-    });
-  }
-  function renderContainerDragOverlay(containerId) {
-    return /*#__PURE__*/_react.default.createElement(_Container.Container, {
-      label: "Column ".concat(containerId),
-      columns: columns,
-      style: {
-        height: '100%'
-      },
-      shadow: true,
-      unstyled: false
-    }, items[containerId].map(function (item, index) {
-      return /*#__PURE__*/_react.default.createElement(_Item.Item, {
-        key: item,
-        value: item,
-        handle: handle,
-        style: getItemStyles({
-          containerId: containerId,
-          overIndex: -1,
-          index: getIndex(item),
-          value: item,
-          isDragging: false,
-          isSorting: false,
-          isDragOverlay: false
-        }),
-        color: getColor(item),
-        wrapperStyle: wrapperStyle({
-          index: index
-        }),
-        renderItem: renderItem
-      });
-    }));
-  }
-  function getNextContainerId() {
-    var containerIds = Object.keys(items);
-    var 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;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: setNodeRef,
-    style: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      position: 'fixed',
-      left: '50%',
-      marginLeft: -150,
-      bottom: 20,
-      width: 300,
-      height: 60,
-      borderRadius: 5,
-      border: '1px solid',
-      borderColor: isOver ? 'red' : '#DDD'
-    }
-  }, "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;
-  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;
-  var mounted = useMountStatus();
-  var mountedWhileDragging = isDragging && !mounted;
-  return /*#__PURE__*/_react.default.createElement(_Item.Item, {
-    ref: disabled ? undefined : setNodeRef,
-    value: id,
-    dragging: isDragging,
-    sorting: isSorting,
-    handle: handle,
-    handleProps: undefined,
-    index: index,
-    wrapperStyle: wrapperStyle({
-      index: index
-    }),
-    style: style({
-      index: index,
-      value: id,
-      isDragging: isDragging,
-      isSorting: isSorting,
-      overIndex: over ? getIndex(over.id) : overIndex,
-      containerId: containerId
-    }),
-    color: getColor(id),
-    transition: transition,
-    transform: transform,
-    fadeIn: mountedWhileDragging,
-    listeners: listeners,
-    renderItem: renderItem,
-    onRemove: onRemove
-  });
-}
-function useMountStatus() {
-  var _useState9 = (0, _react.useState)(false),
-    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    isMounted = _useState10[0],
-    setIsMounted = _useState10[1];
-  (0, _react.useEffect)(function () {
-    var timeout = setTimeout(function () {
-      return setIsMounted(true);
-    }, 500);
-    return function () {
-      return clearTimeout(timeout);
-    };
-  }, []);
-  return isMounted;
-}
+    collisionDetection: _core.closestCenter,
+    onDragEnd: handleDragEnd,
+    modifiers: [_modifiers.restrictToParentElement]
+  }, children);
+};
+
+var _default = DndContainer;
+exports.default = _default;