@primereact/hooks 11.0.0-alpha.1 → 11.0.0-alpha.10

package/use-scrolltop/index.d.ts

@@ -0,0 +1,59 @@
+/**
+ * The options for the `useScrollTop` hook.
+ */
+export interface UseScrollTopOptions {
+    /**
+     * Reference to the target element.
+     * @default window
+     */
+    target?: Window | Element | null;
+    /**
+     * Defines the threshold value of the vertical scroll position of the target to toggle the visibility.
+     * @default 400
+     */
+    threshold?: number;
+    /**
+     * Defines the scrolling behaviour, 'smooth' adds an animation and 'auto' scrolls with a jump.
+     * @default smooth
+     */
+    behavior?: ScrollBehavior;
+}
+/**
+ * The exposes for the `useScrollTop` hook.
+ */
+export interface UseScrollTopExposes {
+    /**
+     * Current visible state as a boolean.
+     * @default false
+     */
+    visible: boolean;
+    /**
+     * Scrolls the target element to the top.
+     */
+    scrollToTop: () => void;
+}
+/**
+ * useScrollTop hook is used to enter input in a certain format such as numeric, date, currency, email and phone.
+ *
+ * @param {UseScrollTopOptions} options - The options for the scroll top behavior.
+ * @returns {UseScrollTopExposes} - The exposed methods for the scroll top behavior.
+ *
+ * @example
+ * ```tsx
+ * const { scrollToTop, visible } = useScrollTop({
+ *    target: elementRef.current,
+ *    threshold: 400,
+ *    behavior: 'smooth'
+ * });
+ *
+ * return (
+ *    <div ref={elementRef}>
+ *        {visible && (
+ *            <Button onClick={scrollToTop}>
+ *                 <i className="pi pi-arrow-up" />
+ *            </Button>
+ *         )}
+ *    </div>
+ * );
+ */
+export declare function useScrollTop(options?: UseScrollTopOptions): UseScrollTopExposes;

package/use-scrolltop/index.mjs

@@ -0,0 +1,2 @@
+import{getWindowScrollTop as f}from"@primeuix/utils";import*as e from"react";function d(n){let{target:o=typeof window!="undefined"?window:null,threshold:r=400,behavior:i="smooth"}=n||{},[c,s]=e.useState(!1),p=()=>{o==null||o.scroll({top:0,behavior:i})};return e.useEffect(()=>{if(!o)return;let a=l=>{l>r?s(!0):s(!1)},t=()=>{let l=o===window?f():o.scrollTop;a(l)};return o.addEventListener("scroll",t),()=>{o.removeEventListener("scroll",t)}},[o,r]),{visible:c,scrollToTop:p}}export{d as useScrollTop};
+//# sourceMappingURL=index.mjs.map

