deepsea-components 5.16.15 → 5.17.0
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.
- package/dist/components/AutoFit.cjs +9 -9
- package/dist/components/AutoFit.js +9 -9
- package/dist/components/AutoScroll.cjs +4 -4
- package/dist/components/AutoScroll.js +4 -4
- package/dist/components/AutoSizeTextarea.cjs +23 -81
- package/dist/components/AutoSizeTextarea.js +23 -81
- package/dist/components/CircleText.cjs +24 -120
- package/dist/components/CircleText.js +24 -120
- package/dist/components/CopyButton.cjs +2 -2
- package/dist/components/CopyButton.js +2 -2
- package/dist/components/DraggableGrid.cjs +98 -149
- package/dist/components/DraggableGrid.js +98 -149
- package/dist/components/Echart.cjs +24 -94
- package/dist/components/Echart.js +24 -94
- package/dist/components/Flow.cjs +8 -8
- package/dist/components/Flow.js +8 -8
- package/dist/components/FormLabel.cjs +27 -92
- package/dist/components/FormLabel.js +27 -92
- package/dist/components/HlsPlayer.cjs +24 -65
- package/dist/components/HlsPlayer.js +24 -65
- package/dist/components/IconFileType.cjs +4 -14
- package/dist/components/IconFileType.js +4 -14
- package/dist/components/InfiniteScroll.cjs +4 -4
- package/dist/components/InfiniteScroll.js +4 -4
- package/dist/components/InputFile.cjs +11 -2
- package/dist/components/InputFile.d.ts +8 -0
- package/dist/components/InputFile.js +11 -2
- package/dist/components/InputFileButton.cjs +18 -9
- package/dist/components/InputFileButton.js +18 -9
- package/dist/components/ReadSheet.cjs +7 -32
- package/dist/components/ReadSheet.js +7 -32
- package/dist/components/Ring.cjs +10 -48
- package/dist/components/Ring.js +10 -48
- package/dist/components/ScrollMask.cjs +11 -97
- package/dist/components/ScrollMask.js +11 -97
- package/dist/components/SectionRing.cjs +15 -60
- package/dist/components/SectionRing.js +15 -60
- package/dist/components/TransitionBox.cjs +28 -118
- package/dist/components/TransitionBox.js +28 -118
- package/dist/components/TransitionNum.cjs +8 -8
- package/dist/components/TransitionNum.js +8 -8
- package/dist/components/Trapezium.cjs +9 -68
- package/dist/components/Trapezium.js +9 -68
- package/dist/components/Unify.cjs +19 -79
- package/dist/components/Unify.js +19 -79
- package/package.json +3 -3
- package/src/components/InputFile.tsx +23 -2
- package/src/components/InputFileButton.tsx +16 -2
|
@@ -1,130 +1,34 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import { c } from "react/compiler-runtime";
|
|
4
3
|
import { Fragment } from "react";
|
|
5
4
|
const CircleText = (props)=>{
|
|
6
|
-
const
|
|
7
|
-
let children;
|
|
8
|
-
let height;
|
|
9
|
-
let radius;
|
|
10
|
-
let rest;
|
|
11
|
-
let separator;
|
|
12
|
-
let style;
|
|
13
|
-
let t0;
|
|
14
|
-
let t1;
|
|
15
|
-
let t2;
|
|
16
|
-
let t3;
|
|
17
|
-
let t4;
|
|
18
|
-
let width;
|
|
19
|
-
if ($[0] !== props) {
|
|
20
|
-
({ width, height, radius, startAngel: t0, gapAngel: t1, align: t2, style, direction: t3, reverse: t4, separator, children, ...rest } = props);
|
|
21
|
-
$[0] = props;
|
|
22
|
-
$[1] = children;
|
|
23
|
-
$[2] = height;
|
|
24
|
-
$[3] = radius;
|
|
25
|
-
$[4] = rest;
|
|
26
|
-
$[5] = separator;
|
|
27
|
-
$[6] = style;
|
|
28
|
-
$[7] = t0;
|
|
29
|
-
$[8] = t1;
|
|
30
|
-
$[9] = t2;
|
|
31
|
-
$[10] = t3;
|
|
32
|
-
$[11] = t4;
|
|
33
|
-
$[12] = width;
|
|
34
|
-
} else {
|
|
35
|
-
children = $[1];
|
|
36
|
-
height = $[2];
|
|
37
|
-
radius = $[3];
|
|
38
|
-
rest = $[4];
|
|
39
|
-
separator = $[5];
|
|
40
|
-
style = $[6];
|
|
41
|
-
t0 = $[7];
|
|
42
|
-
t1 = $[8];
|
|
43
|
-
t2 = $[9];
|
|
44
|
-
t3 = $[10];
|
|
45
|
-
t4 = $[11];
|
|
46
|
-
width = $[12];
|
|
47
|
-
}
|
|
48
|
-
const startAngel = void 0 === t0 ? 0 : t0;
|
|
49
|
-
const gapAngel = void 0 === t1 ? 0 : t1;
|
|
50
|
-
const align = void 0 === t2 ? "center" : t2;
|
|
51
|
-
const direction = void 0 === t3 ? "outer" : t3;
|
|
52
|
-
const reverse = void 0 === t4 ? false : t4;
|
|
5
|
+
const { width, height, radius, startAngel = 0, gapAngel = 0, align = "center", style, direction = "outer", reverse = false, separator, children, ...rest } = props;
|
|
53
6
|
const unitAngle = 2 * Math.atan(width / 2 / radius);
|
|
54
7
|
const totalAngle = (unitAngle + gapAngel) * children.length - gapAngel;
|
|
55
8
|
const offsetAngle = "left" === align ? 0 : "right" === align ? totalAngle : totalAngle / 2;
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
const z = Math.PI / 2 - angle + ("inner" === direction ? Math.PI : 0);
|
|
63
|
-
return `translateX(${x}px) translateY(${y}px) rotateZ(${z / Math.PI * 180}deg)`;
|
|
64
|
-
};
|
|
65
|
-
$[13] = direction;
|
|
66
|
-
$[14] = gapAngel;
|
|
67
|
-
$[15] = height;
|
|
68
|
-
$[16] = offsetAngle;
|
|
69
|
-
$[17] = radius;
|
|
70
|
-
$[18] = startAngel;
|
|
71
|
-
$[19] = unitAngle;
|
|
72
|
-
$[20] = width;
|
|
73
|
-
$[21] = t5;
|
|
74
|
-
} else t5 = $[21];
|
|
75
|
-
const getTransform = t5;
|
|
76
|
-
let T0;
|
|
77
|
-
let t6;
|
|
78
|
-
if ($[22] !== children || $[23] !== getTransform || $[24] !== height || $[25] !== rest || $[26] !== reverse || $[27] !== separator || $[28] !== style || $[29] !== width) {
|
|
79
|
-
const words = "function" == typeof separator ? separator(children) : children.split(separator ?? "");
|
|
80
|
-
if (reverse) words.reverse();
|
|
81
|
-
T0 = Fragment;
|
|
82
|
-
let t7;
|
|
83
|
-
if ($[32] !== getTransform || $[33] !== height || $[34] !== rest || $[35] !== style || $[36] !== width) {
|
|
84
|
-
t7 = (w, idx_0)=>/*#__PURE__*/ jsx("span", {
|
|
85
|
-
style: {
|
|
86
|
-
position: "absolute",
|
|
87
|
-
...style,
|
|
88
|
-
transform: getTransform(idx_0),
|
|
89
|
-
textAlign: "center",
|
|
90
|
-
width,
|
|
91
|
-
lineHeight: `${height}px`,
|
|
92
|
-
height
|
|
93
|
-
},
|
|
94
|
-
...rest,
|
|
95
|
-
children: w
|
|
96
|
-
}, idx_0);
|
|
97
|
-
$[32] = getTransform;
|
|
98
|
-
$[33] = height;
|
|
99
|
-
$[34] = rest;
|
|
100
|
-
$[35] = style;
|
|
101
|
-
$[36] = width;
|
|
102
|
-
$[37] = t7;
|
|
103
|
-
} else t7 = $[37];
|
|
104
|
-
t6 = words.map(t7);
|
|
105
|
-
$[22] = children;
|
|
106
|
-
$[23] = getTransform;
|
|
107
|
-
$[24] = height;
|
|
108
|
-
$[25] = rest;
|
|
109
|
-
$[26] = reverse;
|
|
110
|
-
$[27] = separator;
|
|
111
|
-
$[28] = style;
|
|
112
|
-
$[29] = width;
|
|
113
|
-
$[30] = T0;
|
|
114
|
-
$[31] = t6;
|
|
115
|
-
} else {
|
|
116
|
-
T0 = $[30];
|
|
117
|
-
t6 = $[31];
|
|
9
|
+
function getTransform(idx) {
|
|
10
|
+
const angle = startAngel - idx * (unitAngle + gapAngel) + offsetAngle - unitAngle / 2;
|
|
11
|
+
const x = (radius + height / 2) * Math.cos(angle) - width / 2;
|
|
12
|
+
const y = (radius + height / 2) * Math.sin(angle) * -1 - height / 2;
|
|
13
|
+
const z = Math.PI / 2 - angle + ("inner" === direction ? Math.PI : 0);
|
|
14
|
+
return `translateX(${x}px) translateY(${y}px) rotateZ(${z / Math.PI * 180}deg)`;
|
|
118
15
|
}
|
|
119
|
-
|
|
120
|
-
if (
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
16
|
+
const words = "function" == typeof separator ? separator(children) : children.split(separator ?? "");
|
|
17
|
+
if (reverse) words.reverse();
|
|
18
|
+
return /*#__PURE__*/ jsx(Fragment, {
|
|
19
|
+
children: words.map((w, idx)=>/*#__PURE__*/ jsx("span", {
|
|
20
|
+
style: {
|
|
21
|
+
position: "absolute",
|
|
22
|
+
...style,
|
|
23
|
+
transform: getTransform(idx),
|
|
24
|
+
textAlign: "center",
|
|
25
|
+
width,
|
|
26
|
+
lineHeight: `${height}px`,
|
|
27
|
+
height: height
|
|
28
|
+
},
|
|
29
|
+
...rest,
|
|
30
|
+
children: w
|
|
31
|
+
}, idx))
|
|
32
|
+
});
|
|
129
33
|
};
|
|
130
34
|
export { CircleText };
|
|
@@ -56,9 +56,9 @@ const CopyButton = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(
|
|
|
56
56
|
var _onCopySuccess_current;
|
|
57
57
|
return null == (_onCopySuccess_current = onCopySuccess.current) ? void 0 : _onCopySuccess_current.call(onCopySuccess, event);
|
|
58
58
|
});
|
|
59
|
-
clipboard.on("error", (
|
|
59
|
+
clipboard.on("error", (event)=>{
|
|
60
60
|
var _onCopyError_current;
|
|
61
|
-
return null == (_onCopyError_current = onCopyError.current) ? void 0 : _onCopyError_current.call(onCopyError,
|
|
61
|
+
return null == (_onCopyError_current = onCopyError.current) ? void 0 : _onCopyError_current.call(onCopyError, event);
|
|
62
62
|
});
|
|
63
63
|
return ()=>clipboard.destroy();
|
|
64
64
|
}, []);
|
|
@@ -17,9 +17,9 @@ const CopyButton = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
|
17
17
|
var _onCopySuccess_current;
|
|
18
18
|
return null == (_onCopySuccess_current = onCopySuccess.current) ? void 0 : _onCopySuccess_current.call(onCopySuccess, event);
|
|
19
19
|
});
|
|
20
|
-
clipboard.on("error", (
|
|
20
|
+
clipboard.on("error", (event)=>{
|
|
21
21
|
var _onCopyError_current;
|
|
22
|
-
return null == (_onCopyError_current = onCopyError.current) ? void 0 : _onCopyError_current.call(onCopyError,
|
|
22
|
+
return null == (_onCopyError_current = onCopyError.current) ? void 0 : _onCopyError_current.call(onCopyError, event);
|
|
23
23
|
});
|
|
24
24
|
return ()=>clipboard.destroy();
|
|
25
25
|
}, []);
|
|
@@ -36,7 +36,6 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
36
36
|
DraggableGrid: ()=>DraggableGrid
|
|
37
37
|
});
|
|
38
38
|
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
39
|
-
const compiler_runtime_namespaceObject = require("react/compiler-runtime");
|
|
40
39
|
const external_react_namespaceObject = require("react");
|
|
41
40
|
const external_deepsea_tools_namespaceObject = require("deepsea-tools");
|
|
42
41
|
const external_soda_hooks_namespaceObject = require("soda-hooks");
|
|
@@ -103,68 +102,18 @@ function getOrderToKey(keyToOrder) {
|
|
|
103
102
|
key
|
|
104
103
|
]));
|
|
105
104
|
}
|
|
106
|
-
function DraggableGridItem(
|
|
107
|
-
const $ = (0, compiler_runtime_namespaceObject.c)(19);
|
|
108
|
-
let handle;
|
|
109
|
-
let item;
|
|
110
|
-
let itemKey;
|
|
111
|
-
let onDragMove;
|
|
112
|
-
let onDragMoveEnd;
|
|
113
|
-
let onDragMoveStart;
|
|
114
|
-
let rest;
|
|
115
|
-
if ($[0] !== t0) {
|
|
116
|
-
({ item, itemKey, handle, onDragMoveStart, onDragMove, onDragMoveEnd, ...rest } = t0);
|
|
117
|
-
$[0] = t0;
|
|
118
|
-
$[1] = handle;
|
|
119
|
-
$[2] = item;
|
|
120
|
-
$[3] = itemKey;
|
|
121
|
-
$[4] = onDragMove;
|
|
122
|
-
$[5] = onDragMoveEnd;
|
|
123
|
-
$[6] = onDragMoveStart;
|
|
124
|
-
$[7] = rest;
|
|
125
|
-
} else {
|
|
126
|
-
handle = $[1];
|
|
127
|
-
item = $[2];
|
|
128
|
-
itemKey = $[3];
|
|
129
|
-
onDragMove = $[4];
|
|
130
|
-
onDragMoveEnd = $[5];
|
|
131
|
-
onDragMoveStart = $[6];
|
|
132
|
-
rest = $[7];
|
|
133
|
-
}
|
|
105
|
+
function DraggableGridItem({ item, itemKey, handle, onDragMoveStart, onDragMove, onDragMoveEnd, ...rest }) {
|
|
134
106
|
const element = (0, external_react_namespaceObject.useRef)(null);
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
t2 = {
|
|
146
|
-
element: t1,
|
|
147
|
-
onDragMoveStart,
|
|
148
|
-
onDragMove,
|
|
149
|
-
onDragMoveEnd
|
|
150
|
-
};
|
|
151
|
-
$[12] = onDragMove;
|
|
152
|
-
$[13] = onDragMoveEnd;
|
|
153
|
-
$[14] = onDragMoveStart;
|
|
154
|
-
$[15] = t1;
|
|
155
|
-
$[16] = t2;
|
|
156
|
-
} else t2 = $[16];
|
|
157
|
-
(0, external_soda_hooks_namespaceObject.useDragMove)(t2);
|
|
158
|
-
let t3;
|
|
159
|
-
if ($[17] !== rest) {
|
|
160
|
-
t3 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
161
|
-
ref: element,
|
|
162
|
-
...rest
|
|
163
|
-
});
|
|
164
|
-
$[17] = rest;
|
|
165
|
-
$[18] = t3;
|
|
166
|
-
} else t3 = $[18];
|
|
167
|
-
return t3;
|
|
107
|
+
(0, external_soda_hooks_namespaceObject.useDragMove)({
|
|
108
|
+
element: (0, external_deepsea_tools_namespaceObject.isNullable)(handle) ? element : ()=>element.current && ("string" == typeof handle ? element.current.querySelector(handle) : "function" == typeof handle ? handle(item, itemKey, element.current) : handle),
|
|
109
|
+
onDragMoveStart,
|
|
110
|
+
onDragMove,
|
|
111
|
+
onDragMoveEnd
|
|
112
|
+
});
|
|
113
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
114
|
+
ref: element,
|
|
115
|
+
...rest
|
|
116
|
+
});
|
|
168
117
|
}
|
|
169
118
|
function isLegalOrderMap({ orders, keys, orderMap }) {
|
|
170
119
|
if (!isTheSameIterable(orderMap.keys(), keys)) return false;
|
|
@@ -173,7 +122,7 @@ function isLegalOrderMap({ orders, keys, orderMap }) {
|
|
|
173
122
|
return values.length === new Set(values).size;
|
|
174
123
|
}
|
|
175
124
|
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, handle, onDragMoveStart: _onDragMoveStart, onDragMove: _onDragMove, onDragMoveEnd: _onDragMoveEnd, ...rest }) {
|
|
176
|
-
const
|
|
125
|
+
const keyToItem = (0, external_react_namespaceObject.useMemo)(()=>{
|
|
177
126
|
const keyToItem = new Map();
|
|
178
127
|
items.forEach((item)=>{
|
|
179
128
|
const key = keyExtractor ? keyExtractor(item) : item;
|
|
@@ -184,8 +133,8 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
|
|
|
184
133
|
items,
|
|
185
134
|
keyExtractor
|
|
186
135
|
]);
|
|
187
|
-
if (
|
|
188
|
-
const
|
|
136
|
+
if (keyToItem.size !== items.length) throw new Error("there are duplicate keys in the items");
|
|
137
|
+
const orders = (0, external_react_namespaceObject.useMemo)(()=>{
|
|
189
138
|
let orders = (0, external_deepsea_tools_namespaceObject.getArray)(columns * rows);
|
|
190
139
|
if (isOrderDisabled) orders = orders.filter((order)=>Array.isArray(isOrderDisabled) ? !isOrderDisabled.includes(order) : !isOrderDisabled(order));
|
|
191
140
|
if (orderPriority) orders = orders.toSorted(orderPriority);
|
|
@@ -198,14 +147,14 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
|
|
|
198
147
|
]);
|
|
199
148
|
const [keyToOrder, setKeyToOrder] = (0, external_react_namespaceObject.useState)(()=>{
|
|
200
149
|
if (orderMap && isLegalOrderMap({
|
|
201
|
-
orders
|
|
202
|
-
keys:
|
|
150
|
+
orders,
|
|
151
|
+
keys: keyToItem.keys(),
|
|
203
152
|
orderMap
|
|
204
153
|
})) return orderMap;
|
|
205
154
|
const newOrderMap = getOrderMap({
|
|
206
155
|
prev: orderMap,
|
|
207
|
-
orders
|
|
208
|
-
keys: Array.from(
|
|
156
|
+
orders,
|
|
157
|
+
keys: Array.from(keyToItem.keys()),
|
|
209
158
|
orderPriority
|
|
210
159
|
});
|
|
211
160
|
null == onOrderMapChange || onOrderMapChange(newOrderMap);
|
|
@@ -213,29 +162,29 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
|
|
|
213
162
|
});
|
|
214
163
|
const [dragging, setDragging] = (0, external_react_namespaceObject.useState)(void 0);
|
|
215
164
|
const { current: cache } = (0, external_react_namespaceObject.useRef)({
|
|
216
|
-
orders
|
|
217
|
-
keys: Array.from(
|
|
165
|
+
orders,
|
|
166
|
+
keys: Array.from(keyToItem.keys())
|
|
218
167
|
});
|
|
219
168
|
(0, external_react_namespaceObject.useEffect)(()=>{
|
|
220
|
-
if (!isTheSameArray((null == dragging ? void 0 : dragging.orders) ?? cache.orders,
|
|
221
|
-
cache.orders =
|
|
222
|
-
cache.keys = Array.from(((null == dragging ? void 0 : dragging.keyToOrder) ??
|
|
223
|
-
const
|
|
169
|
+
if (!isTheSameArray((null == dragging ? void 0 : dragging.orders) ?? cache.orders, orders) || !isTheSameIterable((null == dragging ? void 0 : dragging.keyToOrder.keys()) ?? cache.keys, keyToItem.keys())) {
|
|
170
|
+
cache.orders = orders;
|
|
171
|
+
cache.keys = Array.from(((null == dragging ? void 0 : dragging.keyToOrder) ?? keyToItem).keys());
|
|
172
|
+
const newOrderMap = getOrderMap({
|
|
224
173
|
prev: (null == dragging ? void 0 : dragging.keyToOrder) ?? keyToOrder,
|
|
225
|
-
orders
|
|
174
|
+
orders,
|
|
226
175
|
keys: cache.keys,
|
|
227
176
|
orderPriority
|
|
228
177
|
});
|
|
229
|
-
setKeyToOrder(
|
|
230
|
-
null == onOrderMapChange || onOrderMapChange(
|
|
231
|
-
const newRenderKeys = new Set(
|
|
178
|
+
setKeyToOrder(newOrderMap);
|
|
179
|
+
null == onOrderMapChange || onOrderMapChange(newOrderMap);
|
|
180
|
+
const newRenderKeys = new Set(newOrderMap.keys());
|
|
232
181
|
setRenderKeys((prev)=>prev.intersection(newRenderKeys).union(newRenderKeys.difference(prev)));
|
|
233
182
|
}
|
|
234
183
|
}, [
|
|
235
184
|
dragging,
|
|
236
185
|
cache,
|
|
237
|
-
|
|
238
|
-
|
|
186
|
+
orders,
|
|
187
|
+
keyToItem,
|
|
239
188
|
keyToOrder,
|
|
240
189
|
orderPriority,
|
|
241
190
|
onOrderMapChange
|
|
@@ -243,31 +192,31 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
|
|
|
243
192
|
const [renderKeys, setRenderKeys] = (0, external_react_namespaceObject.useState)(()=>new Set(keyToOrder.keys()));
|
|
244
193
|
const recent = (0, external_react_namespaceObject.useRef)(void 0);
|
|
245
194
|
(0, external_react_namespaceObject.useEffect)(()=>{
|
|
246
|
-
if (!!dragging && (!isTheSameArray(dragging.orders,
|
|
195
|
+
if (!!dragging && (!isTheSameArray(dragging.orders, orders) || dragging.columns !== columns || dragging.rows !== rows || dragging.gapX !== gapX || dragging.gapY !== gapY || dragging.itemWidth !== itemWidth || dragging.itemHeight !== itemHeight || !isTheSameIterable(dragging.keyToOrder.keys(), keyToItem.keys()))) {
|
|
247
196
|
setDragging(void 0);
|
|
248
|
-
if (isTheSameArray(dragging.orders,
|
|
197
|
+
if (isTheSameArray(dragging.orders, orders) && isTheSameIterable(dragging.keyToOrder.keys(), keyToItem.keys())) {
|
|
249
198
|
setKeyToOrder(dragging.keyToOrder);
|
|
250
199
|
null == onOrderMapChange || onOrderMapChange(dragging.keyToOrder);
|
|
251
200
|
}
|
|
252
201
|
}
|
|
253
202
|
}, [
|
|
254
203
|
dragging,
|
|
255
|
-
|
|
204
|
+
orders,
|
|
256
205
|
columns,
|
|
257
206
|
rows,
|
|
258
207
|
gapX,
|
|
259
208
|
gapY,
|
|
260
209
|
itemWidth,
|
|
261
210
|
itemHeight,
|
|
262
|
-
|
|
211
|
+
keyToItem,
|
|
263
212
|
keyToOrder,
|
|
264
213
|
onOrderMapChange
|
|
265
214
|
]);
|
|
266
215
|
(0, external_react_namespaceObject.useEffect)(()=>{
|
|
267
216
|
if (orderMap === keyToOrder) return;
|
|
268
217
|
if (!!orderMap && isLegalOrderMap({
|
|
269
|
-
orders
|
|
270
|
-
keys:
|
|
218
|
+
orders,
|
|
219
|
+
keys: keyToItem.keys(),
|
|
271
220
|
orderMap
|
|
272
221
|
})) setKeyToOrder(orderMap);
|
|
273
222
|
else null == onOrderMapChange || onOrderMapChange(keyToOrder);
|
|
@@ -276,24 +225,24 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
|
|
|
276
225
|
keyToOrder,
|
|
277
226
|
onOrderMapChange
|
|
278
227
|
]);
|
|
279
|
-
function onDragMoveStart(
|
|
228
|
+
function onDragMoveStart(key, event) {
|
|
280
229
|
null == _onDragMoveStart || _onDragMoveStart(event);
|
|
281
230
|
const position = getPosition({
|
|
282
|
-
order: keyToOrder.get(
|
|
231
|
+
order: keyToOrder.get(key),
|
|
283
232
|
columns,
|
|
284
233
|
gapX,
|
|
285
234
|
gapY,
|
|
286
235
|
itemWidth,
|
|
287
236
|
itemHeight
|
|
288
237
|
});
|
|
289
|
-
recent.current =
|
|
238
|
+
recent.current = key;
|
|
290
239
|
setDragging({
|
|
291
|
-
key
|
|
240
|
+
key,
|
|
292
241
|
startX: position.x,
|
|
293
242
|
startY: position.y,
|
|
294
243
|
deltaX: event.deltaX,
|
|
295
244
|
deltaY: event.deltaY,
|
|
296
|
-
orders
|
|
245
|
+
orders,
|
|
297
246
|
columns,
|
|
298
247
|
rows,
|
|
299
248
|
gapX,
|
|
@@ -303,65 +252,65 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
|
|
|
303
252
|
keyToOrder: keyToOrder
|
|
304
253
|
});
|
|
305
254
|
}
|
|
306
|
-
function onDragMove(
|
|
307
|
-
null == _onDragMove || _onDragMove(
|
|
255
|
+
function onDragMove(event) {
|
|
256
|
+
null == _onDragMove || _onDragMove(event);
|
|
308
257
|
if (!dragging) return;
|
|
309
|
-
const { deltaX, deltaY } =
|
|
310
|
-
const { key
|
|
311
|
-
setDragging((
|
|
312
|
-
...
|
|
258
|
+
const { deltaX, deltaY } = event;
|
|
259
|
+
const { key, orders, keyToOrder, startX, startY, columns, gapX, gapY, itemWidth, itemHeight } = dragging;
|
|
260
|
+
setDragging((prev)=>({
|
|
261
|
+
...prev,
|
|
313
262
|
deltaX,
|
|
314
263
|
deltaY
|
|
315
264
|
}));
|
|
316
265
|
const x = startX + deltaX;
|
|
317
266
|
const y = startY + deltaY;
|
|
318
|
-
const currentOrder =
|
|
319
|
-
const currentOrderIndex =
|
|
320
|
-
const nearestOrder =
|
|
267
|
+
const currentOrder = keyToOrder.get(key);
|
|
268
|
+
const currentOrderIndex = orders.indexOf(currentOrder);
|
|
269
|
+
const nearestOrder = orders.toSorted((a, b)=>{
|
|
321
270
|
const aPosition = getPosition({
|
|
322
271
|
order: a,
|
|
323
|
-
columns
|
|
324
|
-
gapX
|
|
325
|
-
gapY
|
|
326
|
-
itemWidth
|
|
327
|
-
itemHeight
|
|
272
|
+
columns,
|
|
273
|
+
gapX,
|
|
274
|
+
gapY,
|
|
275
|
+
itemWidth,
|
|
276
|
+
itemHeight
|
|
328
277
|
});
|
|
329
278
|
const bPosition = getPosition({
|
|
330
279
|
order: b,
|
|
331
|
-
columns
|
|
332
|
-
gapX
|
|
333
|
-
gapY
|
|
334
|
-
itemWidth
|
|
335
|
-
itemHeight
|
|
280
|
+
columns,
|
|
281
|
+
gapX,
|
|
282
|
+
gapY,
|
|
283
|
+
itemWidth,
|
|
284
|
+
itemHeight
|
|
336
285
|
});
|
|
337
286
|
const aDistance = (x - aPosition.x) ** 2 + (y - aPosition.y) ** 2;
|
|
338
287
|
const bDistance = (x - bPosition.x) ** 2 + (y - bPosition.y) ** 2;
|
|
339
288
|
if (aDistance - bDistance !== 0) return aDistance - bDistance;
|
|
340
|
-
const aIndex =
|
|
341
|
-
const bIndex =
|
|
289
|
+
const aIndex = orders.indexOf(a);
|
|
290
|
+
const bIndex = orders.indexOf(b);
|
|
342
291
|
return Math.abs(aIndex - currentOrderIndex) - Math.abs(bIndex - currentOrderIndex);
|
|
343
292
|
})[0];
|
|
344
293
|
if (nearestOrder === currentOrder) {
|
|
345
|
-
setKeyToOrder(
|
|
346
|
-
null == onOrderMapChange || onOrderMapChange(
|
|
294
|
+
setKeyToOrder(keyToOrder);
|
|
295
|
+
null == onOrderMapChange || onOrderMapChange(keyToOrder);
|
|
347
296
|
return;
|
|
348
297
|
}
|
|
349
|
-
const newKeyToOrder = new Map(
|
|
350
|
-
newKeyToOrder.set(
|
|
351
|
-
const orderToKey = getOrderToKey(
|
|
298
|
+
const newKeyToOrder = new Map(keyToOrder);
|
|
299
|
+
newKeyToOrder.set(key, nearestOrder);
|
|
300
|
+
const orderToKey = getOrderToKey(keyToOrder);
|
|
352
301
|
if (!orderToKey.has(nearestOrder)) {
|
|
353
302
|
setKeyToOrder(newKeyToOrder);
|
|
354
303
|
null == onOrderMapChange || onOrderMapChange(newKeyToOrder);
|
|
355
304
|
return;
|
|
356
305
|
}
|
|
357
|
-
const nearestOrderIndex =
|
|
306
|
+
const nearestOrderIndex = orders.indexOf(nearestOrder);
|
|
358
307
|
const itemDirection = currentOrderIndex > nearestOrderIndex ? "decrease" : "increase";
|
|
359
|
-
const targetDirection = "decrease" === itemDirection &&
|
|
308
|
+
const targetDirection = "decrease" === itemDirection && orders.slice(0, nearestOrderIndex).some((order)=>!orderToKey.has(order)) || "increase" === itemDirection && orders.slice(nearestOrderIndex + 1).every((order)=>orderToKey.has(order)) ? "decrease" : "increase";
|
|
360
309
|
function moveTargetOrder(targetOrder) {
|
|
361
310
|
const targetKey = orderToKey.get(targetOrder);
|
|
362
|
-
const targetOrderIndex =
|
|
311
|
+
const targetOrderIndex = orders.indexOf(targetOrder);
|
|
363
312
|
const nextOrderIndex = targetOrderIndex + ("decrease" === targetDirection ? -1 : 1);
|
|
364
|
-
const nextOrder =
|
|
313
|
+
const nextOrder = orders[nextOrderIndex];
|
|
365
314
|
newKeyToOrder.set(targetKey, nextOrder);
|
|
366
315
|
if (nextOrder === currentOrder || !orderToKey.has(nextOrder)) return;
|
|
367
316
|
moveTargetOrder(nextOrder);
|
|
@@ -370,15 +319,15 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
|
|
|
370
319
|
setKeyToOrder(newKeyToOrder);
|
|
371
320
|
null == onOrderMapChange || onOrderMapChange(newKeyToOrder);
|
|
372
321
|
}
|
|
373
|
-
function onDragMoveEnd(
|
|
374
|
-
null == _onDragMoveEnd || _onDragMoveEnd(
|
|
322
|
+
function onDragMoveEnd(event) {
|
|
323
|
+
null == _onDragMoveEnd || _onDragMoveEnd(event);
|
|
375
324
|
if (!dragging) return;
|
|
376
325
|
setDragging(void 0);
|
|
377
326
|
}
|
|
378
|
-
function isItemDisabled(
|
|
327
|
+
function isItemDisabled(key) {
|
|
379
328
|
if (!_isItemDisabled) return false;
|
|
380
|
-
if (Array.isArray(_isItemDisabled)) return _isItemDisabled.includes(
|
|
381
|
-
return _isItemDisabled(
|
|
329
|
+
if (Array.isArray(_isItemDisabled)) return _isItemDisabled.includes(key);
|
|
330
|
+
return _isItemDisabled(keyToItem.get(key), key);
|
|
382
331
|
}
|
|
383
332
|
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
384
333
|
className: (0, external_deepsea_tools_namespaceObject.clsx)(external_DraggableGrid_module_cjs_default().draggableGrid, "function" == typeof className ? className({
|
|
@@ -394,20 +343,20 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
|
|
|
394
343
|
}) : style
|
|
395
344
|
},
|
|
396
345
|
...rest,
|
|
397
|
-
children: Array.from(renderKeys).map((
|
|
398
|
-
if (!
|
|
399
|
-
const
|
|
400
|
-
const
|
|
401
|
-
const isDragging = (null == dragging ? void 0 : dragging.key) ===
|
|
402
|
-
const
|
|
403
|
-
order
|
|
346
|
+
children: Array.from(renderKeys).map((key)=>{
|
|
347
|
+
if (!keyToItem.has(key)) return;
|
|
348
|
+
const item = keyToItem.get(key);
|
|
349
|
+
const order = keyToOrder.get(key);
|
|
350
|
+
const isDragging = (null == dragging ? void 0 : dragging.key) === key;
|
|
351
|
+
const position = getPosition({
|
|
352
|
+
order,
|
|
404
353
|
columns,
|
|
405
354
|
gapX,
|
|
406
355
|
gapY,
|
|
407
356
|
itemWidth,
|
|
408
357
|
itemHeight
|
|
409
358
|
});
|
|
410
|
-
const
|
|
359
|
+
const style = isDragging ? {
|
|
411
360
|
"--width": `${itemWidth}px`,
|
|
412
361
|
"--height": `${itemHeight}px`,
|
|
413
362
|
"--translate-x": `${dragging.startX + dragging.deltaX}px`,
|
|
@@ -417,29 +366,29 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
|
|
|
417
366
|
} : {
|
|
418
367
|
"--width": `${itemWidth}px`,
|
|
419
368
|
"--height": `${itemHeight}px`,
|
|
420
|
-
"--translate-x": `${
|
|
421
|
-
"--translate-y": `${
|
|
369
|
+
"--translate-x": `${position.x}px`,
|
|
370
|
+
"--translate-y": `${position.y}px`,
|
|
422
371
|
"--transition-property": "transform",
|
|
423
|
-
"--z-index": recent.current ===
|
|
372
|
+
"--z-index": recent.current === key ? 999999 : keyToOrder.get(key)
|
|
424
373
|
};
|
|
425
|
-
const children = render ? render(
|
|
426
|
-
order
|
|
374
|
+
const children = render ? render(item, {
|
|
375
|
+
order,
|
|
427
376
|
isDragging: isDragging
|
|
428
|
-
}) :
|
|
377
|
+
}) : item;
|
|
429
378
|
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DraggableGridItem, {
|
|
430
|
-
item:
|
|
431
|
-
itemKey:
|
|
379
|
+
item: item,
|
|
380
|
+
itemKey: key,
|
|
432
381
|
handle: handle,
|
|
433
382
|
className: (0, external_deepsea_tools_namespaceObject.clsx)(external_DraggableGrid_module_cjs_default().draggableGridItem, "function" == typeof (null == classNames ? void 0 : classNames.item) ? classNames.item({
|
|
434
|
-
order
|
|
383
|
+
order,
|
|
435
384
|
isDragging: isDragging
|
|
436
385
|
}) : null == classNames ? void 0 : classNames.item),
|
|
437
|
-
style:
|
|
438
|
-
onDragMoveStart: disabled || isItemDisabled(
|
|
439
|
-
onDragMove: disabled || isItemDisabled(
|
|
440
|
-
onDragMoveEnd: disabled || isItemDisabled(
|
|
386
|
+
style: style,
|
|
387
|
+
onDragMoveStart: disabled || isItemDisabled(key) ? void 0 : (event)=>onDragMoveStart(key, event),
|
|
388
|
+
onDragMove: disabled || isItemDisabled(key) ? void 0 : onDragMove,
|
|
389
|
+
onDragMoveEnd: disabled || isItemDisabled(key) ? void 0 : onDragMoveEnd,
|
|
441
390
|
children: children
|
|
442
|
-
},
|
|
391
|
+
}, key);
|
|
443
392
|
})
|
|
444
393
|
});
|
|
445
394
|
}
|