@usels/core 0.0.1
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/README.md +21 -0
- package/dist/browser/useEventListener/index.d.mts +56 -0
- package/dist/browser/useEventListener/index.d.ts +56 -0
- package/dist/browser/useEventListener/index.js +112 -0
- package/dist/browser/useEventListener/index.js.map +1 -0
- package/dist/browser/useEventListener/index.mjs +88 -0
- package/dist/browser/useEventListener/index.mjs.map +1 -0
- package/dist/browser/useMediaQuery/demo.d.mts +5 -0
- package/dist/browser/useMediaQuery/demo.d.ts +5 -0
- package/dist/browser/useMediaQuery/demo.js +83 -0
- package/dist/browser/useMediaQuery/demo.js.map +1 -0
- package/dist/browser/useMediaQuery/demo.mjs +63 -0
- package/dist/browser/useMediaQuery/demo.mjs.map +1 -0
- package/dist/browser/useMediaQuery/index.d.mts +11 -0
- package/dist/browser/useMediaQuery/index.d.ts +11 -0
- package/dist/browser/useMediaQuery/index.js +89 -0
- package/dist/browser/useMediaQuery/index.js.map +1 -0
- package/dist/browser/useMediaQuery/index.mjs +64 -0
- package/dist/browser/useMediaQuery/index.mjs.map +1 -0
- package/dist/components/Auto/index.d.mts +33 -0
- package/dist/components/Auto/index.d.ts +33 -0
- package/dist/components/Auto/index.js +66 -0
- package/dist/components/Auto/index.js.map +1 -0
- package/dist/components/Auto/index.mjs +34 -0
- package/dist/components/Auto/index.mjs.map +1 -0
- package/dist/elements/useDocumentVisibility/demo.d.mts +5 -0
- package/dist/elements/useDocumentVisibility/demo.d.ts +5 -0
- package/dist/elements/useDocumentVisibility/demo.js +130 -0
- package/dist/elements/useDocumentVisibility/demo.js.map +1 -0
- package/dist/elements/useDocumentVisibility/demo.mjs +114 -0
- package/dist/elements/useDocumentVisibility/demo.mjs.map +1 -0
- package/dist/elements/useDocumentVisibility/index.d.mts +5 -0
- package/dist/elements/useDocumentVisibility/index.d.ts +5 -0
- package/dist/elements/useDocumentVisibility/index.js +45 -0
- package/dist/elements/useDocumentVisibility/index.js.map +1 -0
- package/dist/elements/useDocumentVisibility/index.mjs +21 -0
- package/dist/elements/useDocumentVisibility/index.mjs.map +1 -0
- package/dist/elements/useElementBounding/demo.d.mts +5 -0
- package/dist/elements/useElementBounding/demo.d.ts +5 -0
- package/dist/elements/useElementBounding/demo.js +87 -0
- package/dist/elements/useElementBounding/demo.js.map +1 -0
- package/dist/elements/useElementBounding/demo.mjs +67 -0
- package/dist/elements/useElementBounding/demo.mjs.map +1 -0
- package/dist/elements/useElementBounding/index.d.mts +46 -0
- package/dist/elements/useElementBounding/index.d.ts +46 -0
- package/dist/elements/useElementBounding/index.js +122 -0
- package/dist/elements/useElementBounding/index.js.map +1 -0
- package/dist/elements/useElementBounding/index.mjs +98 -0
- package/dist/elements/useElementBounding/index.mjs.map +1 -0
- package/dist/elements/useElementSize/demo.d.mts +5 -0
- package/dist/elements/useElementSize/demo.d.ts +5 -0
- package/dist/elements/useElementSize/demo.js +83 -0
- package/dist/elements/useElementSize/demo.js.map +1 -0
- package/dist/elements/useElementSize/demo.mjs +63 -0
- package/dist/elements/useElementSize/demo.mjs.map +1 -0
- package/dist/elements/useElementSize/index.d.mts +34 -0
- package/dist/elements/useElementSize/index.d.ts +34 -0
- package/dist/elements/useElementSize/index.js +85 -0
- package/dist/elements/useElementSize/index.js.map +1 -0
- package/dist/elements/useElementSize/index.mjs +61 -0
- package/dist/elements/useElementSize/index.mjs.map +1 -0
- package/dist/elements/useElementVisibility/demo.d.mts +5 -0
- package/dist/elements/useElementVisibility/demo.d.ts +5 -0
- package/dist/elements/useElementVisibility/demo.js +110 -0
- package/dist/elements/useElementVisibility/demo.js.map +1 -0
- package/dist/elements/useElementVisibility/demo.mjs +90 -0
- package/dist/elements/useElementVisibility/demo.mjs.map +1 -0
- package/dist/elements/useElementVisibility/index.d.mts +43 -0
- package/dist/elements/useElementVisibility/index.d.ts +43 -0
- package/dist/elements/useElementVisibility/index.js +58 -0
- package/dist/elements/useElementVisibility/index.js.map +1 -0
- package/dist/elements/useElementVisibility/index.mjs +34 -0
- package/dist/elements/useElementVisibility/index.mjs.map +1 -0
- package/dist/elements/useIntersectionObserver/demo.d.mts +5 -0
- package/dist/elements/useIntersectionObserver/demo.d.ts +5 -0
- package/dist/elements/useIntersectionObserver/demo.js +173 -0
- package/dist/elements/useIntersectionObserver/demo.js.map +1 -0
- package/dist/elements/useIntersectionObserver/demo.mjs +153 -0
- package/dist/elements/useIntersectionObserver/demo.mjs.map +1 -0
- package/dist/elements/useIntersectionObserver/index.d.mts +47 -0
- package/dist/elements/useIntersectionObserver/index.d.ts +47 -0
- package/dist/elements/useIntersectionObserver/index.js +111 -0
- package/dist/elements/useIntersectionObserver/index.js.map +1 -0
- package/dist/elements/useIntersectionObserver/index.mjs +87 -0
- package/dist/elements/useIntersectionObserver/index.mjs.map +1 -0
- package/dist/elements/useMouseInElement/demo.d.mts +5 -0
- package/dist/elements/useMouseInElement/demo.d.ts +5 -0
- package/dist/elements/useMouseInElement/demo.js +104 -0
- package/dist/elements/useMouseInElement/demo.js.map +1 -0
- package/dist/elements/useMouseInElement/demo.mjs +84 -0
- package/dist/elements/useMouseInElement/demo.mjs.map +1 -0
- package/dist/elements/useMouseInElement/index.d.mts +56 -0
- package/dist/elements/useMouseInElement/index.d.ts +56 -0
- package/dist/elements/useMouseInElement/index.js +148 -0
- package/dist/elements/useMouseInElement/index.js.map +1 -0
- package/dist/elements/useMouseInElement/index.mjs +124 -0
- package/dist/elements/useMouseInElement/index.mjs.map +1 -0
- package/dist/elements/useMutationObserver/demo.d.mts +5 -0
- package/dist/elements/useMutationObserver/demo.d.ts +5 -0
- package/dist/elements/useMutationObserver/demo.js +240 -0
- package/dist/elements/useMutationObserver/demo.js.map +1 -0
- package/dist/elements/useMutationObserver/demo.mjs +220 -0
- package/dist/elements/useMutationObserver/demo.mjs.map +1 -0
- package/dist/elements/useMutationObserver/index.d.mts +15 -0
- package/dist/elements/useMutationObserver/index.d.ts +15 -0
- package/dist/elements/useMutationObserver/index.js +69 -0
- package/dist/elements/useMutationObserver/index.js.map +1 -0
- package/dist/elements/useMutationObserver/index.mjs +45 -0
- package/dist/elements/useMutationObserver/index.mjs.map +1 -0
- package/dist/elements/useParentElement/demo.d.mts +5 -0
- package/dist/elements/useParentElement/demo.d.ts +5 -0
- package/dist/elements/useParentElement/demo.js +132 -0
- package/dist/elements/useParentElement/demo.js.map +1 -0
- package/dist/elements/useParentElement/demo.mjs +112 -0
- package/dist/elements/useParentElement/demo.mjs.map +1 -0
- package/dist/elements/useParentElement/index.d.mts +7 -0
- package/dist/elements/useParentElement/index.d.ts +7 -0
- package/dist/elements/useParentElement/index.js +47 -0
- package/dist/elements/useParentElement/index.js.map +1 -0
- package/dist/elements/useParentElement/index.mjs +23 -0
- package/dist/elements/useParentElement/index.mjs.map +1 -0
- package/dist/elements/useRef$/index.js +89 -0
- package/dist/elements/useRef$/index.js.map +1 -0
- package/dist/elements/useRef$/index.mjs +62 -0
- package/dist/elements/useRef$/index.mjs.map +1 -0
- package/dist/elements/useRef_/index.d.mts +60 -0
- package/dist/elements/useRef_/index.d.ts +60 -0
- package/dist/elements/useResizeObserver/demo.d.mts +5 -0
- package/dist/elements/useResizeObserver/demo.d.ts +5 -0
- package/dist/elements/useResizeObserver/demo.js +90 -0
- package/dist/elements/useResizeObserver/demo.js.map +1 -0
- package/dist/elements/useResizeObserver/demo.mjs +70 -0
- package/dist/elements/useResizeObserver/demo.mjs.map +1 -0
- package/dist/elements/useResizeObserver/index.d.mts +36 -0
- package/dist/elements/useResizeObserver/index.d.ts +36 -0
- package/dist/elements/useResizeObserver/index.js +74 -0
- package/dist/elements/useResizeObserver/index.js.map +1 -0
- package/dist/elements/useResizeObserver/index.mjs +49 -0
- package/dist/elements/useResizeObserver/index.mjs.map +1 -0
- package/dist/elements/useWindowFocus/demo.d.mts +5 -0
- package/dist/elements/useWindowFocus/demo.d.ts +5 -0
- package/dist/elements/useWindowFocus/demo.js +104 -0
- package/dist/elements/useWindowFocus/demo.js.map +1 -0
- package/dist/elements/useWindowFocus/demo.mjs +84 -0
- package/dist/elements/useWindowFocus/demo.mjs.map +1 -0
- package/dist/elements/useWindowFocus/index.d.mts +5 -0
- package/dist/elements/useWindowFocus/index.d.ts +5 -0
- package/dist/elements/useWindowFocus/index.js +42 -0
- package/dist/elements/useWindowFocus/index.js.map +1 -0
- package/dist/elements/useWindowFocus/index.mjs +18 -0
- package/dist/elements/useWindowFocus/index.mjs.map +1 -0
- package/dist/elements/useWindowSize/demo.d.mts +5 -0
- package/dist/elements/useWindowSize/demo.d.ts +5 -0
- package/dist/elements/useWindowSize/demo.js +79 -0
- package/dist/elements/useWindowSize/demo.js.map +1 -0
- package/dist/elements/useWindowSize/demo.mjs +59 -0
- package/dist/elements/useWindowSize/demo.mjs.map +1 -0
- package/dist/elements/useWindowSize/index.d.mts +17 -0
- package/dist/elements/useWindowSize/index.d.ts +17 -0
- package/dist/elements/useWindowSize/index.js +96 -0
- package/dist/elements/useWindowSize/index.js.map +1 -0
- package/dist/elements/useWindowSize/index.mjs +76 -0
- package/dist/elements/useWindowSize/index.mjs.map +1 -0
- package/dist/function/get/index.d.mts +45 -0
- package/dist/function/get/index.d.ts +45 -0
- package/dist/function/get/index.js +39 -0
- package/dist/function/get/index.js.map +1 -0
- package/dist/function/get/index.mjs +15 -0
- package/dist/function/get/index.mjs.map +1 -0
- package/dist/function/peek/index.d.mts +46 -0
- package/dist/function/peek/index.d.ts +46 -0
- package/dist/function/peek/index.js +39 -0
- package/dist/function/peek/index.js.map +1 -0
- package/dist/function/peek/index.mjs +15 -0
- package/dist/function/peek/index.mjs.map +1 -0
- package/dist/function/useMayObservableOptions/index.d.mts +59 -0
- package/dist/function/useMayObservableOptions/index.d.ts +59 -0
- package/dist/function/useMayObservableOptions/index.js +109 -0
- package/dist/function/useMayObservableOptions/index.js.map +1 -0
- package/dist/function/useMayObservableOptions/index.mjs +88 -0
- package/dist/function/useMayObservableOptions/index.mjs.map +1 -0
- package/dist/function/useSupported/index.d.mts +6 -0
- package/dist/function/useSupported/index.d.ts +6 -0
- package/dist/function/useSupported/index.js +37 -0
- package/dist/function/useSupported/index.js.map +1 -0
- package/dist/function/useSupported/index.mjs +13 -0
- package/dist/function/useSupported/index.mjs.map +1 -0
- package/dist/function/useWhenMounted/index.d.mts +6 -0
- package/dist/function/useWhenMounted/index.d.ts +6 -0
- package/dist/function/useWhenMounted/index.js +37 -0
- package/dist/function/useWhenMounted/index.js.map +1 -0
- package/dist/function/useWhenMounted/index.mjs +13 -0
- package/dist/function/useWhenMounted/index.mjs.map +1 -0
- package/dist/index.d.mts +24 -0
- package/dist/index.d.ts +24 -0
- package/dist/index.js +63 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +22 -0
- package/dist/index.mjs.map +1 -0
- package/dist/sensors/useScroll/demo.d.mts +5 -0
- package/dist/sensors/useScroll/demo.d.ts +5 -0
- package/dist/sensors/useScroll/demo.js +122 -0
- package/dist/sensors/useScroll/demo.js.map +1 -0
- package/dist/sensors/useScroll/demo.mjs +102 -0
- package/dist/sensors/useScroll/demo.mjs.map +1 -0
- package/dist/sensors/useScroll/index.d.mts +42 -0
- package/dist/sensors/useScroll/index.d.ts +42 -0
- package/dist/sensors/useScroll/index.js +149 -0
- package/dist/sensors/useScroll/index.js.map +1 -0
- package/dist/sensors/useScroll/index.mjs +125 -0
- package/dist/sensors/useScroll/index.mjs.map +1 -0
- package/dist/sensors/useWindowScroll/demo.d.mts +5 -0
- package/dist/sensors/useWindowScroll/demo.d.ts +5 -0
- package/dist/sensors/useWindowScroll/demo.js +85 -0
- package/dist/sensors/useWindowScroll/demo.js.map +1 -0
- package/dist/sensors/useWindowScroll/demo.mjs +65 -0
- package/dist/sensors/useWindowScroll/demo.mjs.map +1 -0
- package/dist/sensors/useWindowScroll/index.d.mts +9 -0
- package/dist/sensors/useWindowScroll/index.d.ts +9 -0
- package/dist/sensors/useWindowScroll/index.js +36 -0
- package/dist/sensors/useWindowScroll/index.js.map +1 -0
- package/dist/sensors/useWindowScroll/index.mjs +12 -0
- package/dist/sensors/useWindowScroll/index.mjs.map +1 -0
- package/dist/shared/configurable.d.mts +21 -0
- package/dist/shared/configurable.d.ts +21 -0
- package/dist/shared/configurable.js +39 -0
- package/dist/shared/configurable.js.map +1 -0
- package/dist/shared/configurable.mjs +12 -0
- package/dist/shared/configurable.mjs.map +1 -0
- package/dist/shared/index.d.mts +4 -0
- package/dist/shared/index.d.ts +4 -0
- package/dist/shared/index.js +31 -0
- package/dist/shared/index.js.map +1 -0
- package/dist/shared/index.mjs +7 -0
- package/dist/shared/index.mjs.map +1 -0
- package/dist/shared/normalizeTargets/index.d.mts +21 -0
- package/dist/shared/normalizeTargets/index.d.ts +21 -0
- package/dist/shared/normalizeTargets/index.js +36 -0
- package/dist/shared/normalizeTargets/index.js.map +1 -0
- package/dist/shared/normalizeTargets/index.mjs +12 -0
- package/dist/shared/normalizeTargets/index.mjs.map +1 -0
- package/dist/shared/utils.d.mts +15 -0
- package/dist/shared/utils.d.ts +15 -0
- package/dist/shared/utils.js +87 -0
- package/dist/shared/utils.js.map +1 -0
- package/dist/shared/utils.mjs +52 -0
- package/dist/shared/utils.mjs.map +1 -0
- package/dist/types.d.mts +52 -0
- package/dist/types.d.ts +52 -0
- package/dist/types.js +17 -0
- package/dist/types.js.map +1 -0
- package/dist/types.mjs +1 -0
- package/dist/types.mjs.map +1 -0
- package/package.json +54 -0
- package/src/browser/useEventListener/index.md +109 -0
- package/src/browser/useEventListener/index.spec.ts +611 -0
- package/src/browser/useEventListener/index.ts +242 -0
- package/src/browser/useMediaQuery/demo.tsx +63 -0
- package/src/browser/useMediaQuery/index.md +43 -0
- package/src/browser/useMediaQuery/index.spec.ts +267 -0
- package/src/browser/useMediaQuery/index.ts +96 -0
- package/src/components/Auto/index.tsx +65 -0
- package/src/elements/useDocumentVisibility/demo.tsx +111 -0
- package/src/elements/useDocumentVisibility/index.md +54 -0
- package/src/elements/useDocumentVisibility/index.spec.ts +114 -0
- package/src/elements/useDocumentVisibility/index.ts +26 -0
- package/src/elements/useElementBounding/demo.tsx +68 -0
- package/src/elements/useElementBounding/index.md +64 -0
- package/src/elements/useElementBounding/index.ts +159 -0
- package/src/elements/useElementSize/demo.tsx +53 -0
- package/src/elements/useElementSize/index.md +65 -0
- package/src/elements/useElementSize/index.spec.ts +295 -0
- package/src/elements/useElementSize/index.ts +100 -0
- package/src/elements/useElementVisibility/deep-observable-pattern.spec.ts +453 -0
- package/src/elements/useElementVisibility/demo.tsx +97 -0
- package/src/elements/useElementVisibility/index.md +98 -0
- package/src/elements/useElementVisibility/index.spec.ts +227 -0
- package/src/elements/useElementVisibility/index.ts +78 -0
- package/src/elements/useIntersectionObserver/demo.tsx +180 -0
- package/src/elements/useIntersectionObserver/index.md +99 -0
- package/src/elements/useIntersectionObserver/index.spec.ts +482 -0
- package/src/elements/useIntersectionObserver/index.ts +149 -0
- package/src/elements/useMouseInElement/demo.tsx +88 -0
- package/src/elements/useMouseInElement/index.md +76 -0
- package/src/elements/useMouseInElement/index.spec.ts +398 -0
- package/src/elements/useMouseInElement/index.ts +209 -0
- package/src/elements/useMutationObserver/demo.tsx +270 -0
- package/src/elements/useMutationObserver/index.md +99 -0
- package/src/elements/useMutationObserver/index.spec.ts +421 -0
- package/src/elements/useMutationObserver/index.ts +66 -0
- package/src/elements/useParentElement/demo.tsx +120 -0
- package/src/elements/useParentElement/index.md +67 -0
- package/src/elements/useParentElement/index.spec.ts +208 -0
- package/src/elements/useParentElement/index.ts +35 -0
- package/src/elements/useRef$/index.md +62 -0
- package/src/elements/useRef$/index.spec.ts +205 -0
- package/src/elements/useRef$/index.ts +137 -0
- package/src/elements/useRef$/useImperativeHandle.spec.ts +339 -0
- package/src/elements/useResizeObserver/demo.tsx +62 -0
- package/src/elements/useResizeObserver/index.md +51 -0
- package/src/elements/useResizeObserver/index.spec.ts +312 -0
- package/src/elements/useResizeObserver/index.ts +106 -0
- package/src/elements/useWindowFocus/demo.tsx +79 -0
- package/src/elements/useWindowFocus/index.md +38 -0
- package/src/elements/useWindowFocus/index.spec.ts +103 -0
- package/src/elements/useWindowFocus/index.ts +21 -0
- package/src/elements/useWindowSize/demo.tsx +51 -0
- package/src/elements/useWindowSize/index.md +55 -0
- package/src/elements/useWindowSize/index.spec.ts +310 -0
- package/src/elements/useWindowSize/index.ts +107 -0
- package/src/function/get/index.md +25 -0
- package/src/function/get/index.spec.ts +87 -0
- package/src/function/get/index.ts +70 -0
- package/src/function/peek/index.spec.ts +97 -0
- package/src/function/peek/index.ts +69 -0
- package/src/function/useMayObservableOptions/index.spec.ts +521 -0
- package/src/function/useMayObservableOptions/index.ts +173 -0
- package/src/function/useSupported/index.md +43 -0
- package/src/function/useSupported/index.spec.ts +116 -0
- package/src/function/useSupported/index.ts +14 -0
- package/src/function/useWhenMounted/index.md +25 -0
- package/src/function/useWhenMounted/index.spec.ts +120 -0
- package/src/function/useWhenMounted/index.ts +16 -0
- package/src/index.ts +25 -0
- package/src/sensors/useScroll/demo.tsx +103 -0
- package/src/sensors/useScroll/index.md +117 -0
- package/src/sensors/useScroll/index.spec.ts +678 -0
- package/src/sensors/useScroll/index.ts +201 -0
- package/src/sensors/useWindowScroll/demo.tsx +78 -0
- package/src/sensors/useWindowScroll/index.md +98 -0
- package/src/sensors/useWindowScroll/index.spec.ts +69 -0
- package/src/sensors/useWindowScroll/index.ts +11 -0
- package/src/shared/configurable.ts +35 -0
- package/src/shared/index.ts +4 -0
- package/src/shared/normalizeTargets/index.spec.ts +76 -0
- package/src/shared/normalizeTargets/index.ts +27 -0
- package/src/shared/utils.ts +67 -0
- package/src/types.ts +56 -0
- package/tsconfig.json +9 -0
- package/tsup.config.ts +10 -0
- package/vitest.config.ts +22 -0
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { useMount, useObservable } from "@legendapp/state/react";
|
|
3
|
+
import { useMemo, useRef } from "react";
|
|
4
|
+
import { throttle } from "es-toolkit";
|
|
5
|
+
import { peekElement } from "../../elements/useRef$";
|
|
6
|
+
import { isWindow } from "../../shared";
|
|
7
|
+
import { useEventListener } from "../../browser/useEventListener";
|
|
8
|
+
function getScrollValues(el) {
|
|
9
|
+
if (!el) return { x: 0, y: 0 };
|
|
10
|
+
if (isWindow(el)) return { x: el.scrollX, y: el.scrollY };
|
|
11
|
+
if (el instanceof Document)
|
|
12
|
+
return {
|
|
13
|
+
x: el.documentElement.scrollLeft,
|
|
14
|
+
y: el.documentElement.scrollTop
|
|
15
|
+
};
|
|
16
|
+
return { x: el.scrollLeft, y: el.scrollTop };
|
|
17
|
+
}
|
|
18
|
+
function getScrollDimensions(el) {
|
|
19
|
+
if (!el || isWindow(el)) {
|
|
20
|
+
return {
|
|
21
|
+
scrollW: document.documentElement.scrollWidth,
|
|
22
|
+
scrollH: document.documentElement.scrollHeight,
|
|
23
|
+
clientW: window.innerWidth,
|
|
24
|
+
clientH: window.innerHeight
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
if (el instanceof Document) {
|
|
28
|
+
const root = el.documentElement;
|
|
29
|
+
return {
|
|
30
|
+
scrollW: root.scrollWidth,
|
|
31
|
+
scrollH: root.scrollHeight,
|
|
32
|
+
clientW: root.clientWidth,
|
|
33
|
+
clientH: root.clientHeight
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
return {
|
|
37
|
+
scrollW: el.scrollWidth,
|
|
38
|
+
scrollH: el.scrollHeight,
|
|
39
|
+
clientW: el.clientWidth,
|
|
40
|
+
clientH: el.clientHeight
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
function useScroll(element, options) {
|
|
44
|
+
const initial = getScrollValues(peekElement(element));
|
|
45
|
+
const x$ = useObservable(initial.x);
|
|
46
|
+
const y$ = useObservable(initial.y);
|
|
47
|
+
const isScrolling$ = useObservable(false);
|
|
48
|
+
const arrivedState$ = useObservable({
|
|
49
|
+
left: true,
|
|
50
|
+
right: false,
|
|
51
|
+
top: true,
|
|
52
|
+
bottom: false
|
|
53
|
+
});
|
|
54
|
+
const directions$ = useObservable({
|
|
55
|
+
left: false,
|
|
56
|
+
right: false,
|
|
57
|
+
top: false,
|
|
58
|
+
bottom: false
|
|
59
|
+
});
|
|
60
|
+
const idleTimer = useRef(null);
|
|
61
|
+
const resetIdle = () => {
|
|
62
|
+
if (idleTimer.current) clearTimeout(idleTimer.current);
|
|
63
|
+
isScrolling$.set(true);
|
|
64
|
+
idleTimer.current = setTimeout(() => {
|
|
65
|
+
isScrolling$.set(false);
|
|
66
|
+
options?.onStop?.();
|
|
67
|
+
}, options?.idle ?? 200);
|
|
68
|
+
};
|
|
69
|
+
const measure = () => {
|
|
70
|
+
const el = peekElement(element);
|
|
71
|
+
if (!el) return;
|
|
72
|
+
const prevX = x$.peek();
|
|
73
|
+
const prevY = y$.peek();
|
|
74
|
+
const { x: newX, y: newY } = getScrollValues(el);
|
|
75
|
+
directions$.assign({
|
|
76
|
+
left: newX < prevX,
|
|
77
|
+
right: newX > prevX,
|
|
78
|
+
top: newY < prevY,
|
|
79
|
+
bottom: newY > prevY
|
|
80
|
+
});
|
|
81
|
+
x$.set(newX);
|
|
82
|
+
y$.set(newY);
|
|
83
|
+
const { scrollW, scrollH, clientW, clientH } = getScrollDimensions(el);
|
|
84
|
+
const maxX = scrollW - clientW;
|
|
85
|
+
const maxY = scrollH - clientH;
|
|
86
|
+
const offset = options?.offset ?? {};
|
|
87
|
+
arrivedState$.assign({
|
|
88
|
+
left: newX <= (offset.left ?? 0),
|
|
89
|
+
right: newX >= maxX - (offset.right ?? 0),
|
|
90
|
+
top: newY <= (offset.top ?? 0),
|
|
91
|
+
bottom: newY >= maxY - (offset.bottom ?? 0)
|
|
92
|
+
});
|
|
93
|
+
resetIdle();
|
|
94
|
+
};
|
|
95
|
+
const measureRef = useRef(measure);
|
|
96
|
+
measureRef.current = measure;
|
|
97
|
+
const handler = useMemo(() => {
|
|
98
|
+
const ms = options?.throttle ?? 0;
|
|
99
|
+
return ms > 0 ? throttle(() => measureRef.current(), ms) : () => measureRef.current();
|
|
100
|
+
}, []);
|
|
101
|
+
useEventListener(
|
|
102
|
+
element,
|
|
103
|
+
"scroll",
|
|
104
|
+
handler,
|
|
105
|
+
options?.eventListenerOptions ?? { capture: false, passive: true }
|
|
106
|
+
);
|
|
107
|
+
useMount(() => {
|
|
108
|
+
measure();
|
|
109
|
+
return () => {
|
|
110
|
+
if (idleTimer.current) clearTimeout(idleTimer.current);
|
|
111
|
+
};
|
|
112
|
+
});
|
|
113
|
+
return {
|
|
114
|
+
x: x$,
|
|
115
|
+
y: y$,
|
|
116
|
+
isScrolling: isScrolling$,
|
|
117
|
+
arrivedState: arrivedState$,
|
|
118
|
+
directions: directions$,
|
|
119
|
+
measure
|
|
120
|
+
};
|
|
121
|
+
}
|
|
122
|
+
export {
|
|
123
|
+
useScroll
|
|
124
|
+
};
|
|
125
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/sensors/useScroll/index.ts"],"sourcesContent":["\"use client\";\nimport type { Observable } from \"@legendapp/state\";\nimport { useMount, useObservable } from \"@legendapp/state/react\";\nimport { useMemo, useRef } from \"react\";\nimport { throttle } from \"es-toolkit\";\nimport { type MaybeElement, peekElement } from \"../../elements/useRef$\";\nimport { isWindow } from \"../../shared\";\nimport type { MaybeObservable } from \"../../types\";\nimport { useEventListener } from \"../../browser/useEventListener\";\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface UseScrollOptions {\n throttle?: number;\n idle?: number;\n onStop?: () => void;\n onError?: (error: unknown) => void;\n offset?: {\n left?: number;\n right?: number;\n top?: number;\n bottom?: number;\n };\n behavior?: ScrollBehavior;\n eventListenerOptions?: MaybeObservable<AddEventListenerOptions>;\n}\n\nexport interface ArrivedState {\n left: boolean;\n right: boolean;\n top: boolean;\n bottom: boolean;\n}\n\nexport interface ScrollDirections {\n left: boolean;\n right: boolean;\n top: boolean;\n bottom: boolean;\n}\n\nexport interface UseScrollReturn {\n x: Observable<number>;\n y: Observable<number>;\n isScrolling: Observable<boolean>;\n arrivedState: Observable<ArrivedState>;\n directions: Observable<ScrollDirections>;\n measure: () => void;\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction getScrollValues(el: HTMLElement | Document | Window | null): {\n x: number;\n y: number;\n} {\n if (!el) return { x: 0, y: 0 };\n if (isWindow(el)) return { x: el.scrollX, y: el.scrollY };\n if (el instanceof Document)\n return {\n x: el.documentElement.scrollLeft,\n y: el.documentElement.scrollTop,\n };\n return { x: el.scrollLeft, y: el.scrollTop };\n}\n\nfunction getScrollDimensions(el: HTMLElement | Document | Window | null): {\n scrollW: number;\n scrollH: number;\n clientW: number;\n clientH: number;\n} {\n if (!el || isWindow(el)) {\n return {\n scrollW: document.documentElement.scrollWidth,\n scrollH: document.documentElement.scrollHeight,\n clientW: window.innerWidth,\n clientH: window.innerHeight,\n };\n }\n if (el instanceof Document) {\n const root = el.documentElement;\n return {\n scrollW: root.scrollWidth,\n scrollH: root.scrollHeight,\n clientW: root.clientWidth,\n clientH: root.clientHeight,\n };\n }\n return {\n scrollW: el.scrollWidth,\n scrollH: el.scrollHeight,\n clientW: el.clientWidth,\n clientH: el.clientHeight,\n };\n}\n\n// ---------------------------------------------------------------------------\n// Hook\n// ---------------------------------------------------------------------------\n\nexport function useScroll(\n element: MaybeElement,\n options?: UseScrollOptions,\n): UseScrollReturn {\n const initial = getScrollValues(peekElement(element));\n\n const x$ = useObservable<number>(initial.x);\n const y$ = useObservable<number>(initial.y);\n const isScrolling$ = useObservable<boolean>(false);\n const arrivedState$ = useObservable<ArrivedState>({\n left: true,\n right: false,\n top: true,\n bottom: false,\n });\n const directions$ = useObservable<ScrollDirections>({\n left: false,\n right: false,\n top: false,\n bottom: false,\n });\n\n const idleTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const resetIdle = () => {\n if (idleTimer.current) clearTimeout(idleTimer.current);\n isScrolling$.set(true);\n idleTimer.current = setTimeout(() => {\n isScrolling$.set(false);\n options?.onStop?.();\n }, options?.idle ?? 200);\n };\n\n const measure = () => {\n const el = peekElement(element);\n if (!el) return;\n\n const prevX = x$.peek();\n const prevY = y$.peek();\n const { x: newX, y: newY } = getScrollValues(el);\n\n directions$.assign({\n left: newX < prevX,\n right: newX > prevX,\n top: newY < prevY,\n bottom: newY > prevY,\n });\n\n x$.set(newX);\n y$.set(newY);\n\n const { scrollW, scrollH, clientW, clientH } = getScrollDimensions(el);\n const maxX = scrollW - clientW;\n const maxY = scrollH - clientH;\n const offset = options?.offset ?? {};\n\n arrivedState$.assign({\n left: newX <= (offset.left ?? 0),\n right: newX >= maxX - (offset.right ?? 0),\n top: newY <= (offset.top ?? 0),\n bottom: newY >= maxY - (offset.bottom ?? 0),\n });\n\n resetIdle();\n };\n\n const measureRef = useRef(measure);\n measureRef.current = measure;\n\n const handler = useMemo(() => {\n const ms = options?.throttle ?? 0;\n return ms > 0\n ? throttle(() => measureRef.current(), ms)\n : () => measureRef.current();\n }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n useEventListener(element as any, \"scroll\", handler,\n options?.eventListenerOptions ?? { capture: false, passive: true },\n );\n\n useMount(() => {\n measure();\n return () => {\n if (idleTimer.current) clearTimeout(idleTimer.current);\n };\n });\n\n return {\n x: x$,\n y: y$,\n isScrolling: isScrolling$,\n arrivedState: arrivedState$,\n directions: directions$,\n measure,\n };\n}\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var demo_exports = {};
|
|
20
|
+
__export(demo_exports, {
|
|
21
|
+
default: () => UseWindowScrollDemo
|
|
22
|
+
});
|
|
23
|
+
module.exports = __toCommonJS(demo_exports);
|
|
24
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
25
|
+
var import_react = require("@legendapp/state/react");
|
|
26
|
+
var import__ = require(".");
|
|
27
|
+
const card = {
|
|
28
|
+
display: "flex",
|
|
29
|
+
flexWrap: "wrap",
|
|
30
|
+
gap: "16px",
|
|
31
|
+
padding: "10px 14px",
|
|
32
|
+
borderRadius: "6px",
|
|
33
|
+
border: "1px solid var(--sl-color-gray-5, #e2e8f0)",
|
|
34
|
+
background: "var(--sl-color-gray-6, #f8fafc)",
|
|
35
|
+
fontFamily: "monospace",
|
|
36
|
+
fontSize: "13px"
|
|
37
|
+
};
|
|
38
|
+
const chip = (active) => ({
|
|
39
|
+
padding: "2px 8px",
|
|
40
|
+
borderRadius: "4px",
|
|
41
|
+
background: active ? "var(--sl-color-green-low, #f0fdf4)" : "var(--sl-color-gray-5, #f1f5f9)",
|
|
42
|
+
color: active ? "var(--sl-color-green, #16a34a)" : "var(--sl-color-gray-3, #64748b)",
|
|
43
|
+
border: `1px solid ${active ? "var(--sl-color-green, #22c55e)" : "var(--sl-color-gray-5, #e2e8f0)"}`,
|
|
44
|
+
transition: "all 0.15s"
|
|
45
|
+
});
|
|
46
|
+
function UseWindowScrollDemo() {
|
|
47
|
+
const { x, y, isScrolling, arrivedState, directions } = (0, import__.useWindowScroll)();
|
|
48
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
|
|
49
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Computed, { children: () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: card, children: [
|
|
50
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
|
|
51
|
+
"x: ",
|
|
52
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: x.get() })
|
|
53
|
+
] }),
|
|
54
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
|
|
55
|
+
"y: ",
|
|
56
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: y.get() })
|
|
57
|
+
] }),
|
|
58
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: chip(isScrolling.get()), children: isScrolling.get() ? "scrolling" : "idle" })
|
|
59
|
+
] }) }),
|
|
60
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Computed, { children: () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: card, children: [
|
|
61
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: chip(arrivedState.top.get()), children: "top" }),
|
|
62
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: chip(arrivedState.bottom.get()), children: "bottom" }),
|
|
63
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: chip(arrivedState.left.get()), children: "left" }),
|
|
64
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: chip(arrivedState.right.get()), children: "right" }),
|
|
65
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { color: "var(--sl-color-gray-3, #94a3b8)" }, children: [
|
|
66
|
+
directions.top.get() && "\u2191 ",
|
|
67
|
+
directions.bottom.get() && "\u2193 ",
|
|
68
|
+
directions.left.get() && "\u2190 ",
|
|
69
|
+
directions.right.get() && "\u2192 "
|
|
70
|
+
] })
|
|
71
|
+
] }) }),
|
|
72
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
73
|
+
"p",
|
|
74
|
+
{
|
|
75
|
+
style: {
|
|
76
|
+
margin: 0,
|
|
77
|
+
fontSize: "11px",
|
|
78
|
+
color: "var(--sl-color-gray-3, #94a3b8)"
|
|
79
|
+
},
|
|
80
|
+
children: "Scroll the page to see the values update in real time."
|
|
81
|
+
}
|
|
82
|
+
)
|
|
83
|
+
] });
|
|
84
|
+
}
|
|
85
|
+
//# sourceMappingURL=demo.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/sensors/useWindowScroll/demo.tsx"],"sourcesContent":["import { Computed } from \"@legendapp/state/react\";\nimport { useWindowScroll } from \".\";\n\nconst card: React.CSSProperties = {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"16px\",\n padding: \"10px 14px\",\n borderRadius: \"6px\",\n border: \"1px solid var(--sl-color-gray-5, #e2e8f0)\",\n background: \"var(--sl-color-gray-6, #f8fafc)\",\n fontFamily: \"monospace\",\n fontSize: \"13px\",\n};\n\nconst chip = (active: boolean): React.CSSProperties => ({\n padding: \"2px 8px\",\n borderRadius: \"4px\",\n background: active\n ? \"var(--sl-color-green-low, #f0fdf4)\"\n : \"var(--sl-color-gray-5, #f1f5f9)\",\n color: active\n ? \"var(--sl-color-green, #16a34a)\"\n : \"var(--sl-color-gray-3, #64748b)\",\n border: `1px solid ${active ? \"var(--sl-color-green, #22c55e)\" : \"var(--sl-color-gray-5, #e2e8f0)\"}`,\n transition: \"all 0.15s\",\n});\n\nexport default function UseWindowScrollDemo() {\n const { x, y, isScrolling, arrivedState, directions } = useWindowScroll();\n\n return (\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}>\n <Computed>\n {() => (\n <div style={card}>\n <span>\n x: <strong>{x.get()}</strong>\n </span>\n <span>\n y: <strong>{y.get()}</strong>\n </span>\n <span style={chip(isScrolling.get())}>\n {isScrolling.get() ? \"scrolling\" : \"idle\"}\n </span>\n </div>\n )}\n </Computed>\n\n <Computed>\n {() => (\n <div style={card}>\n <span style={chip(arrivedState.top.get())}>top</span>\n <span style={chip(arrivedState.bottom.get())}>bottom</span>\n <span style={chip(arrivedState.left.get())}>left</span>\n <span style={chip(arrivedState.right.get())}>right</span>\n <span style={{ color: \"var(--sl-color-gray-3, #94a3b8)\" }}>\n {directions.top.get() && \"↑ \"}\n {directions.bottom.get() && \"↓ \"}\n {directions.left.get() && \"← \"}\n {directions.right.get() && \"→ \"}\n </span>\n </div>\n )}\n </Computed>\n\n <p\n style={{\n margin: 0,\n fontSize: \"11px\",\n color: \"var(--sl-color-gray-3, #94a3b8)\",\n }}\n >\n Scroll the page to see the values update in real time.\n </p>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoCY;AApCZ,mBAAyB;AACzB,eAAgC;AAEhC,MAAM,OAA4B;AAAA,EAChC,SAAS;AAAA,EACT,UAAU;AAAA,EACV,KAAK;AAAA,EACL,SAAS;AAAA,EACT,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AACZ;AAEA,MAAM,OAAO,CAAC,YAA0C;AAAA,EACtD,SAAS;AAAA,EACT,cAAc;AAAA,EACd,YAAY,SACR,uCACA;AAAA,EACJ,OAAO,SACH,mCACA;AAAA,EACJ,QAAQ,aAAa,SAAS,mCAAmC,iCAAiC;AAAA,EAClG,YAAY;AACd;AAEe,SAAR,sBAAuC;AAC5C,QAAM,EAAE,GAAG,GAAG,aAAa,cAAc,WAAW,QAAI,0BAAgB;AAExE,SACE,6CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,MAAM,GACjE;AAAA,gDAAC,yBACE,gBACC,6CAAC,SAAI,OAAO,MACV;AAAA,mDAAC,UAAK;AAAA;AAAA,QACD,4CAAC,YAAQ,YAAE,IAAI,GAAE;AAAA,SACtB;AAAA,MACA,6CAAC,UAAK;AAAA;AAAA,QACD,4CAAC,YAAQ,YAAE,IAAI,GAAE;AAAA,SACtB;AAAA,MACA,4CAAC,UAAK,OAAO,KAAK,YAAY,IAAI,CAAC,GAChC,sBAAY,IAAI,IAAI,cAAc,QACrC;AAAA,OACF,GAEJ;AAAA,IAEA,4CAAC,yBACE,gBACC,6CAAC,SAAI,OAAO,MACV;AAAA,kDAAC,UAAK,OAAO,KAAK,aAAa,IAAI,IAAI,CAAC,GAAG,iBAAG;AAAA,MAC9C,4CAAC,UAAK,OAAO,KAAK,aAAa,OAAO,IAAI,CAAC,GAAG,oBAAM;AAAA,MACpD,4CAAC,UAAK,OAAO,KAAK,aAAa,KAAK,IAAI,CAAC,GAAG,kBAAI;AAAA,MAChD,4CAAC,UAAK,OAAO,KAAK,aAAa,MAAM,IAAI,CAAC,GAAG,mBAAK;AAAA,MAClD,6CAAC,UAAK,OAAO,EAAE,OAAO,kCAAkC,GACrD;AAAA,mBAAW,IAAI,IAAI,KAAK;AAAA,QACxB,WAAW,OAAO,IAAI,KAAK;AAAA,QAC3B,WAAW,KAAK,IAAI,KAAK;AAAA,QACzB,WAAW,MAAM,IAAI,KAAK;AAAA,SAC7B;AAAA,OACF,GAEJ;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,OAAO;AAAA,QACT;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Computed } from "@legendapp/state/react";
|
|
3
|
+
import { useWindowScroll } from ".";
|
|
4
|
+
const card = {
|
|
5
|
+
display: "flex",
|
|
6
|
+
flexWrap: "wrap",
|
|
7
|
+
gap: "16px",
|
|
8
|
+
padding: "10px 14px",
|
|
9
|
+
borderRadius: "6px",
|
|
10
|
+
border: "1px solid var(--sl-color-gray-5, #e2e8f0)",
|
|
11
|
+
background: "var(--sl-color-gray-6, #f8fafc)",
|
|
12
|
+
fontFamily: "monospace",
|
|
13
|
+
fontSize: "13px"
|
|
14
|
+
};
|
|
15
|
+
const chip = (active) => ({
|
|
16
|
+
padding: "2px 8px",
|
|
17
|
+
borderRadius: "4px",
|
|
18
|
+
background: active ? "var(--sl-color-green-low, #f0fdf4)" : "var(--sl-color-gray-5, #f1f5f9)",
|
|
19
|
+
color: active ? "var(--sl-color-green, #16a34a)" : "var(--sl-color-gray-3, #64748b)",
|
|
20
|
+
border: `1px solid ${active ? "var(--sl-color-green, #22c55e)" : "var(--sl-color-gray-5, #e2e8f0)"}`,
|
|
21
|
+
transition: "all 0.15s"
|
|
22
|
+
});
|
|
23
|
+
function UseWindowScrollDemo() {
|
|
24
|
+
const { x, y, isScrolling, arrivedState, directions } = useWindowScroll();
|
|
25
|
+
return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
|
|
26
|
+
/* @__PURE__ */ jsx(Computed, { children: () => /* @__PURE__ */ jsxs("div", { style: card, children: [
|
|
27
|
+
/* @__PURE__ */ jsxs("span", { children: [
|
|
28
|
+
"x: ",
|
|
29
|
+
/* @__PURE__ */ jsx("strong", { children: x.get() })
|
|
30
|
+
] }),
|
|
31
|
+
/* @__PURE__ */ jsxs("span", { children: [
|
|
32
|
+
"y: ",
|
|
33
|
+
/* @__PURE__ */ jsx("strong", { children: y.get() })
|
|
34
|
+
] }),
|
|
35
|
+
/* @__PURE__ */ jsx("span", { style: chip(isScrolling.get()), children: isScrolling.get() ? "scrolling" : "idle" })
|
|
36
|
+
] }) }),
|
|
37
|
+
/* @__PURE__ */ jsx(Computed, { children: () => /* @__PURE__ */ jsxs("div", { style: card, children: [
|
|
38
|
+
/* @__PURE__ */ jsx("span", { style: chip(arrivedState.top.get()), children: "top" }),
|
|
39
|
+
/* @__PURE__ */ jsx("span", { style: chip(arrivedState.bottom.get()), children: "bottom" }),
|
|
40
|
+
/* @__PURE__ */ jsx("span", { style: chip(arrivedState.left.get()), children: "left" }),
|
|
41
|
+
/* @__PURE__ */ jsx("span", { style: chip(arrivedState.right.get()), children: "right" }),
|
|
42
|
+
/* @__PURE__ */ jsxs("span", { style: { color: "var(--sl-color-gray-3, #94a3b8)" }, children: [
|
|
43
|
+
directions.top.get() && "\u2191 ",
|
|
44
|
+
directions.bottom.get() && "\u2193 ",
|
|
45
|
+
directions.left.get() && "\u2190 ",
|
|
46
|
+
directions.right.get() && "\u2192 "
|
|
47
|
+
] })
|
|
48
|
+
] }) }),
|
|
49
|
+
/* @__PURE__ */ jsx(
|
|
50
|
+
"p",
|
|
51
|
+
{
|
|
52
|
+
style: {
|
|
53
|
+
margin: 0,
|
|
54
|
+
fontSize: "11px",
|
|
55
|
+
color: "var(--sl-color-gray-3, #94a3b8)"
|
|
56
|
+
},
|
|
57
|
+
children: "Scroll the page to see the values update in real time."
|
|
58
|
+
}
|
|
59
|
+
)
|
|
60
|
+
] });
|
|
61
|
+
}
|
|
62
|
+
export {
|
|
63
|
+
UseWindowScrollDemo as default
|
|
64
|
+
};
|
|
65
|
+
//# sourceMappingURL=demo.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/sensors/useWindowScroll/demo.tsx"],"sourcesContent":["import { Computed } from \"@legendapp/state/react\";\nimport { useWindowScroll } from \".\";\n\nconst card: React.CSSProperties = {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"16px\",\n padding: \"10px 14px\",\n borderRadius: \"6px\",\n border: \"1px solid var(--sl-color-gray-5, #e2e8f0)\",\n background: \"var(--sl-color-gray-6, #f8fafc)\",\n fontFamily: \"monospace\",\n fontSize: \"13px\",\n};\n\nconst chip = (active: boolean): React.CSSProperties => ({\n padding: \"2px 8px\",\n borderRadius: \"4px\",\n background: active\n ? \"var(--sl-color-green-low, #f0fdf4)\"\n : \"var(--sl-color-gray-5, #f1f5f9)\",\n color: active\n ? \"var(--sl-color-green, #16a34a)\"\n : \"var(--sl-color-gray-3, #64748b)\",\n border: `1px solid ${active ? \"var(--sl-color-green, #22c55e)\" : \"var(--sl-color-gray-5, #e2e8f0)\"}`,\n transition: \"all 0.15s\",\n});\n\nexport default function UseWindowScrollDemo() {\n const { x, y, isScrolling, arrivedState, directions } = useWindowScroll();\n\n return (\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}>\n <Computed>\n {() => (\n <div style={card}>\n <span>\n x: <strong>{x.get()}</strong>\n </span>\n <span>\n y: <strong>{y.get()}</strong>\n </span>\n <span style={chip(isScrolling.get())}>\n {isScrolling.get() ? \"scrolling\" : \"idle\"}\n </span>\n </div>\n )}\n </Computed>\n\n <Computed>\n {() => (\n <div style={card}>\n <span style={chip(arrivedState.top.get())}>top</span>\n <span style={chip(arrivedState.bottom.get())}>bottom</span>\n <span style={chip(arrivedState.left.get())}>left</span>\n <span style={chip(arrivedState.right.get())}>right</span>\n <span style={{ color: \"var(--sl-color-gray-3, #94a3b8)\" }}>\n {directions.top.get() && \"↑ \"}\n {directions.bottom.get() && \"↓ \"}\n {directions.left.get() && \"← \"}\n {directions.right.get() && \"→ \"}\n </span>\n </div>\n )}\n </Computed>\n\n <p\n style={{\n margin: 0,\n fontSize: \"11px\",\n color: \"var(--sl-color-gray-3, #94a3b8)\",\n }}\n >\n Scroll the page to see the values update in real time.\n </p>\n </div>\n );\n}\n"],"mappings":"AAoCY,SACK,KADL;AApCZ,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAEhC,MAAM,OAA4B;AAAA,EAChC,SAAS;AAAA,EACT,UAAU;AAAA,EACV,KAAK;AAAA,EACL,SAAS;AAAA,EACT,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AACZ;AAEA,MAAM,OAAO,CAAC,YAA0C;AAAA,EACtD,SAAS;AAAA,EACT,cAAc;AAAA,EACd,YAAY,SACR,uCACA;AAAA,EACJ,OAAO,SACH,mCACA;AAAA,EACJ,QAAQ,aAAa,SAAS,mCAAmC,iCAAiC;AAAA,EAClG,YAAY;AACd;AAEe,SAAR,sBAAuC;AAC5C,QAAM,EAAE,GAAG,GAAG,aAAa,cAAc,WAAW,IAAI,gBAAgB;AAExE,SACE,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,MAAM,GACjE;AAAA,wBAAC,YACE,gBACC,qBAAC,SAAI,OAAO,MACV;AAAA,2BAAC,UAAK;AAAA;AAAA,QACD,oBAAC,YAAQ,YAAE,IAAI,GAAE;AAAA,SACtB;AAAA,MACA,qBAAC,UAAK;AAAA;AAAA,QACD,oBAAC,YAAQ,YAAE,IAAI,GAAE;AAAA,SACtB;AAAA,MACA,oBAAC,UAAK,OAAO,KAAK,YAAY,IAAI,CAAC,GAChC,sBAAY,IAAI,IAAI,cAAc,QACrC;AAAA,OACF,GAEJ;AAAA,IAEA,oBAAC,YACE,gBACC,qBAAC,SAAI,OAAO,MACV;AAAA,0BAAC,UAAK,OAAO,KAAK,aAAa,IAAI,IAAI,CAAC,GAAG,iBAAG;AAAA,MAC9C,oBAAC,UAAK,OAAO,KAAK,aAAa,OAAO,IAAI,CAAC,GAAG,oBAAM;AAAA,MACpD,oBAAC,UAAK,OAAO,KAAK,aAAa,KAAK,IAAI,CAAC,GAAG,kBAAI;AAAA,MAChD,oBAAC,UAAK,OAAO,KAAK,aAAa,MAAM,IAAI,CAAC,GAAG,mBAAK;AAAA,MAClD,qBAAC,UAAK,OAAO,EAAE,OAAO,kCAAkC,GACrD;AAAA,mBAAW,IAAI,IAAI,KAAK;AAAA,QACxB,WAAW,OAAO,IAAI,KAAK;AAAA,QAC3B,WAAW,KAAK,IAAI,KAAK;AAAA,QACzB,WAAW,MAAM,IAAI,KAAK;AAAA,SAC7B;AAAA,OACF,GAEJ;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,OAAO;AAAA,QACT;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { UseScrollOptions, UseScrollReturn } from '../useScroll/index.mjs';
|
|
2
|
+
import '@legendapp/state';
|
|
3
|
+
import '../../elements/useRef_/index.mjs';
|
|
4
|
+
import 'react';
|
|
5
|
+
import '../../types.mjs';
|
|
6
|
+
|
|
7
|
+
declare function useWindowScroll(options?: UseScrollOptions): UseScrollReturn;
|
|
8
|
+
|
|
9
|
+
export { UseScrollOptions, UseScrollReturn, useWindowScroll };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { UseScrollOptions, UseScrollReturn } from '../useScroll/index.js';
|
|
2
|
+
import '@legendapp/state';
|
|
3
|
+
import '../../elements/useRef_/index.js';
|
|
4
|
+
import 'react';
|
|
5
|
+
import '../../types.js';
|
|
6
|
+
|
|
7
|
+
declare function useWindowScroll(options?: UseScrollOptions): UseScrollReturn;
|
|
8
|
+
|
|
9
|
+
export { UseScrollOptions, UseScrollReturn, useWindowScroll };
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
|
+
var useWindowScroll_exports = {};
|
|
21
|
+
__export(useWindowScroll_exports, {
|
|
22
|
+
useWindowScroll: () => useWindowScroll
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(useWindowScroll_exports);
|
|
25
|
+
var import_useScroll = require("../useScroll");
|
|
26
|
+
function useWindowScroll(options) {
|
|
27
|
+
return (0, import_useScroll.useScroll)(
|
|
28
|
+
typeof window !== "undefined" ? window : null,
|
|
29
|
+
options
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
33
|
+
0 && (module.exports = {
|
|
34
|
+
useWindowScroll
|
|
35
|
+
});
|
|
36
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/sensors/useWindowScroll/index.ts"],"sourcesContent":["\"use client\";\nimport { type UseScrollOptions, type UseScrollReturn, useScroll } from \"../useScroll\";\n\nexport type { UseScrollOptions, UseScrollReturn };\n\nexport function useWindowScroll(options?: UseScrollOptions): UseScrollReturn {\n return useScroll(\n typeof window !== \"undefined\" ? window : null,\n options,\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAAuE;AAIhE,SAAS,gBAAgB,SAA6C;AAC3E,aAAO;AAAA,IACL,OAAO,WAAW,cAAc,SAAS;AAAA,IACzC;AAAA,EACF;AACF;","names":[]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { useScroll } from "../useScroll";
|
|
3
|
+
function useWindowScroll(options) {
|
|
4
|
+
return useScroll(
|
|
5
|
+
typeof window !== "undefined" ? window : null,
|
|
6
|
+
options
|
|
7
|
+
);
|
|
8
|
+
}
|
|
9
|
+
export {
|
|
10
|
+
useWindowScroll
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/sensors/useWindowScroll/index.ts"],"sourcesContent":["\"use client\";\nimport { type UseScrollOptions, type UseScrollReturn, useScroll } from \"../useScroll\";\n\nexport type { UseScrollOptions, UseScrollReturn };\n\nexport function useWindowScroll(options?: UseScrollOptions): UseScrollReturn {\n return useScroll(\n typeof window !== \"undefined\" ? window : null,\n options,\n );\n}\n"],"mappings":";AACA,SAAsD,iBAAiB;AAIhE,SAAS,gBAAgB,SAA6C;AAC3E,SAAO;AAAA,IACL,OAAO,WAAW,cAAc,SAAS;AAAA,IACzC;AAAA,EACF;AACF;","names":[]}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
interface ConfigurableWindow {
|
|
2
|
+
window?: Window;
|
|
3
|
+
}
|
|
4
|
+
interface ConfigurableDocument {
|
|
5
|
+
document?: Document;
|
|
6
|
+
}
|
|
7
|
+
interface ConfigurableDocumentOrShadowRoot {
|
|
8
|
+
document?: DocumentOrShadowRoot;
|
|
9
|
+
}
|
|
10
|
+
interface ConfigurableNavigator {
|
|
11
|
+
navigator?: Navigator;
|
|
12
|
+
}
|
|
13
|
+
interface ConfigurableLocation {
|
|
14
|
+
location?: Location;
|
|
15
|
+
}
|
|
16
|
+
declare const defaultWindow: (Window & typeof globalThis) | undefined;
|
|
17
|
+
declare const defaultDocument: Document | undefined;
|
|
18
|
+
declare const defaultNavigator: Navigator | undefined;
|
|
19
|
+
declare const defaultLocation: Location | undefined;
|
|
20
|
+
|
|
21
|
+
export { type ConfigurableDocument, type ConfigurableDocumentOrShadowRoot, type ConfigurableLocation, type ConfigurableNavigator, type ConfigurableWindow, defaultDocument, defaultLocation, defaultNavigator, defaultWindow };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
interface ConfigurableWindow {
|
|
2
|
+
window?: Window;
|
|
3
|
+
}
|
|
4
|
+
interface ConfigurableDocument {
|
|
5
|
+
document?: Document;
|
|
6
|
+
}
|
|
7
|
+
interface ConfigurableDocumentOrShadowRoot {
|
|
8
|
+
document?: DocumentOrShadowRoot;
|
|
9
|
+
}
|
|
10
|
+
interface ConfigurableNavigator {
|
|
11
|
+
navigator?: Navigator;
|
|
12
|
+
}
|
|
13
|
+
interface ConfigurableLocation {
|
|
14
|
+
location?: Location;
|
|
15
|
+
}
|
|
16
|
+
declare const defaultWindow: (Window & typeof globalThis) | undefined;
|
|
17
|
+
declare const defaultDocument: Document | undefined;
|
|
18
|
+
declare const defaultNavigator: Navigator | undefined;
|
|
19
|
+
declare const defaultLocation: Location | undefined;
|
|
20
|
+
|
|
21
|
+
export { type ConfigurableDocument, type ConfigurableDocumentOrShadowRoot, type ConfigurableLocation, type ConfigurableNavigator, type ConfigurableWindow, defaultDocument, defaultLocation, defaultNavigator, defaultWindow };
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var configurable_exports = {};
|
|
20
|
+
__export(configurable_exports, {
|
|
21
|
+
defaultDocument: () => defaultDocument,
|
|
22
|
+
defaultLocation: () => defaultLocation,
|
|
23
|
+
defaultNavigator: () => defaultNavigator,
|
|
24
|
+
defaultWindow: () => defaultWindow
|
|
25
|
+
});
|
|
26
|
+
module.exports = __toCommonJS(configurable_exports);
|
|
27
|
+
var import_utils = require("./utils");
|
|
28
|
+
const defaultWindow = import_utils.isClient ? window : void 0;
|
|
29
|
+
const defaultDocument = import_utils.isClient ? window.document : void 0;
|
|
30
|
+
const defaultNavigator = import_utils.isClient ? window.navigator : void 0;
|
|
31
|
+
const defaultLocation = import_utils.isClient ? window.location : void 0;
|
|
32
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
33
|
+
0 && (module.exports = {
|
|
34
|
+
defaultDocument,
|
|
35
|
+
defaultLocation,
|
|
36
|
+
defaultNavigator,
|
|
37
|
+
defaultWindow
|
|
38
|
+
});
|
|
39
|
+
//# sourceMappingURL=configurable.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/shared/configurable.ts"],"sourcesContent":["import { isClient } from \"./utils\";\n\nexport interface ConfigurableWindow {\n window?: Window;\n}\n\nexport interface ConfigurableDocument {\n document?: Document;\n}\n\nexport interface ConfigurableDocumentOrShadowRoot {\n document?: DocumentOrShadowRoot;\n}\n\nexport interface ConfigurableNavigator {\n navigator?: Navigator;\n}\n\nexport interface ConfigurableLocation {\n location?: Location;\n}\n\nexport const defaultWindow = /* #__PURE__ */ isClient ? window : undefined;\n\nexport const defaultDocument = /* #__PURE__ */ isClient\n ? window.document\n : undefined;\n\nexport const defaultNavigator = /* #__PURE__ */ isClient\n ? window.navigator\n : undefined;\n\nexport const defaultLocation = /* #__PURE__ */ isClient\n ? window.location\n : undefined;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyB;AAsBlB,MAAM,gBAAgC,wBAAW,SAAS;AAE1D,MAAM,kBAAkC,wBAC3C,OAAO,WACP;AAEG,MAAM,mBAAmC,wBAC5C,OAAO,YACP;AAEG,MAAM,kBAAkC,wBAC3C,OAAO,WACP;","names":[]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { isClient } from "./utils";
|
|
2
|
+
const defaultWindow = isClient ? window : void 0;
|
|
3
|
+
const defaultDocument = isClient ? window.document : void 0;
|
|
4
|
+
const defaultNavigator = isClient ? window.navigator : void 0;
|
|
5
|
+
const defaultLocation = isClient ? window.location : void 0;
|
|
6
|
+
export {
|
|
7
|
+
defaultDocument,
|
|
8
|
+
defaultLocation,
|
|
9
|
+
defaultNavigator,
|
|
10
|
+
defaultWindow
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=configurable.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/shared/configurable.ts"],"sourcesContent":["import { isClient } from \"./utils\";\n\nexport interface ConfigurableWindow {\n window?: Window;\n}\n\nexport interface ConfigurableDocument {\n document?: Document;\n}\n\nexport interface ConfigurableDocumentOrShadowRoot {\n document?: DocumentOrShadowRoot;\n}\n\nexport interface ConfigurableNavigator {\n navigator?: Navigator;\n}\n\nexport interface ConfigurableLocation {\n location?: Location;\n}\n\nexport const defaultWindow = /* #__PURE__ */ isClient ? window : undefined;\n\nexport const defaultDocument = /* #__PURE__ */ isClient\n ? window.document\n : undefined;\n\nexport const defaultNavigator = /* #__PURE__ */ isClient\n ? window.navigator\n : undefined;\n\nexport const defaultLocation = /* #__PURE__ */ isClient\n ? window.location\n : undefined;\n"],"mappings":"AAAA,SAAS,gBAAgB;AAsBlB,MAAM,gBAAgC,WAAW,SAAS;AAE1D,MAAM,kBAAkC,WAC3C,OAAO,WACP;AAEG,MAAM,mBAAmC,WAC5C,OAAO,YACP;AAEG,MAAM,kBAAkC,WAC3C,OAAO,WACP;","names":[]}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var shared_exports = {};
|
|
20
|
+
__export(shared_exports, {
|
|
21
|
+
isWindow: () => isWindow
|
|
22
|
+
});
|
|
23
|
+
module.exports = __toCommonJS(shared_exports);
|
|
24
|
+
function isWindow(el) {
|
|
25
|
+
return typeof window !== "undefined" && el === window;
|
|
26
|
+
}
|
|
27
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
28
|
+
0 && (module.exports = {
|
|
29
|
+
isWindow
|
|
30
|
+
});
|
|
31
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/shared/index.ts"],"sourcesContent":["/** typeof window 우선 검사 — instanceof Window는 jsdom 환경에서 실패할 수 있음 */\nexport function isWindow(el: unknown): el is Window {\n return typeof window !== \"undefined\" && el === window;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACO,SAAS,SAAS,IAA2B;AAClD,SAAO,OAAO,WAAW,eAAe,OAAO;AACjD;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/shared/index.ts"],"sourcesContent":["/** typeof window 우선 검사 — instanceof Window는 jsdom 환경에서 실패할 수 있음 */\nexport function isWindow(el: unknown): el is Window {\n return typeof window !== \"undefined\" && el === window;\n}\n"],"mappings":"AACO,SAAS,SAAS,IAA2B;AAClD,SAAO,OAAO,WAAW,eAAe,OAAO;AACjD;","names":[]}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { MaybeElement } from '../../elements/useRef_/index.mjs';
|
|
2
|
+
import '@legendapp/state';
|
|
3
|
+
import 'react';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Normalizes one or more observable-element targets into a plain Element[].
|
|
7
|
+
*
|
|
8
|
+
* - `Ref$<T>` — calls `.get()` and unwraps the OpaqueObject via `.valueOf()`
|
|
9
|
+
* - `Observable<OpaqueObject<Element> | null>` — calls `.get()` and unwraps via `.valueOf()`
|
|
10
|
+
* - `Document` / `Window` — filtered out (not an Element, handled by callers)
|
|
11
|
+
* - `null` — filtered out
|
|
12
|
+
*
|
|
13
|
+
* When called inside `useObserve`, reading `.get()` registers observable
|
|
14
|
+
* dependencies so the observer re-fires when a tracked target changes.
|
|
15
|
+
*
|
|
16
|
+
* Currently shared by useResizeObserver.
|
|
17
|
+
* useIntersectionObserver, useMutationObserver will use this once implemented.
|
|
18
|
+
*/
|
|
19
|
+
declare function normalizeTargets(target?: MaybeElement | MaybeElement[]): Element[];
|
|
20
|
+
|
|
21
|
+
export { normalizeTargets };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { MaybeElement } from '../../elements/useRef_/index.js';
|
|
2
|
+
import '@legendapp/state';
|
|
3
|
+
import 'react';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Normalizes one or more observable-element targets into a plain Element[].
|
|
7
|
+
*
|
|
8
|
+
* - `Ref$<T>` — calls `.get()` and unwraps the OpaqueObject via `.valueOf()`
|
|
9
|
+
* - `Observable<OpaqueObject<Element> | null>` — calls `.get()` and unwraps via `.valueOf()`
|
|
10
|
+
* - `Document` / `Window` — filtered out (not an Element, handled by callers)
|
|
11
|
+
* - `null` — filtered out
|
|
12
|
+
*
|
|
13
|
+
* When called inside `useObserve`, reading `.get()` registers observable
|
|
14
|
+
* dependencies so the observer re-fires when a tracked target changes.
|
|
15
|
+
*
|
|
16
|
+
* Currently shared by useResizeObserver.
|
|
17
|
+
* useIntersectionObserver, useMutationObserver will use this once implemented.
|
|
18
|
+
*/
|
|
19
|
+
declare function normalizeTargets(target?: MaybeElement | MaybeElement[]): Element[];
|
|
20
|
+
|
|
21
|
+
export { normalizeTargets };
|