deepsea-components 5.16.10 → 5.16.12

package/dist/components/DraggableGrid.cjs

@@ -53,9 +53,28 @@ function isTheSameIterable(a, b) {
     if (aSet.size !== bSet.size) return false;
     return 0 === aSet.difference(bSet).size;
 }
-function getOrderMap({ prev, orders, keys }) {
+function getOrderMap({ prev, orders, keys, orderPriority }) {
     const orderSet = new Set(orders);
     const orderMap = new Map();
+    if (!!prev) {
+        const entries = Array.from(prev.entries()).toSorted((a, b)=>orderPriority ? orderPriority(b[1], a[1]) : b[1] - a[1]);
+        const newPrev = new Map();
+        const newOrders = [
+            ...orders
+        ];
+        for (const [key, order] of entries){
+            if (!keys.includes(key)) continue;
+            const index = newOrders.indexOf(order);
+            if (index >= 0) {
+                newPrev.set(key, order);
+                newOrders.length = index;
+            } else {
+                const newOrder = newOrders.pop();
+                newPrev.set(key, newOrder);
+            }
+        }
+        prev = newPrev;
+    }
     const newKeys = keys.filter((key)=>{
         if (!prev) return true;
         if (prev.has(key)) {
@@ -176,7 +195,8 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
         const newOrderMap = getOrderMap({
             prev: void 0,
             orders: orders_0,
-            keys: Array.from(keyToItem_0.keys())
+            keys: Array.from(keyToItem_0.keys()),
+            orderPriority
         });
         null == onOrderMapChange || onOrderMapChange(newOrderMap);
         return newOrderMap;
@@ -193,7 +213,8 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
             const newOrderMap_0 = getOrderMap({
                 prev: (null == dragging ? void 0 : dragging.keyToOrder) ?? keyToOrder,
                 orders: orders_0,
-                keys: cache.keys
+                keys: cache.keys,
+                orderPriority
             });
             setKeyToOrder(newOrderMap_0);
             null == onOrderMapChange || onOrderMapChange(newOrderMap_0);
@@ -206,6 +227,7 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
         orders_0,
         keyToItem_0,
         keyToOrder,
+        orderPriority,
         onOrderMapChange
     ]);
     const [renderKeys, setRenderKeys] = (0, external_react_namespaceObject.useState)(()=>new Set(keyToOrder.keys()));
@@ -359,6 +381,7 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
         },
         ...rest,
         children: Array.from(renderKeys).map((key_3)=>{
+            if (!keyToItem_0.has(key_3)) return;
             const item_0 = keyToItem_0.get(key_3);
             const order_2 = keyToOrder.get(key_3);
             const isDragging = (null == dragging ? void 0 : dragging.key) === key_3;

package/dist/components/DraggableGrid.js

@@ -15,9 +15,28 @@ function isTheSameIterable(a, b) {
     if (aSet.size !== bSet.size) return false;
     return 0 === aSet.difference(bSet).size;
 }
-function getOrderMap({ prev, orders, keys }) {
+function getOrderMap({ prev, orders, keys, orderPriority }) {
     const orderSet = new Set(orders);
     const orderMap = new Map();
+    if (!!prev) {
+        const entries = Array.from(prev.entries()).toSorted((a, b)=>orderPriority ? orderPriority(b[1], a[1]) : b[1] - a[1]);
+        const newPrev = new Map();
+        const newOrders = [
+            ...orders
+        ];
+        for (const [key, order] of entries){
+            if (!keys.includes(key)) continue;
+            const index = newOrders.indexOf(order);
+            if (index >= 0) {
+                newPrev.set(key, order);
+                newOrders.length = index;
+            } else {
+                const newOrder = newOrders.pop();
+                newPrev.set(key, newOrder);
+            }
+        }
+        prev = newPrev;
+    }
     const newKeys = keys.filter((key)=>{
         if (!prev) return true;
         if (prev.has(key)) {
@@ -138,7 +157,8 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
         const newOrderMap = getOrderMap({
             prev: void 0,
             orders: orders_0,
-            keys: Array.from(keyToItem_0.keys())
+            keys: Array.from(keyToItem_0.keys()),
+            orderPriority
         });
         null == onOrderMapChange || onOrderMapChange(newOrderMap);
         return newOrderMap;
@@ -155,7 +175,8 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
             const newOrderMap_0 = getOrderMap({
                 prev: (null == dragging ? void 0 : dragging.keyToOrder) ?? keyToOrder,
                 orders: orders_0,
-                keys: cache.keys
+                keys: cache.keys,
+                orderPriority
             });
             setKeyToOrder(newOrderMap_0);
             null == onOrderMapChange || onOrderMapChange(newOrderMap_0);
@@ -168,6 +189,7 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
         orders_0,
         keyToItem_0,
         keyToOrder,
+        orderPriority,
         onOrderMapChange
     ]);
     const [renderKeys, setRenderKeys] = useState(()=>new Set(keyToOrder.keys()));
@@ -321,6 +343,7 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
         },
         ...rest,
         children: Array.from(renderKeys).map((key_3)=>{
+            if (!keyToItem_0.has(key_3)) return;
             const item_0 = keyToItem_0.get(key_3);
             const order_2 = keyToOrder.get(key_3);
             const isDragging = (null == dragging ? void 0 : dragging.key) === key_3;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deepsea-components",
-  "version": "5.16.10",
+  "version": "5.16.12",
   "description": "格数科技自用组件库",
   "type": "module",
   "exports": {
@@ -40,8 +40,8 @@
     "echarts": "^5.6.0",
     "hls.js": "^1.6.9",
     "smooth-scrollbar": "^8.8.4",
-    "deepsea-tools": "5.41.1",
-    "soda-hooks": "6.14.3"
+    "soda-hooks": "6.14.4",
+    "deepsea-tools": "5.42.0"
   },
   "devDependencies": {
     "typescript": "^5.9.2"
@@ -56,7 +56,7 @@
   "scripts": {
     "dev": "rslib build --watch",
     "build": "rslib build",
-    "prebuild": "tsx scripts/export.ts",
+    "prebuild": "bun scripts/export.ts",
     "lint": "prettier --write ."
   }
 }

package/src/components/DraggableGrid.tsx

@@ -58,11 +58,32 @@ interface GetOrderMapParams<K extends Key> {
     prev?: DraggableGridKeyToOrder<K>
     orders: number[]
     keys: K[]
+    orderPriority: ((a: number, b: number) => number) | undefined
 }
 
-function getOrderMap<K extends Key>({ prev, orders, keys }: GetOrderMapParams<K>) {
+function getOrderMap<K extends Key>({ prev, orders, keys, orderPriority }: GetOrderMapParams<K>) {
     const orderSet = new Set(orders)
     const orderMap = new Map<K, number>()
+
+    // 如果 prev 存在，并且继承的 key 中存在溢出的 key
+    if (!!prev) {
+        const entries = Array.from(prev.entries()).toSorted((a, b) => (orderPriority ? orderPriority(b[1], a[1]) : b[1] - a[1]))
+        const newPrev = new Map<K, number>()
+        const newOrders = [...orders]
+        for (const [key, order] of entries) {
+            if (!keys.includes(key)) continue
+            const index = newOrders.indexOf(order)
+            if (index >= 0) {
+                newPrev.set(key, order)
+                newOrders.length = index
+            } else {
+                const newOrder = newOrders.pop()!
+                newPrev.set(key, newOrder)
+            }
+        }
+        prev = newPrev
+    }
+
     const newKeys = keys.filter(key => {
         if (!prev) return true
         if (prev.has(key)) {
@@ -279,7 +300,7 @@ export function DraggableGrid<T, K extends Key = T extends Key ? T : never>({
     /** 元素的 key 到次序的映射 */
     const [keyToOrder, setKeyToOrder] = useState(() => {
         if (orderMap) return orderMap
-        const newOrderMap = getOrderMap({ prev: undefined, orders, keys: Array.from(keyToItem.keys()) })
+        const newOrderMap = getOrderMap({ prev: undefined, orders, keys: Array.from(keyToItem.keys()), orderPriority })
         onOrderMapChange?.(newOrderMap)
         return newOrderMap
     })
@@ -296,13 +317,13 @@ export function DraggableGrid<T, K extends Key = T extends Key ? T : never>({
         if (!isTheSameArray(dragging?.orders ?? cache.orders, orders) || !isTheSameIterable(dragging?.keyToOrder.keys() ?? cache.keys, keyToItem.keys())) {
             cache.orders = orders
             cache.keys = Array.from((dragging?.keyToOrder ?? keyToItem).keys())
-            const newOrderMap = getOrderMap({ prev: dragging?.keyToOrder ?? keyToOrder, orders, keys: cache.keys })
+            const newOrderMap = getOrderMap({ prev: dragging?.keyToOrder ?? keyToOrder, orders, keys: cache.keys, orderPriority })
             setKeyToOrder(newOrderMap)
             onOrderMapChange?.(newOrderMap)
             const newRenderKeys = new Set(newOrderMap.keys())
             setRenderKeys(prev => prev.intersection(newRenderKeys).union(newRenderKeys.difference(prev)))
         }
-    }, [dragging, cache, orders, keyToItem, keyToOrder, onOrderMapChange])
+    }, [dragging, cache, orders, keyToItem, keyToOrder, orderPriority, onOrderMapChange])
 
     /** 渲染的元素的 key，不会随着 keyToOrder 的变化而变化 */
     const [renderKeys, setRenderKeys] = useState(() => new Set(keyToOrder.keys()))
@@ -462,6 +483,7 @@ export function DraggableGrid<T, K extends Key = T extends Key ? T : never>({
             {...rest}
         >
             {Array.from(renderKeys).map(key => {
+                if (!keyToItem.has(key)) return undefined
                 const item = keyToItem.get(key)!
                 const order = keyToOrder.get(key)!
                 const isDragging = dragging?.key === key
@@ -485,6 +507,7 @@ export function DraggableGrid<T, K extends Key = T extends Key ? T : never>({
                               "--z-index": recent.current === key ? 999999 : keyToOrder.get(key),
                           }
                 ) as CSSProperties
+
                 const children = render ? render(item, { order, isDragging: isDragging }) : (item as ReactNode)
 
                 return (