deepsea-components 5.16.1 → 5.16.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/components/DraggableGrid.cjs +26 -17
  2. package/dist/components/DraggableGrid.d.ts +2 -2
  3. package/dist/components/DraggableGrid.js +26 -17
  4. package/package.json +1 -1
  5. package/src/components/DraggableGrid.tsx +25 -20
package/dist/components/DraggableGrid.cjs CHANGED
@@ -63,6 +63,7 @@ function getOrderMap({ prev, orders, keys }) {
63
63
  orderSet.delete(prevOrder);
64
64
  return false;
65
65
  }
66
+ return true;
66
67
  });
67
68
  orders = Array.from(orderSet);
68
69
  newKeys.forEach((key, index)=>orderMap.set(key, orders[index]));
@@ -95,19 +96,14 @@ const DraggableGridItem = ({ onDragMoveStart, onDragMove, onDragMoveEnd, ...rest
95
96
  ...rest
96
97
  });
97
98
  };
98
- function DraggableGrid({ className, classNames, style, items = [], disabled, columns, rows, gap = 0, gapX = gap, gapY = gap, itemWidth, itemHeight, orderMap, onOrderMapChange, render, keyExtractor, isItemDisabled, isOrderDisabled, orderPriority, ...rest }) {
99
- const [itemToKey, keyToItem] = (0, external_react_namespaceObject.useMemo)(()=>{
100
- const itemToKey = new Map();
99
+ function DraggableGrid({ className, classNames, style, items = [], disabled, columns, rows, gap = 0, gapX = gap, gapY = gap, itemWidth, itemHeight, orderMap, onOrderMapChange, render, keyExtractor, isItemDisabled: _isItemDisabled, isOrderDisabled, orderPriority, ...rest }) {
100
+ const keyToItem = (0, external_react_namespaceObject.useMemo)(()=>{
101
101
  const keyToItem = new Map();
102
- items.forEach((item, index)=>{
102
+ items.forEach((item)=>{
103
103
  const key = keyExtractor ? keyExtractor(item) : item;
104
- itemToKey.set(item, key);
105
104
  keyToItem.set(key, item);
106
105
  });
107
- return [
108
- itemToKey,
109
- keyToItem
110
- ];
106
+ return keyToItem;
111
107
  }, [
112
108
  items,
113
109
  keyExtractor
@@ -140,11 +136,11 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
140
136
  keys: Array.from(keyToItem.keys())
141
137
  });
142
138
  (0, external_react_namespaceObject.useEffect)(()=>{
143
- if (!isTheSameArray(cache.orders, orders) || !isTheSameIterable(cache.keys, keyToItem.keys())) {
139
+ if (!isTheSameArray(dragging?.orders ?? cache.orders, orders) || !isTheSameIterable(dragging?.keyToOrder.keys() ?? cache.keys, keyToItem.keys())) {
144
140
  cache.orders = orders;
145
- cache.keys = Array.from(keyToItem.keys());
141
+ cache.keys = Array.from((dragging?.keyToOrder ?? keyToItem).keys());
146
142
  const newOrderMap = getOrderMap({
147
- prev: keyToOrder,
143
+ prev: dragging?.keyToOrder ?? keyToOrder,
148
144
  orders,
149
145
  keys: cache.keys
150
146
  });
@@ -155,6 +151,7 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
155
151
  }
156
152
  }, [
157
153
  dragging,
154
+ cache,
158
155
  orders,
159
156
  keyToItem,
160
157
  keyToOrder,
@@ -171,7 +168,14 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
171
168
  }
172
169
  }
173
170
  }, [
171
+ dragging,
174
172
  orders,
173
+ columns,
174
+ rows,
175
+ gapX,
176
+ gapY,
177
+ itemWidth,
178
+ itemHeight,
175
179
  keyToItem,
176
180
  keyToOrder,
177
181
  onOrderMapChange
@@ -199,8 +203,8 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
199
203
  key,
200
204
  startX: position.x,
201
205
  startY: position.y,
202
- deltaX: 0,
203
- deltaY: 0,
206
+ deltaX: event.deltaX,
207
+ deltaY: event.deltaY,
204
208
  orders,
205
209
  columns,
206
210
  rows,
@@ -281,6 +285,11 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
281
285
  if (!dragging) return;
282
286
  setDragging(void 0);
283
287
  }
288
+ function isItemDisabled(key) {
289
+ if (!_isItemDisabled) return false;
290
+ if (Array.isArray(_isItemDisabled)) return _isItemDisabled.includes(key);
291
+ return _isItemDisabled(keyToItem.get(key), key);
292
+ }
284
293
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
285
294
  className: (0, external_deepsea_tools_namespaceObject.clsx)(external_DraggableGrid_module_cjs_default().draggableGrid, "function" == typeof className ? className({
286
295
  isDragging: !!dragging
@@ -332,9 +341,9 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
332
341
  isDragging: isDragging
333
342
  }) : classNames?.item),
334
343
  style: style,
335
- onDragMoveStart: disabled ? void 0 : (event)=>onDragMoveStart(key, event),
336
- onDragMove: disabled ? void 0 : onDragMove,
337
- onDragMoveEnd: disabled ? void 0 : onDragMoveEnd,
344
+ onDragMoveStart: disabled || isItemDisabled(key) ? void 0 : (event)=>onDragMoveStart(key, event),
345
+ onDragMove: disabled || isItemDisabled(key) ? void 0 : onDragMove,
346
+ onDragMoveEnd: disabled || isItemDisabled(key) ? void 0 : onDragMoveEnd,
338
347
  children: children
339
348
  }, key);
340
349
  })
package/dist/components/DraggableGrid.d.ts CHANGED
@@ -61,7 +61,7 @@ export type DraggableGridProps<T> = Omit<ComponentProps<"div">, "className" | "c
61
61
  /** 次序变化时回调 */
62
62
  onOrderMapChange?: (orderMap: DraggableGridKeyToOrder) => void;
63
63
  /** 禁用的元素 */
64
- isItemDisabled?: Key[] | ((item: T) => boolean);
64
+ isItemDisabled?: Key[] | ((item: T, key: Key) => boolean);
65
65
  /** 禁用的次序 */
66
66
  isOrderDisabled?: number[] | ((order: number) => boolean);
67
67
  /** 次序的优先级，可以通过此函数调整元素的优先放置的方向，左上，右上，左下，右下，中心，顺时针，逆时针等等 */
@@ -79,4 +79,4 @@ export type DraggableGridProps<T> = Omit<ComponentProps<"div">, "className" | "c
79
79
  /** 获取 key 的函数，当 T 为 Key 时，keyExtractor 为可选 */
80
80
  keyExtractor: (item: T) => Key;
81
81
  });
