@aiszlab/relax 1.1.0 → 1.1.2

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

@@ -0,0 +1,4 @@
+import { type MutableRefObject, type RefCallback } from 'react';
+type Refable<T> = RefCallback<T> | MutableRefObject<T>;
+export declare const useRefs: <T>(...refs: Refable<T>[]) => (trigger: T) => void;
+export {};

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.js

@@ -0,0 +1,46 @@
+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((key, duration = 0) => {
+        if (scroller.current) {
+            cancelAnimationFrame(scroller.current);
+        }
+        const group = groupRef.current;
+        if (!group)
+            return;
+        const item = itemRefs.current.get(key);
+        if (!item)
+            return;
+        const to = item.offsetTop;
+        // 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(key, duration - 10);
+        });
+    }, []);
+    return {
+        groupRef,
+        itemRefs,
+        scrollTo
+    };
+};
+
+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.0",
+  "version": "1.1.2",
   "description": "react utils collection",
   "type": "module",
   "main": "./dist/index.js",