@sohanemon/utils 4.0.26 → 4.0.27

package/dist/hooks/index.d.ts

@@ -1,14 +1,14 @@
-import { type Dispatch, type EffectCallback, type SetStateAction, useLayoutEffect } from 'react';
+import * as React from 'react';
 export * from './action';
-export declare const useClickOutside: (callback?: () => void) => import("react").MutableRefObject<HTMLDivElement>;
+export declare const useClickOutside: (callback?: () => void) => React.MutableRefObject<HTMLDivElement>;
 export declare function useMediaQuery(tailwindBreakpoint: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | `(${string})`): boolean;
-export declare function useEffectOnce(effect: EffectCallback): void;
-export declare function useUpdateEffect(effect: EffectCallback, deps: any[]): void;
+export declare function useEffectOnce(effect: React.EffectCallback): void;
+export declare function useUpdateEffect(effect: React.EffectCallback, deps: any[]): void;
 export declare function useDebounce<T>(state: T, delay?: number): T;
-export declare const useIsomorphicEffect: typeof useLayoutEffect;
+export declare const useIsomorphicEffect: typeof React.useLayoutEffect;
 export declare function useTimeout(callback: () => void, delay?: number | null): void;
 export declare function useWindowEvent<K extends string = keyof WindowEventMap>(type: K, listener: K extends keyof WindowEventMap ? (this: Window, ev: WindowEventMap[K]) => void : (this: Window, ev: CustomEvent) => void, options?: boolean | AddEventListenerOptions): void;
-type LocalStorageValue<T> = [T, Dispatch<SetStateAction<T>>];
+type LocalStorageValue<T> = [T, React.Dispatch<React.SetStateAction<T>>];
 export declare const useLocalStorage: <T extends Record<string, any>>(key: string, defaultValue: T) => LocalStorageValue<T>;
 export declare const useUrlParams: <T extends string | number | boolean>(key: string, defaultValue: T) => [T, (value: T) => void];
 export declare const useQuerySelector: <T extends Element>(selector: string) => T | null;