82
- export declare function DraggableGrid<T>({ className, classNames, style, items, disabled, columns, rows, gap, gapX, gapY, itemWidth, itemHeight, orderMap, onOrderMapChange, render, keyExtractor, isItemDisabled, isOrderDisabled, orderPriority, ...rest }: DraggableGridProps<T>): import("react/jsx-runtime").JSX.Element;
82
+ export declare function DraggableGrid<T>({ className, classNames, style, items, disabled, columns, rows, gap, gapX, gapY, itemWidth, itemHeight, orderMap, onOrderMapChange, render, keyExtractor, isItemDisabled: _isItemDisabled, isOrderDisabled, orderPriority, ...rest }: DraggableGridProps<T>): import("react/jsx-runtime").JSX.Element;
package/dist/components/DraggableGrid.js CHANGED
@@ -25,6 +25,7 @@ function getOrderMap({ prev, orders, keys }) {
25
25
  orderSet.delete(prevOrder);
26
26
  return false;
27
27
  }
28
+ return true;
28
29
  });
29
30
  orders = Array.from(orderSet);
30
31
  newKeys.forEach((key, index)=>orderMap.set(key, orders[index]));
@@ -57,19 +58,14 @@ const DraggableGridItem = ({ onDragMoveStart, onDragMove, onDragMoveEnd, ...rest
57
58
  ...rest
58
59
  });
59
60
  };