package/use-scrolltop/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/use-scrolltop/index.ts"],"sourcesContent":["import { getWindowScrollTop } from '@primeuix/utils';\nimport * as React from 'react';\n\n/**\n * The options for the `useScrollTop` hook.\n */\nexport interface UseScrollTopOptions {\n    /**\n     * Reference to the target element.\n     * @default window\n     */\n    target?: Window | Element | null;\n    /**\n     * Defines the threshold value of the vertical scroll position of the target to toggle the visibility.\n     * @default 400\n     */\n    threshold?: number;\n    /**\n     * Defines the scrolling behaviour, 'smooth' adds an animation and 'auto' scrolls with a jump.\n     * @default smooth\n     */\n    behavior?: ScrollBehavior;\n}\n\n/**\n * The exposes for the `useScrollTop` hook.\n */\nexport interface UseScrollTopExposes {\n    /**\n     * Current visible state as a boolean.\n     * @default false\n     */\n    visible: boolean;\n    /**\n     * Scrolls the target element to the top.\n     */\n    scrollToTop: () => void;\n}\n\n/**\n * useScrollTop hook is used to enter input in a certain format such as numeric, date, currency, email and phone.\n *\n * @param {UseScrollTopOptions} options - The options for the scroll top behavior.\n * @returns {UseScrollTopExposes} - The exposed methods for the scroll top behavior.\n *\n * @example\n * ```tsx\n * const { scrollToTop, visible } = useScrollTop({\n *    target: elementRef.current,\n *    threshold: 400,\n *    behavior: 'smooth'\n * });\n *\n * return (\n *    <div ref={elementRef}>\n *        {visible && (\n *            <Button onClick={scrollToTop}>\n *                 <i className=\"pi pi-arrow-up\" />\n *            </Button>\n *         )}\n *    </div>\n * );\n */\nexport function useScrollTop(options?: UseScrollTopOptions): UseScrollTopExposes {\n    const { target = typeof window !== 'undefined' ? window : null, threshold = 400, behavior = 'smooth' } = options || {};\n    const [visible, setVisible] = React.useState(false);\n\n    const scrollToTop = () => {\n        target?.scroll({\n            top: 0,\n            behavior: behavior\n        });\n    };\n\n    React.useEffect(() => {\n        if (!target) return;\n\n        const checkVisibility = (scrollY: number) => {\n            if (scrollY > threshold) setVisible(true);\n            else setVisible(false);\n        };\n\n        const onScroll = () => {\n            const scrollY = target === window ? getWindowScrollTop() : (target as Element).scrollTop;\n\n            checkVisibility(scrollY);\n        };\n\n        target.addEventListener('scroll', onScroll);\n\n        return () => {\n            target.removeEventListener('scroll', onScroll);\n        };\n    }, [target, threshold]);\n\n    return {\n        //state\n        visible,\n        //methods\n        scrollToTop\n    };\n}\n"],"mappings":"AAAA,OAAS,sBAAAA,MAA0B,kBACnC,UAAYC,MAAW,QA8DhB,SAASC,EAAaC,EAAoD,CAC7E,GAAM,CAAE,OAAAC,EAAS,OAAO,QAAW,YAAc,OAAS,KAAM,UAAAC,EAAY,IAAK,SAAAC,EAAW,QAAS,EAAIH,GAAW,CAAC,EAC/G,CAACI,EAASC,CAAU,EAAU,WAAS,EAAK,EAE5CC,EAAc,IAAM,CACtBL,GAAA,MAAAA,EAAQ,OAAO,CACX,IAAK,EACL,SAAUE,CACd,EACJ,EAEA,OAAM,YAAU,IAAM,CAClB,GAAI,CAACF,EAAQ,OAEb,IAAMM,EAAmBC,GAAoB,CACrCA,EAAUN,EAAWG,EAAW,EAAI,EACnCA,EAAW,EAAK,CACzB,EAEMI,EAAW,IAAM,CACnB,IAAMD,EAAUP,IAAW,OAASJ,EAAmB,EAAKI,EAAmB,UAE/EM,EAAgBC,CAAO,CAC3B,EAEA,OAAAP,EAAO,iBAAiB,SAAUQ,CAAQ,EAEnC,IAAM,CACTR,EAAO,oBAAoB,SAAUQ,CAAQ,CACjD,CACJ,EAAG,CAACR,EAAQC,CAAS,CAAC,EAEf,CAEH,QAAAE,EAEA,YAAAE,CACJ,CACJ","names":["getWindowScrollTop","React","useScrollTop","options","target","threshold","behavior","visible","setVisible","scrollToTop","checkVisibility","scrollY","onScroll"]}

package/use-visibility-change/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * useVisibilityChange hook is used to check if the document is visible.
+ *
+ * @returns A boolean indicating whether the document is visible.
+ *
+ * @example
+ * ```tsx
+ * const Component = () => {
+ *     const isVisible = useVisibilityChange();
+ *
+ *     return <div>{isVisible ? 'Visible' : 'Hidden'}</div>;
+ * };
+ */
+export declare function useVisibilityChange(): boolean;

package/use-visibility-change/index.mjs

@@ -0,0 +1,2 @@
+import*as e from"react";function s(){let[t,n]=e.useState(!0);return e.useEffect(()=>{let i=()=>{n(!document.hidden)};return i(),document.addEventListener("visibilitychange",i),()=>{document.removeEventListener("visibilitychange",i)}},[]),t}export{s as useVisibilityChange};
+//# sourceMappingURL=index.mjs.map

package/use-visibility-change/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/use-visibility-change/index.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * useVisibilityChange hook is used to check if the document is visible.\n *\n * @returns A boolean indicating whether the document is visible.\n *\n * @example\n * ```tsx\n * const Component = () => {\n *     const isVisible = useVisibilityChange();\n *\n *     return <div>{isVisible ? 'Visible' : 'Hidden'}</div>;\n * };\n */\nexport function useVisibilityChange() {\n    const [isVisible, setIsVisible] = React.useState(true);\n\n    React.useEffect(() => {\n        const handleVisibilityChange = () => {\n            setIsVisible(!document.hidden);\n        };\n\n        handleVisibilityChange();\n\n        document.addEventListener('visibilitychange', handleVisibilityChange);\n\n        return () => {\n            document.removeEventListener('visibilitychange', handleVisibilityChange);\n        };\n    }, []);\n\n    return isVisible;\n}\n"],"mappings":"AAAA,UAAYA,MAAW,QAehB,SAASC,GAAsB,CAClC,GAAM,CAACC,EAAWC,CAAY,EAAU,WAAS,EAAI,EAErD,OAAM,YAAU,IAAM,CAClB,IAAMC,EAAyB,IAAM,CACjCD,EAAa,CAAC,SAAS,MAAM,CACjC,EAEA,OAAAC,EAAuB,EAEvB,SAAS,iBAAiB,mBAAoBA,CAAsB,EAE7D,IAAM,CACT,SAAS,oBAAoB,mBAAoBA,CAAsB,CAC3E,CACJ,EAAG,CAAC,CAAC,EAEEF,CACX","names":["React","useVisibilityChange","isVisible","setIsVisible","handleVisibilityChange"]}