@@ -20,3 +20,9 @@ export declare function useCopyToClipboard({ timeout }: {
     isCopied: Boolean;
     copy: (value: string) => void;
 };
+type CalculationProps = {
+    blockIds: string[];
+    dynamic?: boolean;
+    margin?: number;
+};
+export declare const useHeightCalculation: ({ blockIds, margin, dynamic, }: CalculationProps) => number;

package/dist/hooks/index.js

@@ -1,15 +1,15 @@
 'use client';
-import { useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { copyToClipboard } from '../functions';
+import * as React from 'react';
 export * from './action';
 export const useClickOutside = (callback = () => alert('clicked outside')) => {
-    const ref = useRef(null);
+    const ref = React.useRef(null);
     const listener = (e) => {
         if (ref.current && !ref.current.contains(e.target)) {
             callback();
         }
     };
-    useEffect(() => {
+    React.useEffect(() => {
         document.addEventListener('mousedown', listener);
         document.addEventListener('touchstart', listener);
         return () => {
@@ -20,7 +20,7 @@ export const useClickOutside = (callback = () => alert('clicked outside')) => {
     return ref;
 };
 export function useMediaQuery(tailwindBreakpoint) {
-    const parsedQuery = useMemo(() => {
+    const parsedQuery = React.useMemo(() => {
         switch (tailwindBreakpoint) {
             case 'sm':
                 return '(min-width: 640px)';
@@ -42,12 +42,12 @@ export function useMediaQuery(tailwindBreakpoint) {
         }
         return false;
     };
-    const [matches, setMatches] = useState(getMatches(parsedQuery));
+    const [matches, setMatches] = React.useState(getMatches(parsedQuery));
     function handleChange() {
         setMatches(getMatches(parsedQuery));
     }
     // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-    useEffect(() => {
+    React.useEffect(() => {
         const matchMedia = window.matchMedia(parsedQuery);
         handleChange();
         matchMedia.addEventListener('change', handleChange);
@@ -58,12 +58,12 @@ export function useMediaQuery(tailwindBreakpoint) {
     return matches;
 }
 export function useEffectOnce(effect) {
-    useEffect(effect, []);
+    React.useEffect(effect, []);
 }
 export function useUpdateEffect(effect, deps) {
-    const isInitialMount = useRef(true);
+    const isInitialMount = React.useRef(true);
     // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-    useEffect(() => {
+    React.useEffect(() => {
         if (isInitialMount.current) {
             isInitialMount.current = false;
         }
@@ -73,8 +73,8 @@ export function useUpdateEffect(effect, deps) {
     }, deps);
 }
 export function useDebounce(state, delay = 500) {
-    const [debouncedState, setDebouncedState] = useState(state);
-    useEffect(() => {
+    const [debouncedState, setDebouncedState] = React.useState(state);
+    React.useEffect(() => {
         const timer = setTimeout(() => setDebouncedState(state), delay);
         return () => {
             clearTimeout(timer);
@@ -82,13 +82,13 @@ export function useDebounce(state, delay = 500) {
     }, [state, delay]);
     return debouncedState;
 }
-export const useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+export const useIsomorphicEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 export function useTimeout(callback, delay = 1000) {
-    const savedCallback = useRef(callback);
+    const savedCallback = React.useRef(callback);
     useIsomorphicEffect(() => {
         savedCallback.current = callback;
     }, [callback]);
-    useEffect(() => {
+    React.useEffect(() => {
         if (!delay && delay !== 0) {
             return;
         }
@@ -98,16 +98,16 @@ export function useTimeout(callback, delay = 1000) {
 }
 export function useWindowEvent(type, listener, options) {
     // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-    useEffect(() => {
+    React.useEffect(() => {
         window.addEventListener(type, listener, options);
         return () => window.removeEventListener(type, listener, options);
     }, [type, listener]);
 }
 // Custom hook for using local storage with a specified key and default value
 export const useLocalStorage = (key, defaultValue) => {
-    const [storedValue, setStoredValue] = useState(defaultValue);
+    const [storedValue, setStoredValue] = React.useState(defaultValue);
     // Use effect to retrieve the stored value from local storage on component mount
-    useEffect(() => {
+    React.useEffect(() => {
         const value = localStorage.getItem(key);
         if (value) {
             setStoredValue(JSON.parse(value));
@@ -131,9 +131,9 @@ export const useLocalStorage = (key, defaultValue) => {
 };
 // Custom hook for using URL parameters with a specified key and default value
 export const useUrlParams = (key, defaultValue) => {
-    const [value, setValue] = useState(defaultValue);
+    const [value, setValue] = React.useState(defaultValue);
     // Use effect to retrieve the value from URL parameters on component mount
-    useEffect(() => {
+    React.useEffect(() => {
         const params = new URLSearchParams(window.location.search);
         const value = params.get(key);
         if (value !== null) {
@@ -150,9 +150,9 @@ export const useUrlParams = (key, defaultValue) => {
     return [value, updateValue];
 };
 export const useQuerySelector = (selector) => {
-    const [element, setElement] = useState(null);
-    const elementRef = useRef(null);
-    useLayoutEffect(() => {
+    const [element, setElement] = React.useState(null);
+    const elementRef = React.useRef(null);
+    React.useLayoutEffect(() => {
         const referenceElement = document.querySelector(selector);
         if (!referenceElement)
             return;
@@ -175,14 +175,14 @@ export const useQuerySelector = (selector) => {
     return element;
 };
 export function useIsClient() {
-    const [isClient, setIsClient] = useState(false);
-    useEffect(() => {
+    const [isClient, setIsClient] = React.useState(false);
+    React.useEffect(() => {
         setIsClient(true);
     }, []);
     return isClient;
 }
 export function useLockScroll() {
-    useLayoutEffect(() => {
+    React.useLayoutEffect(() => {
         const originalStyle = window.getComputedStyle(document.body).overflow;
         document.body.style.overflow = 'hidden';
         return () => {
@@ -191,7 +191,7 @@ export function useLockScroll() {
     }, []);
 }
 export function useCopyToClipboard({ timeout = 2000 }) {
-    const [isCopied, setIsCopied] = useState(false);
+    const [isCopied, setIsCopied] = React.useState(false);
     const copy = (value) => {
         copyToClipboard(value, () => {
             setIsCopied(true);
@@ -202,3 +202,18 @@ export function useCopyToClipboard({ timeout = 2000 }) {
     };
     return { isCopied, copy };
 }
+export const useHeightCalculation = ({ blockIds = [], margin = 0, dynamic = false, }) => {
+    const [height, setTableHeight] = React.useState(500);
+    const handleResize = () => {
+        const blcokHeight = blockIds.reduce((prevHeight, id) => prevHeight + (document.getElementById(id)?.clientHeight || 0), 0);
+        setTableHeight(window.innerHeight - blcokHeight - margin);
+    };
+    useIsomorphicEffect(() => {
+        handleResize();
+        if (!dynamic)
+            return;
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    return height;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sohanemon/utils",
-  "version": "4.0.26",
+  "version": "4.0.27",
   "author": "Sohan Emon <sohanemon@outlook.com>",
   "description": "",
   "type": "module",