@kwiz/fluentui 1.0.213 → 1.0.215
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/helpers/index.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ export * from './hooks-events';
|
|
|
6
6
|
export * from './use-alerts';
|
|
7
7
|
export * from './use-auto-focus-ex';
|
|
8
8
|
export * from './use-controlled-state-tracker';
|
|
9
|
+
export * from './use-draggable';
|
|
9
10
|
export * from './use-highlight';
|
|
10
11
|
export * from './use-is-concurrenct';
|
|
11
12
|
export * from './use-reload-tracker';
|
package/dist/helpers/index.js
CHANGED
|
@@ -6,6 +6,7 @@ export * from './hooks-events';
|
|
|
6
6
|
export * from './use-alerts';
|
|
7
7
|
export * from './use-auto-focus-ex';
|
|
8
8
|
export * from './use-controlled-state-tracker';
|
|
9
|
+
export * from './use-draggable';
|
|
9
10
|
export * from './use-highlight';
|
|
10
11
|
export * from './use-is-concurrenct';
|
|
11
12
|
export * from './use-reload-tracker';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/** makes a position absolute or fixed element draggable. pass in a ref to reuse an existing one,
|
|
2
|
+
* or a new ref is created and returned */
|
|
3
|
+
export declare function useDraggable<T extends HTMLElement>(options?: {
|
|
4
|
+
/** which vertical edge the position is anchored to while dragging. default: top */
|
|
5
|
+
vertical?: "top" | "bottom";
|
|
6
|
+
/** which horizontal edge the position is anchored to while dragging. default: left */
|
|
7
|
+
horizontal?: "left" | "right";
|
|
8
|
+
elementRef?: React.RefObject<T | null>;
|
|
9
|
+
}): {
|
|
10
|
+
ref: import("react").RefObject<T>;
|
|
11
|
+
style: import("react").CSSProperties;
|
|
12
|
+
onPointerDown: (e: React.PointerEvent) => void;
|
|
13
|
+
reposition: () => void;
|
|
14
|
+
/** class name to put on the elements that drag the element (together with onPointerDown) */
|
|
15
|
+
draggableCSS: string;
|
|
16
|
+
/** wrap your onclick to prevent click trigger while being dragged */
|
|
17
|
+
withClickGuard: <A extends unknown[]>(onClick: (...args: A) => void) => (...args: A) => void;
|
|
18
|
+
};
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { makeStyles } from "@fluentui/react-components";
|
|
2
|
+
import { useCallback, useEffect, useRef, useState } from "react";
|
|
3
|
+
const useDraggableStyles = makeStyles({
|
|
4
|
+
draggable: {
|
|
5
|
+
cursor: "grab",
|
|
6
|
+
touchAction: "none",
|
|
7
|
+
userSelect: "none"
|
|
8
|
+
}
|
|
9
|
+
});
|
|
10
|
+
/** makes a position absolute or fixed element draggable. pass in a ref to reuse an existing one,
|
|
11
|
+
* or a new ref is created and returned */
|
|
12
|
+
export function useDraggable(options) {
|
|
13
|
+
const { vertical = "top", horizontal = "left", elementRef } = options !== null && options !== void 0 ? options : {};
|
|
14
|
+
const ownRef = useRef(null);
|
|
15
|
+
const ref = elementRef !== null && elementRef !== void 0 ? elementRef : ownRef;
|
|
16
|
+
//offset between the pointer and the element's anchored corner at drag start; null while not dragging
|
|
17
|
+
const dragOffset = useRef(null);
|
|
18
|
+
//pointer position at drag start, used to tell a click from a drag
|
|
19
|
+
const dragStart = useRef(null);
|
|
20
|
+
const wasDragged = useRef(false);
|
|
21
|
+
//distance from the anchored horizontal and vertical edges of the viewport
|
|
22
|
+
const [pos, setPos] = useState(null);
|
|
23
|
+
const onPointerMove = useCallback((e) => {
|
|
24
|
+
if (!dragOffset.current || !ref.current)
|
|
25
|
+
return;
|
|
26
|
+
if (dragStart.current && Math.hypot(e.clientX - dragStart.current.x, e.clientY - dragStart.current.y) > 4)
|
|
27
|
+
wasDragged.current = true;
|
|
28
|
+
const rect = ref.current.getBoundingClientRect();
|
|
29
|
+
const rawX = horizontal === "left" ? e.clientX - dragOffset.current.x : window.innerWidth - e.clientX - dragOffset.current.x;
|
|
30
|
+
const rawY = vertical === "top" ? e.clientY - dragOffset.current.y : window.innerHeight - e.clientY - dragOffset.current.y;
|
|
31
|
+
const x = Math.min(Math.max(0, rawX), window.innerWidth - rect.width);
|
|
32
|
+
const y = Math.min(Math.max(0, rawY), window.innerHeight - rect.height);
|
|
33
|
+
setPos({ x, y });
|
|
34
|
+
}, [ref, vertical, horizontal]);
|
|
35
|
+
/** keeps the element within the window bounds, call after its size changed */
|
|
36
|
+
const reposition = useCallback(() => {
|
|
37
|
+
if (!ref.current)
|
|
38
|
+
return;
|
|
39
|
+
const rect = ref.current.getBoundingClientRect();
|
|
40
|
+
const curX = horizontal === "left" ? rect.left : window.innerWidth - rect.right;
|
|
41
|
+
const curY = vertical === "top" ? rect.top : window.innerHeight - rect.bottom;
|
|
42
|
+
const x = Math.min(Math.max(0, curX), Math.max(0, window.innerWidth - rect.width));
|
|
43
|
+
const y = Math.min(Math.max(0, curY), Math.max(0, window.innerHeight - rect.height));
|
|
44
|
+
if (x !== curX || y !== curY)
|
|
45
|
+
setPos({ x, y });
|
|
46
|
+
}, [ref, vertical, horizontal]);
|
|
47
|
+
const onPointerUp = useCallback(() => {
|
|
48
|
+
dragOffset.current = null;
|
|
49
|
+
window.removeEventListener("pointermove", onPointerMove);
|
|
50
|
+
window.removeEventListener("pointerup", onPointerUp);
|
|
51
|
+
}, [onPointerMove]);
|
|
52
|
+
const onPointerDown = useCallback((e) => {
|
|
53
|
+
var _a;
|
|
54
|
+
const rect = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
55
|
+
if (!rect)
|
|
56
|
+
return;
|
|
57
|
+
wasDragged.current = false;
|
|
58
|
+
dragStart.current = { x: e.clientX, y: e.clientY };
|
|
59
|
+
dragOffset.current = {
|
|
60
|
+
x: horizontal === "left" ? e.clientX - rect.left : rect.right - e.clientX,
|
|
61
|
+
y: vertical === "top" ? e.clientY - rect.top : rect.bottom - e.clientY
|
|
62
|
+
};
|
|
63
|
+
window.addEventListener("pointermove", onPointerMove);
|
|
64
|
+
window.addEventListener("pointerup", onPointerUp);
|
|
65
|
+
}, [ref, vertical, horizontal, onPointerMove, onPointerUp]);
|
|
66
|
+
//stop dragging if the component unmounts mid-drag
|
|
67
|
+
useEffect(() => () => {
|
|
68
|
+
window.removeEventListener("pointermove", onPointerMove);
|
|
69
|
+
window.removeEventListener("pointerup", onPointerUp);
|
|
70
|
+
}, [onPointerMove, onPointerUp]);
|
|
71
|
+
//wraps a click handler so it's skipped when the click follows a drag rather than a plain click
|
|
72
|
+
const withClickGuard = useCallback((onClick) => (...args) => {
|
|
73
|
+
if (wasDragged.current) {
|
|
74
|
+
wasDragged.current = false;
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
77
|
+
onClick(...args);
|
|
78
|
+
}, []);
|
|
79
|
+
const style = pos ? {
|
|
80
|
+
top: vertical === "top" ? pos.y : "auto",
|
|
81
|
+
bottom: vertical === "bottom" ? pos.y : "auto",
|
|
82
|
+
left: horizontal === "left" ? pos.x : "auto",
|
|
83
|
+
right: horizontal === "right" ? pos.x : "auto"
|
|
84
|
+
} : undefined;
|
|
85
|
+
const draggableCSS = useDraggableStyles().draggable;
|
|
86
|
+
return {
|
|
87
|
+
ref, style, onPointerDown, reposition,
|
|
88
|
+
/** class name to put on the elements that drag the element (together with onPointerDown) */
|
|
89
|
+
draggableCSS,
|
|
90
|
+
/** wrap your onclick to prevent click trigger while being dragged */
|
|
91
|
+
withClickGuard
|
|
92
|
+
};
|
|
93
|
+
}
|
|
94
|
+
//# sourceMappingURL=use-draggable.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-draggable.js","sourceRoot":"","sources":["../../src/helpers/use-draggable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjE,MAAM,kBAAkB,GAAG,UAAU,CAAC;IAClC,SAAS,EAAE;QACP,MAAM,EAAE,MAAM;QACd,WAAW,EAAE,MAAM;QACnB,UAAU,EAAE,MAAM;KACrB;CACJ,CAAC,CAAC;AAEH;0CAC0C;AAC1C,MAAM,UAAU,YAAY,CAAwB,OAMnD;IACG,MAAM,EAAE,QAAQ,GAAG,KAAK,EAAE,UAAU,GAAG,MAAM,EAAE,UAAU,EAAE,GAAG,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,CAAC;IAC5E,MAAM,MAAM,GAAG,MAAM,CAAI,IAAI,CAAC,CAAC;IAC/B,MAAM,GAAG,GAAG,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,MAAM,CAAC;IACjC,qGAAqG;IACrG,MAAM,UAAU,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IAC1D,kEAAkE;IAClE,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACjC,0EAA0E;IAC1E,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAA2B,IAAI,CAAC,CAAC;IAE/D,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,CAAe,EAAE,EAAE;QAClD,IAAI,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO;YAAE,OAAO;QAChD,IAAI,SAAS,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC;YACrG,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;QAC9B,MAAM,IAAI,GAAG,GAAG,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;QACjD,MAAM,IAAI,GAAG,UAAU,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,GAAG,CAAC,CAAC,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;QAC7H,MAAM,IAAI,GAAG,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,GAAG,CAAC,CAAC,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;QAC3H,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;QACtE,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;QACxE,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;IACrB,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC;IAEhC,8EAA8E;IAC9E,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,IAAI,CAAC,GAAG,CAAC,OAAO;YAAE,OAAO;QACzB,MAAM,IAAI,GAAG,GAAG,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;QACjD,MAAM,IAAI,GAAG,UAAU,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;QAChF,MAAM,IAAI,GAAG,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC;QAC9E,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QACnF,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;QACrF,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,IAAI;YAAE,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;IACnD,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC;IAEhC,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;QAC1B,MAAM,CAAC,mBAAmB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;QACzD,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IACzD,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,CAAqB,EAAE,EAAE;;QACxD,MAAM,IAAI,GAAG,MAAA,GAAG,CAAC,OAAO,0CAAE,qBAAqB,EAAE,CAAC;QAClD,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC;QAC3B,SAAS,CAAC,OAAO,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC;QACnD,UAAU,CAAC,OAAO,GAAG;YACjB,CAAC,EAAE,UAAU,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,OAAO;YACzE,CAAC,EAAE,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,OAAO;SACzE,CAAC;QACF,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;QACtD,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IACtD,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,CAAC,CAAC,CAAC;IAE5D,kDAAkD;IAClD,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE;QACjB,MAAM,CAAC,mBAAmB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;QACzD,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IACzD,CAAC,EAAE,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC,CAAC;IAEjC,+FAA+F;IAC/F,MAAM,cAAc,GAAG,WAAW,CAAC,CAAsB,OAA6B,EAAE,EAAE,CAAC,CAAC,GAAG,IAAO,EAAE,EAAE;QACtG,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YACrB,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC;YAC3B,OAAO;QACX,CAAC;QACD,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,KAAK,GAAwB,GAAG,CAAC,CAAC,CAAC;QACrC,GAAG,EAAE,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM;QACxC,MAAM,EAAE,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM;QAC9C,IAAI,EAAE,UAAU,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM;QAC5C,KAAK,EAAE,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM;KACjD,CAAC,CAAC,CAAC,SAAS,CAAC;IACd,MAAM,YAAY,GAAG,kBAAkB,EAAE,CAAC,SAAS,CAAC;IACpD,OAAO;QACH,GAAG,EAAE,KAAK,EAAE,aAAa,EAAE,UAAU;QACrC,4FAA4F;QAC5F,YAAY;QACZ,qEAAqE;QACrE,cAAc;KACjB,CAAC;AACN,CAAC"}
|