@progress/kendo-react-common
Version:
React Common package delivers common utilities that can be used with the KendoReact UI components. KendoReact Common Utilities package
305 lines (304 loc) • 8.77 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
"use client";
import * as t from "react";
import { dispatchDragAndDrop as Te, getScrollableParent as he, autoScroll as Ae } from "@progress/kendo-draggable-common";
import { noop as i } from "../noop.mjs";
import { useInheritedState as ve } from "./useInheritedState.mjs";
import { DragAndDropContext as je } from "../drag-n-drop/context/index.mjs";
import { useIsomorphicLayoutEffect as Ue } from "./use-isomorphic-layout-effect.mjs";
const Be = 2e3;
function ze(l, Ce, ge = {}) {
const { onPress: $ = i, onRelease: J = i, onDragStart: K = i, onDrag: Q = i, onDragEnd: X = i } = Ce, {
hint: a = null,
mouseOnly: L = !1,
autoScroll: o = !0,
scrollContainer: u = null,
context: pe = je
} = ge, [f, be] = t.useState(!1), [g, Ee] = t.useState(!1), {
drop: ke,
setDrop: ye,
drag: De,
setDrag: Se,
drops: p,
drags: b,
registerDrag: E,
deregisterDrag: k
} = t.useContext(pe), [O] = ve([ke, ye]), [R, y] = ve([De, Se]), m = t.useRef({ x: 0, y: 0 }), w = t.useRef(void 0), D = t.useRef(!1), Y = t.useRef(void 0), h = t.useRef(null), x = t.useRef(!1), P = t.useRef({ x: 0, y: 0 }), I = t.useRef({ x: 0, y: 0 }), v = 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(
() => l.current && l.current.element ? l.current.element : l.current,
[l]
), Oe = t.useCallback(
() => a && a.current && a.current.element ? a.current.element : a ? a.current : null,
[a]
), ee = t.useCallback(
() => u && u.current && u.current.element ? u.current.element : u ? u.current : null,
[u]
), te = t.useCallback(
() => 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,
[o]
), C = t.useRef(null);
t.useImperativeHandle(C, () => ({
get element() {
return c();
},
get hint() {
return Oe();
},
onPress: Re,
onDragStart: xe,
onDrag: Pe,
onDragEnd: Ie,
onRelease: we,
data: l.current
}));
const S = t.useCallback(() => {
const e = c();
return e && e.ownerDocument || document;
}, [c]), d = t.useCallback(() => {
const e = S();
return e && e.defaultView || window;
}, [S]), ne = t.useCallback(
() => ({
get drag() {
return R ? R.current : null;
},
get drop() {
return O ? O.current : null;
},
get drags() {
return (b != null ? b : []).map((e) => e.current);
},
get drops() {
return (p != null ? p : []).map((e) => e.current);
},
pressed: !!f,
ignoreMouse: D.current,
scrollOffset: T.current,
offset: P.current,
pageOffset: I.current,
initialScrollOffset: A.current,
clientOffset: v.current,
initialClientOffset: M.current,
velocity: m.current,
autoScroll: !!(typeof o == "object" ? o.enabled !== !1 : o),
scrollableParent: te(),
autoScrollDirection: typeof o == "object" ? o.direction : { horizontal: !0, vertical: !0 },
isScrolling: g
}),
[
R,
O,
b,
p,
f,
D,
T,
P,
I,
A,
v,
M,
m,
o,
g,
te
]
), re = t.useCallback((e) => {
be(e);
}, []), oe = t.useCallback((e) => {
Ee(e);
}, []), se = t.useCallback((e) => {
m.current = e;
}, []), le = t.useCallback((e) => {
P.current = e;
}, []), ce = t.useCallback((e) => {
v.current = e;
}, []), ae = t.useCallback((e) => {
I.current = e;
}, []), ue = t.useCallback((e) => {
M.current = e;
}, []), ie = t.useCallback((e) => {
T.current = e;
}, []), fe = t.useCallback((e) => {
A.current = e;
}, []), Re = t.useCallback(
(e) => {
$(e);
},
[$]
), we = t.useCallback(
(e) => {
J(e);
},
[J]
), xe = t.useCallback(
(e) => {
y(C, { target: l.current, event: e }), K(e);
},
[y, l, K]
), Pe = t.useCallback(
(e) => {
Q(e);
},
[Q]
), Ie = t.useCallback(
(e) => {
x.current || (y(null, { target: l.current, event: e }), X(e));
},
[X, y, l]
), n = t.useCallback(
(e) => {
Te(
ne(),
{ event: e, payload: C.current },
{
onVelocityChange: se,
onOffsetChange: le,
onClientOffsetChange: ce,
onPageOffsetChange: ae,
onInitialClientOffsetChange: ue,
onScrollOffsetChange: ie,
onInitialScrollOffsetChange: fe,
onIsPressedChange: re,
onIsScrollingChange: oe
}
);
},
[
ne,
se,
le,
ae,
ce,
ue,
fe,
re,
ie,
oe
]
), j = t.useCallback(
(e) => {
n(e);
},
[n]
), U = t.useCallback(
(e) => {
n(e);
},
[n]
), B = t.useCallback(
(e) => {
n(e);
},
[n]
), V = t.useCallback(
(e) => {
n(e);
},
[n]
), H = t.useCallback(
(e) => {
n(e);
},
[n]
), W = t.useCallback(
(e) => {
n(e);
},
[n]
), _ = t.useCallback(
(e) => {
n(e);
},
[n]
), q = t.useCallback(
(e) => {
e.preventDefault(), n(e);
},
[n]
), z = t.useCallback(
(e) => {
e.preventDefault(), n(e);
},
[n]
), F = t.useCallback(
(e) => {
e.preventDefault(), n(e);
},
[n]
), G = t.useCallback(
(e) => {
if (e.touches.length === 0 && e.changedTouches.length === 1) {
const r = d();
D.current = !0, Y.current = r.setTimeout(() => {
D.current = !1;
}, Be);
}
n(e);
},
[n, d]
), N = t.useCallback(
(e) => {
n(e);
},
[n]
), de = t.useCallback(() => {
const e = c();
if (e) {
const r = e.style.touchAction;
return e.style.touchAction = "none", () => {
e.style.touchAction = r;
};
}
}, [c]), me = t.useCallback(() => (E == null || E(C), () => {
k == null || k(C);
}), [k, E]), Me = () => {
const e = d(), r = c(), s = S();
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 }))), () => {
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);
};
};
t.useEffect(() => {
const e = d();
if (g) {
const r = ee() || he(
document.elementFromPoint(v.current.x, v.current.y)
);
e.clearInterval(w.current), w.current = e.setInterval(() => {
Ae(r, { x: m.current.x, y: m.current.y });
}, 50);
}
return () => {
e.clearInterval(w.current);
};
}, [c, ee, d, g]), t.useEffect(de, [de]), t.useEffect(Me, [
f,
d,
c,
S,
L,
Z,
q,
H,
W,
_,
B,
j,
U,
V,
G,
F,
z,
N
]), t.useEffect(() => (x.current = !1, () => {
x.current = !0;
}), []), Ue(me, [me]);
}
export {
ze as useDraggable
};