@aiszlab/relax 1.4.4 → 1.4.6

package/dist/hooks/use-debounce-callback.cjs

@@ -32,22 +32,7 @@ var useDebouncer = function useDebouncer(debouncer) {
     pipe: pipe
   };
 };
-/**
- * @author murukal
- *
- * @description
- * debounce callback
- *
- * @param callback
- * @param wait number
- * @description
- * The delay time (in milliseconds) until the debounce function is called.
- * default 1000
- *
- * @example
- * 1000
- */
-var useDebounceCallback = function useDebounceCallback(debouncer) {
+function useDebounceCallback(debouncer) {
   var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1000;
   var debounced = react.useRef(null);
   var _useDebouncer = useDebouncer(debouncer),
@@ -84,6 +69,6 @@ var useDebounceCallback = function useDebounceCallback(debouncer) {
       }
     };
   });
-};
+}
 
 exports.useDebounceCallback = useDebounceCallback;

package/dist/hooks/use-debounce-callback.d.ts

@@ -1,5 +1,5 @@
 import { type Debounced, type Debouncer } from "../utils/debounce";
-import { type Callable } from "./use-event";
+import type { AnyFunction } from "@aiszlab/relax/types";
 /**
  * @author murukal
  *
@@ -15,4 +15,6 @@ import { type Callable } from "./use-event";
  * @example
  * 1000
  */
-export declare const useDebounceCallback: <T extends Callable, R extends Array<unknown> = Parameters<T>>(debouncer: T | Debouncer<T, R>, wait?: number) => Debounced<T>;
+declare function useDebounceCallback<T extends AnyFunction>(callback: T, wait: number): Debounced<T>;
+declare function useDebounceCallback<T extends AnyFunction, R = unknown>(debouncer: Debouncer<T, R>, wait: number): Debounced<T>;
+export { useDebounceCallback };

package/dist/hooks/use-debounce-callback.mjs

@@ -30,22 +30,7 @@ var useDebouncer = function useDebouncer(debouncer) {
     pipe: pipe
   };
 };
-/**
- * @author murukal
- *
- * @description
- * debounce callback
- *
- * @param callback
- * @param wait number
- * @description
- * The delay time (in milliseconds) until the debounce function is called.
- * default 1000
- *
- * @example
- * 1000
- */
-var useDebounceCallback = function useDebounceCallback(debouncer) {
+function useDebounceCallback(debouncer) {
   var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1000;
   var debounced = useRef(null);
   var _useDebouncer = useDebouncer(debouncer),
@@ -82,6 +67,6 @@ var useDebounceCallback = function useDebounceCallback(debouncer) {
       }
     };
   });
-};
+}
 
 export { useDebounceCallback };

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

@@ -0,0 +1,49 @@
+import { type DragEvent } from "react";
+export type UsingDrag = {
+    /** Optional callback invoked upon drag end. */
+    onDragEnd?: (event: DragEvent<HTMLDivElement>, state: DragState) => void;
+    /** Optional callback invoked upon drag movement. */
+    onDragMove?: (event: DragEvent<HTMLDivElement>, state: DragState) => void;
+    /** Optional callback invoked upon drag start. */
+    onDragStart?: (event: DragEvent<HTMLDivElement>, state: DragState) => void;
+};
+export type DragState = {
+    /**
+     * @description
+     * x position
+     */
+    x: number;
+    /**
+     * @description
+     * y position
+     */
+    y: number;
+    /**
+     * @description
+     * offset X
+     */
+    offsetX?: number;
+    /**
+     * @description
+     * offset Y
+     */
+    offsetY?: number;
+    /**
+     * @description
+     * Whether a drag is currently in progress.
+     */
+    isDragging: boolean;
+};
+export type UsedDrag = [
+    DragState,
+    {
+        onDragEnd: (event: DragEvent<HTMLDivElement>) => void;
+        onDragMove: (event: DragEvent<HTMLDivElement>) => void;
+        onDragStart: (event: DragEvent<HTMLDivElement>) => void;
+    }
+];
+/**
+ * @description
+ * Hook for dragging
+ */
+export default function useDrag({ onDragEnd: _onDragEnd, onDragMove: _onDragMove, onDragStart: _onDragStart, }?: UsingDrag | undefined): UsedDrag;

