linkmore-design 1.1.21 → 1.1.22-beta.1

package/lib/LmTable/components/DndContainer.js

@@ -1,49 +1,732 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.TRASH_ID = void 0;
+exports.default = DndContainer;
 
-var _core = require("@dnd-kit/core");
+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 _modifiers = require("@dnd-kit/modifiers");
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDom = require("react-dom");
+
+var _core = require("@dnd-kit/core");
 
 var _sortable = require("@dnd-kit/sortable");
 
-var _react = _interopRequireDefault(require("react"));
+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];
+  }
 
-// 可拖拽容器
-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
-  })); // 拖拽结束
+  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];
 
-  var handleDragEnd = function handleDragEnd(event) {
-    var active = event.active,
-        over = event.over; // 未移入时触发
+        if (_value === undefined) {
+          continue;
+        }
 
-    if (!(over === null || over === void 0 ? void 0 : over.id)) {
-      return;
-    } // 移入时触发更新数据
+        dragOverlay.node.style.setProperty(_key, _value);
+      }
+    }
 
+    if (className === null || className === void 0 ? void 0 : className.active) {
+      active.node.classList.add(className.active);
+    }
 
-    if (active.id !== over.id) {
-      move(active.id, over.id);
+    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);
+    }
+
+    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: _core.closestCenter,
-    onDragEnd: handleDragEnd,
-    modifiers: [_modifiers.restrictToParentElement]
-  }, children);
-};
+    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];
 
-var _default = DndContainer;
-exports.default = _default;
+  (0, _react.useEffect)(function () {
+    var timeout = setTimeout(function () {
+      return setIsMounted(true);
+    }, 500);
+    return function () {
+      return clearTimeout(timeout);
+    };
+  }, []);
+  return isMounted;
+}