linkmore-design 1.1.22-beta.1 → 1.1.22-beta.3

package/es/LmTable/components/DndContainer.js

@@ -1,24 +1,22 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-
 var __rest = this && this.__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;
 };
-
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal, unstable_batchedUpdates } from 'react-dom';
-import { closestCenter, pointerWithin, // 返回指针悬停在其上的矩形
-rectIntersection, DndContext, DragOverlay, // DropAnimation,
+import { closestCenter, pointerWithin,
+// 返回指针悬停在其上的矩形
+rectIntersection, DndContext, DragOverlay,
+// DropAnimation,
 getFirstCollision, KeyboardSensor, MouseSensor, TouchSensor, useDroppable, useSensors, useSensor, MeasuringStrategy } from '@dnd-kit/core';
 import { SortableContext, useSortable, arrayMove, defaultAnimateLayoutChanges, horizontalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
@@ -27,103 +25,86 @@ import { Item } from './Item';
 import { Container } from './Container';
 import classNames from 'classnames';
 import "./DndContainer.module.css";
-
 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 = _slicedToArray(_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 = _slicedToArray(_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 = _slicedToArray(_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 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 = 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.createElement(Container, Object.assign({
     ref: disabled ? undefined : setNodeRef,
@@ -137,7 +118,6 @@ function DroppableContainer(_a) {
     columns: columns
   }, props), children);
 }
-
 var dropAnimation = {
   sideEffects: defaultDropAnimationSideEffects({
     styles: {
@@ -148,70 +128,65 @@ var dropAnimation = {
   })
 };
 export var TRASH_ID = 'void';
-var PLACEHOLDER_ID = 'placeholder'; // const empty: UniqueIdentifier[] = [];
-
+var PLACEHOLDER_ID = 'placeholder';
+// const empty: UniqueIdentifier[] = [];
 export default 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 ? multipleContainersCoordinateGetter : _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;
-
+    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 ? multipleContainersCoordinateGetter : _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 = useState(function () {
-    return initialItems;
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      items = _useState2[0],
-      setItems = _useState2[1];
-
+      return initialItems;
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    items = _useState2[0],
+    setItems = _useState2[1];
   useEffect(function () {
     setItems(initialItems);
   }, [initialItems]);
-
   var _useState3 = useState(Object.keys(items)),
-      _useState4 = _slicedToArray(_useState3, 2),
-      containers = _useState4[0],
-      setContainers = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    containers = _useState4[0],
+    setContainers = _useState4[1];
   var _useState5 = useState(null),
-      _useState6 = _slicedToArray(_useState5, 2),
-      activeId = _useState6[0],
-      setActiveId = _useState6[1];
-
-  var lastOverId = useRef(null); // 是否移动到新容器
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    activeId = _useState6[0],
+    setActiveId = _useState6[1];
+  var lastOverId = useRef(null);
+  // 是否移动到新容器
   var recentlyMovedToNewContainer = 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
    * 针对多个容器优化的自定义碰撞检测策略
@@ -220,34 +195,30 @@ export default function DndContainer(_ref2) {
    * - If there are no intersecting containers, return the last matched intersection
    * 1.首先，找到与指针相交的任何可放置容器。2.如果没有，则查找具有活动可拖动对象的相交容器。3.如果没有交叉容器，则返回最后匹配的交叉
    */
-
   var collisionDetectionStrategy = useCallback(function (args) {
     var _a;
-
     if (activeId && activeId in items) {
       return 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 = 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 : rectIntersection(args);
     var overId = 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 = closestCenter(Object.assign(Object.assign({}, args), {
@@ -257,69 +228,56 @@ export default 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 = useState(null),
-      _useState8 = _slicedToArray(_useState7, 2),
-      clonedItems = _useState8[0],
-      setClonedItems = _useState8[1]; // 传感器
-
-
+    _useState8 = _slicedToArray(_useState7, 2),
+    clonedItems = _useState8[0],
+    setClonedItems = _useState8[1];
+  // 传感器
   var sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor), useSensor(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);
   };
-
   useEffect(function () {
     var id = requestAnimationFrame(function () {
       recentlyMovedToNewContainer.current = false;
@@ -349,30 +307,24 @@ export default 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;
       }
-
       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 {
@@ -381,7 +333,6 @@ export default 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 = {}, _defineProperty(_Object$assign, activeContainer, items[activeContainer].filter(function (item) {
             return item !== active.id;
@@ -391,8 +342,7 @@ export default 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) {
@@ -401,21 +351,16 @@ export default function DndContainer(_ref2) {
           return 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) {
@@ -426,7 +371,6 @@ export default function DndContainer(_ref2) {
         setActiveId(null);
         return;
       }
-
       if (overId === PLACEHOLDER_ID) {
         var newContainerId = getNextContainerId();
         unstable_batchedUpdates(function () {
@@ -436,7 +380,6 @@ export default function DndContainer(_ref2) {
           console.log('PLACEHOLDER_ID', overId);
           setItems(function (items) {
             var _Object$assign3;
-
             return Object.assign(Object.assign({}, items), (_Object$assign3 = {}, _defineProperty(_Object$assign3, activeContainer, items[activeContainer].filter(function (id) {
               return id !== activeId;
             })), _defineProperty(_Object$assign3, newContainerId, [active.id]), _Object$assign3));
@@ -445,13 +388,10 @@ export default function DndContainer(_ref2) {
         });
         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), _defineProperty({}, overContainer, arrayMove(items[overContainer], activeIndex, overIndex)));
           setItems(newItems);
@@ -460,7 +400,6 @@ export default function DndContainer(_ref2) {
           updateItems(items);
         }
       }
-
       setActiveId(null);
     },
     cancelDrop: cancelDrop,
@@ -529,7 +468,6 @@ export default function DndContainer(_ref2) {
   }, activeId ? containers.includes(activeId) ? renderContainerDragOverlay(activeId) : renderSortableItemDragOverlay(activeId) : null), document.body), trashable && activeId && !containers.includes(activeId) ? /*#__PURE__*/React.createElement(Trash, {
     id: TRASH_ID
   }) : null);
-
   function renderSortableItemDragOverlay(id) {
     return /*#__PURE__*/React.createElement(Item, {
       value: id,
@@ -551,7 +489,6 @@ export default function DndContainer(_ref2) {
       dragOverlay: true
     });
   }
-
   function renderContainerDragOverlay(containerId) {
     return /*#__PURE__*/React.createElement(Container, {
       label: "Column ".concat(containerId),
@@ -583,41 +520,32 @@ export default function DndContainer(_ref2) {
       });
     }));
   }
-
   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 = useDroppable({
-    id: id
-  }),
-      setNodeRef = _useDroppable.setNodeRef,
-      isOver = _useDroppable.isOver;
-
+      id: id
+    }),
+    setNodeRef = _useDroppable.setNodeRef,
+    isOver = _useDroppable.isOver;
   return /*#__PURE__*/React.createElement("div", {
     ref: setNodeRef,
     style: {
@@ -636,31 +564,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 = 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.createElement(Item, {
@@ -691,13 +616,11 @@ function SortableItem(_ref7) {
     onRemove: onRemove
   });
 }
-
 function useMountStatus() {
   var _useState9 = useState(false),
-      _useState10 = _slicedToArray(_useState9, 2),
-      isMounted = _useState10[0],
-      setIsMounted = _useState10[1];
-
+    _useState10 = _slicedToArray(_useState9, 2),
+    isMounted = _useState10[0],
+    setIsMounted = _useState10[1];
   useEffect(function () {
     var timeout = setTimeout(function () {
       return setIsMounted(true);