@aiszlab/relax 1.1.3 → 1.1.5

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

@@ -0,0 +1,19 @@
+export type Direction = 'horizontal' | 'vertical';
+interface ScrollBy {
+    /**
+     * @description
+     * duration
+     */
+    duration: number;
+    /**
+     * @description
+     * direction
+     */
+    direction?: Direction;
+}
+/**
+ * @description
+ * scroll to for wrapper element
+ */
+export declare const scrollTo: (trigger: HTMLElement, to: number, { duration, direction }?: ScrollBy) => void;
+export {};

package/dist/dom/scroll-to.js

@@ -0,0 +1,60 @@
+import { __classPrivateFieldSet, __classPrivateFieldGet } from '../node_modules/tslib/tslib.es6.js';
+
+var _Scroller_scrolled, _Scroller_scroller;
+class Scroller {
+    constructor() {
+        var _a;
+        _Scroller_scrolled.set(this, new Map()
+        // singleton mode
+        );
+        // singleton mode
+        _Scroller_scroller.set(this, null);
+        return (__classPrivateFieldSet(this, _Scroller_scroller, (_a = __classPrivateFieldGet(this, _Scroller_scroller, "f")) !== null && _a !== void 0 ? _a : this, "f"));
+    }
+    get scrolled() {
+        return __classPrivateFieldGet(this, _Scroller_scrolled, "f");
+    }
+    currentAt(direction) {
+        return direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
+    }
+}
+_Scroller_scrolled = new WeakMap(), _Scroller_scroller = new WeakMap();
+/**
+ * @description
+ * scroll to for wrapper element
+ */
+const scrollTo = (trigger, to, { duration = 0, direction = 'vertical' } = {
+    duration: 0,
+    direction: 'vertical'
+}) => {
+    const scroller = new Scroller();
+    const scrolled = scroller.scrolled.get(trigger);
+    const currentAtProperty = scroller.currentAt(direction);
+    if (scrolled) {
+        cancelAnimationFrame(scrolled);
+        scroller.scrolled.delete(trigger);
+    }
+    // if duration <= 0, jump immediately
+    if (duration <= 0) {
+        scroller.scrolled.set(trigger, requestAnimationFrame(() => {
+            trigger[currentAtProperty] = to;
+        }));
+        return;
+    }
+    // animate
+    const currentAt = trigger[currentAtProperty];
+    const difference = to - currentAt;
+    const step = (difference / duration) * 10;
+    scroller.scrolled.set(trigger, requestAnimationFrame(() => {
+        trigger[currentAtProperty] = currentAt + step;
+        // over end, stop any animation
+        if (trigger[currentAtProperty] === to)
+            return;
+        scrollTo(trigger, to, {
+            duration: duration - 10,
+            direction
+        });
+    }));
+};
+
+export { scrollTo };

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

@@ -1,11 +1,16 @@
-import { Key } from 'react';
+import { type Key } from 'react';
+import { type Direction } from '../dom/scroll-to';
+interface Dependencies {
+    direction?: Direction;
+}
 /**
  * @description
  * scrollable hook
  */
-export declare const useScrollable: <P extends HTMLElement, C extends HTMLElement>() => {
-    groupRef: import("react").RefObject<P>;
-    itemRefs: import("react").MutableRefObject<Map<Key, C | null>>;
+export declare const useScrollable: <P extends HTMLElement, C extends HTMLElement>({ direction }?: Dependencies) => {
+    triggerRef: import("react").RefObject<P>;
+    targetRefs: import("react").MutableRefObject<Map<Key, C | null>>;
     scrollTo: (to: number, duration?: number) => void;
     to: (key: Key) => number;
 };
+export {};

package/dist/hooks/use-scrollable.js

@@ -1,47 +1,34 @@
 import { useRef, useCallback } from 'react';
+import { scrollTo } from '../dom/scroll-to.js';
 
 /**
  * @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)
+const useScrollable = ({ direction = 'vertical' } = {}) => {
+    const triggerRef = useRef(null);
+    const targetRefs = useRef(new Map());
+    const scrollTo$1 = useCallback((to, duration = 0) => {
+        const trigger = triggerRef.current;
+        if (!trigger)
             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);
+        // use animated scroll
+        scrollTo(trigger, to, {
+            duration,
+            direction
         });
-    }, []);
+    }, [direction]);
     const to = useCallback((key) => {
-        const item = itemRefs.current.get(key);
+        const item = targetRefs.current.get(key);
         if (!item)
             return 0;
-        return item.offsetTop;
-    }, []);
+        // different direction, use different property
+        return direction === 'vertical' ? item.offsetTop : item.offsetLeft;
+    }, [direction]);
     return {
-        groupRef,
-        itemRefs,
-        scrollTo,
+        triggerRef,
+        targetRefs,
+        scrollTo: scrollTo$1,
         to
     };
 };

package/package.json

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