@aiszlab/relax 1.1.1 → 1.1.3

package/dist/hooks/use-refs.js

@@ -0,0 +1,21 @@
+import { useMemo } from 'react';
+import { isFunction } from '../is/is-function.js';
+
+const mount = (ref, trigger) => {
+    if (isFunction(ref)) {
+        ref(trigger);
+        return;
+    }
+    ref.current = trigger;
+};
+const useRefs = (...refs) => {
+    return useMemo(() => {
+        return (trigger) => {
+            refs.forEach((ref) => {
+                mount(ref, trigger);
+            });
+        };
+    }, refs);
+};
+
+export { useRefs };

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

@@ -6,5 +6,6 @@ import { Key } from 'react';
 export declare const useScrollable: <P extends HTMLElement, C extends HTMLElement>() => {
     groupRef: import("react").RefObject<P>;
     itemRefs: import("react").MutableRefObject<Map<Key, C | null>>;
-    scrollTo: (key: Key, duration?: number) => void;
+    scrollTo: (to: number, duration?: number) => void;
+    to: (key: Key) => number;
 };

package/dist/hooks/use-scrollable.js

@@ -0,0 +1,49 @@
+import { useRef, useCallback } from 'react';
+
+/**
+ * @description
+ * scrollable hook
+ */
+const useScrollable = () => {
+    const groupRef = useRef(null);
+    const itemRefs = useRef(new Map());
+    const scroller = useRef(null);
+    const scrollTo = useCallback((to, duration = 0) => {
+        if (scroller.current) {
+            cancelAnimationFrame(scroller.current);
+        }
+        const group = groupRef.current;
+        if (!group)
+            return;
+        // if duration <= 0, jump immediately
+        if (duration <= 0) {
+            scroller.current = requestAnimationFrame(() => {
+                group.scrollTop = to;
+            });
+            return;
+        }
+        // animate
+        const difference = to - group.scrollTop;
+        const step = (difference / duration) * 10;
+        scroller.current = requestAnimationFrame(() => {
+            group.scrollTop = group.scrollTop + step;
+            if (group.scrollTop === to)
+                return;
+            scrollTo(to, duration - 10);
+        });
+    }, []);
+    const to = useCallback((key) => {
+        const item = itemRefs.current.get(key);
+        if (!item)
+            return 0;
+        return item.offsetTop;
+    }, []);
+    return {
+        groupRef,
+        itemRefs,
+        scrollTo,
+        to
+    };
+};
+
+export { useScrollable };

package/dist/index.d.ts

@@ -12,6 +12,8 @@ export { useControlledState } from './hooks/use-controlled-state';
 export { useOnceState } from './hooks/use-once-state';
 export { useScrollLocker } from './hooks/use-scroll-locker';
 export { useForceUpdate } from './hooks/use-force-update';
+export { useScrollable } from './hooks/use-scrollable';
+export { useRefs } from './hooks/use-refs';
 /**
  * @description
  * is

package/dist/index.js

@@ -8,6 +8,8 @@ export { useControlledState } from './hooks/use-controlled-state.js';
 export { useOnceState } from './hooks/use-once-state.js';
 export { useScrollLocker } from './hooks/use-scroll-locker.js';
 export { useForceUpdate } from './hooks/use-force-update.js';
+export { useScrollable } from './hooks/use-scrollable.js';
+export { useRefs } from './hooks/use-refs.js';
 export { isRefable } from './is/is-refable.js';
 export { isUndefined } from './is/is-undefined.js';
 export { isStateGetter } from './is/is-state-getter.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiszlab/relax",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "react utils collection",
   "type": "module",
   "main": "./dist/index.js",