60
- function DraggableGrid({ className, classNames, style, items = [], disabled, columns, rows, gap = 0, gapX = gap, gapY = gap, itemWidth, itemHeight, orderMap, onOrderMapChange, render, keyExtractor, isItemDisabled, isOrderDisabled, orderPriority, ...rest }) {
61
- const [itemToKey, keyToItem] = useMemo(()=>{
62
- const itemToKey = new Map();
61
+ function DraggableGrid({ className, classNames, style, items = [], disabled, columns, rows, gap = 0, gapX = gap, gapY = gap, itemWidth, itemHeight, orderMap, onOrderMapChange, render, keyExtractor, isItemDisabled: _isItemDisabled, isOrderDisabled, orderPriority, ...rest }) {
62
+ const keyToItem = useMemo(()=>{
63
63
  const keyToItem = new Map();
64
- items.forEach((item, index)=>{
64
+ items.forEach((item)=>{
65
65
  const key = keyExtractor ? keyExtractor(item) : item;
66
- itemToKey.set(item, key);
67
66
  keyToItem.set(key, item);
68
67
  });
69
- return [
70
- itemToKey,
71
- keyToItem
72
- ];
68
+ return keyToItem;
73
69
  }, [
74
70
  items,
75
71
  keyExtractor
@@ -102,11 +98,11 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
102
98
  keys: Array.from(keyToItem.keys())
103
99
  });
104
100
  useEffect(()=>{
105
- if (!isTheSameArray(cache.orders, orders) || !isTheSameIterable(cache.keys, keyToItem.keys())) {
101
+ if (!isTheSameArray(dragging?.orders ?? cache.orders, orders) || !isTheSameIterable(dragging?.keyToOrder.keys() ?? cache.keys, keyToItem.keys())) {
106
102
  cache.orders = orders;
107
- cache.keys = Array.from(keyToItem.keys());
103
+ cache.keys = Array.from((dragging?.keyToOrder ?? keyToItem).keys());
108
104
  const newOrderMap = getOrderMap({
109
- prev: keyToOrder,
105
+ prev: dragging?.keyToOrder ?? keyToOrder,
110
106
  orders,
111
107
  keys: cache.keys
112
108
  });
@@ -117,6 +113,7 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
117
113
  }
118
114
  }, [
119
115
  dragging,
116
+ cache,
120
117
  orders,
121
118
  keyToItem,
122
119
  keyToOrder,
@@ -133,7 +130,14 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
133
130
  }
134
131
  }
135
132
  }, [
133
+ dragging,
136
134
  orders,
135
+ columns,
136
+ rows,
137
+ gapX,
138
+ gapY,
139
+ itemWidth,
140
+ itemHeight,
137
141
  keyToItem,
138
142
  keyToOrder,
139
143
  onOrderMapChange
@@ -161,8 +165,8 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
161
165
  key,
162
166
  startX: position.x,
163
167
  startY: position.y,
164
- deltaX: 0,
165
- deltaY: 0,
168
+ deltaX: event.deltaX,
169
+ deltaY: event.deltaY,
166
170
  orders,
167
171
  columns,
168
172
  rows,
@@ -243,6 +247,11 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
243
247
  if (!dragging) return;
244
248
  setDragging(void 0);
245
249
  }
250
+ function isItemDisabled(key) {
251
+ if (!_isItemDisabled) return false;
252
+ if (Array.isArray(_isItemDisabled)) return _isItemDisabled.includes(key);
253
+ return _isItemDisabled(keyToItem.get(key), key);
254
+ }
246
255
  return /*#__PURE__*/ jsx("div", {
247
256
  className: clsx(DraggableGrid_module.draggableGrid, "function" == typeof className ? className({
248
257
  isDragging: !!dragging
@@ -294,9 +303,9 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
294
303
  isDragging: isDragging
295
304
  }) : classNames?.item),
296
305
  style: style,
297
- onDragMoveStart: disabled ? void 0 : (event)=>onDragMoveStart(key, event),
298
- onDragMove: disabled ? void 0 : onDragMove,
299
- onDragMoveEnd: disabled ? void 0 : onDragMoveEnd,
306
+ onDragMoveStart: disabled || isItemDisabled(key) ? void 0 : (event)=>onDragMoveStart(key, event),
307
+ onDragMove: disabled || isItemDisabled(key) ? void 0 : onDragMove,
308
+ onDragMoveEnd: disabled || isItemDisabled(key) ? void 0 : onDragMoveEnd,
300
309
  children: children
301
310
  }, key);
302
311
  })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "deepsea-components",
3
- "version": "5.16.1",
3
+ "version": "5.16.2",
4
4
  "description": "格数科技自用组件库",
5
5
  "type": "module",
6
6
  "exports": {
package/src/components/DraggableGrid.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { CSSProperties, ComponentProps, FC, Key, ReactNode, useEffect, useMemo, useRef, useState } from "react"
2
- import { clsx, equal, getArray } from "deepsea-tools"
2
+ import { clsx, getArray } from "deepsea-tools"
3
3
  import { DragMoveEvent, UseDragMoveParams, useDragMove } from "soda-hooks"
4
4
 
5
5
  import styles from "./DraggableGrid.module.css"
@@ -50,13 +50,13 @@ function isTheSameIterable<T>(a: Iterable<T>, b: Iterable<T>) {
50
50
  return aSet.difference(bSet).size === 0
51
51
  }
52
52
 
53
- interface GetOrderMapParams<T> {
53
+ interface GetOrderMapParams {
54
54
  prev?: DraggableGridKeyToOrder
55
55
  orders: number[]
56
56
  keys: Key[]
57
57
  }
58
58
 
59
- function getOrderMap<T>({ prev, orders, keys }: GetOrderMapParams<T>) {
59
+ function getOrderMap({ prev, orders, keys }: GetOrderMapParams) {
60
60
  const orderSet = new Set(orders)
61
61
  const orderMap = new Map<Key, number>()
62
62
  const newKeys = keys.filter(key => {
@@ -67,6 +67,7 @@ function getOrderMap<T>({ prev, orders, keys }: GetOrderMapParams<T>) {
67
67
  orderSet.delete(prevOrder)
68
68
  return false
69
69
  }
70
+ return true
70
71
  })
71
72
  orders = Array.from(orderSet)
72
73
  newKeys.forEach((key, index) => orderMap.set(key, orders[index]))
@@ -139,7 +140,7 @@ export type DraggableGridProps<T> = Omit<ComponentProps<"div">, "className" | "c
139
140
  /** 次序变化时回调 */
140
141
  onOrderMapChange?: (orderMap: DraggableGridKeyToOrder) => void
141
142
  /** 禁用的元素 */
142
- isItemDisabled?: Key[] | ((item: T) => boolean)
143
+ isItemDisabled?: Key[] | ((item: T, key: Key) => boolean)
143
144
  /** 禁用的次序 */
144
145
  isOrderDisabled?: number[] | ((order: number) => boolean)
145
146
  /** 次序的优先级，可以通过此函数调整元素的优先放置的方向，左上，右上，左下，右下，中心，顺时针，逆时针等等 */
@@ -211,20 +212,18 @@ export function DraggableGrid<T>({
211
212
  onOrderMapChange,
212
213
  render,
213
214
  keyExtractor,
214
- isItemDisabled,
215
+ isItemDisabled: _isItemDisabled,
215
216
  isOrderDisabled,
216
217
  orderPriority,
217
218
  ...rest
218
219
  }: DraggableGridProps<T>) {
219
- const [itemToKey, keyToItem] = useMemo(() => {
220
- const itemToKey = new Map<T, Key>()
220
+ const keyToItem = useMemo(() => {
221
221
  const keyToItem = new Map<Key, T>()
222
- items.forEach((item, index) => {
222
+ items.forEach(item => {
223
223
  const key = keyExtractor ? keyExtractor(item) : (item as Key)
224
- itemToKey.set(item, key)
225
224
  keyToItem.set(key, item)
226
225
  })
227
- return [itemToKey, keyToItem] as const
226
+ return keyToItem
228
227
  }, [items, keyExtractor])
229
228
 
230
229
  /** 检查 items 中是否有重复的 key */
@@ -258,16 +257,16 @@ export function DraggableGrid<T>({
258
257
  })
259
258
 
260
259
  useEffect(() => {
261
- if (!isTheSameArray(cache.orders, orders) || !isTheSameIterable(cache.keys, keyToItem.keys())) {
260
+ if (!isTheSameArray(dragging?.orders ?? cache.orders, orders) || !isTheSameIterable(dragging?.keyToOrder.keys() ?? cache.keys, keyToItem.keys())) {
262
261
  cache.orders = orders
263
- cache.keys = Array.from(keyToItem.keys())
264
- const newOrderMap = getOrderMap({ prev: keyToOrder, orders, keys: cache.keys })
262
+ cache.keys = Array.from((dragging?.keyToOrder ?? keyToItem).keys())
263
+ const newOrderMap = getOrderMap({ prev: dragging?.keyToOrder ?? keyToOrder, orders, keys: cache.keys })
265
264
  setKeyToOrder(newOrderMap)
266
265
  onOrderMapChange?.(newOrderMap)
267
266
  const newRenderKeys = new Set(newOrderMap.keys())
268
267
  setRenderKeys(prev => prev.intersection(newRenderKeys).union(newRenderKeys.difference(prev)))
269
268
  }
270
- }, [dragging, orders, keyToItem, keyToOrder, onOrderMapChange])
269
+ }, [dragging, cache, orders, keyToItem, keyToOrder, onOrderMapChange])
271
270
 
272
271
  /** 渲染的元素的 key，不会随着 keyToOrder 的变化而变化 */
273
272
  const [renderKeys, setRenderKeys] = useState(() => new Set(keyToOrder.keys()))
@@ -293,7 +292,7 @@ export function DraggableGrid<T>({
293
292
  onOrderMapChange?.(dragging.keyToOrder)
294
293
  }
295
294
  }
296
- }, [orders, keyToItem, keyToOrder, onOrderMapChange])
295
+ }, [dragging, orders, columns, rows, gapX, gapY, itemWidth, itemHeight, keyToItem, keyToOrder, onOrderMapChange])
297
296
 
298
297
  /** 受控 */
299
298
  useEffect(() => {
@@ -309,8 +308,8 @@ export function DraggableGrid<T>({
309
308
  key,
310
309
  startX: position.x,
311
310
  startY: position.y,
312
- deltaX: 0,
313
- deltaY: 0,
311
+ deltaX: event.deltaX,
312
+ deltaY: event.deltaY,
314
313
  orders,
315
314
  columns,
316
315
  rows,
@@ -401,6 +400,12 @@ export function DraggableGrid<T>({
401
400
  setDragging(undefined)
402
401
  }
403
402
 
403
+ function isItemDisabled(key: Key) {
404
+ if (!_isItemDisabled) return false
405
+ if (Array.isArray(_isItemDisabled)) return _isItemDisabled.includes(key)
406
+ return _isItemDisabled(keyToItem.get(key)!, key)
407
+ }
408
+
404
409
  return (
405
410
  <div
406
411
  className={clsx(
@@ -451,9 +456,9 @@ export function DraggableGrid<T>({
451
456
  typeof classNames?.item === "function" ? classNames.item({ order, isDragging: isDragging }) : classNames?.item,
452
457
  )}
453
458
  style={style}
454
- onDragMoveStart={!disabled ? event => onDragMoveStart(key, event) : undefined}
455
- onDragMove={!disabled ? onDragMove : undefined}
456
- onDragMoveEnd={!disabled ? onDragMoveEnd : undefined}
459
+ onDragMoveStart={!disabled && !isItemDisabled(key) ? event => onDragMoveStart(key, event) : undefined}
460
+ onDragMove={!disabled && !isItemDisabled(key) ? onDragMove : undefined}
461
+ onDragMoveEnd={!disabled && !isItemDisabled(key) ? onDragMoveEnd : undefined}
457
462
  children={children}
458
463
  />
459
464
  )