@aiszlab/relax 1.2.71 → 1.2.72

package/dist/dom/clipboard.d.ts

@@ -0,0 +1 @@
+declare const clipboard: (value: string) => Promise<void>;

package/dist/dom/scroll-to.d.ts

@@ -1,4 +1,4 @@
-export type Direction = "horizontal" | "vertical";
+export type Orientation = "horizontal" | "vertical";
 interface ScrollBy {
     /**
      * @description
@@ -7,13 +7,13 @@ interface ScrollBy {
     duration: number;
     /**
      * @description
-     * direction
+     * orientation
      */
-    direction?: Direction;
+    orientation?: Orientation;
 }
 /**
  * @description
  * scroll to for wrapper element
  */
-export declare const scrollTo: (target: HTMLElement, to: number, { duration, direction }?: ScrollBy) => void;
+export declare const scrollTo: (target: HTMLElement, to: number, { duration, orientation }?: ScrollBy) => void;
 export {};

package/dist/dom/scroll-to.js

@@ -18,8 +18,8 @@ var Scroller = /*#__PURE__*/function () {
     }
   }, {
     key: "currentAt",
-    value: function currentAt(direction) {
-      return direction === "vertical" ? "scrollTop" : "scrollLeft";
+    value: function currentAt(orientation) {
+      return orientation === "vertical" ? "scrollTop" : "scrollLeft";
     }
   }]);
 }();
@@ -34,15 +34,15 @@ var _scroller = {
 var _scrollTo = function scrollTo(target, to) {
   var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
       duration: 0,
-      direction: "vertical"
+      orientation: "vertical"
     },
     _ref$duration = _ref.duration,
     duration = _ref$duration === void 0 ? 0 : _ref$duration,
-    _ref$direction = _ref.direction,
-    direction = _ref$direction === void 0 ? "vertical" : _ref$direction;
+    _ref$orientation = _ref.orientation,
+    orientation = _ref$orientation === void 0 ? "vertical" : _ref$orientation;
   var scroller = new Scroller();
   var scrolled = scroller.scrolled.get(target);
-  var currentAtProperty = scroller.currentAt(direction);
+  var currentAtProperty = scroller.currentAt(orientation);
   if (scrolled) {
     cancelAnimationFrame(scrolled);
     scroller.scrolled["delete"](target);
@@ -64,7 +64,7 @@ var _scrollTo = function scrollTo(target, to) {
     if (target[currentAtProperty] === to) return;
     _scrollTo(target, to, {
       duration: duration - 10,
-      direction: direction
+      orientation: orientation
     });
   }));
 };

package/dist/hooks/use-event.js

