@progress/kendo-react-sortable 7.2.4-develop.2 → 7.2.4-develop.4
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/Sortable.js +8 -0
- package/Sortable.mjs +396 -0
- package/dist/cdn/js/kendo-react-sortable.js +8 -5
- package/events/PreventableEvent.js +8 -0
- package/events/PreventableEvent.mjs +33 -0
- package/events/SortableOnDragEndEvent.js +8 -0
- package/events/SortableOnDragEndEvent.mjs +19 -0
- package/events/SortableOnDragOverEvent.js +8 -0
- package/events/SortableOnDragOverEvent.mjs +19 -0
- package/events/SortableOnDragStartEvent.js +8 -0
- package/events/SortableOnDragStartEvent.mjs +20 -0
- package/events/SortableOnNavigateEvent.js +8 -0
- package/events/SortableOnNavigateEvent.mjs +19 -0
- package/index.d.mts +472 -5
- package/index.d.ts +472 -13
- package/index.js +8 -5
- package/index.mjs +17 -483
- package/messages/index.js +8 -0
- package/messages/index.mjs +15 -0
- package/package-metadata.js +8 -0
- package/package-metadata.mjs +19 -0
- package/package.json +3 -3
- package/utils/utils.js +8 -0
- package/utils/utils.mjs +51 -0
- package/Sortable.d.ts +0 -210
- package/events/BaseEvent.d.ts +0 -13
- package/events/PreventableEvent.d.ts +0 -22
- package/events/SortableOnDragEndEvent.d.ts +0 -31
- package/events/SortableOnDragOverEvent.d.ts +0 -31
- package/events/SortableOnDragStartEvent.d.ts +0 -28
- package/events/SortableOnNavigateEvent.d.ts +0 -31
- package/interfaces/SortableDefaultProps.d.ts +0 -28
- package/interfaces/SortableEmptyItemUIProps.d.ts +0 -13
- package/interfaces/SortableItemUIProps.d.ts +0 -41
- package/interfaces/SortableProps.d.ts +0 -63
- package/messages/index.d.ts +0 -14
- package/package-metadata.d.ts +0 -9
- package/utils/utils.d.ts +0 -33
package/index.mjs
CHANGED
|
@@ -1,486 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
*
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
5
8
|
"use client";
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
class K {
|
|
12
|
-
constructor() {
|
|
13
|
-
this.prevented = !1;
|
|
14
|
-
}
|
|
15
|
-
/* eslint-disable max-len */
|
|
16
|
-
/**
|
|
17
|
-
* Prevents the default action for a specified event.
|
|
18
|
-
* In this way, the source component suppresses the built-in behavior that follows the event.
|
|
19
|
-
*/
|
|
20
|
-
preventDefault() {
|
|
21
|
-
this.prevented = !0;
|
|
22
|
-
}
|
|
23
|
-
/**
|
|
24
|
-
* Returns `true` if the event was prevented by any of its subscribers.
|
|
25
|
-
*
|
|
26
|
-
* @returns - Returns `true` if the default action was prevented.
|
|
27
|
-
* Otherwise, returns `false`.
|
|
28
|
-
*/
|
|
29
|
-
isDefaultPrevented() {
|
|
30
|
-
return this.prevented;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
class X extends K {
|
|
34
|
-
/**
|
|
35
|
-
* @hidden
|
|
36
|
-
*/
|
|
37
|
-
constructor(n, t, e) {
|
|
38
|
-
super(), this.target = n, this.prevIndex = t, this.element = e;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
class Y {
|
|
42
|
-
/**
|
|
43
|
-
* @hidden
|
|
44
|
-
*/
|
|
45
|
-
constructor(n, t, e, s) {
|
|
46
|
-
this.target = n, this.prevIndex = t, this.nextIndex = e, this.newState = s;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
class _ {
|
|
50
|
-
/**
|
|
51
|
-
* @hidden
|
|
52
|
-
*/
|
|
53
|
-
constructor(n, t, e, s) {
|
|
54
|
-
this.target = n, this.prevIndex = t, this.nextIndex = e, this.newState = s;
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
class z {
|
|
58
|
-
/**
|
|
59
|
-
* @hidden
|
|
60
|
-
*/
|
|
61
|
-
constructor(n, t, e, s) {
|
|
62
|
-
this.target = n, this.prevIndex = t, this.nextIndex = e, this.newState = s;
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
const S = "sortable.noData", W = {
|
|
66
|
-
[S]: "No Data"
|
|
67
|
-
}, H = (o, n) => {
|
|
68
|
-
for (let t = 0; t < o.length; t++)
|
|
69
|
-
if (n(o[t]))
|
|
70
|
-
return o[t];
|
|
71
|
-
}, C = (o, n) => {
|
|
72
|
-
for (let t = 0; t < o.length; t++)
|
|
73
|
-
if (n(o[t]))
|
|
74
|
-
return t;
|
|
75
|
-
return -1;
|
|
76
|
-
}, w = (o) => String(o).trim().split(" "), q = (o, n) => {
|
|
77
|
-
const t = w(n);
|
|
78
|
-
return !!w(o.className).find((e) => t.indexOf(e) >= 0);
|
|
79
|
-
}, G = /^(?:a|input|select|option|textarea|button|object)$/i, $ = (o) => {
|
|
80
|
-
if (o.tagName) {
|
|
81
|
-
const n = o.tagName.toLowerCase(), t = o.getAttribute("tabIndex"), e = t === "-1";
|
|
82
|
-
let s = t !== null && !e;
|
|
83
|
-
return G.test(n) && (s = !o.disabled && !e), s;
|
|
84
|
-
}
|
|
85
|
-
return !1;
|
|
86
|
-
}, j = (o, n) => {
|
|
87
|
-
for (; o && !n(o); )
|
|
88
|
-
o = o.parentNode;
|
|
89
|
-
return o;
|
|
90
|
-
}, V = M(), J = (o) => {
|
|
91
|
-
if (!o || !V)
|
|
92
|
-
return null;
|
|
93
|
-
let n = o.parentElement;
|
|
94
|
-
for (; n; ) {
|
|
95
|
-
if (window.getComputedStyle(n).transform !== "none")
|
|
96
|
-
return n;
|
|
97
|
-
n = n.parentElement;
|
|
98
|
-
}
|
|
99
|
-
}, Q = {
|
|
100
|
-
name: "@progress/kendo-react-sortable",
|
|
101
|
-
productName: "KendoReact",
|
|
102
|
-
productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
|
|
103
|
-
publishDate: 1709198082,
|
|
104
|
-
version: "",
|
|
105
|
-
licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
106
|
-
}, y = 200, D = "data-sortable-id", A = "data-sortable-component", Z = { [A]: !0 };
|
|
107
|
-
class E extends p.Component {
|
|
108
|
-
constructor(n) {
|
|
109
|
-
super(n), this.state = {
|
|
110
|
-
clientX: 0,
|
|
111
|
-
clientY: 0,
|
|
112
|
-
isDragging: !1,
|
|
113
|
-
activeId: "",
|
|
114
|
-
dragCueWidth: 0,
|
|
115
|
-
dragCueHeight: 0
|
|
116
|
-
}, this.isRtl = !1, this.itemRefsMap = {}, this.oldSizesMap = {}, this.animatingItemMap = {}, this.draggableRef = null, this.isUnmounted = !1, this.focusActiveId = !1, this.isKeyboardNavigated = !1, this.isDragPrevented = !1, this.swapItems = (t, e, s) => {
|
|
117
|
-
let i = t[e];
|
|
118
|
-
return t[e] = t[s], t[s] = i, e = s, e;
|
|
119
|
-
}, this.generateNewState = (t, e) => {
|
|
120
|
-
const { data: s } = this.props, i = [...s];
|
|
121
|
-
if (t > e)
|
|
122
|
-
for (let l = t - 1; l >= e; l--) {
|
|
123
|
-
const c = s[l];
|
|
124
|
-
this.isItemDisabled(c) || (t = this.swapItems(i, t, l));
|
|
125
|
-
}
|
|
126
|
-
else
|
|
127
|
-
for (let l = t + 1; l <= e; l++) {
|
|
128
|
-
const c = s[l];
|
|
129
|
-
this.isItemDisabled(c) || (t = this.swapItems(i, t, l));
|
|
130
|
-
}
|
|
131
|
-
return i;
|
|
132
|
-
}, this.closestSortableItem = (t) => {
|
|
133
|
-
let e = t;
|
|
134
|
-
for (; e; ) {
|
|
135
|
-
const s = e.getAttribute(D);
|
|
136
|
-
if (s && this.itemRefsMap[s] === e)
|
|
137
|
-
return {
|
|
138
|
-
id: s,
|
|
139
|
-
element: e
|
|
140
|
-
};
|
|
141
|
-
e = e.parentElement;
|
|
142
|
-
}
|
|
143
|
-
return {
|
|
144
|
-
id: "",
|
|
145
|
-
element: null
|
|
146
|
-
};
|
|
147
|
-
}, this.isSortable = (t) => !!t.hasAttribute(A), this.closestSortable = (t) => {
|
|
148
|
-
let e = t;
|
|
149
|
-
for (; e; ) {
|
|
150
|
-
if (this.isSortable(e))
|
|
151
|
-
return e;
|
|
152
|
-
e = e.parentElement;
|
|
153
|
-
}
|
|
154
|
-
return null;
|
|
155
|
-
}, this.isSameSortable = (t) => this.closestSortable(t) === this.container, this.idComparer = (t, e) => t + "" == e + "", this.findItem = (t) => {
|
|
156
|
-
const { data: e, idField: s } = this.props;
|
|
157
|
-
if (!(t + ""))
|
|
158
|
-
return;
|
|
159
|
-
const i = x(s);
|
|
160
|
-
return H(e, (r) => this.idComparer(i(r), t));
|
|
161
|
-
}, this.findIndex = (t) => {
|
|
162
|
-
const { data: e, idField: s } = this.props;
|
|
163
|
-
return t + "" ? C(e, (i) => this.idComparer(i[s], t)) : -1;
|
|
164
|
-
}, this.isItemDisabled = (t) => t && t[this.props.disabledField || ""] === !0, this.shouldResetActive = () => {
|
|
165
|
-
const t = O(document);
|
|
166
|
-
return t instanceof HTMLElement ? !this.closestSortableItem(t).element : !1;
|
|
167
|
-
}, this.widgetTarget = (t) => {
|
|
168
|
-
const e = j(t, (s) => q(s, "k-widget") || this.isSortable(s));
|
|
169
|
-
return e && !this.isSortable(e);
|
|
170
|
-
}, this.allowDrag = (t) => t.hasAttribute(D) || !($(t) || this.widgetTarget(t)), this.onDragStart = (t) => {
|
|
171
|
-
const { event: e } = t, { onDragStart: s } = this.props, i = document.elementFromPoint(e.clientX, e.clientY), { id: r, element: l } = this.closestSortableItem(i), c = this.findItem(r);
|
|
172
|
-
if (!r || c && this.isItemDisabled(c) || !this.allowDrag(i) || !this.isSameSortable(i)) {
|
|
173
|
-
this.isDragPrevented = !0;
|
|
174
|
-
return;
|
|
175
|
-
}
|
|
176
|
-
e.isTouch && e.originalEvent.preventDefault();
|
|
177
|
-
const a = new X(
|
|
178
|
-
this,
|
|
179
|
-
this.findIndex(r),
|
|
180
|
-
i
|
|
181
|
-
);
|
|
182
|
-
s && s.call(void 0, a), this.isDragPrevented = a.isDefaultPrevented(), this.isDragPrevented ? e.originalEvent.preventDefault() : (this.offsetParent = J(this.container), this.setState({
|
|
183
|
-
activeId: r,
|
|
184
|
-
dragCueWidth: l && l.clientWidth || 0,
|
|
185
|
-
dragCueHeight: l && l.clientHeight || 0
|
|
186
|
-
}));
|
|
187
|
-
}, this.onDragOver = (t) => {
|
|
188
|
-
const { event: e } = t, { onDragOver: s, data: i } = this.props;
|
|
189
|
-
if (this.isDragPrevented)
|
|
190
|
-
return;
|
|
191
|
-
e.originalEvent.preventDefault();
|
|
192
|
-
const r = this.findIndex(this.state.activeId);
|
|
193
|
-
if (r === -1) {
|
|
194
|
-
this.resetState();
|
|
195
|
-
return;
|
|
196
|
-
}
|
|
197
|
-
const l = document.elementFromPoint(e.clientX, e.clientY), c = this.closestSortableItem(l), a = this.findIndex(c.id), d = i[a];
|
|
198
|
-
if (s && a > -1 && r !== a && !this.isItemDisabled(d) && !this.animatingItemMap[c.id] && this.shouldReorder(c.element, e.clientX, e.clientY)) {
|
|
199
|
-
const m = new Y(
|
|
200
|
-
this,
|
|
201
|
-
r,
|
|
202
|
-
a,
|
|
203
|
-
this.generateNewState(r, a)
|
|
204
|
-
);
|
|
205
|
-
s.call(void 0, m);
|
|
206
|
-
}
|
|
207
|
-
const g = this.parentOffset();
|
|
208
|
-
this.setState({
|
|
209
|
-
clientX: e.clientX - g.left,
|
|
210
|
-
clientY: e.clientY - g.top,
|
|
211
|
-
isDragging: !0
|
|
212
|
-
});
|
|
213
|
-
}, this.onDragEnd = (t) => {
|
|
214
|
-
const { event: e } = t, s = this.shouldResetActive();
|
|
215
|
-
if (this.isDragPrevented)
|
|
216
|
-
return;
|
|
217
|
-
const { onDragEnd: i, data: r } = this.props, l = document.elementFromPoint(e.clientX, e.clientY), c = this.closestSortableItem(l);
|
|
218
|
-
let a = this.findIndex(c.id), d = this.findIndex(this.state.activeId);
|
|
219
|
-
const g = this.isItemDisabled(r[a]);
|
|
220
|
-
if ((a === -1 || g) && (a = d), i) {
|
|
221
|
-
let m = this.generateNewState(d, a);
|
|
222
|
-
if (!g) {
|
|
223
|
-
const u = this.thresholdRect(c.element);
|
|
224
|
-
if (u && (e.clientX < u.left || e.clientX > u.right || e.clientY < u.top || e.clientY > u.bottom)) {
|
|
225
|
-
const b = d;
|
|
226
|
-
d = a, a = b, m = this.props.data.slice();
|
|
227
|
-
}
|
|
228
|
-
}
|
|
229
|
-
const I = new _(
|
|
230
|
-
this,
|
|
231
|
-
d,
|
|
232
|
-
a,
|
|
233
|
-
m
|
|
234
|
-
);
|
|
235
|
-
i.call(void 0, I);
|
|
236
|
-
}
|
|
237
|
-
this.resetState(s);
|
|
238
|
-
}, this.shouldReorder = (t, e, s) => {
|
|
239
|
-
const i = this.thresholdRect(t);
|
|
240
|
-
return i && e > i.left && e < i.right && s > i.top && s < i.bottom;
|
|
241
|
-
}, this.thresholdRect = (t) => {
|
|
242
|
-
const e = this.state.activeId, s = this.container, r = (s ? Array.from(s.childNodes) : []).find(
|
|
243
|
-
(u) => u instanceof HTMLElement && u.getAttribute(D) === e
|
|
244
|
-
);
|
|
245
|
-
if (!t || !r)
|
|
246
|
-
return null;
|
|
247
|
-
const { width: l, height: c } = r.getBoundingClientRect(), a = t.getBoundingClientRect(), d = a.top + a.height / 2 - c / 2, g = a.left + a.width / 2 - l / 2, m = d + c, I = g + l;
|
|
248
|
-
return { top: d, left: g, bottom: m, right: I };
|
|
249
|
-
}, this.onItemBlur = () => {
|
|
250
|
-
window.setTimeout(() => {
|
|
251
|
-
this.isUnmounted || this.shouldResetActive() && !this.state.isDragging && this.setState({
|
|
252
|
-
activeId: ""
|
|
253
|
-
// what happends on destroyed component
|
|
254
|
-
});
|
|
255
|
-
});
|
|
256
|
-
}, this.onItemFocus = (t) => {
|
|
257
|
-
const { id: e, element: s } = this.closestSortableItem(t.currentTarget);
|
|
258
|
-
!this.idComparer(e, this.state.activeId) && this.isSameSortable(t.target) && s === t.target && this.setState({
|
|
259
|
-
activeId: e
|
|
260
|
-
});
|
|
261
|
-
}, this.onKeyDown = (t) => {
|
|
262
|
-
const { data: e, idField: s, onNavigate: i, navigation: r } = this.props, { activeId: l } = this.state;
|
|
263
|
-
if (!r || !l || !this.isSameSortable(t.target))
|
|
264
|
-
return;
|
|
265
|
-
const c = this.isRtl, a = e.filter((v) => !this.isItemDisabled(v)), d = C(a, (v) => this.idComparer(v[s], l)), g = a.length - 1;
|
|
266
|
-
let m = d;
|
|
267
|
-
switch (t.keyCode === f.left && (c ? t.keyCode = f.down : t.keyCode = f.up), t.keyCode === f.right && (c ? t.keyCode = f.up : t.keyCode = f.down), t.keyCode) {
|
|
268
|
-
case f.up:
|
|
269
|
-
d > 0 && (m = d - 1);
|
|
270
|
-
break;
|
|
271
|
-
case f.down:
|
|
272
|
-
d < g && (m = d + 1);
|
|
273
|
-
break;
|
|
274
|
-
}
|
|
275
|
-
if (m === d)
|
|
276
|
-
return;
|
|
277
|
-
t.stopPropagation(), t.preventDefault();
|
|
278
|
-
const I = a[m], u = I ? I[s] : "", b = a[d], N = b ? b[s] : "";
|
|
279
|
-
if (t.ctrlKey) {
|
|
280
|
-
if (i) {
|
|
281
|
-
const v = this.findIndex(N), R = this.findIndex(u), T = new z(
|
|
282
|
-
this,
|
|
283
|
-
v,
|
|
284
|
-
R,
|
|
285
|
-
this.generateNewState(v, R)
|
|
286
|
-
);
|
|
287
|
-
this.isKeyboardNavigated = !0, i.call(void 0, T);
|
|
288
|
-
}
|
|
289
|
-
} else
|
|
290
|
-
this.focusActiveId = !0, this.setState({
|
|
291
|
-
activeId: u + ""
|
|
292
|
-
});
|
|
293
|
-
}, this.resetState = (t) => {
|
|
294
|
-
this.isDragPrevented = !1, this.setState({
|
|
295
|
-
clientX: 0,
|
|
296
|
-
clientY: 0,
|
|
297
|
-
isDragging: !1,
|
|
298
|
-
dragCueWidth: 0,
|
|
299
|
-
dragCueHeight: 0,
|
|
300
|
-
activeId: t ? "" : this.state.activeId
|
|
301
|
-
});
|
|
302
|
-
}, this.renderData = () => {
|
|
303
|
-
const {
|
|
304
|
-
data: t,
|
|
305
|
-
itemUI: e,
|
|
306
|
-
idField: s,
|
|
307
|
-
tabIndex: i
|
|
308
|
-
} = this.props;
|
|
309
|
-
return t.map((r) => {
|
|
310
|
-
const c = x(s)(r), a = this.isItemDisabled(r), d = this.idComparer(this.state.activeId, c);
|
|
311
|
-
return /* @__PURE__ */ p.createElement(
|
|
312
|
-
e,
|
|
313
|
-
{
|
|
314
|
-
key: c,
|
|
315
|
-
forwardRef: (g) => this.refAssign(g, c),
|
|
316
|
-
dataItem: r,
|
|
317
|
-
isDisabled: a,
|
|
318
|
-
isActive: d,
|
|
319
|
-
isDragged: d && this.state.isDragging,
|
|
320
|
-
isDragCue: !1,
|
|
321
|
-
attributes: {
|
|
322
|
-
[D]: c,
|
|
323
|
-
["aria-disabled"]: a,
|
|
324
|
-
["aria-grabbed"]: d && this.state.isDragging && !this.isDragPrevented,
|
|
325
|
-
["aria-dropeffect"]: a ? "none" : "move",
|
|
326
|
-
tabIndex: P(i, a),
|
|
327
|
-
onFocus: this.onItemFocus,
|
|
328
|
-
onBlur: this.onItemBlur
|
|
329
|
-
},
|
|
330
|
-
style: {
|
|
331
|
-
cursor: a ? "auto" : "move",
|
|
332
|
-
MozUserSelect: "none",
|
|
333
|
-
msUserSelect: "none",
|
|
334
|
-
WebkitUserSelect: "none",
|
|
335
|
-
userSelect: "none"
|
|
336
|
-
}
|
|
337
|
-
}
|
|
338
|
-
);
|
|
339
|
-
});
|
|
340
|
-
}, this.renderNoData = () => {
|
|
341
|
-
const { emptyItemUI: t } = this.props, s = k(this).toLanguageString(S, W[S]);
|
|
342
|
-
if (t)
|
|
343
|
-
return /* @__PURE__ */ p.createElement(t, { message: s });
|
|
344
|
-
}, this.renderDragCue = () => {
|
|
345
|
-
const { itemUI: t } = this.props, { isDragging: e, activeId: s, clientX: i, clientY: r } = this.state, l = this.findItem(s);
|
|
346
|
-
if (!(!e || !l))
|
|
347
|
-
return /* @__PURE__ */ p.createElement(
|
|
348
|
-
t,
|
|
349
|
-
{
|
|
350
|
-
dataItem: l,
|
|
351
|
-
isDisabled: !1,
|
|
352
|
-
isActive: !0,
|
|
353
|
-
isDragged: !0,
|
|
354
|
-
isDragCue: !0,
|
|
355
|
-
style: {
|
|
356
|
-
position: "fixed",
|
|
357
|
-
top: r + 10,
|
|
358
|
-
left: i + 10,
|
|
359
|
-
width: this.state.dragCueWidth,
|
|
360
|
-
height: this.state.dragCueHeight
|
|
361
|
-
},
|
|
362
|
-
attributes: {}
|
|
363
|
-
}
|
|
364
|
-
);
|
|
365
|
-
}, this.refAssign = (t, e) => {
|
|
366
|
-
t ? this.itemRefsMap[e] = t : delete this.itemRefsMap[e];
|
|
367
|
-
}, this.draggableRefAssign = (t) => {
|
|
368
|
-
this.draggableRef = t;
|
|
369
|
-
}, B(Q);
|
|
370
|
-
}
|
|
371
|
-
get container() {
|
|
372
|
-
return this.draggableRef && this.draggableRef.element;
|
|
373
|
-
}
|
|
374
|
-
/**
|
|
375
|
-
* @hidden
|
|
376
|
-
*/
|
|
377
|
-
getSnapshotBeforeUpdate() {
|
|
378
|
-
const { idField: n, animation: t } = this.props;
|
|
379
|
-
return this.oldSizesMap = {}, t && this.props.data.forEach((e) => {
|
|
380
|
-
const s = e[n], i = this.itemRefsMap[s], r = U.findDOMNode(i);
|
|
381
|
-
r && (this.oldSizesMap[s] = r.getBoundingClientRect());
|
|
382
|
-
}), null;
|
|
383
|
-
}
|
|
384
|
-
/**
|
|
385
|
-
* @hidden
|
|
386
|
-
*/
|
|
387
|
-
componentDidUpdate(n) {
|
|
388
|
-
const { idField: t, animation: e } = this.props;
|
|
389
|
-
this.focusActiveId && (this.focusActiveId = !1, this.itemRefsMap[this.state.activeId].focus()), !(!e || !this.state.isDragging && !this.isKeyboardNavigated) && (this.isKeyboardNavigated = !1, n.data.forEach((s) => {
|
|
390
|
-
const i = s[t], r = this.itemRefsMap[i];
|
|
391
|
-
if (!r)
|
|
392
|
-
return;
|
|
393
|
-
const l = r.getBoundingClientRect(), c = this.oldSizesMap[i], a = c.left - l.left, d = c.top - l.top;
|
|
394
|
-
a === 0 && d === 0 || requestAnimationFrame(() => {
|
|
395
|
-
this.animatingItemMap[i] = !0, r.style.transform = `translate(${a}px, ${d}px)`, r.style.transition = "transform 0s", requestAnimationFrame(() => {
|
|
396
|
-
r.style.transform = "", r.style.transition = `transform ${y}ms cubic-bezier(0.2, 0, 0, 1) 0s`, window.setTimeout(() => this.animatingItemMap[i] = !1, y);
|
|
397
|
-
});
|
|
398
|
-
});
|
|
399
|
-
}));
|
|
400
|
-
}
|
|
401
|
-
/**
|
|
402
|
-
* @hidden
|
|
403
|
-
*/
|
|
404
|
-
componentDidMount() {
|
|
405
|
-
this.isRtl = this.container && getComputedStyle(this.container).direction === "rtl" || !1;
|
|
406
|
-
}
|
|
407
|
-
/**
|
|
408
|
-
* @hidden
|
|
409
|
-
*/
|
|
410
|
-
componentWillUnmount() {
|
|
411
|
-
this.isUnmounted = !0;
|
|
412
|
-
}
|
|
413
|
-
/**
|
|
414
|
-
* @hidden
|
|
415
|
-
*/
|
|
416
|
-
parentOffset() {
|
|
417
|
-
const n = this.offsetParent;
|
|
418
|
-
if (n && n.ownerDocument && n !== n.ownerDocument.body) {
|
|
419
|
-
const t = n.getBoundingClientRect();
|
|
420
|
-
return {
|
|
421
|
-
left: t.left - n.scrollLeft,
|
|
422
|
-
top: t.top - n.scrollTop
|
|
423
|
-
};
|
|
424
|
-
}
|
|
425
|
-
return { left: 0, top: 0 };
|
|
426
|
-
}
|
|
427
|
-
/**
|
|
428
|
-
* @hidden
|
|
429
|
-
*/
|
|
430
|
-
render() {
|
|
431
|
-
const { data: n, style: t, className: e, itemsWrapUI: s } = this.props, i = s || "div";
|
|
432
|
-
return /* @__PURE__ */ p.createElement(
|
|
433
|
-
F,
|
|
434
|
-
{
|
|
435
|
-
onDragStart: this.onDragStart,
|
|
436
|
-
onDrag: this.onDragOver,
|
|
437
|
-
onDragEnd: this.onDragEnd,
|
|
438
|
-
ref: this.draggableRefAssign
|
|
439
|
-
},
|
|
440
|
-
/* @__PURE__ */ p.createElement(
|
|
441
|
-
i,
|
|
442
|
-
{
|
|
443
|
-
...Z,
|
|
444
|
-
className: e,
|
|
445
|
-
style: {
|
|
446
|
-
touchAction: "none",
|
|
447
|
-
...t
|
|
448
|
-
},
|
|
449
|
-
onKeyDown: this.onKeyDown
|
|
450
|
-
},
|
|
451
|
-
n && n.length ? this.renderData() : this.renderNoData(),
|
|
452
|
-
this.renderDragCue()
|
|
453
|
-
)
|
|
454
|
-
);
|
|
455
|
-
}
|
|
456
|
-
}
|
|
457
|
-
E.defaultProps = {
|
|
458
|
-
navigation: !0,
|
|
459
|
-
animation: !0,
|
|
460
|
-
emptyItemUI: (o) => /* @__PURE__ */ p.createElement("div", null, o.message)
|
|
461
|
-
};
|
|
462
|
-
E.propTypes = {
|
|
463
|
-
idField: h.string.isRequired,
|
|
464
|
-
disabledField: h.string,
|
|
465
|
-
data: h.array.isRequired,
|
|
466
|
-
tabIndex: h.number,
|
|
467
|
-
navigation: h.bool,
|
|
468
|
-
animation: h.bool,
|
|
469
|
-
itemsWrapUI: h.any,
|
|
470
|
-
itemUI: h.func.isRequired,
|
|
471
|
-
emptyItemUI: h.func,
|
|
472
|
-
style: h.object,
|
|
473
|
-
className: h.string,
|
|
474
|
-
onDragStart: h.func,
|
|
475
|
-
onDragOver: h.func,
|
|
476
|
-
onDragEnd: h.func,
|
|
477
|
-
onNavigate: h.func
|
|
478
|
-
};
|
|
479
|
-
L(E);
|
|
9
|
+
import { Sortable as t } from "./Sortable.mjs";
|
|
10
|
+
import { SortableOnDragStartEvent as a } from "./events/SortableOnDragStartEvent.mjs";
|
|
11
|
+
import { SortableOnDragOverEvent as l } from "./events/SortableOnDragOverEvent.mjs";
|
|
12
|
+
import { SortableOnDragEndEvent as S } from "./events/SortableOnDragEndEvent.mjs";
|
|
13
|
+
import { SortableOnNavigateEvent as f } from "./events/SortableOnNavigateEvent.mjs";
|
|
480
14
|
export {
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
15
|
+
t as Sortable,
|
|
16
|
+
S as SortableOnDragEndEvent,
|
|
17
|
+
l as SortableOnDragOverEvent,
|
|
18
|
+
a as SortableOnDragStartEvent,
|
|
19
|
+
f as SortableOnNavigateEvent
|
|
486
20
|
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="sortable.noData",t={[e]:"No Data"};exports.messages=t;exports.noData=e;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
"use client";
|
|
9
|
+
const a = "sortable.noData", t = {
|
|
10
|
+
[a]: "No Data"
|
|
11
|
+
};
|
|
12
|
+
export {
|
|
13
|
+
t as messages,
|
|
14
|
+
a as noData
|
|
15
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-sortable",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
"use client";
|
|
9
|
+
const e = {
|
|
10
|
+
name: "@progress/kendo-react-sortable",
|
|
11
|
+
productName: "KendoReact",
|
|
12
|
+
productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
|
|
13
|
+
publishDate: 1709714144,
|
|
14
|
+
version: "",
|
|
15
|
+
licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
16
|
+
};
|
|
17
|
+
export {
|
|
18
|
+
e as packageMetadata
|
|
19
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-sortable",
|
|
3
|
-
"version": "7.2.4-develop.
|
|
3
|
+
"version": "7.2.4-develop.4",
|
|
4
4
|
"description": "React Sortable provides a sortable drag-and-drop functionality to elements within a list. KendoReact Sortable package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
"sideEffects": false,
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"@progress/kendo-licensing": "^1.3.4",
|
|
26
|
-
"@progress/kendo-react-common": "7.2.4-develop.
|
|
27
|
-
"@progress/kendo-react-intl": "7.2.4-develop.
|
|
26
|
+
"@progress/kendo-react-common": "7.2.4-develop.4",
|
|
27
|
+
"@progress/kendo-react-intl": "7.2.4-develop.4",
|
|
28
28
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0",
|
|
29
29
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
|
|
30
30
|
},
|
package/utils/utils.js
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("@progress/kendo-react-common"),l=(t,e)=>{for(let n=0;n<t.length;n++)if(e(t[n]))return t[n]},a=(t,e)=>{for(let n=0;n<t.length;n++)if(e(t[n]))return n;return-1},o=t=>String(t).trim().split(" "),c=(t,e)=>{const n=o(e);return!!o(t.className).find(s=>n.indexOf(s)>=0)},u=/^(?:a|input|select|option|textarea|button|object)$/i,f=t=>{if(t.tagName){const e=t.tagName.toLowerCase(),n=t.getAttribute("tabIndex"),s=n==="-1";let i=n!==null&&!s;return u.test(e)&&(i=!t.disabled&&!s),i}return!1},C=(t,e)=>{for(;t&&!e(t);)t=t.parentNode;return t},b=r.hasRelativeStackingContext(),d=t=>{if(!t||!b)return null;let e=t.parentElement;for(;e;){if(window.getComputedStyle(e).transform!=="none")return e;e=e.parentElement}};exports.closest=C;exports.find=l;exports.findIndex=a;exports.hasClasses=c;exports.isFocusable=f;exports.relativeContextElement=d;exports.toClassList=o;
|
package/utils/utils.mjs
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
"use client";
|
|
9
|
+
import { hasRelativeStackingContext as i } from "@progress/kendo-react-common";
|
|
10
|
+
const u = (t, e) => {
|
|
11
|
+
for (let n = 0; n < t.length; n++)
|
|
12
|
+
if (e(t[n]))
|
|
13
|
+
return t[n];
|
|
14
|
+
}, f = (t, e) => {
|
|
15
|
+
for (let n = 0; n < t.length; n++)
|
|
16
|
+
if (e(t[n]))
|
|
17
|
+
return n;
|
|
18
|
+
return -1;
|
|
19
|
+
}, r = (t) => String(t).trim().split(" "), p = (t, e) => {
|
|
20
|
+
const n = r(e);
|
|
21
|
+
return !!r(t.className).find((s) => n.indexOf(s) >= 0);
|
|
22
|
+
}, a = /^(?:a|input|select|option|textarea|button|object)$/i, b = (t) => {
|
|
23
|
+
if (t.tagName) {
|
|
24
|
+
const e = t.tagName.toLowerCase(), n = t.getAttribute("tabIndex"), s = n === "-1";
|
|
25
|
+
let o = n !== null && !s;
|
|
26
|
+
return a.test(e) && (o = !t.disabled && !s), o;
|
|
27
|
+
}
|
|
28
|
+
return !1;
|
|
29
|
+
}, g = (t, e) => {
|
|
30
|
+
for (; t && !e(t); )
|
|
31
|
+
t = t.parentNode;
|
|
32
|
+
return t;
|
|
33
|
+
}, l = i(), m = (t) => {
|
|
34
|
+
if (!t || !l)
|
|
35
|
+
return null;
|
|
36
|
+
let e = t.parentElement;
|
|
37
|
+
for (; e; ) {
|
|
38
|
+
if (window.getComputedStyle(e).transform !== "none")
|
|
39
|
+
return e;
|
|
40
|
+
e = e.parentElement;
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
export {
|
|
44
|
+
g as closest,
|
|
45
|
+
u as find,
|
|
46
|
+
f as findIndex,
|
|
47
|
+
p as hasClasses,
|
|
48
|
+
b as isFocusable,
|
|
49
|
+
m as relativeContextElement,
|
|
50
|
+
r as toClassList
|
|
51
|
+
};
|