@aiszlab/relax 1.1.4 → 1.1.6

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: (target: 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 = (target, to, { duration = 0, direction = 'vertical' } = {
+    duration: 0,
+    direction: 'vertical'
+}) => {
+    const scroller = new Scroller();
+    const scrolled = scroller.scrolled.get(target);
+    const currentAtProperty = scroller.currentAt(direction);
+    if (scrolled) {
+        cancelAnimationFrame(scrolled);
+        scroller.scrolled.delete(target);
+    }
+    // if duration <= 0, jump immediately
+    if (duration <= 0) {
+        scroller.scrolled.set(target, requestAnimationFrame(() => {
+            target[currentAtProperty] = to;
+        }));
+        return;
+    }
+    // animate
+    const currentAt = target[currentAtProperty];
+    const difference = to - currentAt;
+    const step = (difference / duration) * 10;
+    scroller.scrolled.set(target, requestAnimationFrame(() => {
+        target[currentAtProperty] = currentAt + step;
+        // over end, stop any animation
+        if (target[currentAtProperty] === to)
+            return;
+        scrollTo(target, to, {
+            duration: duration - 10,
+            direction
+        });
+    }));
+};
+
+export { scrollTo };

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

@@ -1,15 +1,15 @@
-import { Key } from 'react';
-type Direction = 'horizontal' | 'vertical';
-interface Props {
+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>({ direction }?: Props) => {
-    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) => {
+    targetRef: import("react").RefObject<P>;
+    triggerRefs: import("react").MutableRefObject<Map<Key, C | null>>;
     scrollTo: (to: number, duration?: number) => void;
     to: (key: Key) => number;
 };

package/dist/hooks/use-scrollable.js

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

package/package.json

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