package/dist/hooks/use-event.cjs

@@ -7,7 +7,6 @@ var useEvent = function useEvent(callback) {
   react.useEffect(function () {
     ref.current = callback;
   });
-  // @ts-ignore
   return react.useCallback(function () {
     return ref.current.apply(ref, arguments);
   }, []);

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

@@ -1,2 +1,2 @@
-export type Callable = (...args: any) => any;
-export declare const useEvent: <T extends Callable | Function>(callback: T) => T;
+import type { AnyFunction } from "@aiszlab/relax/types";
+export declare const useEvent: <T extends AnyFunction>(callback: T) => T;

package/dist/hooks/use-event.mjs

@@ -5,7 +5,6 @@ var useEvent = function useEvent(callback) {
   useEffect(function () {
     ref.current = callback;
   });
-  // @ts-ignore
   return useCallback(function () {
     return ref.current.apply(ref, arguments);
   }, []);

package/dist/hooks/use-infinite-scroll.cjs

@@ -1,64 +1,68 @@
 'use strict';
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var react = require('react');
 var useEvent = require('./use-event.cjs');
 var debounce = require('../utils/debounce.cjs');
+var first = require('../utils/first.cjs');
 
 /**
  * @description
  * use infinite scroll
  */
-var useInfiniteScroll = function useInfiniteScroll(_ref) {
-  var _ref$hasMore = _ref.hasMore,
+var useInfiniteScroll = function useInfiniteScroll() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$hasMore = _ref.hasMore,
     hasMore = _ref$hasMore === void 0 ? true : _ref$hasMore,
     _ref$distance = _ref.distance,
     distance = _ref$distance === void 0 ? 0 : _ref$distance,
     onLoadMore = _ref.onLoadMore;
-  var loadable = react.useRef(null);
-  var scrollable = react.useRef(null);
+  var sentinelRef = react.useRef(null);
+  var viewportRef = react.useRef(null);
+  // `useEvent` keep loadMore always the same
   var loadMore = useEvent.useEvent(function () {
     onLoadMore === null || onLoadMore === void 0 || onLoadMore();
   });
   react.useEffect(function () {
-    var loader = loadable.current;
-    var scroller = scrollable.current;
+    var _viewportRef$current;
+    var _sentinel = sentinelRef.current;
+    var _viewport = (_viewportRef$current = viewportRef.current) !== null && _viewportRef$current !== void 0 ? _viewportRef$current : globalThis.window.document.body;
+    // no more data, never listen
     if (!hasMore) return;
-    if (!scroller) return;
-    // use loader if loader is assigned
-    if (!!loader) {
-      var options = {
-        root: scroller,
-        rootMargin: "0px 0px ".concat(distance, "px 0px"),
-        threshold: 0.1
-      };
-      var observer = new IntersectionObserver(function (entries) {
-        var _entries = _slicedToArray(entries, 1),
-          entry = _entries[0];
-        if (!entry.isIntersecting) return;
-        loadMore();
-      }, options);
-      observer.observe(loader);
+    // when _sentinel is not provided
+    // use `scroll` event to listen `viewport`
+    // it is not recommended, has performance issue!!!
+    if (!_sentinel) {
+      var _debounce = debounce.debounce(function () {
+          if (_viewport.scrollHeight - _viewport.scrollTop > _viewport.clientHeight + distance) {
+            return;
+          }
+          loadMore();
+        }, 200),
+        next = _debounce.next,
+        abort = _debounce.abort;
+      _viewport.addEventListener("scroll", next);
       return function () {
-        observer.disconnect();
+        abort();
+        _viewport.removeEventListener("scroll", next);
       };
     }
-    // listen scroll event, when loader is not assigned
-    var _debounce = debounce.debounce(function () {
-        if (scroller.scrollHeight - scroller.scrollTop > scroller.clientHeight + distance) {
-          return;
-        }
-        loadMore();
-      }, 100),
-      next = _debounce.next,
-      abort = _debounce.abort;
-    scroller.addEventListener("scroll", next);
+    // use `IntersectionObserver` to check current node is in viewport
+    var _listener = new IntersectionObserver(function (entries) {
+      var _element = first.first(entries);
+      if (!_element) return;
+      if (!_element.isIntersecting) return;
+      loadMore();
+    }, {
+      root: _viewport,
+      rootMargin: "0px 0px ".concat(distance, "px 0px")
+    });
+    _listener.observe(_sentinel);
     return function () {
-      scroller.removeEventListener("scroll", next);
-      abort();
+      _listener.unobserve(_sentinel);
+      _listener.disconnect();
     };
   }, [hasMore]);
-  return [loadable, scrollable];
+  return [sentinelRef, viewportRef];
 };
 
 exports.useInfiniteScroll = useInfiniteScroll;

package/dist/hooks/use-infinite-scroll.d.ts

@@ -1,5 +1,5 @@
 import { type RefObject } from "react";
-type UseInfiniteScrollProps = {
+type UsingInfiniteScroll = {
     /**
      * @description
      * hasMore
@@ -16,10 +16,10 @@ type UseInfiniteScrollProps = {
      */
     onLoadMore?: () => void;
 };
-type UsedInfiniteScroll = [loadable: RefObject<HTMLElement>, scrollable: RefObject<HTMLElement>];
+type UsedInfiniteScroll<S, V> = [sentinelRef: RefObject<S>, viewportRef: RefObject<V>];
 /**
  * @description
  * use infinite scroll
  */
-export declare const useInfiniteScroll: ({ hasMore, distance, onLoadMore, }: UseInfiniteScrollProps) => UsedInfiniteScroll;
+export declare const useInfiniteScroll: <S extends HTMLElement = HTMLElement, V extends HTMLElement = HTMLElement>({ hasMore, distance, onLoadMore }?: UsingInfiniteScroll) => UsedInfiniteScroll<S, V>;
 export {};

package/dist/hooks/use-infinite-scroll.mjs

@@ -1,62 +1,66 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useRef, useEffect } from 'react';
 import { useEvent } from './use-event.mjs';
 import { debounce } from '../utils/debounce.mjs';
+import { first } from '../utils/first.mjs';
 
 /**
  * @description
  * use infinite scroll
  */
-var useInfiniteScroll = function useInfiniteScroll(_ref) {
-  var _ref$hasMore = _ref.hasMore,
+var useInfiniteScroll = function useInfiniteScroll() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$hasMore = _ref.hasMore,
     hasMore = _ref$hasMore === void 0 ? true : _ref$hasMore,
     _ref$distance = _ref.distance,
     distance = _ref$distance === void 0 ? 0 : _ref$distance,
     onLoadMore = _ref.onLoadMore;
-  var loadable = useRef(null);
-  var scrollable = useRef(null);
+  var sentinelRef = useRef(null);
+  var viewportRef = useRef(null);
+  // `useEvent` keep loadMore always the same
   var loadMore = useEvent(function () {
     onLoadMore === null || onLoadMore === void 0 || onLoadMore();
   });
   useEffect(function () {
-    var loader = loadable.current;
-    var scroller = scrollable.current;
+    var _viewportRef$current;
+    var _sentinel = sentinelRef.current;
+    var _viewport = (_viewportRef$current = viewportRef.current) !== null && _viewportRef$current !== void 0 ? _viewportRef$current : globalThis.window.document.body;
+    // no more data, never listen
     if (!hasMore) return;
-    if (!scroller) return;
-    // use loader if loader is assigned
-    if (!!loader) {
-      var options = {
-        root: scroller,
-        rootMargin: "0px 0px ".concat(distance, "px 0px"),
-        threshold: 0.1
-      };
-      var observer = new IntersectionObserver(function (entries) {
-        var _entries = _slicedToArray(entries, 1),
-          entry = _entries[0];
-        if (!entry.isIntersecting) return;
-        loadMore();
-      }, options);
-      observer.observe(loader);
+    // when _sentinel is not provided
+    // use `scroll` event to listen `viewport`
+    // it is not recommended, has performance issue!!!
+    if (!_sentinel) {
+      var _debounce = debounce(function () {
+          if (_viewport.scrollHeight - _viewport.scrollTop > _viewport.clientHeight + distance) {
+            return;
+          }
+          loadMore();
+        }, 200),
+        next = _debounce.next,
+        abort = _debounce.abort;
+      _viewport.addEventListener("scroll", next);
       return function () {
-        observer.disconnect();
+        abort();
+        _viewport.removeEventListener("scroll", next);
       };
     }
-    // listen scroll event, when loader is not assigned
-    var _debounce = debounce(function () {
-        if (scroller.scrollHeight - scroller.scrollTop > scroller.clientHeight + distance) {
-          return;
-        }
-        loadMore();
-      }, 100),
-      next = _debounce.next,
-      abort = _debounce.abort;
-    scroller.addEventListener("scroll", next);
+    // use `IntersectionObserver` to check current node is in viewport
+    var _listener = new IntersectionObserver(function (entries) {
+      var _element = first(entries);
+      if (!_element) return;
+      if (!_element.isIntersecting) return;
+      loadMore();
+    }, {
+      root: _viewport,
+      rootMargin: "0px 0px ".concat(distance, "px 0px")
+    });
+    _listener.observe(_sentinel);
     return function () {
-      scroller.removeEventListener("scroll", next);
-      abort();
+      _listener.unobserve(_sentinel);
+      _listener.disconnect();
     };
   }, [hasMore]);
-  return [loadable, scrollable];
+  return [sentinelRef, viewportRef];
 };
 
 export { useInfiniteScroll };

package/dist/hooks/use-is-mounted.d.ts

@@ -1,4 +1,4 @@
-type UseIsMountedBy = {
+type UsingIsMounted = {
     /**
      * @description
      * after mount, react will rerender current component
@@ -9,5 +9,5 @@ type UseIsMountedBy = {
  * @description
  * `useIsMounted`
  */
-export declare const useIsMounted: ({ rerender }?: UseIsMountedBy) => () => boolean;
+export declare const useIsMounted: ({ rerender }?: UsingIsMounted) => () => boolean;
 export {};

package/dist/hooks/use-media-query.cjs

@@ -3,7 +3,6 @@
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var react = require('react');
 var toArray = require('../utils/to-array.cjs');
-var useEvent = require('./use-event.cjs');
 var replace = require('../utils/replace.cjs');
 
 var useMediaQuery = function useMediaQuery(query) {
@@ -13,24 +12,21 @@ var useMediaQuery = function useMediaQuery(query) {
   var queries = toArray.toArray(query);
   var _useState = react.useState(function () {
       return queries.map(function (query) {
-        var _window$matchMedia, _window;
-        return !!((_window$matchMedia = (_window = window).matchMedia) !== null && _window$matchMedia !== void 0 && (_window$matchMedia = _window$matchMedia.call(_window, query)) !== null && _window$matchMedia !== void 0 && _window$matchMedia.matches);
+        var _globalThis$window$ma, _globalThis$window;
+        return !!((_globalThis$window$ma = (_globalThis$window = globalThis.window).matchMedia) !== null && _globalThis$window$ma !== void 0 && (_globalThis$window$ma = _globalThis$window$ma.call(_globalThis$window, query)) !== null && _globalThis$window$ma !== void 0 && _globalThis$window$ma.matches);
       });
     }),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
     setValue = _useState2[1];
-  var onMediaQueryChange = useEvent.useEvent(function (event, index) {
+  var onMediaQueryChange = react.useCallback(function (event, index) {
     setValue(function (prev) {
-      return replace.replace(prev, {
-        index: index,
-        replaceValue: event.matches
-      });
+      return replace.replace(prev, event.matches, index);
     });
-  });
+  }, []);
   react.useEffect(function () {
     var mediaQueries = queries.map(function (query) {
-      return window.matchMedia(query);
+      return globalThis.window.matchMedia(query);
     });
     // listen media query change
     var cleaners = mediaQueries.map(function (mediaQuery, index) {
@@ -39,13 +35,13 @@ var useMediaQuery = function useMediaQuery(query) {
       };
       mediaQuery.addEventListener("change", listener);
       return function () {
-        return mediaQuery.removeEventListener("change", listener);
+        mediaQuery.removeEventListener("change", listener);
       };
     });
     // clean up all listeners
     return function () {
-      return cleaners.forEach(function (cleaner) {
-        return cleaner();
+      cleaners.forEach(function (cleaner) {
+        cleaner();
       });
     };
   }, [_query]);

package/dist/hooks/use-media-query.mjs

@@ -1,7 +1,6 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useMemo, useState, useEffect } from 'react';
+import { useMemo, useState, useCallback, useEffect } from 'react';
 import { toArray } from '../utils/to-array.mjs';
-import { useEvent } from './use-event.mjs';
 import { replace } from '../utils/replace.mjs';
 
 var useMediaQuery = function useMediaQuery(query) {
@@ -11,24 +10,21 @@ var useMediaQuery = function useMediaQuery(query) {
   var queries = toArray(query);
   var _useState = useState(function () {
       return queries.map(function (query) {
-        var _window$matchMedia, _window;
-        return !!((_window$matchMedia = (_window = window).matchMedia) !== null && _window$matchMedia !== void 0 && (_window$matchMedia = _window$matchMedia.call(_window, query)) !== null && _window$matchMedia !== void 0 && _window$matchMedia.matches);
+        var _globalThis$window$ma, _globalThis$window;
+        return !!((_globalThis$window$ma = (_globalThis$window = globalThis.window).matchMedia) !== null && _globalThis$window$ma !== void 0 && (_globalThis$window$ma = _globalThis$window$ma.call(_globalThis$window, query)) !== null && _globalThis$window$ma !== void 0 && _globalThis$window$ma.matches);
       });
     }),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
     setValue = _useState2[1];
-  var onMediaQueryChange = useEvent(function (event, index) {
+  var onMediaQueryChange = useCallback(function (event, index) {
     setValue(function (prev) {
-      return replace(prev, {
-        index: index,
-        replaceValue: event.matches
-      });
+      return replace(prev, event.matches, index);
     });
-  });
+  }, []);
   useEffect(function () {
     var mediaQueries = queries.map(function (query) {
-      return window.matchMedia(query);
+      return globalThis.window.matchMedia(query);
     });
     // listen media query change
     var cleaners = mediaQueries.map(function (mediaQuery, index) {
@@ -37,13 +33,13 @@ var useMediaQuery = function useMediaQuery(query) {
       };
       mediaQuery.addEventListener("change", listener);
       return function () {
-        return mediaQuery.removeEventListener("change", listener);
+        mediaQuery.removeEventListener("change", listener);
       };
     });
     // clean up all listeners
     return function () {
-      return cleaners.forEach(function (cleaner) {
-        return cleaner();
+      cleaners.forEach(function (cleaner) {
+        cleaner();
       });
     };
   }, [_query]);

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

@@ -1,5 +1,6 @@
+import type { AnyFunction } from "@aiszlab/relax/types";
 type UsingRaf = [
-    _callback: Function,
+    callback: AnyFunction,
     {
         /**
          * @description

package/dist/hooks/use-throttle-callback.cjs

@@ -32,22 +32,7 @@ var useThrottler = function useThrottler(throttler) {
     pipe: pipe
   };
 };
-/**
- * @author murukal
- *
- * @description
- * throttle callback
- *
- * @param callback
- * @param wait number
- * @description
- * The wait time (in milliseconds) until the throttle function is called.
- * default 1000
- *
- * @example
- * 1000
- */
-var useThrottleCallback = function useThrottleCallback(throttler) {
+function useThrottleCallback(throttler) {
   var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1000;
   var throttled = react.useRef(null);
   var _useThrottler = useThrottler(throttler),
@@ -84,6 +69,6 @@ var useThrottleCallback = function useThrottleCallback(throttler) {
       }
     };
   });
-};
+}
 
 exports.useThrottleCallback = useThrottleCallback;

package/dist/hooks/use-throttle-callback.d.ts

@@ -1,5 +1,5 @@
 import { type Throttler, type Throttled } from "../utils/throttle";
-import { type Callable } from "./use-event";
+import type { AnyFunction } from "@aiszlab/relax/types";
 /**
  * @author murukal
  *
@@ -15,4 +15,6 @@ import { type Callable } from "./use-event";
  * @example
  * 1000
  */
-export declare const useThrottleCallback: <T extends Callable, R extends Array<unknown> = Parameters<T>>(throttler: T | Throttler<T, R>, wait?: number) => Throttled<T>;
+declare function useThrottleCallback<T extends AnyFunction>(callback: T, wait: number): Throttled<T>;
+declare function useThrottleCallback<T extends AnyFunction, R>(throttler: Throttler<T, R>, wait: number): Throttled<T>;
+export { useThrottleCallback };

package/dist/hooks/use-throttle-callback.mjs

@@ -30,22 +30,7 @@ var useThrottler = function useThrottler(throttler) {
     pipe: pipe
   };
 };
-/**
- * @author murukal
- *
- * @description
- * throttle callback
- *
- * @param callback
- * @param wait number
- * @description
- * The wait time (in milliseconds) until the throttle function is called.
- * default 1000
- *
- * @example
- * 1000
- */
-var useThrottleCallback = function useThrottleCallback(throttler) {
+function useThrottleCallback(throttler) {
   var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1000;
   var throttled = useRef(null);
   var _useThrottler = useThrottler(throttler),
@@ -82,6 +67,6 @@ var useThrottleCallback = function useThrottleCallback(throttler) {
       }
     };
   });
-};
+}
 
 export { useThrottleCallback };

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

@@ -1,10 +1,11 @@
+import type { AnyFunction } from "@aiszlab/relax/types";
 /**
  * @author murukal
  *
  * @description
  * timeout effect
  */
-export declare const useTimeout: (callback: Function, wait: number) => {
+export declare const useTimeout: (callback: AnyFunction, wait: number) => {
     flush: () => void;
     cancel: () => void;
 };

package/dist/hooks/use-update-state.d.ts

@@ -0,0 +1,12 @@
+import { SetStateAction } from "react";
+type Callback<S> = (state: S) => void;
+type StateSetter<S> = (state: SetStateAction<S>, callback?: Callback<S>) => void;
+type UsedUpdateState<S> = [S, StateSetter<S>];
+/**
+ * @description
+ * in class component
+ * use setState second parameter callback to get the latest state
+ */
+declare function useUpdateState<S = undefined>(): UsedUpdateState<S | undefined>;
+declare function useUpdateState<S>(initialState: S): UsedUpdateState<S>;
+export { useUpdateState };

package/dist/is/is-html-element.cjs

@@ -6,7 +6,6 @@
  */
 var isHTMLElement = function isHTMLElement(value) {
   if (!value) return false;
-  // @ts-ignore
   return value.nodeType === 1;
 };
 

package/dist/is/is-html-element.mjs

@@ -4,7 +4,6 @@
  */
 var isHTMLElement = function isHTMLElement(value) {
   if (!value) return false;
-  // @ts-ignore
   return value.nodeType === 1;
 };