@progress/kendo-react-common 9.5.0-develop.1 → 9.5.0-develop.3
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/Draggable.js +1 -1
- package/Draggable.mjs +20 -19
- package/Droppable.js +1 -1
- package/Droppable.mjs +14 -8
- package/dist/cdn/js/kendo-react-common.js +1 -1
- package/drag-n-drop/context/index.js +1 -1
- package/drag-n-drop/context/index.mjs +15 -13
- package/drag-n-drop/index.js +1 -1
- package/drag-n-drop/index.mjs +37 -20
- package/hooks/useDraggable.js +1 -1
- package/hooks/useDraggable.mjs +148 -104
- package/hooks/useDroppable.js +1 -1
- package/hooks/useDroppable.mjs +38 -38
- package/hooks/useInheritedState.js +1 -1
- package/hooks/useInheritedState.mjs +5 -5
- package/index.d.mts +39 -2
- package/index.d.ts +39 -2
- package/package.json +2 -2
package/drag-n-drop/index.mjs
CHANGED
|
@@ -6,39 +6,56 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
|
-
import * as
|
|
10
|
-
import {
|
|
11
|
-
import { useControlledState as
|
|
12
|
-
import { useCollection as
|
|
13
|
-
const
|
|
14
|
-
const [p, c] =
|
|
9
|
+
import * as f from "react";
|
|
10
|
+
import { DragAndDropContext as v } from "./context/index.mjs";
|
|
11
|
+
import { useControlledState as n } from "../hooks/useControlledState.mjs";
|
|
12
|
+
import { useCollection as a, COLLECTION_ACTION as t } from "../hooks/useCollection.mjs";
|
|
13
|
+
const x = (e) => {
|
|
14
|
+
const { context: d = v } = e, [p, c] = n(
|
|
15
15
|
null
|
|
16
|
-
), [
|
|
16
|
+
), [i, D] = n(
|
|
17
17
|
null
|
|
18
|
-
), [
|
|
18
|
+
), [g, o] = a([]), [l, s] = a([]), m = (r) => {
|
|
19
19
|
o({
|
|
20
20
|
type: t.add,
|
|
21
|
-
item:
|
|
21
|
+
item: r
|
|
22
22
|
});
|
|
23
|
-
},
|
|
23
|
+
}, C = (r) => {
|
|
24
24
|
o({
|
|
25
25
|
type: t.remove,
|
|
26
|
-
item:
|
|
26
|
+
item: r
|
|
27
27
|
});
|
|
28
|
-
}, u = (
|
|
29
|
-
|
|
28
|
+
}, u = (r) => {
|
|
29
|
+
s({
|
|
30
30
|
type: t.add,
|
|
31
|
-
item:
|
|
31
|
+
item: r
|
|
32
32
|
});
|
|
33
|
-
},
|
|
34
|
-
|
|
33
|
+
}, y = (r) => {
|
|
34
|
+
s({
|
|
35
35
|
type: t.remove,
|
|
36
|
-
item:
|
|
36
|
+
item: r
|
|
37
37
|
});
|
|
38
38
|
};
|
|
39
|
-
return /* @__PURE__ */
|
|
39
|
+
return /* @__PURE__ */ f.createElement(
|
|
40
|
+
d.Provider,
|
|
41
|
+
{
|
|
42
|
+
value: {
|
|
43
|
+
drag: p,
|
|
44
|
+
setDrag: c,
|
|
45
|
+
drop: i,
|
|
46
|
+
setDrop: D,
|
|
47
|
+
drags: g,
|
|
48
|
+
registerDrag: m,
|
|
49
|
+
deregisterDrag: C,
|
|
50
|
+
drops: l,
|
|
51
|
+
registerDrop: u,
|
|
52
|
+
deregisterDrop: y
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
e.children
|
|
56
|
+
);
|
|
40
57
|
};
|
|
41
|
-
|
|
58
|
+
x.displayName = "KendoReactDragAndDrop";
|
|
42
59
|
export {
|
|
43
|
-
|
|
60
|
+
x as DragAndDrop
|
|
44
61
|
};
|
package/hooks/useDraggable.js
CHANGED
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
9
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Te=require("react"),w=require("@progress/kendo-draggable-common"),i=require("../noop.js"),Ce=require("./useInheritedState.js"),je=require("../drag-n-drop/context/index.js"),qe=require("./use-isomorphic-layout-effect.js");function Ae(o){const m=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const d in o)if(d!=="default"){const h=Object.getOwnPropertyDescriptor(o,d);Object.defineProperty(m,d,h.get?h:{enumerable:!0,get:()=>o[d]})}}return m.default=o,Object.freeze(m)}const t=Ae(Te),_e=2e3;function Ue(o,m,d={}){const{onPress:h=i.noop,onRelease:Y=i.noop,onDragStart:Z=i.noop,onDrag:$=i.noop,onDragEnd:ee=i.noop}=m,{hint:a=null,mouseOnly:P=!1,autoScroll:s=!0,scrollContainer:u=null,context:ve=je.DragAndDropContext}=d,[f,be]=t.useState(!1),[E,Ee]=t.useState(!1),{drop:ke,setDrop:ye,drag:Se,setDrag:De,drops:k,drags:y,registerDrag:S,deregisterDrag:D}=t.useContext(ve),[x]=Ce.useInheritedState([ke,ye]),[I,O]=Ce.useInheritedState([Se,De]),p=t.useRef({x:0,y:0}),M=t.useRef(),L=t.useRef(!1),te=t.useRef(),C=t.useRef(null),T=t.useRef(!1),j=t.useRef({x:0,y:0}),q=t.useRef({x:0,y:0}),v=t.useRef({x:0,y:0}),A=t.useRef({x:0,y:0}),_=t.useRef({x:0,y:0}),U=t.useRef({x:0,y:0}),Oe=!!(typeof window!="undefined"&&window.PointerEvent),ne=!P&&Oe,l=t.useCallback(()=>o.current&&o.current.element?o.current.element:o.current,[o]),Le=t.useCallback(()=>a&&a.current&&a.current.element?a.current.element:a?a.current:null,[a]),re=t.useCallback(()=>u&&u.current&&u.current.element?u.current.element:u?u.current:null,[u]),oe=t.useCallback(()=>typeof s=="object"&&s.boundaryElementRef&&s.boundaryElementRef.current&&s.boundaryElementRef.current.element?s.boundaryElementRef.current.element:typeof s=="object"&&s.boundaryElementRef&&s.boundaryElementRef.current?s.boundaryElementRef.current:null,[s]),b=t.useRef(null);t.useImperativeHandle(b,()=>({get element(){return l()},get hint(){return Le()},onPress:Re,onDragStart:Pe,onDrag:xe,onDragEnd:Ie,onRelease:we,data:o.current}));const R=t.useCallback(()=>{const e=l();return e&&e.ownerDocument||document},[l]),g=t.useCallback(()=>{const e=R();return e&&e.defaultView||window},[R]),se=t.useCallback(()=>({get drag(){return I?I.current:null},get drop(){return x?x.current:null},get drags(){return(y!=null?y:[]).map(e=>e.current)},get drops(){return(k!=null?k:[]).map(e=>e.current)},pressed:!!f,ignoreMouse:L.current,scrollOffset:_.current,offset:j.current,pageOffset:q.current,initialScrollOffset:U.current,clientOffset:v.current,initialClientOffset:A.current,velocity:p.current,autoScroll:!!(typeof s=="object"?s.enabled!==!1:s),scrollableParent:oe(),autoScrollDirection:typeof s=="object"?s.direction:{horizontal:!0,vertical:!0},isScrolling:E}),[I,x,y,k,f,L,_,j,q,U,v,A,p,s,E,oe]),ce=t.useCallback(e=>{be(e)},[]),le=t.useCallback(e=>{Ee(e)},[]),ae=t.useCallback(e=>{p.current=e},[]),ue=t.useCallback(e=>{j.current=e},[]),ie=t.useCallback(e=>{v.current=e},[]),de=t.useCallback(e=>{q.current=e},[]),fe=t.useCallback(e=>{A.current=e},[]),ge=t.useCallback(e=>{_.current=e},[]),me=t.useCallback(e=>{U.current=e},[]),Re=t.useCallback(e=>{h(e)},[h]),we=t.useCallback(e=>{Y(e)},[Y]),Pe=t.useCallback(e=>{O(b,{target:o.current,event:e}),Z(e)},[O,o,Z]),xe=t.useCallback(e=>{$(e)},[$]),Ie=t.useCallback(e=>{T.current||(O(null,{target:o.current,event:e}),ee(e))},[ee,O,o]),n=t.useCallback(e=>{w.dispatchDragAndDrop(se(),{event:e,payload:b.current},{onVelocityChange:ae,onOffsetChange:ue,onClientOffsetChange:ie,onPageOffsetChange:de,onInitialClientOffsetChange:fe,onScrollOffsetChange:ge,onInitialScrollOffsetChange:me,onIsPressedChange:ce,onIsScrollingChange:le})},[se,ae,ue,de,ie,fe,me,ce,ge,le]),B=t.useCallback(e=>{n(e)},[n]),V=t.useCallback(e=>{n(e)},[n]),z=t.useCallback(e=>{n(e)},[n]),H=t.useCallback(e=>{n(e)},[n]),N=t.useCallback(e=>{n(e)},[n]),W=t.useCallback(e=>{n(e)},[n]),F=t.useCallback(e=>{n(e)},[n]),G=t.useCallback(e=>{e.preventDefault(),n(e)},[n]),J=t.useCallback(e=>{e.preventDefault(),n(e)},[n]),K=t.useCallback(e=>{e.preventDefault(),n(e)},[n]),Q=t.useCallback(e=>{if(e.touches.length===0&&e.changedTouches.length===1){const r=g();L.current=!0,te.current=r.setTimeout(()=>{L.current=!1},_e)}n(e)},[n,g]),X=t.useCallback(e=>{n(e)},[n]),he=t.useCallback(()=>{const e=l();if(e){const r=e.style.touchAction;return e.style.touchAction="none",()=>{e.style.touchAction=r}}},[l]),pe=t.useCallback(()=>(S==null||S(b),()=>{D==null||D(b)}),[D,S]),Me=()=>{const e=g(),r=l(),c=R();return ne?(r&&(C.current=w.getScrollableParent(r),C.current&&C.current.addEventListener("scroll",X,{passive:!0}),r.addEventListener("pointerdown",B,{passive:!0})),f&&(c.addEventListener("pointermove",V),c.addEventListener("pointerup",H,!0),c.addEventListener("contextmenu",G),c.addEventListener("pointercancel",z,{passive:!0}))):(e.addEventListener("touchmove",i.noop,{capture:!1,passive:!1}),r&&(r.addEventListener("mousedown",N,{passive:!0}),P||(r.addEventListener("touchstart",J,{passive:!0}),f&&(r.addEventListener("touchmove",K,{passive:!0}),r.addEventListener("touchend",Q,{passive:!0})))),f&&(c.addEventListener("mousemove",W,{passive:!0}),c.addEventListener("mouseup",F,{passive:!0}))),()=>{C.current&&C.current.removeEventListener("scroll",X),r&&(r.removeEventListener("pointerdown",B),r.removeEventListener("mousedown",N),r.removeEventListener("touchstart",J),r.removeEventListener("touchmove",K),r.removeEventListener("touchend",Q)),c.removeEventListener("pointermove",V),c.removeEventListener("pointerup",H,!0),c.removeEventListener("contextmenu",G),c.removeEventListener("pointercancel",z),c.removeEventListener("mousemove",W),c.removeEventListener("mouseup",F),e.removeEventListener("touchmove",i.noop),e.clearTimeout(te.current)}};t.useEffect(()=>{const e=g();if(E){const r=re()||w.getScrollableParent(document.elementFromPoint(v.current.x,v.current.y));e.clearInterval(M.current),M.current=e.setInterval(()=>{w.autoScroll(r,{x:p.current.x,y:p.current.y})},50)}return()=>{e.clearInterval(M.current)}},[l,re,g,E]),t.useEffect(he,[he]),t.useEffect(Me,[f,g,l,R,P,ne,G,N,W,F,z,B,V,H,Q,K,J,X]),t.useEffect(()=>(T.current=!1,()=>{T.current=!0}),[]),qe.useIsomorphicLayoutEffect(pe,[pe])}exports.useDraggable=Ue;
|
package/hooks/useDraggable.mjs
CHANGED
|
@@ -7,17 +7,32 @@
|
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
9
|
import * as t from "react";
|
|
10
|
-
import { dispatchDragAndDrop as
|
|
10
|
+
import { dispatchDragAndDrop as Te, getScrollableParent as he, autoScroll as Ae } from "@progress/kendo-draggable-common";
|
|
11
11
|
import { noop as i } from "../noop.mjs";
|
|
12
12
|
import { useInheritedState as Ce } from "./useInheritedState.mjs";
|
|
13
|
-
import {
|
|
14
|
-
import { useIsomorphicLayoutEffect as
|
|
15
|
-
const
|
|
16
|
-
function
|
|
17
|
-
const { onPress:
|
|
13
|
+
import { DragAndDropContext as je } from "../drag-n-drop/context/index.mjs";
|
|
14
|
+
import { useIsomorphicLayoutEffect as Ue } from "./use-isomorphic-layout-effect.mjs";
|
|
15
|
+
const Be = 2e3;
|
|
16
|
+
function ze(l, ge, ve = {}) {
|
|
17
|
+
const { onPress: $ = i, onRelease: J = i, onDragStart: K = i, onDrag: Q = i, onDragEnd: X = i } = ge, {
|
|
18
|
+
hint: a = null,
|
|
19
|
+
mouseOnly: L = !1,
|
|
20
|
+
autoScroll: o = !0,
|
|
21
|
+
scrollContainer: u = null,
|
|
22
|
+
context: pe = je
|
|
23
|
+
} = ve, [f, be] = t.useState(!1), [v, Ee] = t.useState(!1), {
|
|
24
|
+
drop: ke,
|
|
25
|
+
setDrop: ye,
|
|
26
|
+
drag: De,
|
|
27
|
+
setDrag: Se,
|
|
28
|
+
drops: p,
|
|
29
|
+
drags: b,
|
|
30
|
+
registerDrag: E,
|
|
31
|
+
deregisterDrag: k
|
|
32
|
+
} = t.useContext(pe), [O] = Ce([ke, ye]), [R, y] = Ce([De, Se]), m = t.useRef({ x: 0, y: 0 }), w = t.useRef(), D = t.useRef(!1), Y = t.useRef(), h = t.useRef(null), x = t.useRef(!1), P = t.useRef({ x: 0, y: 0 }), I = t.useRef({ x: 0, y: 0 }), C = t.useRef({ x: 0, y: 0 }), M = t.useRef({ x: 0, y: 0 }), T = t.useRef({ x: 0, y: 0 }), A = t.useRef({ x: 0, y: 0 }), Le = !!(typeof window != "undefined" && window.PointerEvent), Z = !L && Le, c = t.useCallback(
|
|
18
33
|
() => l.current && l.current.element ? l.current.element : l.current,
|
|
19
34
|
[l]
|
|
20
|
-
),
|
|
35
|
+
), Oe = t.useCallback(
|
|
21
36
|
() => a && a.current && a.current.element ? a.current.element : a ? a.current : null,
|
|
22
37
|
[a]
|
|
23
38
|
), ee = t.useCallback(
|
|
@@ -26,92 +41,121 @@ function _e(l, ge, ve = {}) {
|
|
|
26
41
|
), te = t.useCallback(
|
|
27
42
|
() => typeof o == "object" && o.boundaryElementRef && o.boundaryElementRef.current && o.boundaryElementRef.current.element ? o.boundaryElementRef.current.element : typeof o == "object" && o.boundaryElementRef && o.boundaryElementRef.current ? o.boundaryElementRef.current : null,
|
|
28
43
|
[o]
|
|
29
|
-
),
|
|
30
|
-
t.useImperativeHandle(
|
|
31
|
-
element
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
44
|
+
), g = t.useRef(null);
|
|
45
|
+
t.useImperativeHandle(g, () => ({
|
|
46
|
+
get element() {
|
|
47
|
+
return c();
|
|
48
|
+
},
|
|
49
|
+
get hint() {
|
|
50
|
+
return Oe();
|
|
51
|
+
},
|
|
52
|
+
onPress: Re,
|
|
53
|
+
onDragStart: xe,
|
|
54
|
+
onDrag: Pe,
|
|
55
|
+
onDragEnd: Ie,
|
|
56
|
+
onRelease: we,
|
|
38
57
|
data: l.current
|
|
39
58
|
}));
|
|
40
|
-
const
|
|
59
|
+
const S = t.useCallback(() => {
|
|
41
60
|
const e = c();
|
|
42
61
|
return e && e.ownerDocument || document;
|
|
43
62
|
}, [c]), d = t.useCallback(() => {
|
|
44
|
-
const e =
|
|
63
|
+
const e = S();
|
|
45
64
|
return e && e.defaultView || window;
|
|
46
|
-
}, [
|
|
65
|
+
}, [S]), ne = t.useCallback(
|
|
47
66
|
() => ({
|
|
48
|
-
drag
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
67
|
+
get drag() {
|
|
68
|
+
return R ? R.current : null;
|
|
69
|
+
},
|
|
70
|
+
get drop() {
|
|
71
|
+
return O ? O.current : null;
|
|
72
|
+
},
|
|
73
|
+
get drags() {
|
|
74
|
+
return (b != null ? b : []).map((e) => e.current);
|
|
75
|
+
},
|
|
76
|
+
get drops() {
|
|
77
|
+
return (p != null ? p : []).map((e) => e.current);
|
|
78
|
+
},
|
|
79
|
+
pressed: !!f,
|
|
80
|
+
ignoreMouse: D.current,
|
|
81
|
+
scrollOffset: T.current,
|
|
82
|
+
offset: P.current,
|
|
83
|
+
pageOffset: I.current,
|
|
84
|
+
initialScrollOffset: A.current,
|
|
85
|
+
clientOffset: C.current,
|
|
86
|
+
initialClientOffset: M.current,
|
|
87
|
+
velocity: m.current,
|
|
61
88
|
autoScroll: !!(typeof o == "object" ? o.enabled !== !1 : o),
|
|
62
89
|
scrollableParent: te(),
|
|
63
90
|
autoScrollDirection: typeof o == "object" ? o.direction : { horizontal: !0, vertical: !0 },
|
|
64
|
-
isScrolling:
|
|
91
|
+
isScrolling: v
|
|
65
92
|
}),
|
|
66
|
-
[
|
|
93
|
+
[
|
|
94
|
+
R,
|
|
95
|
+
O,
|
|
96
|
+
b,
|
|
97
|
+
p,
|
|
98
|
+
f,
|
|
99
|
+
D,
|
|
100
|
+
T,
|
|
101
|
+
P,
|
|
102
|
+
I,
|
|
103
|
+
A,
|
|
104
|
+
C,
|
|
105
|
+
M,
|
|
106
|
+
m,
|
|
107
|
+
o,
|
|
108
|
+
v,
|
|
109
|
+
te
|
|
110
|
+
]
|
|
67
111
|
), re = t.useCallback((e) => {
|
|
68
|
-
pe(e);
|
|
69
|
-
}, []), oe = t.useCallback((e) => {
|
|
70
112
|
be(e);
|
|
113
|
+
}, []), oe = t.useCallback((e) => {
|
|
114
|
+
Ee(e);
|
|
71
115
|
}, []), se = t.useCallback((e) => {
|
|
72
|
-
|
|
116
|
+
m.current = e;
|
|
73
117
|
}, []), le = t.useCallback((e) => {
|
|
74
|
-
|
|
118
|
+
P.current = e;
|
|
75
119
|
}, []), ce = t.useCallback((e) => {
|
|
76
|
-
|
|
120
|
+
C.current = e;
|
|
77
121
|
}, []), ae = t.useCallback((e) => {
|
|
78
|
-
|
|
122
|
+
I.current = e;
|
|
79
123
|
}, []), ue = t.useCallback((e) => {
|
|
80
|
-
|
|
124
|
+
M.current = e;
|
|
81
125
|
}, []), ie = t.useCallback((e) => {
|
|
82
|
-
|
|
126
|
+
T.current = e;
|
|
83
127
|
}, []), fe = t.useCallback((e) => {
|
|
84
|
-
|
|
85
|
-
}, []),
|
|
128
|
+
A.current = e;
|
|
129
|
+
}, []), Re = t.useCallback(
|
|
86
130
|
(e) => {
|
|
87
|
-
|
|
131
|
+
$(e);
|
|
88
132
|
},
|
|
89
|
-
[
|
|
90
|
-
),
|
|
133
|
+
[$]
|
|
134
|
+
), we = t.useCallback(
|
|
91
135
|
(e) => {
|
|
92
|
-
|
|
136
|
+
J(e);
|
|
93
137
|
},
|
|
94
|
-
[
|
|
95
|
-
),
|
|
138
|
+
[J]
|
|
139
|
+
), xe = t.useCallback(
|
|
96
140
|
(e) => {
|
|
97
|
-
g
|
|
141
|
+
y(g, { target: l.current, event: e }), K(e);
|
|
98
142
|
},
|
|
99
|
-
[
|
|
100
|
-
),
|
|
143
|
+
[y, l, K]
|
|
144
|
+
), Pe = t.useCallback(
|
|
101
145
|
(e) => {
|
|
102
|
-
|
|
146
|
+
Q(e);
|
|
103
147
|
},
|
|
104
|
-
[
|
|
105
|
-
),
|
|
148
|
+
[Q]
|
|
149
|
+
), Ie = t.useCallback(
|
|
106
150
|
(e) => {
|
|
107
|
-
|
|
151
|
+
x.current || (y(null, { target: l.current, event: e }), X(e));
|
|
108
152
|
},
|
|
109
|
-
[
|
|
153
|
+
[X, y, l]
|
|
110
154
|
), n = t.useCallback(
|
|
111
155
|
(e) => {
|
|
112
|
-
|
|
156
|
+
Te(
|
|
113
157
|
ne(),
|
|
114
|
-
{ event: e, payload:
|
|
158
|
+
{ event: e, payload: g.current },
|
|
115
159
|
{
|
|
116
160
|
onVelocityChange: se,
|
|
117
161
|
onOffsetChange: le,
|
|
@@ -137,68 +181,68 @@ function _e(l, ge, ve = {}) {
|
|
|
137
181
|
ie,
|
|
138
182
|
oe
|
|
139
183
|
]
|
|
140
|
-
),
|
|
184
|
+
), j = t.useCallback(
|
|
141
185
|
(e) => {
|
|
142
186
|
n(e);
|
|
143
187
|
},
|
|
144
188
|
[n]
|
|
145
|
-
),
|
|
189
|
+
), U = t.useCallback(
|
|
146
190
|
(e) => {
|
|
147
191
|
n(e);
|
|
148
192
|
},
|
|
149
193
|
[n]
|
|
150
|
-
),
|
|
194
|
+
), B = t.useCallback(
|
|
151
195
|
(e) => {
|
|
152
196
|
n(e);
|
|
153
197
|
},
|
|
154
198
|
[n]
|
|
155
|
-
),
|
|
199
|
+
), V = t.useCallback(
|
|
156
200
|
(e) => {
|
|
157
201
|
n(e);
|
|
158
202
|
},
|
|
159
203
|
[n]
|
|
160
|
-
),
|
|
204
|
+
), H = t.useCallback(
|
|
161
205
|
(e) => {
|
|
162
206
|
n(e);
|
|
163
207
|
},
|
|
164
208
|
[n]
|
|
165
|
-
),
|
|
209
|
+
), W = t.useCallback(
|
|
166
210
|
(e) => {
|
|
167
211
|
n(e);
|
|
168
212
|
},
|
|
169
213
|
[n]
|
|
170
|
-
),
|
|
214
|
+
), _ = t.useCallback(
|
|
171
215
|
(e) => {
|
|
172
216
|
n(e);
|
|
173
217
|
},
|
|
174
218
|
[n]
|
|
175
|
-
),
|
|
219
|
+
), q = t.useCallback(
|
|
176
220
|
(e) => {
|
|
177
221
|
e.preventDefault(), n(e);
|
|
178
222
|
},
|
|
179
223
|
[n]
|
|
180
|
-
),
|
|
224
|
+
), z = t.useCallback(
|
|
181
225
|
(e) => {
|
|
182
226
|
e.preventDefault(), n(e);
|
|
183
227
|
},
|
|
184
228
|
[n]
|
|
185
|
-
),
|
|
229
|
+
), F = t.useCallback(
|
|
186
230
|
(e) => {
|
|
187
231
|
e.preventDefault(), n(e);
|
|
188
232
|
},
|
|
189
233
|
[n]
|
|
190
|
-
),
|
|
234
|
+
), G = t.useCallback(
|
|
191
235
|
(e) => {
|
|
192
236
|
if (e.touches.length === 0 && e.changedTouches.length === 1) {
|
|
193
237
|
const r = d();
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
},
|
|
238
|
+
D.current = !0, Y.current = r.setTimeout(() => {
|
|
239
|
+
D.current = !1;
|
|
240
|
+
}, Be);
|
|
197
241
|
}
|
|
198
242
|
n(e);
|
|
199
243
|
},
|
|
200
244
|
[n, d]
|
|
201
|
-
),
|
|
245
|
+
), N = t.useCallback(
|
|
202
246
|
(e) => {
|
|
203
247
|
n(e);
|
|
204
248
|
},
|
|
@@ -211,50 +255,50 @@ function _e(l, ge, ve = {}) {
|
|
|
211
255
|
e.style.touchAction = r;
|
|
212
256
|
};
|
|
213
257
|
}
|
|
214
|
-
}, [c]), me = t.useCallback(() => (
|
|
215
|
-
|
|
216
|
-
}), [
|
|
217
|
-
const e = d(), r = c(), s =
|
|
218
|
-
return Z ? (r && (
|
|
219
|
-
|
|
258
|
+
}, [c]), me = t.useCallback(() => (E == null || E(g), () => {
|
|
259
|
+
k == null || k(g);
|
|
260
|
+
}), [k, E]), Me = () => {
|
|
261
|
+
const e = d(), r = c(), s = S();
|
|
262
|
+
return Z ? (r && (h.current = he(r), h.current && h.current.addEventListener("scroll", N, { passive: !0 }), r.addEventListener("pointerdown", j, { passive: !0 })), f && (s.addEventListener("pointermove", U), s.addEventListener("pointerup", V, !0), s.addEventListener("contextmenu", q), s.addEventListener("pointercancel", B, { passive: !0 }))) : (e.addEventListener("touchmove", i, { capture: !1, passive: !1 }), r && (r.addEventListener("mousedown", H, { passive: !0 }), L || (r.addEventListener("touchstart", z, { passive: !0 }), f && (r.addEventListener("touchmove", F, { passive: !0 }), r.addEventListener("touchend", G, { passive: !0 })))), f && (s.addEventListener("mousemove", W, { passive: !0 }), s.addEventListener("mouseup", _, { passive: !0 }))), () => {
|
|
263
|
+
h.current && h.current.removeEventListener("scroll", N), r && (r.removeEventListener("pointerdown", j), r.removeEventListener("mousedown", H), r.removeEventListener("touchstart", z), r.removeEventListener("touchmove", F), r.removeEventListener("touchend", G)), s.removeEventListener("pointermove", U), s.removeEventListener("pointerup", V, !0), s.removeEventListener("contextmenu", q), s.removeEventListener("pointercancel", B), s.removeEventListener("mousemove", W), s.removeEventListener("mouseup", _), e.removeEventListener("touchmove", i), e.clearTimeout(Y.current);
|
|
220
264
|
};
|
|
221
265
|
};
|
|
222
266
|
t.useEffect(() => {
|
|
223
267
|
const e = d();
|
|
224
|
-
if (
|
|
268
|
+
if (v) {
|
|
225
269
|
const r = ee() || he(
|
|
226
|
-
document.elementFromPoint(
|
|
270
|
+
document.elementFromPoint(C.current.x, C.current.y)
|
|
227
271
|
);
|
|
228
|
-
e.clearInterval(
|
|
229
|
-
|
|
272
|
+
e.clearInterval(w.current), w.current = e.setInterval(() => {
|
|
273
|
+
Ae(r, { x: m.current.x, y: m.current.y });
|
|
230
274
|
}, 50);
|
|
231
275
|
}
|
|
232
276
|
return () => {
|
|
233
|
-
e.clearInterval(
|
|
277
|
+
e.clearInterval(w.current);
|
|
234
278
|
};
|
|
235
|
-
}, [c, ee, d,
|
|
279
|
+
}, [c, ee, d, v]), t.useEffect(de, [de]), t.useEffect(Me, [
|
|
236
280
|
f,
|
|
237
281
|
d,
|
|
238
282
|
c,
|
|
239
|
-
|
|
240
|
-
|
|
283
|
+
S,
|
|
284
|
+
L,
|
|
241
285
|
Z,
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
O,
|
|
248
|
-
R,
|
|
249
|
-
x,
|
|
250
|
-
U,
|
|
286
|
+
q,
|
|
287
|
+
H,
|
|
288
|
+
W,
|
|
289
|
+
_,
|
|
290
|
+
B,
|
|
251
291
|
j,
|
|
252
|
-
|
|
253
|
-
V
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
292
|
+
U,
|
|
293
|
+
V,
|
|
294
|
+
G,
|
|
295
|
+
F,
|
|
296
|
+
z,
|
|
297
|
+
N
|
|
298
|
+
]), t.useEffect(() => (x.current = !1, () => {
|
|
299
|
+
x.current = !0;
|
|
300
|
+
}), []), Ue(me, [me]);
|
|
257
301
|
}
|
|
258
302
|
export {
|
|
259
|
-
|
|
303
|
+
ze as useDraggable
|
|
260
304
|
};
|
package/hooks/useDroppable.js
CHANGED
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
9
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),o=require("../noop.js"),E=require("./useInheritedState.js"),L=require("../drag-n-drop/context/index.js"),S=require("./use-isomorphic-layout-effect.js");function f(e){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const u=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(c,r,u.get?u:{enumerable:!0,get:()=>e[r]})}}return c.default=e,Object.freeze(c)}const n=f(y);function j(e,c={onDragEnter:o.noop,onDragOver:o.noop,onDragLeave:o.noop,onDrop:o.noop},r={}){const{onDragEnter:u=o.noop,onDragOver:g=o.noop,onDragLeave:D=o.noop,onDrop:i=o.noop}=c,{context:d=L.DragAndDropContext}=r,{setDrop:m,registerDrop:s,deregisterDrop:l}=n.useContext(d),[,a]=E.useInheritedState([null,m]),O=n.useCallback(()=>e.current&&e.current.element?e.current.element:e.current,[e]),p=n.useRef(null);n.useImperativeHandle(p,()=>({element:O(),onDragEnter:C,onDragOver:h,onDragLeave:v,onDrop:k,data:e.current}));const C=n.useCallback(t=>{a(p,{target:e.current,event:t}),u(t)},[a,e,u]),h=n.useCallback(t=>{g(t)},[g]),v=n.useCallback(t=>{a(null,{target:e.current,event:t}),D(t)},[a,e,D]),k=n.useCallback(t=>{a(null,{target:e.current,event:t}),i(t)},[a,e,i]),b=n.useCallback(()=>(s==null||s(p),()=>{l==null||l(p)}),[l,s]);S.useIsomorphicLayoutEffect(b,[b])}exports.useDroppable=j;
|
package/hooks/useDroppable.mjs
CHANGED
|
@@ -6,54 +6,54 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
|
-
import * as
|
|
9
|
+
import * as n from "react";
|
|
10
10
|
import { noop as o } from "../noop.mjs";
|
|
11
|
-
import { useInheritedState as
|
|
12
|
-
import {
|
|
13
|
-
import { useIsomorphicLayoutEffect as
|
|
14
|
-
function
|
|
11
|
+
import { useInheritedState as x } from "./useInheritedState.mjs";
|
|
12
|
+
import { DragAndDropContext as L } from "../drag-n-drop/context/index.mjs";
|
|
13
|
+
import { useIsomorphicLayoutEffect as O } from "./use-isomorphic-layout-effect.mjs";
|
|
14
|
+
function H(t, m = {
|
|
15
15
|
onDragEnter: o,
|
|
16
16
|
onDragOver: o,
|
|
17
17
|
onDragLeave: o,
|
|
18
18
|
onDrop: o
|
|
19
|
-
}) {
|
|
20
|
-
const { onDragEnter: s = o, onDragOver:
|
|
21
|
-
() =>
|
|
22
|
-
[
|
|
23
|
-
),
|
|
24
|
-
|
|
25
|
-
element:
|
|
26
|
-
onDragEnter:
|
|
27
|
-
onDragOver:
|
|
28
|
-
onDragLeave:
|
|
29
|
-
onDrop:
|
|
30
|
-
data:
|
|
19
|
+
}, C = {}) {
|
|
20
|
+
const { onDragEnter: s = o, onDragOver: u = o, onDragLeave: D = o, onDrop: g = o } = m, { context: i = L } = C, { setDrop: b, registerDrop: a, deregisterDrop: c } = n.useContext(i), [, r] = x([null, b]), d = n.useCallback(
|
|
21
|
+
() => t.current && t.current.element ? t.current.element : t.current,
|
|
22
|
+
[t]
|
|
23
|
+
), l = n.useRef(null);
|
|
24
|
+
n.useImperativeHandle(l, () => ({
|
|
25
|
+
element: d(),
|
|
26
|
+
onDragEnter: h,
|
|
27
|
+
onDragOver: k,
|
|
28
|
+
onDragLeave: v,
|
|
29
|
+
onDrop: E,
|
|
30
|
+
data: t.current
|
|
31
31
|
}));
|
|
32
|
-
const
|
|
33
|
-
(
|
|
34
|
-
|
|
32
|
+
const h = n.useCallback(
|
|
33
|
+
(e) => {
|
|
34
|
+
r(l, { target: t.current, event: e }), s(e);
|
|
35
35
|
},
|
|
36
|
-
[
|
|
37
|
-
),
|
|
38
|
-
(
|
|
39
|
-
|
|
36
|
+
[r, t, s]
|
|
37
|
+
), k = n.useCallback(
|
|
38
|
+
(e) => {
|
|
39
|
+
u(e);
|
|
40
40
|
},
|
|
41
|
-
[
|
|
42
|
-
),
|
|
43
|
-
(
|
|
44
|
-
|
|
41
|
+
[u]
|
|
42
|
+
), v = n.useCallback(
|
|
43
|
+
(e) => {
|
|
44
|
+
r(null, { target: t.current, event: e }), D(e);
|
|
45
45
|
},
|
|
46
|
-
[
|
|
47
|
-
),
|
|
48
|
-
(
|
|
49
|
-
|
|
46
|
+
[r, t, D]
|
|
47
|
+
), E = n.useCallback(
|
|
48
|
+
(e) => {
|
|
49
|
+
r(null, { target: t.current, event: e }), g(e);
|
|
50
50
|
},
|
|
51
|
-
[
|
|
52
|
-
), p =
|
|
53
|
-
|
|
54
|
-
}), [
|
|
55
|
-
|
|
51
|
+
[r, t, g]
|
|
52
|
+
), p = n.useCallback(() => (a == null || a(l), () => {
|
|
53
|
+
c == null || c(l);
|
|
54
|
+
}), [c, a]);
|
|
55
|
+
O(p, [p]);
|
|
56
56
|
}
|
|
57
57
|
export {
|
|
58
|
-
|
|
58
|
+
H as useDroppable
|
|
59
59
|
};
|
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react");function
|
|
9
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react");function u(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const a=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(n,e,a.get?a:{enumerable:!0,get:()=>t[e]})}}return n.default=t,Object.freeze(n)}const s=u(l),i=(t,n)=>{const[e,a]=t,[c,r]=s.useState(n);return[e!==void 0?e:c,(...o)=>{e!==void 0?a(...o):r(o[0])}]};exports.useInheritedState=i;
|
|
@@ -6,11 +6,11 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
|
-
import * as
|
|
10
|
-
const d = (
|
|
11
|
-
const [e,
|
|
12
|
-
return [e !== void 0 ? e :
|
|
13
|
-
e !== void 0 ?
|
|
9
|
+
import * as u from "react";
|
|
10
|
+
const d = (a, o) => {
|
|
11
|
+
const [e, n] = a, [l, c] = u.useState(o);
|
|
12
|
+
return [e !== void 0 ? e : l, (...t) => {
|
|
13
|
+
e !== void 0 ? n(...t) : c(t[0]);
|
|
14
14
|
}];
|
|
15
15
|
};
|
|
16
16
|
export {
|