@@ -1,8 +1,10 @@
-import { useRef, useCallback } from 'react';
+import { useRef, useEffect, useCallback } from 'react';
 
 var useEvent = function useEvent(callback) {
   var ref = useRef(callback);
-  ref.current = callback;
+  useEffect(function () {
+    ref.current = callback;
+  });
   // @ts-ignore
   return useCallback(function () {
     return ref.current.apply(ref, arguments);

package/dist/hooks/use-hover.d.ts

@@ -1,8 +1,14 @@
-import { type DOMAttributes } from "react";
+import { type PointerEventHandler } from "react";
 type UseHoverBy<T> = {
-    onEnter?: DOMAttributes<T>["onPointerEnter"];
-    onLeave?: DOMAttributes<T>["onPointerLeave"];
+    onEnter?: PointerEventHandler<T>;
+    onLeave?: PointerEventHandler<T>;
 };
-type UsedHover<T> = [boolean, Required<Pick<DOMAttributes<T>, "onPointerEnter" | "onPointerLeave">>];
+type UsedHover<T> = [
+    boolean,
+    {
+        onPointerEnter: PointerEventHandler<T>;
+        onPointerLeave: PointerEventHandler<T>;
+    }
+];
 export declare const useHover: <T extends Element = Element>(props?: UseHoverBy<T>) => UsedHover<T>;
 export {};

package/dist/hooks/use-hover.js

@@ -1,7 +1,7 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useCallback } from 'react';
 import { useBoolean } from './use-boolean.js';
 import { chain } from '../utils/chain.js';
+import { useEvent } from './use-event.js';
 
 var useHover = function useHover(props) {
   var _useBoolean = useBoolean(false),
@@ -10,12 +10,12 @@ var useHover = function useHover(props) {
     _useBoolean2$ = _useBoolean2[1],
     turnOn = _useBoolean2$.turnOn,
     turnOff = _useBoolean2$.turnOff;
-  var onPointerEnter = useCallback(function (e) {
-    chain(props === null || props === void 0 ? void 0 : props.onEnter, turnOn)(e);
-  }, [props === null || props === void 0 ? void 0 : props.onEnter]);
-  var onPointerLeave = useCallback(function (e) {
-    chain(props === null || props === void 0 ? void 0 : props.onLeave, turnOff)(e);
-  }, [props === null || props === void 0 ? void 0 : props.onLeave]);
+  var onPointerEnter = useEvent(function (event) {
+    chain(props === null || props === void 0 ? void 0 : props.onEnter, turnOn)(event);
+  });
+  var onPointerLeave = useEvent(function (event) {
+    chain(props === null || props === void 0 ? void 0 : props.onLeave, turnOff)(event);
+  });
   return [isHovered, {
     onPointerEnter: onPointerEnter,
     onPointerLeave: onPointerLeave

package/dist/hooks/use-infinite-scroll.d.ts

@@ -0,0 +1,25 @@
+import { type RefObject } from "react";
+type UseInfiniteScrollProps = {
+    /**
+     * @description
+     * hasMore
+     */
+    hasMore?: boolean;
+    /**
+     * @description
+     * distance
+     */
+    distance?: number;
+    /**
+     * @description
+     * load more handler
+     */
+    onLoadMore?: () => void;
+};
+type UsedInfiniteScroll = [loadable: RefObject<HTMLElement>, scrollable: RefObject<HTMLElement>];
+/**
+ * @description
+ * use infinite scroll
+ */
+export declare const useInfiniteScroll: ({ hasMore, distance, onLoadMore, }: UseInfiniteScrollProps) => UsedInfiniteScroll;
+export {};

package/dist/hooks/use-infinite-scroll.js

@@ -0,0 +1,62 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useRef, useEffect } from 'react';
+import { useEvent } from './use-event.js';
+import { debounce } from '../utils/debounce.js';
+
+/**
+ * @description
+ * use infinite scroll
+ */
+var useInfiniteScroll = function useInfiniteScroll(_ref) {
+  var _ref$hasMore = _ref.hasMore,
+    hasMore = _ref$hasMore === void 0 ? true : _ref$hasMore,
+    _ref$distance = _ref.distance,
+    distance = _ref$distance === void 0 ? 0 : _ref$distance,
+    onLoadMore = _ref.onLoadMore;
+  var loadable = useRef(null);
+  var scrollable = useRef(null);
+  var loadMore = useEvent(function () {
+    onLoadMore === null || onLoadMore === void 0 || onLoadMore();
+  });
+  useEffect(function () {
+    var loader = loadable.current;
+    var scroller = scrollable.current;
+    if (!hasMore) return;
+    if (!scroller) return;
+    // use loader if loader is assigned
+    if (!!loader) {
+      var options = {
+        root: scroller,
+        rootMargin: "0px 0px ".concat(distance, "px 0px"),
+        threshold: 0.1
+      };
+      var observer = new IntersectionObserver(function (entries) {
+        var _entries = _slicedToArray(entries, 1),
+          entry = _entries[0];
+        if (!entry.isIntersecting) return;
+        loadMore();
+      }, options);
+      observer.observe(loader);
+      return function () {
+        observer.disconnect();
+      };
+    }
+    // listen scroll event, when loader is not assigned
+    var _debounce = debounce(function () {
+        if (scroller.scrollHeight - scroller.scrollTop > scroller.clientHeight + distance) {
+          return;
+        }
+        loadMore();
+      }, 100),
+      next = _debounce.next,
+      abort = _debounce.abort;
+    scroller.addEventListener("scroll", next);
+    return function () {
+      scroller.removeEventListener("scroll", next);
+      abort();
+    };
+  }, [hasMore]);
+  return [loadable, scrollable];
+};
+
+export { useInfiniteScroll };

package/dist/hooks/use-is-mounted.d.ts

@@ -0,0 +1,13 @@
+type UseIsMountedProps = {
+    /**
+     * @description
+     * after mount, react will rerender current component
+     */
+    rerender?: boolean;
+};
+/**
+ * @description
+ * `useIsMounted`
+ */
+export declare const useIsMounted: ({ rerender }?: UseIsMountedProps) => () => boolean;
+export {};

package/dist/hooks/use-is-mounted.js

@@ -0,0 +1,33 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, useRef } from 'react';
+import { useMounted } from './use-mounted.js';
+
+/**
+ * @description
+ * `useIsMounted`
+ */
+var useIsMounted = function useIsMounted() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$rerender = _ref.rerender,
+    rerender = _ref$rerender === void 0 ? false : _ref$rerender;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    setIsMounted = _useState2[1];
+  var isMountedRef = useRef(false);
+  useMounted(function () {
+    isMountedRef.current = true;
+    if (rerender) {
+      setIsMounted(true);
+    }
+    return function () {
+      isMountedRef.current = false;
+    };
+  });
+  // only use callback
+  // avoid parent component or hooks change isMountedRef.current
+  return function () {
+    return isMountedRef.current;
+  };
+};
+
+export { useIsMounted };

package/dist/hooks/use-local-storage-state.d.ts

@@ -0,0 +1,2 @@
+import { type UseStorageStateBy } from "./use-storage-state";
+export declare const useLocalStorageState: (key: string, useBy?: UseStorageStateBy) => import("./use-storage-state").UsedStorageState;

package/dist/hooks/use-local-storage-state.js

@@ -0,0 +1,7 @@
+import { useStorageState } from './use-storage-state.js';
+
+var useLocalStorageState = function useLocalStorageState(key, useBy) {
+  return useStorageState(key, localStorage, useBy);
+};
+
+export { useLocalStorageState };

package/dist/hooks/use-scrollable.d.ts

@@ -1,13 +1,13 @@
 import { type Key } from "react";
-import { type Direction } from "../dom/scroll-to";
-interface Dependencies {
-    direction?: Direction;
+import { type Orientation } from "../dom/scroll-to";
+interface UseScrollableProps {
+    orientation?: Orientation;
 }
 /**
  * @description
  * scrollable hook
  */
-export declare const useScrollable: <P extends HTMLElement, C extends HTMLElement>({ direction, }?: Dependencies) => {
+export declare const useScrollable: <P extends HTMLElement, C extends HTMLElement>({ orientation, }?: UseScrollableProps) => {
     targetRef: import("react").RefObject<P>;
     triggerRefs: import("react").MutableRefObject<Map<Key, C | null>>;
     scrollTo: (to: number, duration?: number) => void;

package/dist/hooks/use-scrollable.js

@@ -7,8 +7,8 @@ import { scrollTo as _scrollTo } from '../dom/scroll-to.js';
  */
 var useScrollable = function useScrollable() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref$direction = _ref.direction,
-    direction = _ref$direction === void 0 ? "vertical" : _ref$direction;
+    _ref$orientation = _ref.orientation,
+    orientation = _ref$orientation === void 0 ? "vertical" : _ref$orientation;
   var targetRef = useRef(null);
   var triggerRefs = useRef(new Map());
   var scrollTo = useCallback(function (to) {
@@ -18,16 +18,16 @@ var useScrollable = function useScrollable() {
     // use animated scroll
     _scrollTo(target, to, {
       duration: duration,
-      direction: direction
+      orientation: orientation
     });
-  }, [direction]);
+  }, [orientation]);
   var to = useCallback(function (key) {
     var trigger = triggerRefs.current.get(key);
     if (!trigger) return 0;
-    // different direction, use different property
-    return direction === "vertical" ? trigger.offsetTop : trigger.offsetLeft;
-  }, [direction]);
-  /// set trigger
+    // different orientation, use different property
+    return orientation === "vertical" ? trigger.offsetTop : trigger.offsetLeft;
+  }, [orientation]);
+  // set trigger
   var setTrigger = useCallback(function (key, trigger) {
     triggerRefs.current.set(key, trigger);
   }, []);

package/dist/hooks/use-session-storage-state.d.ts

@@ -0,0 +1,2 @@
+import { type UseStorageStateBy } from "./use-storage-state";
+export declare const useSessionStorageState: (key: string, useBy?: UseStorageStateBy) => import("./use-storage-state").UsedStorageState;

package/dist/hooks/use-session-storage-state.js

@@ -0,0 +1,7 @@
+import { useStorageState } from './use-storage-state.js';
+
+var useSessionStorageState = function useSessionStorageState(key, useBy) {
+  return useStorageState(key, sessionStorage, useBy);
+};
+
+export { useSessionStorageState };

package/dist/hooks/use-storage-state.d.ts

@@ -0,0 +1,5 @@
+export type UsedStorageState = [string | null, (value: string | null) => void];
+export type UseStorageStateBy = {
+    listen?: boolean;
+};
+export declare const useStorageState: (key: string, storage: Storage, { listen }?: UseStorageStateBy) => UsedStorageState;

package/dist/hooks/use-storage-state.js

@@ -0,0 +1,47 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, useEffect, useCallback } from 'react';
+import { isNull } from '../is/is-null.js';
+
+var useStorageState = function useStorageState(key, storage) {
+  var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+    _ref$listen = _ref.listen,
+    listen = _ref$listen === void 0 ? true : _ref$listen;
+  var _useState = useState(function () {
+      return storage.getItem(key);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  // effect sync state after key change
+  useEffect(function () {
+    setState(storage.getItem(key));
+  }, [key]);
+  useEffect(function () {
+    var onStorageChange = function onStorageChange(event) {
+      if (event.key !== key) return;
+      if (event.storageArea !== storage) return;
+    };
+    // only listen with flag = `true`
+    if (listen) {
+      window.addEventListener("storage", onStorageChange);
+    }
+    return function () {
+      window.removeEventListener("storage", onStorageChange);
+    };
+  }, [listen]);
+  // change handler
+  var setter = useCallback(function (value) {
+    if (listen) {
+      if (isNull(value)) {
+        storage.removeItem(key);
+      } else {
+        storage.setItem(key, value);
+      }
+      return;
+    }
+    setState(value);
+  }, [key, listen]);
+  return [state, setter];
+};
+
+export { useStorageState };

package/dist/hooks/use-update-effect.js

@@ -1,19 +1,13 @@
-import { useRef, useEffect } from 'react';
-import { useMounted } from './use-mounted.js';
+import { useEffect } from 'react';
 import { effect } from '../utils/effect.js';
+import { useIsMounted } from './use-is-mounted.js';
 
 var useUpdateEffect = function useUpdateEffect(callback, deps) {
-  var isMounted = useRef(false);
+  var isMounted = useIsMounted();
   useEffect(function () {
-    if (!isMounted.current) return;
+    if (!isMounted()) return;
     return effect(callback);
   }, deps);
-  useMounted(function () {
-    isMounted.current = true;
-    return function () {
-      isMounted.current = false;
-    };
-  });
 };
 
 export { useUpdateEffect };

package/dist/index.d.ts

@@ -30,6 +30,10 @@ export { useMediaQuery } from "./hooks/use-media-query";
 export { useClickAway } from "./hooks/use-click-away";
 export { useUnmount } from "./hooks/use-unmount";
 export { useTimer } from "./hooks/use-timer";
+export { useLocalStorageState } from "./hooks/use-local-storage-state";
+export { useSessionStorageState } from "./hooks/use-session-storage-state";
+export { useIsMounted } from "./hooks/use-is-mounted";
+export { useInfiniteScroll } from "./hooks/use-infinite-scroll";
 /**
  * @description
  * is

package/dist/index.js

@@ -26,6 +26,10 @@ export { useMediaQuery } from './hooks/use-media-query.js';
 export { useClickAway } from './hooks/use-click-away.js';
 export { useUnmount } from './hooks/use-unmount.js';
 export { useTimer } from './hooks/use-timer.js';
+export { useLocalStorageState } from './hooks/use-local-storage-state.js';
+export { useSessionStorageState } from './hooks/use-session-storage-state.js';
+export { useIsMounted } from './hooks/use-is-mounted.js';
+export { useInfiniteScroll } from './hooks/use-infinite-scroll.js';
 export { isRefable } from './is/is-refable.js';
 export { isUndefined } from './is/is-undefined.js';
 export { isNull } from './is/is-null.js';

package/dist/is/is-number.d.ts

@@ -0,0 +1 @@
+export declare const isNumber: (value: unknown) => value is number;

package/dist/is/is-string.d.ts

@@ -0,0 +1 @@
+export declare const isString: (value: unknown) => value is string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiszlab/relax",
-  "version": "1.2.71",
+  "version": "1.2.72",
   "description": "react utils collection",
   "type": "module",
   "exports": {

package/dist/hooks/use-local-storage.d.ts

@@ -1,2 +0,0 @@
-import { type UseStorageBy } from "./use-storage";
-export declare const useLocalStorage: (key: string, useBy?: UseStorageBy) => import("./use-storage").UsedStorage;

package/dist/hooks/use-session-storage.d.ts

@@ -1,2 +0,0 @@
-import { type UseStorageBy } from "./use-storage";
-export declare const useSessionStorage: (key: string, useBy?: UseStorageBy) => import("./use-storage").UsedStorage;

package/dist/hooks/use-storage.d.ts

@@ -1,5 +0,0 @@
-export type UsedStorage = [string | null, (value: string | null) => void];
-export type UseStorageBy = {
-    listen?: boolean;
-};
-export declare const useStorage: (key: string, storage: Storage, { listen }?: UseStorageBy) => UsedStorage;