deepsea-components 5.16.0 → 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.
|
@@ -63,10 +63,10 @@ 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]));
|
|
69
|
-
console.log(Object.fromEntries(orderMap.entries()));
|
|
70
70
|
return orderMap;
|
|
71
71
|
}
|
|
72
72
|
function getPosition({ order, columns, gapX, gapY, itemWidth, itemHeight }) {
|
|
@@ -96,25 +96,14 @@ const DraggableGridItem = ({ onDragMoveStart, onDragMove, onDragMoveEnd, ...rest
|
|
|
96
96
|
...rest
|
|
97
97
|
});
|
|
98
98
|
};
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
if ((0, external_deepsea_tools_namespaceObject.equal)(DraggableGrid_cache, value)) return;
|
|
102
|
-
DraggableGrid_cache = value;
|
|
103
|
-
console.log(value);
|
|
104
|
-
}
|
|
105
|
-
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 }) {
|
|
106
|
-
const [itemToKey, keyToItem] = (0, external_react_namespaceObject.useMemo)(()=>{
|
|
107
|
-
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)(()=>{
|
|
108
101
|
const keyToItem = new Map();
|
|
109
|
-
items.forEach((item
|
|
102
|
+
items.forEach((item)=>{
|
|
110
103
|
const key = keyExtractor ? keyExtractor(item) : item;
|
|
111
|
-
itemToKey.set(item, key);
|
|
112
104
|
keyToItem.set(key, item);
|
|
113
105
|
});
|
|
114
|
-
return
|
|
115
|
-
itemToKey,
|
|
116
|
-
keyToItem
|
|
117
|
-
];
|
|
106
|
+
return keyToItem;
|
|
118
107
|
}, [
|
|
119
108
|
items,
|
|
120
109
|
keyExtractor
|
|
@@ -147,11 +136,11 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
|
|
|
147
136
|
keys: Array.from(keyToItem.keys())
|
|
148
137
|
});
|
|
149
138
|
(0, external_react_namespaceObject.useEffect)(()=>{
|
|
150
|
-
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())) {
|
|
151
140
|
cache.orders = orders;
|
|
152
|
-
cache.keys = Array.from(keyToItem.keys());
|
|
141
|
+
cache.keys = Array.from((dragging?.keyToOrder ?? keyToItem).keys());
|
|
153
142
|
const newOrderMap = getOrderMap({
|
|
154
|
-
prev: keyToOrder,
|
|
143
|
+
prev: dragging?.keyToOrder ?? keyToOrder,
|
|
155
144
|
orders,
|
|
156
145
|
keys: cache.keys
|
|
157
146
|
});
|
|
@@ -162,6 +151,7 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
|
|
|
162
151
|
}
|
|
163
152
|
}, [
|
|
164
153
|
dragging,
|
|
154
|
+
cache,
|
|
165
155
|
orders,
|
|
166
156
|
keyToItem,
|
|
167
157
|
keyToOrder,
|
|
@@ -178,7 +168,14 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
|
|
|
178
168
|
}
|
|
179
169
|
}
|
|
180
170
|
}, [
|
|
171
|
+
dragging,
|
|
181
172
|
orders,
|
|
173
|
+
columns,
|
|
174
|
+
rows,
|
|
175
|
+
gapX,
|
|
176
|
+
gapY,
|
|
177
|
+
itemWidth,
|
|
178
|
+
itemHeight,
|
|
182
179
|
keyToItem,
|
|
183
180
|
keyToOrder,
|
|
184
181
|
onOrderMapChange
|
|
@@ -206,8 +203,8 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
|
|
|
206
203
|
key,
|
|
207
204
|
startX: position.x,
|
|
208
205
|
startY: position.y,
|
|
209
|
-
deltaX:
|
|
210
|
-
deltaY:
|
|
206
|
+
deltaX: event.deltaX,
|
|
207
|
+
deltaY: event.deltaY,
|
|
211
208
|
orders,
|
|
212
209
|
columns,
|
|
213
210
|
rows,
|
|
@@ -222,7 +219,6 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
|
|
|
222
219
|
if (!dragging) return;
|
|
223
220
|
const { deltaX, deltaY } = event;
|
|
224
221
|
const { key, orders, keyToOrder, startX, startY, columns, gapX, gapY, itemWidth, itemHeight } = dragging;
|
|
225
|
-
log(key);
|
|
226
222
|
setDragging((prev)=>({
|
|
227
223
|
...prev,
|
|
228
224
|
deltaX,
|
|
@@ -289,6 +285,11 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
|
|
|
289
285
|
if (!dragging) return;
|
|
290
286
|
setDragging(void 0);
|
|
291
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
|
+
}
|
|
292
293
|
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
293
294
|
className: (0, external_deepsea_tools_namespaceObject.clsx)(external_DraggableGrid_module_cjs_default().draggableGrid, "function" == typeof className ? className({
|
|
294
295
|
isDragging: !!dragging
|
|
@@ -340,9 +341,9 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
|
|
|
340
341
|
isDragging: isDragging
|
|
341
342
|
}) : classNames?.item),
|
|
342
343
|
style: style,
|
|
343
|
-
onDragMoveStart: disabled ? void 0 : (event)=>onDragMoveStart(key, event),
|
|
344
|
-
onDragMove: disabled ? void 0 : onDragMove,
|
|
345
|
-
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,
|
|
346
347
|
children: children
|
|
347
348
|
}, key);
|
|
348
349
|
})
|
|
@@ -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;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useMemo, useRef, useState } from "react";
|
|
3
|
-
import { clsx,
|
|
3
|
+
import { clsx, getArray } from "deepsea-tools";
|
|
4
4
|
import { useDragMove } from "soda-hooks";
|
|
5
5
|
import DraggableGrid_module from "./DraggableGrid.module.js";
|
|
6
6
|
function isTheSameArray(a, b) {
|
|
@@ -25,10 +25,10 @@ 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]));
|
|
31
|
-
console.log(Object.fromEntries(orderMap.entries()));
|
|
32
32
|
return orderMap;
|
|
33
33
|
}
|
|
34
34
|
function getPosition({ order, columns, gapX, gapY, itemWidth, itemHeight }) {
|
|
@@ -58,25 +58,14 @@ const DraggableGridItem = ({ onDragMoveStart, onDragMove, onDragMoveEnd, ...rest
|
|
|
58
58
|
...rest
|
|
59
59
|
});
|
|
60
60
|
};
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
if (equal(DraggableGrid_cache, value)) return;
|
|
64
|
-
DraggableGrid_cache = value;
|
|
65
|
-
console.log(value);
|
|
66
|
-
}
|
|
67
|
-
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 }) {
|
|
68
|
-
const [itemToKey, keyToItem] = useMemo(()=>{
|
|
69
|
-
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(()=>{
|
|
70
63
|
const keyToItem = new Map();
|
|
71
|
-
items.forEach((item
|
|
64
|
+
items.forEach((item)=>{
|
|
72
65
|
const key = keyExtractor ? keyExtractor(item) : item;
|
|
73
|
-
itemToKey.set(item, key);
|
|
74
66
|
keyToItem.set(key, item);
|
|
75
67
|
});
|
|
76
|
-
return
|
|
77
|
-
itemToKey,
|
|
78
|
-
keyToItem
|
|
79
|
-
];
|
|
68
|
+
return keyToItem;
|
|
80
69
|
}, [
|
|
81
70
|
items,
|
|
82
71
|
keyExtractor
|
|
@@ -109,11 +98,11 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
|
|
|
109
98
|
keys: Array.from(keyToItem.keys())
|
|
110
99
|
});
|
|
111
100
|
useEffect(()=>{
|
|
112
|
-
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())) {
|
|
113
102
|
cache.orders = orders;
|
|
114
|
-
cache.keys = Array.from(keyToItem.keys());
|
|
103
|
+
cache.keys = Array.from((dragging?.keyToOrder ?? keyToItem).keys());
|
|
115
104
|
const newOrderMap = getOrderMap({
|
|
116
|
-
prev: keyToOrder,
|
|
105
|
+
prev: dragging?.keyToOrder ?? keyToOrder,
|
|
117
106
|
orders,
|
|
118
107
|
keys: cache.keys
|
|
119
108
|
});
|
|
@@ -124,6 +113,7 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
|
|
|
124
113
|
}
|
|
125
114
|
}, [
|
|
126
115
|
dragging,
|
|
116
|
+
cache,
|
|
127
117
|
orders,
|
|
128
118
|
keyToItem,
|
|
129
119
|
keyToOrder,
|
|
@@ -140,7 +130,14 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
|
|
|
140
130
|
}
|
|
141
131
|
}
|
|
142
132
|
}, [
|
|
133
|
+
dragging,
|
|
143
134
|
orders,
|
|
135
|
+
columns,
|
|
136
|
+
rows,
|
|
137
|
+
gapX,
|
|
138
|
+
gapY,
|
|
139
|
+
itemWidth,
|
|
140
|
+
itemHeight,
|
|
144
141
|
keyToItem,
|
|
145
142
|
keyToOrder,
|
|
146
143
|
onOrderMapChange
|
|
@@ -168,8 +165,8 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
|
|
|
168
165
|
key,
|
|
169
166
|
startX: position.x,
|
|
170
167
|
startY: position.y,
|
|
171
|
-
deltaX:
|
|
172
|
-
deltaY:
|
|
168
|
+
deltaX: event.deltaX,
|
|
169
|
+
deltaY: event.deltaY,
|
|
173
170
|
orders,
|
|
174
171
|
columns,
|
|
175
172
|
rows,
|
|
@@ -184,7 +181,6 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
|
|
|
184
181
|
if (!dragging) return;
|
|
185
182
|
const { deltaX, deltaY } = event;
|
|
186
183
|
const { key, orders, keyToOrder, startX, startY, columns, gapX, gapY, itemWidth, itemHeight } = dragging;
|
|
187
|
-
log(key);
|
|
188
184
|
setDragging((prev)=>({
|
|
189
185
|
...prev,
|
|
190
186
|
deltaX,
|
|
@@ -251,6 +247,11 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
|
|
|
251
247
|
if (!dragging) return;
|
|
252
248
|
setDragging(void 0);
|
|
253
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
|
+
}
|
|
254
255
|
return /*#__PURE__*/ jsx("div", {
|
|
255
256
|
className: clsx(DraggableGrid_module.draggableGrid, "function" == typeof className ? className({
|
|
256
257
|
isDragging: !!dragging
|
|
@@ -302,9 +303,9 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
|
|
|
302
303
|
isDragging: isDragging
|
|
303
304
|
}) : classNames?.item),
|
|
304
305
|
style: style,
|
|
305
|
-
onDragMoveStart: disabled ? void 0 : (event)=>onDragMoveStart(key, event),
|
|
306
|
-
onDragMove: disabled ? void 0 : onDragMove,
|
|
307
|
-
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,
|
|
308
309
|
children: children
|
|
309
310
|
}, key);
|
|
310
311
|
})
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CSSProperties, ComponentProps, FC, Key, ReactNode, useEffect, useMemo, useRef, useState } from "react"
|
|
2
|
-
import { clsx,
|
|
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
|
|
53
|
+
interface GetOrderMapParams {
|
|
54
54
|
prev?: DraggableGridKeyToOrder
|
|
55
55
|
orders: number[]
|
|
56
56
|
keys: Key[]
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
-
function getOrderMap
|
|
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,10 +67,10 @@ 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]))
|
|
73
|
-
console.log(Object.fromEntries(orderMap.entries()))
|
|
74
74
|
return orderMap
|
|
75
75
|
}
|
|
76
76
|
|
|
@@ -140,7 +140,7 @@ export type DraggableGridProps<T> = Omit<ComponentProps<"div">, "className" | "c
|
|
|
140
140
|
/** 次序变化时回调 */
|
|
141
141
|
onOrderMapChange?: (orderMap: DraggableGridKeyToOrder) => void
|
|
142
142
|
/** 禁用的元素 */
|
|
143
|
-
isItemDisabled?: Key[] | ((item: T) => boolean)
|
|
143
|
+
isItemDisabled?: Key[] | ((item: T, key: Key) => boolean)
|
|
144
144
|
/** 禁用的次序 */
|
|
145
145
|
isOrderDisabled?: number[] | ((order: number) => boolean)
|
|
146
146
|
/** 次序的优先级，可以通过此函数调整元素的优先放置的方向，左上，右上，左下，右下，中心，顺时针，逆时针等等 */
|
|
@@ -195,13 +195,6 @@ interface DraggingItem {
|
|
|
195
195
|
keyToOrder: DraggableGridKeyToOrder
|
|
196
196
|
}
|
|
197
197
|
|
|
198
|
-
let cache: any
|
|
199
|
-
function log(value: any) {
|
|
200
|
-
if (equal(cache, value)) return
|
|
201
|
-
cache = value
|
|
202
|
-
console.log(value)
|
|
203
|
-
}
|
|
204
|
-
|
|
205
198
|
export function DraggableGrid<T>({
|
|
206
199
|
className,
|
|
207
200
|
classNames,
|
|
@@ -219,20 +212,18 @@ export function DraggableGrid<T>({
|
|
|
219
212
|
onOrderMapChange,
|
|
220
213
|
render,
|
|
221
214
|
keyExtractor,
|
|
222
|
-
isItemDisabled,
|
|
215
|
+
isItemDisabled: _isItemDisabled,
|
|
223
216
|
isOrderDisabled,
|
|
224
217
|
orderPriority,
|
|
225
218
|
...rest
|
|
226
219
|
}: DraggableGridProps<T>) {
|
|
227
|
-
const
|
|
228
|
-
const itemToKey = new Map<T, Key>()
|
|
220
|
+
const keyToItem = useMemo(() => {
|
|
229
221
|
const keyToItem = new Map<Key, T>()
|
|
230
|
-
items.forEach(
|
|
222
|
+
items.forEach(item => {
|
|
231
223
|
const key = keyExtractor ? keyExtractor(item) : (item as Key)
|
|
232
|
-
itemToKey.set(item, key)
|
|
233
224
|
keyToItem.set(key, item)
|
|
234
225
|
})
|
|
235
|
-
return
|
|
226
|
+
return keyToItem
|
|
236
227
|
}, [items, keyExtractor])
|
|
237
228
|
|
|
238
229
|
/** 检查 items 中是否有重复的 key */
|
|
@@ -266,16 +257,16 @@ export function DraggableGrid<T>({
|
|
|
266
257
|
})
|
|
267
258
|
|
|
268
259
|
useEffect(() => {
|
|
269
|
-
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())) {
|
|
270
261
|
cache.orders = orders
|
|
271
|
-
cache.keys = Array.from(keyToItem.keys())
|
|
272
|
-
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 })
|
|
273
264
|
setKeyToOrder(newOrderMap)
|
|
274
265
|
onOrderMapChange?.(newOrderMap)
|
|
275
266
|
const newRenderKeys = new Set(newOrderMap.keys())
|
|
276
267
|
setRenderKeys(prev => prev.intersection(newRenderKeys).union(newRenderKeys.difference(prev)))
|
|
277
268
|
}
|
|
278
|
-
}, [dragging, orders, keyToItem, keyToOrder, onOrderMapChange])
|
|
269
|
+
}, [dragging, cache, orders, keyToItem, keyToOrder, onOrderMapChange])
|
|
279
270
|
|
|
280
271
|
/** 渲染的元素的 key，不会随着 keyToOrder 的变化而变化 */
|
|
281
272
|
const [renderKeys, setRenderKeys] = useState(() => new Set(keyToOrder.keys()))
|
|
@@ -301,7 +292,7 @@ export function DraggableGrid<T>({
|
|
|
301
292
|
onOrderMapChange?.(dragging.keyToOrder)
|
|
302
293
|
}
|
|
303
294
|
}
|
|
304
|
-
}, [orders, keyToItem, keyToOrder, onOrderMapChange])
|
|
295
|
+
}, [dragging, orders, columns, rows, gapX, gapY, itemWidth, itemHeight, keyToItem, keyToOrder, onOrderMapChange])
|
|
305
296
|
|
|
306
297
|
/** 受控 */
|
|
307
298
|
useEffect(() => {
|
|
@@ -317,8 +308,8 @@ export function DraggableGrid<T>({
|
|
|
317
308
|
key,
|
|
318
309
|
startX: position.x,
|
|
319
310
|
startY: position.y,
|
|
320
|
-
deltaX:
|
|
321
|
-
deltaY:
|
|
311
|
+
deltaX: event.deltaX,
|
|
312
|
+
deltaY: event.deltaY,
|
|
322
313
|
orders,
|
|
323
314
|
columns,
|
|
324
315
|
rows,
|
|
@@ -335,7 +326,6 @@ export function DraggableGrid<T>({
|
|
|
335
326
|
|
|
336
327
|
const { deltaX, deltaY } = event
|
|
337
328
|
const { key, orders, keyToOrder, startX, startY, columns, gapX, gapY, itemWidth, itemHeight } = dragging!
|
|
338
|
-
log(key)
|
|
339
329
|
setDragging(prev => ({ ...prev!, deltaX, deltaY }))
|
|
340
330
|
const x = startX + deltaX
|
|
341
331
|
const y = startY + deltaY
|
|
@@ -410,6 +400,12 @@ export function DraggableGrid<T>({
|
|
|
410
400
|
setDragging(undefined)
|
|
411
401
|
}
|
|
412
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
|
+
|
|
413
409
|
return (
|
|
414
410
|
<div
|
|
415
411
|
className={clsx(
|
|
@@ -460,9 +456,9 @@ export function DraggableGrid<T>({
|
|
|
460
456
|
typeof classNames?.item === "function" ? classNames.item({ order, isDragging: isDragging }) : classNames?.item,
|
|
461
457
|
)}
|
|
462
458
|
style={style}
|
|
463
|
-
onDragMoveStart={!disabled ? event => onDragMoveStart(key, event) : undefined}
|
|
464
|
-
onDragMove={!disabled ? onDragMove : undefined}
|
|
465
|
-
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}
|
|
466
462
|
children={children}
|
|
467
463
|
/>
|
|
468
464
|
)
|