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