@aiszlab/relax 1.1.2 → 1.1.4

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

@@ -1,10 +1,16 @@
 import { Key } from 'react';
+type Direction = 'horizontal' | 'vertical';
+interface Props {
+    direction?: Direction;
+}
 /**
  * @description
  * scrollable hook
  */
-export declare const useScrollable: <P extends HTMLElement, C extends HTMLElement>() => {
+export declare const useScrollable: <P extends HTMLElement, C extends HTMLElement>({ direction }?: Props) => {
     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;
 };
+export {};

package/dist/hooks/use-scrollable.js

@@ -1,45 +1,67 @@
 import { useRef, useCallback } from 'react';
 
+const PROPERTY = new Map([
+    [
+        'vertical',
+        {
+            trigger: 'scrollTop',
+            target: 'offsetTop'
+        }
+    ],
+    [
+        'horizontal',
+        {
+            trigger: 'scrollLeft',
+            target: 'offsetLeft'
+        }
+    ]
+]);
 /**
  * @description
  * scrollable hook
  */
-const useScrollable = () => {
+const useScrollable = ({ direction = 'vertical' } = {}) => {
     const groupRef = useRef(null);
     const itemRefs = useRef(new Map());
     const scroller = useRef(null);
-    const scrollTo = useCallback((key, duration = 0) => {
+    const scrollTo = useCallback((to, 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;
+        const triggerProperty = PROPERTY.get(direction).trigger;
         // if duration <= 0, jump immediately
         if (duration <= 0) {
             scroller.current = requestAnimationFrame(() => {
-                group.scrollTop = to;
+                group[triggerProperty] = to;
             });
             return;
         }
         // animate
-        const difference = to - group.scrollTop;
+        const currentAt = group[triggerProperty];
+        const difference = to - currentAt;
         const step = (difference / duration) * 10;
         scroller.current = requestAnimationFrame(() => {
-            group.scrollTop = group.scrollTop + step;
-            if (group.scrollTop === to)
+            group[triggerProperty] = currentAt + step;
+            if (group[triggerProperty] === to)
                 return;
-            scrollTo(key, duration - 10);
+            scrollTo(to, duration - 10);
         });
-    }, []);
+    }, [direction]);
+    const to = useCallback((key) => {
+        const item = itemRefs.current.get(key);
+        if (!item)
+            return 0;
+        // different direction, use different property
+        return item[PROPERTY.get(direction).target];
+    }, [direction]);
     return {
         groupRef,
         itemRefs,
-        scrollTo
+        scrollTo,
+        to
     };
 };
 

package/package.json

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