@jbpark/use-hooks 2.0.1 → 2.1.0
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.ko.md +18 -10
- package/README.md +16 -10
- package/dist/hooks/index.d.mts +12 -0
- package/dist/hooks/index.mjs +14 -0
- package/dist/hooks/useBodyScrollLock/index.d.mts +5 -0
- package/dist/hooks/useBodyScrollLock/index.mjs +115 -0
- package/dist/hooks/useBodyScrollLock/index.mjs.map +1 -0
- package/dist/hooks/useDebounce/index.d.mts +12 -0
- package/dist/hooks/useDebounce/index.mjs +41 -0
- package/dist/hooks/useDebounce/index.mjs.map +1 -0
- package/dist/hooks/useElementPosition/index.d.mts +8 -0
- package/dist/hooks/useElementPosition/index.mjs +32 -0
- package/dist/hooks/useElementPosition/index.mjs.map +1 -0
- package/dist/hooks/useElementScroll/index.d.mts +15 -0
- package/dist/hooks/useElementScroll/index.mjs +68 -0
- package/dist/hooks/useElementScroll/index.mjs.map +1 -0
- package/dist/hooks/useImage/index.d.mts +14 -0
- package/dist/hooks/useImage/index.mjs +56 -0
- package/dist/hooks/useImage/index.mjs.map +1 -0
- package/dist/hooks/useLocalStorage/index.d.mts +5 -0
- package/dist/hooks/useLocalStorage/index.mjs +40 -0
- package/dist/hooks/useLocalStorage/index.mjs.map +1 -0
- package/dist/hooks/useRecursiveTimeout/index.d.mts +5 -0
- package/dist/hooks/useRecursiveTimeout/index.mjs +27 -0
- package/dist/hooks/useRecursiveTimeout/index.mjs.map +1 -0
- package/dist/hooks/useResponsiveSize/index.d.mts +26 -0
- package/dist/hooks/useResponsiveSize/index.mjs +108 -0
- package/dist/hooks/useResponsiveSize/index.mjs.map +1 -0
- package/dist/hooks/useScrollToElements/index.d.mts +14 -0
- package/dist/hooks/useScrollToElements/index.mjs +34 -0
- package/dist/hooks/useScrollToElements/index.mjs.map +1 -0
- package/dist/hooks/useThrottle/index.d.mts +5 -0
- package/dist/hooks/useThrottle/index.mjs +42 -0
- package/dist/hooks/useThrottle/index.mjs.map +1 -0
- package/dist/hooks/useViewport/index.d.mts +18 -0
- package/dist/hooks/useViewport/index.mjs +87 -0
- package/dist/hooks/useViewport/index.mjs.map +1 -0
- package/dist/hooks/useWindowScroll/index.d.mts +12 -0
- package/dist/hooks/useWindowScroll/index.mjs +60 -0
- package/dist/hooks/useWindowScroll/index.mjs.map +1 -0
- package/dist/index.d.mts +14 -0
- package/dist/index.mjs +15 -0
- package/package.json +7 -8
- package/dist/index.cjs +0 -1
- package/dist/index.d.ts +0 -106
- package/dist/index.js +0 -422
- package/dist/vite.svg +0 -1
package/dist/index.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),E=(e,{delay:o=100,autoInvoke:d=!0},t=[])=>{const s=n.useRef(null),c=n.useRef(e),i=n.useRef(t),l=n.useRef(void 0);n.useEffect(()=>{c.current=e}),n.useEffect(()=>{i.current=t});const r=n.useRef(null);return r.current||(r.current=((...u)=>{s.current&&clearTimeout(s.current),s.current=setTimeout(()=>{c.current(...u)},o)})),n.useEffect(()=>{const u=l.current===void 0||l.current.length!==t.length||l.current.some((a,w)=>a!==t[w]);u&&s.current&&clearTimeout(s.current),d&&u&&(l.current===void 0?c.current():r.current&&r.current()),l.current=t}),n.useEffect(()=>()=>{s.current&&clearTimeout(s.current)},[]),r.current},S=(e=!0)=>{n.useEffect(()=>{if(!e)return;const o=window.scrollY,d=/iPad|iPhone|iPod/.test(navigator.userAgent),t={documentElement:{overflow:document.documentElement.style.overflow,height:document.documentElement.style.height,position:document.documentElement.style.position,width:document.documentElement.style.width},body:{overflow:document.body.style.overflow,height:document.body.style.height,position:document.body.style.position,top:document.body.style.top,left:document.body.style.left,right:document.body.style.right,width:document.body.style.width,webkitOverflowScrolling:document.body.style.getPropertyValue("-webkit-overflow-scrolling")}};if(document.documentElement.style.overflow="hidden",document.documentElement.style.height="100%",document.documentElement.style.position="fixed",document.documentElement.style.width="100%",document.body.style.overflow="hidden",document.body.style.height="100%",document.body.style.position="fixed",document.body.style.top=`-${o}px`,document.body.style.left="0",document.body.style.right="0",document.body.style.width="100%",d){document.body.style.setProperty("-webkit-overflow-scrolling","touch");const s=r=>{(r.target===document.body||r.target===document.documentElement||r.target===window)&&(r.preventDefault(),r.stopPropagation(),r.stopImmediatePropagation())},c=()=>{window.scrollTo(0,0),document.body.scrollTop=0,document.documentElement.scrollTop=0},i=["scroll","touchmove","touchstart","touchend"];i.forEach(r=>{window.addEventListener(r,s,{passive:!1,capture:!0}),document.addEventListener(r,s,{passive:!1,capture:!0}),document.body.addEventListener(r,s,{passive:!1,capture:!0})});const l=setInterval(c,16);return()=>{clearInterval(l),i.forEach(r=>{window.removeEventListener(r,s,{capture:!0}),document.removeEventListener(r,s,{capture:!0}),document.body.removeEventListener(r,s,{capture:!0})}),document.documentElement.style.overflow=t.documentElement.overflow,document.documentElement.style.height=t.documentElement.height,document.documentElement.style.position=t.documentElement.position,document.documentElement.style.width=t.documentElement.width,document.body.style.overflow=t.body.overflow,document.body.style.height=t.body.height,document.body.style.position=t.body.position,document.body.style.top=t.body.top,document.body.style.left=t.body.left,document.body.style.right=t.body.right,document.body.style.width=t.body.width,t.body.webkitOverflowScrolling?document.body.style.setProperty("-webkit-overflow-scrolling",t.body.webkitOverflowScrolling):document.body.style.removeProperty("-webkit-overflow-scrolling"),window.scrollTo(0,o)}}return()=>{document.documentElement.style.overflow=t.documentElement.overflow,document.documentElement.style.height=t.documentElement.height,document.documentElement.style.position=t.documentElement.position,document.documentElement.style.width=t.documentElement.width,document.body.style.overflow=t.body.overflow,document.body.style.height=t.body.height,document.body.style.position=t.body.position,document.body.style.top=t.body.top,document.body.style.left=t.body.left,document.body.style.right=t.body.right,document.body.style.width=t.body.width,window.scrollTo(0,o)}},[e])},L=e=>{const[o,d]=n.useState(null);return n.useEffect(()=>{const t=i=>typeof i=="string"?document.querySelector(i):i.current,s=()=>{const i=t(e);d(i?i.getBoundingClientRect():null)},c=()=>{requestAnimationFrame(s)};return s(),window.addEventListener("scroll",c,{passive:!0}),window.addEventListener("resize",c,{passive:!0}),()=>{window.removeEventListener("scroll",c),window.removeEventListener("resize",c)}},[e]),o},T=()=>{const[e,o]=n.useState(null),[d,t]=n.useState({scrollY:0,scrollPercentage:0,isAtTop:!0,isAtBottom:!1,scrollableHeight:0,clientHeight:0,scrollHeight:0}),s=n.useCallback(c=>{o(c)},[]);return n.useEffect(()=>{if(!e)return;const c=()=>{const{scrollTop:r,scrollHeight:u,clientHeight:a}=e,w=u-a;if(w<=0){t({scrollY:0,scrollPercentage:0,isAtTop:!0,isAtBottom:!0,scrollableHeight:0,clientHeight:a,scrollHeight:u});return}const m=Math.min(100,Math.max(0,r/w*100));t({scrollY:r,scrollPercentage:m,isAtTop:r<=0,isAtBottom:r>=w-1,scrollableHeight:w,clientHeight:a,scrollHeight:u})};c();const i=()=>{c()};e.addEventListener("scroll",i,{passive:!0});const l=new ResizeObserver(()=>{c()});return l.observe(e),()=>{e.removeEventListener("scroll",i),l.unobserve(e)}},[e]),{...d,element:e,setRef:s}},f={sm:640,md:768,lg:1024,xl:1280,"2xl":1536},x=e=>{let o="xs";return e>=f["2xl"]?o="2xl":e>=f.xl?o="xl":e>=f.lg?o="lg":e>=f.md?o="md":e>=f.sm?o="sm":o="xs",{current:o,xs:e<f.sm,sm:e>=f.sm&&e<f.md,md:e>=f.md&&e<f.lg,lg:e>=f.lg&&e<f.xl,xl:e>=f.xl&&e<f["2xl"],"2xl":e>=f["2xl"]}},R=e=>{const{delay:o=100,container:d}=e||{},[t,s]=n.useState({width:0,height:0}),[c,i]=n.useState({current:"xs",xs:!0,sm:!1,md:!1,lg:!1,xl:!1,"2xl":!1}),[l,r]=n.useState({width:0,height:0}),u=n.useRef(null),a=n.useRef(null);return E(()=>{r(t)},{delay:o},[t]),n.useEffect(()=>{const w=()=>{const h=d??u.current??document.body;if(!h)return;const{offsetWidth:y,offsetHeight:v}=h;s(p=>p.width!==y||p.height!==v?{width:y,height:v}:p),i(p=>{const b=x(y);return p.current!==b.current?b:p})},m=()=>{const h=d??u.current??document.body;h&&(w(),a.current&&a.current.disconnect(),a.current=new ResizeObserver(()=>{requestAnimationFrame(()=>{w()})}),a.current.observe(h))},g=()=>{a.current&&(a.current.disconnect(),a.current=null)};return m(),()=>{g()}},[d]),{size:l,breakpoint:c,ref:u}},V=(e,o={})=>{const{retryCount:d=0,retryDelay:t=1e3}=o,[s,c]=n.useState(!0),[i,l]=n.useState(null),[r,u]=n.useState(!1),[a,w]=n.useState(0),m=n.useCallback(()=>{if(!e){c(!1),u(!1);return}c(!0),l(null);const h=new Image;h.src=e,h.onload=()=>{c(!1),u(!0),l(null),w(0)},h.onerror=y=>{c(!1),u(!1),l(y),a<d&&setTimeout(()=>{w(v=>v+1)},t)}},[e,a,d,t]);n.useEffect(()=>{m()},[m]);const g=n.useCallback(()=>{w(0),m()},[m]);return{loading:s,error:i,loaded:r,retry:g}},z=(e,o)=>{const d=n.useRef(o),[t,s]=n.useState(()=>{if(typeof window>"u")return o;try{const i=window.localStorage.getItem(e);return i?JSON.parse(i):o}catch{return o}});n.useEffect(()=>{if(!(typeof window>"u"))try{const i=window.localStorage.getItem(e);i?s(JSON.parse(i)):window.localStorage.setItem(e,JSON.stringify(d.current))}catch(i){console.error(`Error reading localStorage key "${e}":`,i)}},[e]);const c=n.useCallback(i=>{try{s(l=>{const r=i instanceof Function?i(l):i;return localStorage.setItem(e,JSON.stringify(r)),r})}catch(l){console.error(`Error setting localStorage key "${e}":`,l)}},[e]);return[t,c]},P=(e,o)=>{const d=n.useRef(e);n.useEffect(()=>{d.current=e},[e]),n.useEffect(()=>{let t;function s(){const c=d.current();c instanceof Promise?c.then(()=>{o&&(t=setTimeout(s,o))}):o&&(t=setTimeout(s,o))}if(o)return t=setTimeout(s,o),()=>t&&clearTimeout(t)},[o])},H=e=>{const o=n.useRef([]),d=n.useCallback(s=>{if(o.current[s]&&(o.current[s].scrollIntoView({behavior:"smooth",block:"start",inline:"start",...e}),e?.offset)){const c=o.current[s].getBoundingClientRect().top+window.scrollY-e.offset;window.scrollTo({top:c,behavior:e.behavior||"smooth"})}},[e]),t=n.useCallback((s,c)=>{o.current[c]=s},[]);return{elementRefs:o,setElementRef:t,scrollToElement:d}},I=()=>{const[e,o]=n.useState({x:0,y:0,percent:{x:0,y:0}});return n.useEffect(()=>{const d=()=>{const i=window.scrollX||0,l=window.scrollY||0,r=/iPad|iPhone|iPod/.test(navigator.userAgent),u=window.visualViewport,a=r&&u?u.width:window.innerWidth,w=r&&u?u.height:window.innerHeight,m=Math.max(0,document.documentElement.scrollWidth-a),g=Math.max(0,document.documentElement.scrollHeight-w),h=m===0?0:Math.min(100,i/m*100),y=g===0?0:Math.min(100,l/g*100);o({x:i,y:l,percent:{x:Math.floor(Math.max(0,h)),y:Math.floor(Math.max(0,y))}})};d();const t=()=>{d()},s=()=>{setTimeout(d,100)},c=()=>{setTimeout(d,50)};return window.addEventListener("scroll",t,{passive:!0}),window.addEventListener("resize",s),window.addEventListener("orientationchange",s),window.visualViewport&&window.visualViewport.addEventListener("resize",c),()=>{window.removeEventListener("scroll",t),window.removeEventListener("resize",s),window.removeEventListener("orientationchange",s),window.visualViewport&&window.visualViewport.removeEventListener("resize",c)}},[]),e},k=(e={})=>{const{isInApp:o=!1,debounce:d=100}=e,[t,s]=n.useState({width:0,height:0,offsetLeft:0,offsetTop:0,pageLeft:0,pageTop:0,scale:1}),c=n.useCallback(()=>{const l=window.innerHeight,r=window.visualViewport?.height||l,u=document.documentElement.clientHeight,a=document.body.clientHeight;return window.visualViewport&&Math.abs(r-l)>100?r:Math.max(l,u,a)},[]),i=n.useCallback(()=>{if(window.visualViewport&&!o)return window.visualViewport;const l=window.visualViewport?.width||window.innerWidth,r=o?c():window.visualViewport?.height||window.innerHeight;return{width:l,height:r,offsetLeft:window.visualViewport?.offsetLeft||0,offsetTop:window.visualViewport?.offsetTop||0,pageLeft:window.scrollX??window.pageXOffset??0,pageTop:window.scrollY??window.pageYOffset??0,scale:window.visualViewport?.scale||1}},[o,c]);return n.useEffect(()=>{let l;const r=()=>{clearTimeout(l),l=setTimeout(()=>{s(i())},d)},u=()=>s(i());u();const a=["resize","orientationchange"];o&&a.push("focus","blur","touchstart","touchend"),a.forEach(m=>{m==="resize"||m==="orientationchange"?window.addEventListener(m,r):window.addEventListener(m,u,{passive:!0})}),window.visualViewport&&(window.visualViewport.addEventListener("resize",u),window.visualViewport.addEventListener("scroll",u));let w;if(o){let m=i().height;w=setInterval(()=>{const g=i().height;Math.abs(g-m)>50&&(m=g,u())},500)}return()=>{clearTimeout(l),w&&clearInterval(w),a.forEach(m=>{window.removeEventListener(m,m==="resize"||m==="orientationchange"?r:u)}),window.visualViewport&&(window.visualViewport.removeEventListener("resize",u),window.visualViewport.removeEventListener("scroll",u))}},[i,o,d]),t};exports.useBodyScrollLock=S;exports.useDebounce=E;exports.useElementPosition=L;exports.useElementScroll=T;exports.useImage=V;exports.useLocalStorage=z;exports.useRecursiveTimeout=P;exports.useResponsiveSize=R;exports.useScrollToElements=H;exports.useViewport=k;exports.useWindowScroll=I;
|
package/dist/index.d.ts
DELETED
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
import { RefObject } from 'react';
|
|
2
|
-
|
|
3
|
-
declare type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
4
|
-
|
|
5
|
-
declare interface BreakpointInfo {
|
|
6
|
-
current: Breakpoint;
|
|
7
|
-
xs: boolean;
|
|
8
|
-
sm: boolean;
|
|
9
|
-
md: boolean;
|
|
10
|
-
lg: boolean;
|
|
11
|
-
xl: boolean;
|
|
12
|
-
'2xl': boolean;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
declare type ElementReference<T> = string | RefObject<T>;
|
|
16
|
-
|
|
17
|
-
declare interface Options {
|
|
18
|
-
delay?: number;
|
|
19
|
-
autoInvoke?: boolean;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
declare interface Options_2 {
|
|
23
|
-
delay?: number;
|
|
24
|
-
container?: HTMLElement | null;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
declare interface Options_3 {
|
|
28
|
-
retryCount?: number;
|
|
29
|
-
retryDelay?: number;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
declare interface Options_4 extends ScrollIntoViewOptions {
|
|
33
|
-
offset?: number;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
declare interface Options_5 {
|
|
37
|
-
isInApp?: boolean;
|
|
38
|
-
debounce?: number;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
export declare const useBodyScrollLock: (enabled?: boolean) => void;
|
|
42
|
-
|
|
43
|
-
export declare const useDebounce: <T extends (...args: unknown[]) => unknown>(callback: T, { delay, autoInvoke }: Options, deps?: React.DependencyList) => T;
|
|
44
|
-
|
|
45
|
-
export declare const useElementPosition: <T>(elementRef: ElementReference<T>) => DOMRect | null;
|
|
46
|
-
|
|
47
|
-
export declare const useElementScroll: () => {
|
|
48
|
-
element: HTMLElement | null;
|
|
49
|
-
setRef: (el: HTMLElement | null) => void;
|
|
50
|
-
scrollY: number;
|
|
51
|
-
scrollPercentage: number;
|
|
52
|
-
isAtTop: boolean;
|
|
53
|
-
isAtBottom: boolean;
|
|
54
|
-
scrollableHeight: number;
|
|
55
|
-
clientHeight: number;
|
|
56
|
-
scrollHeight: number;
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
export declare const useImage: (src: string, options?: Options_3) => {
|
|
60
|
-
loading: boolean;
|
|
61
|
-
error: string | Event | null;
|
|
62
|
-
loaded: boolean;
|
|
63
|
-
retry: () => void;
|
|
64
|
-
};
|
|
65
|
-
|
|
66
|
-
export declare const useLocalStorage: <T>(key: string, initialValue: T) => readonly [T, (value: T | ((val: T) => T)) => void];
|
|
67
|
-
|
|
68
|
-
export declare const useRecursiveTimeout: <T>(callback: () => Promise<T> | (() => void), delay: number | null) => void;
|
|
69
|
-
|
|
70
|
-
export declare const useResponsiveSize: <T extends HTMLElement>(options?: Options_2) => {
|
|
71
|
-
size: {
|
|
72
|
-
width: number;
|
|
73
|
-
height: number;
|
|
74
|
-
};
|
|
75
|
-
breakpoint: BreakpointInfo;
|
|
76
|
-
ref: RefObject<T | null>;
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
export declare const useScrollToElements: (options?: Options_4) => {
|
|
80
|
-
elementRefs: RefObject<HTMLElement[]>;
|
|
81
|
-
setElementRef: (element: HTMLElement, index: number) => void;
|
|
82
|
-
scrollToElement: (index: number) => void;
|
|
83
|
-
};
|
|
84
|
-
|
|
85
|
-
export declare const useViewport: (options?: Options_5) => ViewportInfo;
|
|
86
|
-
|
|
87
|
-
export declare const useWindowScroll: () => {
|
|
88
|
-
x: number;
|
|
89
|
-
y: number;
|
|
90
|
-
percent: {
|
|
91
|
-
x: number;
|
|
92
|
-
y: number;
|
|
93
|
-
};
|
|
94
|
-
};
|
|
95
|
-
|
|
96
|
-
declare type ViewportInfo = VisualViewport | {
|
|
97
|
-
width: number;
|
|
98
|
-
height: number;
|
|
99
|
-
offsetLeft: number;
|
|
100
|
-
offsetTop: number;
|
|
101
|
-
pageLeft: number;
|
|
102
|
-
pageTop: number;
|
|
103
|
-
scale: number;
|
|
104
|
-
};
|
|
105
|
-
|
|
106
|
-
export { }
|
package/dist/index.js
DELETED
|
@@ -1,422 +0,0 @@
|
|
|
1
|
-
import { useRef as y, useEffect as f, useState as h, useCallback as v } from "react";
|
|
2
|
-
const x = (e, { delay: o = 100, autoInvoke: d = !0 }, t = []) => {
|
|
3
|
-
const n = y(null), i = y(e), s = y(t), c = y(void 0);
|
|
4
|
-
f(() => {
|
|
5
|
-
i.current = e;
|
|
6
|
-
}), f(() => {
|
|
7
|
-
s.current = t;
|
|
8
|
-
});
|
|
9
|
-
const r = y(null);
|
|
10
|
-
return r.current || (r.current = ((...l) => {
|
|
11
|
-
n.current && clearTimeout(n.current), n.current = setTimeout(() => {
|
|
12
|
-
i.current(...l);
|
|
13
|
-
}, o);
|
|
14
|
-
})), f(() => {
|
|
15
|
-
const l = c.current === void 0 || c.current.length !== t.length || c.current.some((u, a) => u !== t[a]);
|
|
16
|
-
l && n.current && clearTimeout(n.current), d && l && (c.current === void 0 ? i.current() : r.current && r.current()), c.current = t;
|
|
17
|
-
}), f(() => () => {
|
|
18
|
-
n.current && clearTimeout(n.current);
|
|
19
|
-
}, []), r.current;
|
|
20
|
-
}, z = (e = !0) => {
|
|
21
|
-
f(() => {
|
|
22
|
-
if (!e)
|
|
23
|
-
return;
|
|
24
|
-
const o = window.scrollY, d = /iPad|iPhone|iPod/.test(navigator.userAgent), t = {
|
|
25
|
-
documentElement: {
|
|
26
|
-
overflow: document.documentElement.style.overflow,
|
|
27
|
-
height: document.documentElement.style.height,
|
|
28
|
-
position: document.documentElement.style.position,
|
|
29
|
-
width: document.documentElement.style.width
|
|
30
|
-
},
|
|
31
|
-
body: {
|
|
32
|
-
overflow: document.body.style.overflow,
|
|
33
|
-
height: document.body.style.height,
|
|
34
|
-
position: document.body.style.position,
|
|
35
|
-
top: document.body.style.top,
|
|
36
|
-
left: document.body.style.left,
|
|
37
|
-
right: document.body.style.right,
|
|
38
|
-
width: document.body.style.width,
|
|
39
|
-
webkitOverflowScrolling: document.body.style.getPropertyValue(
|
|
40
|
-
"-webkit-overflow-scrolling"
|
|
41
|
-
)
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
|
-
if (document.documentElement.style.overflow = "hidden", document.documentElement.style.height = "100%", document.documentElement.style.position = "fixed", document.documentElement.style.width = "100%", document.body.style.overflow = "hidden", document.body.style.height = "100%", document.body.style.position = "fixed", document.body.style.top = `-${o}px`, document.body.style.left = "0", document.body.style.right = "0", document.body.style.width = "100%", d) {
|
|
45
|
-
document.body.style.setProperty("-webkit-overflow-scrolling", "touch");
|
|
46
|
-
const n = (r) => {
|
|
47
|
-
(r.target === document.body || r.target === document.documentElement || r.target === window) && (r.preventDefault(), r.stopPropagation(), r.stopImmediatePropagation());
|
|
48
|
-
}, i = () => {
|
|
49
|
-
window.scrollTo(0, 0), document.body.scrollTop = 0, document.documentElement.scrollTop = 0;
|
|
50
|
-
}, s = ["scroll", "touchmove", "touchstart", "touchend"];
|
|
51
|
-
s.forEach((r) => {
|
|
52
|
-
window.addEventListener(r, n, {
|
|
53
|
-
passive: !1,
|
|
54
|
-
capture: !0
|
|
55
|
-
}), document.addEventListener(r, n, {
|
|
56
|
-
passive: !1,
|
|
57
|
-
capture: !0
|
|
58
|
-
}), document.body.addEventListener(r, n, {
|
|
59
|
-
passive: !1,
|
|
60
|
-
capture: !0
|
|
61
|
-
});
|
|
62
|
-
});
|
|
63
|
-
const c = setInterval(i, 16);
|
|
64
|
-
return () => {
|
|
65
|
-
clearInterval(c), s.forEach((r) => {
|
|
66
|
-
window.removeEventListener(r, n, { capture: !0 }), document.removeEventListener(r, n, { capture: !0 }), document.body.removeEventListener(r, n, {
|
|
67
|
-
capture: !0
|
|
68
|
-
});
|
|
69
|
-
}), document.documentElement.style.overflow = t.documentElement.overflow, document.documentElement.style.height = t.documentElement.height, document.documentElement.style.position = t.documentElement.position, document.documentElement.style.width = t.documentElement.width, document.body.style.overflow = t.body.overflow, document.body.style.height = t.body.height, document.body.style.position = t.body.position, document.body.style.top = t.body.top, document.body.style.left = t.body.left, document.body.style.right = t.body.right, document.body.style.width = t.body.width, t.body.webkitOverflowScrolling ? document.body.style.setProperty(
|
|
70
|
-
"-webkit-overflow-scrolling",
|
|
71
|
-
t.body.webkitOverflowScrolling
|
|
72
|
-
) : document.body.style.removeProperty("-webkit-overflow-scrolling"), window.scrollTo(0, o);
|
|
73
|
-
};
|
|
74
|
-
}
|
|
75
|
-
return () => {
|
|
76
|
-
document.documentElement.style.overflow = t.documentElement.overflow, document.documentElement.style.height = t.documentElement.height, document.documentElement.style.position = t.documentElement.position, document.documentElement.style.width = t.documentElement.width, document.body.style.overflow = t.body.overflow, document.body.style.height = t.body.height, document.body.style.position = t.body.position, document.body.style.top = t.body.top, document.body.style.left = t.body.left, document.body.style.right = t.body.right, document.body.style.width = t.body.width, window.scrollTo(0, o);
|
|
77
|
-
};
|
|
78
|
-
}, [e]);
|
|
79
|
-
}, H = (e) => {
|
|
80
|
-
const [o, d] = h(null);
|
|
81
|
-
return f(() => {
|
|
82
|
-
const t = (s) => typeof s == "string" ? document.querySelector(s) : s.current, n = () => {
|
|
83
|
-
const s = t(e);
|
|
84
|
-
d(s ? s.getBoundingClientRect() : null);
|
|
85
|
-
}, i = () => {
|
|
86
|
-
requestAnimationFrame(n);
|
|
87
|
-
};
|
|
88
|
-
return n(), window.addEventListener("scroll", i, { passive: !0 }), window.addEventListener("resize", i, { passive: !0 }), () => {
|
|
89
|
-
window.removeEventListener("scroll", i), window.removeEventListener("resize", i);
|
|
90
|
-
};
|
|
91
|
-
}, [e]), o;
|
|
92
|
-
}, I = () => {
|
|
93
|
-
const [e, o] = h(null), [d, t] = h({
|
|
94
|
-
scrollY: 0,
|
|
95
|
-
scrollPercentage: 0,
|
|
96
|
-
isAtTop: !0,
|
|
97
|
-
isAtBottom: !1,
|
|
98
|
-
scrollableHeight: 0,
|
|
99
|
-
clientHeight: 0,
|
|
100
|
-
scrollHeight: 0
|
|
101
|
-
}), n = v((i) => {
|
|
102
|
-
o(i);
|
|
103
|
-
}, []);
|
|
104
|
-
return f(() => {
|
|
105
|
-
if (!e)
|
|
106
|
-
return;
|
|
107
|
-
const i = () => {
|
|
108
|
-
const { scrollTop: r, scrollHeight: l, clientHeight: u } = e, a = l - u;
|
|
109
|
-
if (a <= 0) {
|
|
110
|
-
t({
|
|
111
|
-
scrollY: 0,
|
|
112
|
-
scrollPercentage: 0,
|
|
113
|
-
isAtTop: !0,
|
|
114
|
-
isAtBottom: !0,
|
|
115
|
-
scrollableHeight: 0,
|
|
116
|
-
clientHeight: u,
|
|
117
|
-
scrollHeight: l
|
|
118
|
-
});
|
|
119
|
-
return;
|
|
120
|
-
}
|
|
121
|
-
const m = Math.min(
|
|
122
|
-
100,
|
|
123
|
-
Math.max(0, r / a * 100)
|
|
124
|
-
);
|
|
125
|
-
t({
|
|
126
|
-
scrollY: r,
|
|
127
|
-
scrollPercentage: m,
|
|
128
|
-
isAtTop: r <= 0,
|
|
129
|
-
isAtBottom: r >= a - 1,
|
|
130
|
-
scrollableHeight: a,
|
|
131
|
-
clientHeight: u,
|
|
132
|
-
scrollHeight: l
|
|
133
|
-
});
|
|
134
|
-
};
|
|
135
|
-
i();
|
|
136
|
-
const s = () => {
|
|
137
|
-
i();
|
|
138
|
-
};
|
|
139
|
-
e.addEventListener("scroll", s, { passive: !0 });
|
|
140
|
-
const c = new ResizeObserver(() => {
|
|
141
|
-
i();
|
|
142
|
-
});
|
|
143
|
-
return c.observe(e), () => {
|
|
144
|
-
e.removeEventListener("scroll", s), c.unobserve(e);
|
|
145
|
-
};
|
|
146
|
-
}, [e]), { ...d, element: e, setRef: n };
|
|
147
|
-
}, w = {
|
|
148
|
-
// < 640px
|
|
149
|
-
sm: 640,
|
|
150
|
-
// >= 640px
|
|
151
|
-
md: 768,
|
|
152
|
-
// >= 768px
|
|
153
|
-
lg: 1024,
|
|
154
|
-
// >= 1024px
|
|
155
|
-
xl: 1280,
|
|
156
|
-
// >= 1280px
|
|
157
|
-
"2xl": 1536
|
|
158
|
-
// >= 1536px
|
|
159
|
-
}, T = (e) => {
|
|
160
|
-
let o = "xs";
|
|
161
|
-
return e >= w["2xl"] ? o = "2xl" : e >= w.xl ? o = "xl" : e >= w.lg ? o = "lg" : e >= w.md ? o = "md" : e >= w.sm ? o = "sm" : o = "xs", {
|
|
162
|
-
current: o,
|
|
163
|
-
xs: e < w.sm,
|
|
164
|
-
sm: e >= w.sm && e < w.md,
|
|
165
|
-
md: e >= w.md && e < w.lg,
|
|
166
|
-
lg: e >= w.lg && e < w.xl,
|
|
167
|
-
xl: e >= w.xl && e < w["2xl"],
|
|
168
|
-
"2xl": e >= w["2xl"]
|
|
169
|
-
};
|
|
170
|
-
}, P = (e) => {
|
|
171
|
-
const { delay: o = 100, container: d } = e || {}, [t, n] = h({ width: 0, height: 0 }), [i, s] = h({
|
|
172
|
-
current: "xs",
|
|
173
|
-
xs: !0,
|
|
174
|
-
sm: !1,
|
|
175
|
-
md: !1,
|
|
176
|
-
lg: !1,
|
|
177
|
-
xl: !1,
|
|
178
|
-
"2xl": !1
|
|
179
|
-
}), [c, r] = h({ width: 0, height: 0 }), l = y(null), u = y(null);
|
|
180
|
-
return x(
|
|
181
|
-
() => {
|
|
182
|
-
r(t);
|
|
183
|
-
},
|
|
184
|
-
{ delay: o },
|
|
185
|
-
[t]
|
|
186
|
-
), f(() => {
|
|
187
|
-
const a = () => {
|
|
188
|
-
const g = d ?? l.current ?? document.body;
|
|
189
|
-
if (!g)
|
|
190
|
-
return;
|
|
191
|
-
const { offsetWidth: b, offsetHeight: S } = g;
|
|
192
|
-
n((E) => E.width !== b || E.height !== S ? { width: b, height: S } : E), s((E) => {
|
|
193
|
-
const L = T(b);
|
|
194
|
-
return E.current !== L.current ? L : E;
|
|
195
|
-
});
|
|
196
|
-
}, m = () => {
|
|
197
|
-
const g = d ?? l.current ?? document.body;
|
|
198
|
-
g && (a(), u.current && u.current.disconnect(), u.current = new ResizeObserver(() => {
|
|
199
|
-
requestAnimationFrame(() => {
|
|
200
|
-
a();
|
|
201
|
-
});
|
|
202
|
-
}), u.current.observe(g));
|
|
203
|
-
}, p = () => {
|
|
204
|
-
u.current && (u.current.disconnect(), u.current = null);
|
|
205
|
-
};
|
|
206
|
-
return m(), () => {
|
|
207
|
-
p();
|
|
208
|
-
};
|
|
209
|
-
}, [d]), {
|
|
210
|
-
size: c,
|
|
211
|
-
breakpoint: i,
|
|
212
|
-
ref: l
|
|
213
|
-
};
|
|
214
|
-
}, R = (e, o = {}) => {
|
|
215
|
-
const { retryCount: d = 0, retryDelay: t = 1e3 } = o, [n, i] = h(!0), [s, c] = h(null), [r, l] = h(!1), [u, a] = h(0), m = v(() => {
|
|
216
|
-
if (!e) {
|
|
217
|
-
i(!1), l(!1);
|
|
218
|
-
return;
|
|
219
|
-
}
|
|
220
|
-
i(!0), c(null);
|
|
221
|
-
const g = new Image();
|
|
222
|
-
g.src = e, g.onload = () => {
|
|
223
|
-
i(!1), l(!0), c(null), a(0);
|
|
224
|
-
}, g.onerror = (b) => {
|
|
225
|
-
i(!1), l(!1), c(b), u < d && setTimeout(() => {
|
|
226
|
-
a((S) => S + 1);
|
|
227
|
-
}, t);
|
|
228
|
-
};
|
|
229
|
-
}, [e, u, d, t]);
|
|
230
|
-
f(() => {
|
|
231
|
-
m();
|
|
232
|
-
}, [m]);
|
|
233
|
-
const p = v(() => {
|
|
234
|
-
a(0), m();
|
|
235
|
-
}, [m]);
|
|
236
|
-
return {
|
|
237
|
-
loading: n,
|
|
238
|
-
error: s,
|
|
239
|
-
loaded: r,
|
|
240
|
-
retry: p
|
|
241
|
-
};
|
|
242
|
-
}, A = (e, o) => {
|
|
243
|
-
const d = y(o), [t, n] = h(() => {
|
|
244
|
-
if (typeof window > "u")
|
|
245
|
-
return o;
|
|
246
|
-
try {
|
|
247
|
-
const s = window.localStorage.getItem(e);
|
|
248
|
-
return s ? JSON.parse(s) : o;
|
|
249
|
-
} catch {
|
|
250
|
-
return o;
|
|
251
|
-
}
|
|
252
|
-
});
|
|
253
|
-
f(() => {
|
|
254
|
-
if (!(typeof window > "u"))
|
|
255
|
-
try {
|
|
256
|
-
const s = window.localStorage.getItem(e);
|
|
257
|
-
s ? n(JSON.parse(s)) : window.localStorage.setItem(e, JSON.stringify(d.current));
|
|
258
|
-
} catch (s) {
|
|
259
|
-
console.error(`Error reading localStorage key "${e}":`, s);
|
|
260
|
-
}
|
|
261
|
-
}, [e]);
|
|
262
|
-
const i = v(
|
|
263
|
-
(s) => {
|
|
264
|
-
try {
|
|
265
|
-
n((c) => {
|
|
266
|
-
const r = s instanceof Function ? s(c) : s;
|
|
267
|
-
return localStorage.setItem(e, JSON.stringify(r)), r;
|
|
268
|
-
});
|
|
269
|
-
} catch (c) {
|
|
270
|
-
console.error(`Error setting localStorage key "${e}":`, c);
|
|
271
|
-
}
|
|
272
|
-
},
|
|
273
|
-
[e]
|
|
274
|
-
);
|
|
275
|
-
return [t, i];
|
|
276
|
-
}, O = (e, o) => {
|
|
277
|
-
const d = y(e);
|
|
278
|
-
f(() => {
|
|
279
|
-
d.current = e;
|
|
280
|
-
}, [e]), f(() => {
|
|
281
|
-
let t;
|
|
282
|
-
function n() {
|
|
283
|
-
const i = d.current();
|
|
284
|
-
i instanceof Promise ? i.then(() => {
|
|
285
|
-
o && (t = setTimeout(n, o));
|
|
286
|
-
}) : o && (t = setTimeout(n, o));
|
|
287
|
-
}
|
|
288
|
-
if (o)
|
|
289
|
-
return t = setTimeout(n, o), () => t && clearTimeout(t);
|
|
290
|
-
}, [o]);
|
|
291
|
-
}, M = (e) => {
|
|
292
|
-
const o = y([]), d = v(
|
|
293
|
-
(n) => {
|
|
294
|
-
if (o.current[n] && (o.current[n].scrollIntoView({
|
|
295
|
-
behavior: "smooth",
|
|
296
|
-
block: "start",
|
|
297
|
-
inline: "start",
|
|
298
|
-
...e
|
|
299
|
-
}), e?.offset)) {
|
|
300
|
-
const i = o.current[n].getBoundingClientRect().top + window.scrollY - e.offset;
|
|
301
|
-
window.scrollTo({
|
|
302
|
-
top: i,
|
|
303
|
-
behavior: e.behavior || "smooth"
|
|
304
|
-
});
|
|
305
|
-
}
|
|
306
|
-
},
|
|
307
|
-
[e]
|
|
308
|
-
), t = v((n, i) => {
|
|
309
|
-
o.current[i] = n;
|
|
310
|
-
}, []);
|
|
311
|
-
return { elementRefs: o, setElementRef: t, scrollToElement: d };
|
|
312
|
-
}, Y = () => {
|
|
313
|
-
const [e, o] = h({
|
|
314
|
-
x: 0,
|
|
315
|
-
y: 0,
|
|
316
|
-
percent: {
|
|
317
|
-
x: 0,
|
|
318
|
-
y: 0
|
|
319
|
-
}
|
|
320
|
-
});
|
|
321
|
-
return f(() => {
|
|
322
|
-
const d = () => {
|
|
323
|
-
const s = window.scrollX || 0, c = window.scrollY || 0, r = /iPad|iPhone|iPod/.test(navigator.userAgent), l = window.visualViewport, u = r && l ? l.width : window.innerWidth, a = r && l ? l.height : window.innerHeight, m = Math.max(
|
|
324
|
-
0,
|
|
325
|
-
document.documentElement.scrollWidth - u
|
|
326
|
-
), p = Math.max(
|
|
327
|
-
0,
|
|
328
|
-
document.documentElement.scrollHeight - a
|
|
329
|
-
), g = m === 0 ? 0 : Math.min(100, s / m * 100), b = p === 0 ? 0 : Math.min(100, c / p * 100);
|
|
330
|
-
o({
|
|
331
|
-
x: s,
|
|
332
|
-
y: c,
|
|
333
|
-
percent: {
|
|
334
|
-
x: Math.floor(Math.max(0, g)),
|
|
335
|
-
y: Math.floor(Math.max(0, b))
|
|
336
|
-
}
|
|
337
|
-
});
|
|
338
|
-
};
|
|
339
|
-
d();
|
|
340
|
-
const t = () => {
|
|
341
|
-
d();
|
|
342
|
-
}, n = () => {
|
|
343
|
-
setTimeout(d, 100);
|
|
344
|
-
}, i = () => {
|
|
345
|
-
setTimeout(d, 50);
|
|
346
|
-
};
|
|
347
|
-
return window.addEventListener("scroll", t, { passive: !0 }), window.addEventListener("resize", n), window.addEventListener("orientationchange", n), window.visualViewport && window.visualViewport.addEventListener("resize", i), () => {
|
|
348
|
-
window.removeEventListener("scroll", t), window.removeEventListener("resize", n), window.removeEventListener("orientationchange", n), window.visualViewport && window.visualViewport.removeEventListener(
|
|
349
|
-
"resize",
|
|
350
|
-
i
|
|
351
|
-
);
|
|
352
|
-
};
|
|
353
|
-
}, []), e;
|
|
354
|
-
}, C = (e = {}) => {
|
|
355
|
-
const { isInApp: o = !1, debounce: d = 100 } = e, [t, n] = h({
|
|
356
|
-
width: 0,
|
|
357
|
-
height: 0,
|
|
358
|
-
offsetLeft: 0,
|
|
359
|
-
offsetTop: 0,
|
|
360
|
-
pageLeft: 0,
|
|
361
|
-
pageTop: 0,
|
|
362
|
-
scale: 1
|
|
363
|
-
}), i = v(() => {
|
|
364
|
-
const c = window.innerHeight, r = window.visualViewport?.height || c, l = document.documentElement.clientHeight, u = document.body.clientHeight;
|
|
365
|
-
return window.visualViewport && Math.abs(r - c) > 100 ? r : Math.max(c, l, u);
|
|
366
|
-
}, []), s = v(() => {
|
|
367
|
-
if (window.visualViewport && !o)
|
|
368
|
-
return window.visualViewport;
|
|
369
|
-
const c = window.visualViewport?.width || window.innerWidth, r = o ? i() : window.visualViewport?.height || window.innerHeight;
|
|
370
|
-
return {
|
|
371
|
-
width: c,
|
|
372
|
-
height: r,
|
|
373
|
-
offsetLeft: window.visualViewport?.offsetLeft || 0,
|
|
374
|
-
offsetTop: window.visualViewport?.offsetTop || 0,
|
|
375
|
-
pageLeft: window.scrollX ?? window.pageXOffset ?? 0,
|
|
376
|
-
pageTop: window.scrollY ?? window.pageYOffset ?? 0,
|
|
377
|
-
scale: window.visualViewport?.scale || 1
|
|
378
|
-
};
|
|
379
|
-
}, [o, i]);
|
|
380
|
-
return f(() => {
|
|
381
|
-
let c;
|
|
382
|
-
const r = () => {
|
|
383
|
-
clearTimeout(c), c = setTimeout(() => {
|
|
384
|
-
n(s());
|
|
385
|
-
}, d);
|
|
386
|
-
}, l = () => n(s());
|
|
387
|
-
l();
|
|
388
|
-
const u = ["resize", "orientationchange"];
|
|
389
|
-
o && u.push("focus", "blur", "touchstart", "touchend"), u.forEach((m) => {
|
|
390
|
-
m === "resize" || m === "orientationchange" ? window.addEventListener(m, r) : window.addEventListener(m, l, { passive: !0 });
|
|
391
|
-
}), window.visualViewport && (window.visualViewport.addEventListener("resize", l), window.visualViewport.addEventListener("scroll", l));
|
|
392
|
-
let a;
|
|
393
|
-
if (o) {
|
|
394
|
-
let m = s().height;
|
|
395
|
-
a = setInterval(() => {
|
|
396
|
-
const p = s().height;
|
|
397
|
-
Math.abs(p - m) > 50 && (m = p, l());
|
|
398
|
-
}, 500);
|
|
399
|
-
}
|
|
400
|
-
return () => {
|
|
401
|
-
clearTimeout(c), a && clearInterval(a), u.forEach((m) => {
|
|
402
|
-
window.removeEventListener(
|
|
403
|
-
m,
|
|
404
|
-
m === "resize" || m === "orientationchange" ? r : l
|
|
405
|
-
);
|
|
406
|
-
}), window.visualViewport && (window.visualViewport.removeEventListener("resize", l), window.visualViewport.removeEventListener("scroll", l));
|
|
407
|
-
};
|
|
408
|
-
}, [s, o, d]), t;
|
|
409
|
-
};
|
|
410
|
-
export {
|
|
411
|
-
z as useBodyScrollLock,
|
|
412
|
-
x as useDebounce,
|
|
413
|
-
H as useElementPosition,
|
|
414
|
-
I as useElementScroll,
|
|
415
|
-
R as useImage,
|
|
416
|
-
A as useLocalStorage,
|
|
417
|
-
O as useRecursiveTimeout,
|
|
418
|
-
P as useResponsiveSize,
|
|
419
|
-
M as useScrollToElements,
|
|
420
|
-
C as useViewport,
|
|
421
|
-
Y as useWindowScroll
|
|
422
|
-
};
|
package/dist/vite.svg
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|