@hairy/react-lib 1.36.1 → 1.38.0

package/dist/index.cjs

@@ -59,6 +59,7 @@ __export(index_exports, {
   useFetchRequestIntercept: () => useFetchRequestIntercept,
   useFetchResponseIntercept: () => useFetchResponseIntercept,
   useMounted: () => useMounted,
+  useOffsetPagination: () => useOffsetPagination,
   useStatus: () => useStatus,
   useStore: () => useStore,
   useUpdate: () => useUpdate,
@@ -423,7 +424,7 @@ function tryUseUpdate() {
 var import_react13 = require("react");
 function useAsyncCallback(fun) {
   const [state, set] = (0, import_react13.useState)({ loading: false });
-  async function execute(...args) {
+  async function refetch(...args) {
     set({ loading: true });
     return fun(...args).then((value) => {
       set({ loading: false });
@@ -433,21 +434,21 @@ function useAsyncCallback(fun) {
       return Promise.reject(err);
     });
   }
-  return [state.loading, execute, state.error];
+  return [state.loading, refetch, state.error];
 }
 
 // src/hooks/useAsyncState.ts
 var import_react14 = require("react");
 function useAsyncState(fun, deps = [], options) {
   const [value, set] = (0, import_react14.useState)(options?.initial);
-  const [loading, execute, error] = useAsyncCallback(async (...args) => fun(...args).then(set));
+  const [loading, refetch, error] = useAsyncCallback(async (...args) => fun(...args).then(set));
   (0, import_react14.useEffect)(
     () => {
-      execute();
+      refetch();
     },
     deps
   );
-  return [{ value, loading, error }, execute];
+  return [{ value, loading, error }, refetch];
 }
 
 // src/hooks/useDebounce.ts
@@ -538,20 +539,36 @@ function useMounted() {
   return mounted;
 }
 
+// src/hooks/useOffsetPagination.ts
+var import_react21 = require("react");
+
 // src/hooks/useWatch.ts
+var import_react20 = require("react");
+
+// src/hooks/usePrevious.ts
 var import_react19 = require("react");
+function usePrevious(value) {
+  const ref2 = (0, import_react19.useRef)(void 0);
+  (0, import_react19.useEffect)(() => {
+    ref2.current = value;
+  });
+  return ref2.current;
+}
+
+// src/hooks/useWatch.ts
 function useWatch(source, callback, options = {}) {
-  const firstUpdate = (0, import_react19.useRef)(false);
-  const then = (0, import_react19.useRef)(void 0);
-  const deps = (0, import_react19.useMemo)(
+  const firstUpdate = (0, import_react20.useRef)(false);
+  const then = (0, import_react20.useRef)(void 0);
+  const oldValue = usePrevious(source);
+  const deps = (0, import_react20.useMemo)(
     () => Array.isArray(source) ? source : [source],
     [source]
   );
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!firstUpdate.current)
       recordFirst();
     else
-      callback(source);
+      callback(source, oldValue);
   }, deps);
   async function recordFirst() {
     if (then.current)
@@ -559,17 +576,56 @@ function useWatch(source, callback, options = {}) {
     then.current = Promise.resolve(source);
     then.current.then(() => firstUpdate.current = true);
     if (options.immediate)
-      then.current.then((value) => callback(value));
+      then.current.then((value) => callback(value, oldValue));
   }
 }
 
+// src/hooks/useOffsetPagination.ts
+function useOffsetPagination(options) {
+  const [page, setPage] = (0, import_react21.useState)(options.page || 1);
+  const [pageSize, setPageSize] = (0, import_react21.useState)(options.pageSize || 10);
+  const total = options.total || 0;
+  const pageCount = (0, import_react21.useMemo)(() => Math.max(1, Math.ceil(total / pageSize)), [total, pageSize]);
+  const isFirstPage = (0, import_react21.useMemo)(() => page === 1, [page]);
+  const isLastPage = (0, import_react21.useMemo)(() => page === pageCount, [page, pageCount]);
+  function next() {
+    setPage((page2) => Math.min(pageCount, page2 + 1));
+  }
+  function prev() {
+    setPage((page2) => Math.max(1, page2 - 1));
+  }
+  function pageChange(page2) {
+    setPage(() => Math.max(1, Math.min(page2, pageCount)));
+  }
+  function pageSizeChange(limit) {
+    setPageSize(limit);
+    pageChange(1);
+  }
+  const pagination = {
+    next,
+    prev,
+    page,
+    pageSize,
+    isFirstPage,
+    pageSizeChange,
+    pageChange,
+    isLastPage,
+    pageCount,
+    total
+  };
+  useWatch(page, () => options.onChange?.(pagination));
+  useWatch(pageSize, () => options.onPageSizeChange?.(pagination));
+  useWatch(pageCount, () => options.onPageCountChange?.(pagination));
+  return pagination;
+}
+
 // src/hooks/useWhenever.ts
 function useWhenever(source, cb, options) {
-  useWatch(source, () => source && cb(source), options);
+  useWatch(source, (value, oldValue) => value && cb(value, oldValue), options);
 }
 
 // src/storage/defineStore.ts
-var import_react20 = require("react");
+var import_react22 = require("react");
 var import_valtio4 = require("valtio");
 
 // src/storage/persistant.ts
@@ -649,10 +705,10 @@ function defineStore(store, options = {}) {
       Object.assign($state, patch);
   }
   function $signal(fn) {
-    return (0, import_react20.createElement)(() => fn((0, import_valtio4.useSnapshot)($state)));
+    return (0, import_react22.createElement)(() => fn((0, import_valtio4.useSnapshot)($state)));
   }
   $signal.status = function(fn) {
-    return (0, import_react20.createElement)(() => fn((0, import_valtio4.useSnapshot)($status)));
+    return (0, import_react22.createElement)(() => fn((0, import_valtio4.useSnapshot)($status)));
   };
   return {
     $subscribe,
@@ -783,6 +839,7 @@ function useStore(store) {
   useFetchRequestIntercept,
   useFetchResponseIntercept,
   useMounted,
+  useOffsetPagination,
   useStatus,
   useStore,
   useUpdate,

package/dist/index.d.ts

@@ -191,14 +191,37 @@ declare function useFetchRequestIntercept(intercept: FetchRequestInterceptCallba
 
 declare function useMounted(): boolean;
 
+interface UseOffsetPaginationOptions {
+    total?: number;
+    page?: number;
+    pageSize?: number;
+    onChange?: (pagination: Pagination) => void;
+    onPageSizeChange?: (pagination: Pagination) => void;
+    onPageCountChange?: (pagination: Pagination) => void;
+}
+interface Pagination {
+    pageSizeChange: (limit: number) => void;
+    pageChange: (page: number) => void;
+    next: () => void;
+    prev: () => void;
+    page: number;
+    pageSize: number;
+    isFirstPage: boolean;
+    isLastPage: boolean;
+    pageCount: number;
+    total: number;
+}
+declare function useOffsetPagination(options: UseOffsetPaginationOptions): Pagination;
+
 declare function useUpdate(): () => void;
 
-interface UseWatchCallback<T> {
-    (value: T): void;
+interface UseWatchCallback<T = any> {
+    (value: T, oldValue: T): void;
 }
 interface UseWatchOptions {
     immediate?: boolean;
 }
+declare function useWatch<T extends any[]>(source: readonly [...T], callback: UseWatchCallback<[...T]>, options?: UseWatchOptions): void;
 declare function useWatch<T>(source: T, callback: UseWatchCallback<T>, options?: UseWatchOptions): void;
 
 declare function useWhenever<T>(source: T, cb: UseWatchCallback<Exclude<T, null | undefined>>, options?: UseWatchOptions): void;
@@ -332,4 +355,4 @@ declare function useStore<S extends object, A extends Actions<S>, G extends Gett
 
 type PropsWithDetailedHTML<T = HTMLDivElement> = DetailedHTMLProps<HTMLAttributes<T>, T>;
 
-export { type Argument, type ArgumentArray, Case, type CaseProps, Default, type DefaultProps, Else, type ElseProps, type EventBusListener, type Exposer, type FetchRequestInterceptCallback, type FetchResponseInterceptCallback, If, type IfProps, type InjectComponent, Injector, type InjectorProps, type Mapping, type PersistantOptions, type PropsWithDetailedHTML, type ReadonlyArgumentArray, type StoreAsync, type StoreAsyncInitial, type StoreAsyncInitialOptions, type StoreAsyncOptions, Switch, type SwitchProps, Then, type ThenProps, Trigger, Unless, type UnlessProps, type UseAsyncStateOptions, type UseWatchCallback, type UseWatchOptions, type Value, type WrapperProps, type WrapperTag, cls, defienAsyncStore, defineStore, defineStoreAsync, proxyWithPersistant, track, tryUseCallback, tryUseEffect, tryUseInsertionEffect, tryUseReducer, tryUseRef, tryUseState, tryUseUpdate, useAsyncCallback, useAsyncState, useDebounce, useEventBus, useFetchRequestIntercept, useFetchResponseIntercept, useMounted, useStatus, useStore, useUpdate, useWatch, useWhenever, wrapper };
+export { type Argument, type ArgumentArray, Case, type CaseProps, Default, type DefaultProps, Else, type ElseProps, type EventBusListener, type Exposer, type FetchRequestInterceptCallback, type FetchResponseInterceptCallback, If, type IfProps, type InjectComponent, Injector, type InjectorProps, type Mapping, type Pagination, type PersistantOptions, type PropsWithDetailedHTML, type ReadonlyArgumentArray, type StoreAsync, type StoreAsyncInitial, type StoreAsyncInitialOptions, type StoreAsyncOptions, Switch, type SwitchProps, Then, type ThenProps, Trigger, Unless, type UnlessProps, type UseAsyncStateOptions, type UseOffsetPaginationOptions, type UseWatchCallback, type UseWatchOptions, type Value, type WrapperProps, type WrapperTag, cls, defienAsyncStore, defineStore, defineStoreAsync, proxyWithPersistant, track, tryUseCallback, tryUseEffect, tryUseInsertionEffect, tryUseReducer, tryUseRef, tryUseState, tryUseUpdate, useAsyncCallback, useAsyncState, useDebounce, useEventBus, useFetchRequestIntercept, useFetchResponseIntercept, useMounted, useOffsetPagination, useStatus, useStore, useUpdate, useWatch, useWhenever, wrapper };

package/dist/index.global.js

@@ -71,6 +71,7 @@ var LibReact = (() => {
     useFetchRequestIntercept: () => useFetchRequestIntercept,
     useFetchResponseIntercept: () => useFetchResponseIntercept,
     useMounted: () => useMounted,
+    useOffsetPagination: () => useOffsetPagination,
     useStatus: () => useStatus,
     useStore: () => useStore,
     useUpdate: () => useUpdate,
@@ -1136,7 +1137,7 @@ var LibReact = (() => {
   var import_react14 = __toESM(require_react(), 1);
   function useAsyncCallback(fun) {
     const [state, set] = (0, import_react14.useState)({ loading: false });
-    async function execute(...args) {
+    async function refetch(...args) {
       set({ loading: true });
       return fun(...args).then((value) => {
         set({ loading: false });
@@ -1146,21 +1147,21 @@ var LibReact = (() => {
         return Promise.reject(err);
       });
     }
-    return [state.loading, execute, state.error];
+    return [state.loading, refetch, state.error];
   }
 
   // src/hooks/useAsyncState.ts
   var import_react15 = __toESM(require_react(), 1);
   function useAsyncState(fun, deps = [], options) {
     const [value, set] = (0, import_react15.useState)(options?.initial);
-    const [loading, execute, error] = useAsyncCallback(async (...args) => fun(...args).then(set));
+    const [loading, refetch, error] = useAsyncCallback(async (...args) => fun(...args).then(set));
     (0, import_react15.useEffect)(
       () => {
-        execute();
+        refetch();
       },
       deps
     );
-    return [{ value, loading, error }, execute];
+    return [{ value, loading, error }, refetch];
   }
 
   // src/hooks/useDebounce.ts
@@ -1268,20 +1269,36 @@ var LibReact = (() => {
     return mounted;
   }
 
+  // src/hooks/useOffsetPagination.ts
+  var import_react22 = __toESM(require_react(), 1);
+
   // src/hooks/useWatch.ts
+  var import_react21 = __toESM(require_react(), 1);
+
+  // src/hooks/usePrevious.ts
   var import_react20 = __toESM(require_react(), 1);
+  function usePrevious(value) {
+    const ref2 = (0, import_react20.useRef)(void 0);
+    (0, import_react20.useEffect)(() => {
+      ref2.current = value;
+    });
+    return ref2.current;
+  }
+
+  // src/hooks/useWatch.ts
   function useWatch(source, callback, options = {}) {
-    const firstUpdate = (0, import_react20.useRef)(false);
-    const then = (0, import_react20.useRef)(void 0);
-    const deps = (0, import_react20.useMemo)(
+    const firstUpdate = (0, import_react21.useRef)(false);
+    const then = (0, import_react21.useRef)(void 0);
+    const oldValue = usePrevious(source);
+    const deps = (0, import_react21.useMemo)(
       () => Array.isArray(source) ? source : [source],
       [source]
     );
-    (0, import_react20.useEffect)(() => {
+    (0, import_react21.useEffect)(() => {
       if (!firstUpdate.current)
         recordFirst();
       else
-        callback(source);
+        callback(source, oldValue);
     }, deps);
     async function recordFirst() {
       if (then.current)
@@ -1289,17 +1306,56 @@ var LibReact = (() => {
       then.current = Promise.resolve(source);
       then.current.then(() => firstUpdate.current = true);
       if (options.immediate)
-        then.current.then((value) => callback(value));
+        then.current.then((value) => callback(value, oldValue));
     }
   }
 
+  // src/hooks/useOffsetPagination.ts
+  function useOffsetPagination(options) {
+    const [page, setPage] = (0, import_react22.useState)(options.page || 1);
+    const [pageSize, setPageSize] = (0, import_react22.useState)(options.pageSize || 10);
+    const total = options.total || 0;
+    const pageCount = (0, import_react22.useMemo)(() => Math.max(1, Math.ceil(total / pageSize)), [total, pageSize]);
+    const isFirstPage = (0, import_react22.useMemo)(() => page === 1, [page]);
+    const isLastPage = (0, import_react22.useMemo)(() => page === pageCount, [page, pageCount]);
+    function next() {
+      setPage((page2) => Math.min(pageCount, page2 + 1));
+    }
+    function prev() {
+      setPage((page2) => Math.max(1, page2 - 1));
+    }
+    function pageChange(page2) {
+      setPage(() => Math.max(1, Math.min(page2, pageCount)));
+    }
+    function pageSizeChange(limit) {
+      setPageSize(limit);
+      pageChange(1);
+    }
+    const pagination = {
+      next,
+      prev,
+      page,
+      pageSize,
+      isFirstPage,
+      pageSizeChange,
+      pageChange,
+      isLastPage,
+      pageCount,
+      total
+    };
+    useWatch(page, () => options.onChange?.(pagination));
+    useWatch(pageSize, () => options.onPageSizeChange?.(pagination));
+    useWatch(pageCount, () => options.onPageCountChange?.(pagination));
+    return pagination;
+  }
+
   // src/hooks/useWhenever.ts
   function useWhenever(source, cb, options) {
-    useWatch(source, () => source && cb(source), options);
+    useWatch(source, (value, oldValue) => value && cb(value, oldValue), options);
   }
 
   // src/storage/defineStore.ts
-  var import_react21 = __toESM(require_react(), 1);
+  var import_react23 = __toESM(require_react(), 1);
 
   // src/storage/persistant.ts
   function proxyWithPersistant(keyOrOptions, initialObject) {
@@ -1377,10 +1433,10 @@ var LibReact = (() => {
         Object.assign($state, patch);
     }
     function $signal(fn) {
-      return (0, import_react21.createElement)(() => fn(useSnapshot($state)));
+      return (0, import_react23.createElement)(() => fn(useSnapshot($state)));
     }
     $signal.status = function(fn) {
-      return (0, import_react21.createElement)(() => fn(useSnapshot($status)));
+      return (0, import_react23.createElement)(() => fn(useSnapshot($status)));
     };
     return {
       $subscribe,

package/dist/index.js

@@ -353,7 +353,7 @@ function tryUseUpdate() {
 import { useState as useState2 } from "react";
 function useAsyncCallback(fun) {
   const [state, set] = useState2({ loading: false });
-  async function execute(...args) {
+  async function refetch(...args) {
     set({ loading: true });
     return fun(...args).then((value) => {
       set({ loading: false });
@@ -363,21 +363,21 @@ function useAsyncCallback(fun) {
       return Promise.reject(err);
     });
   }
-  return [state.loading, execute, state.error];
+  return [state.loading, refetch, state.error];
 }
 
 // src/hooks/useAsyncState.ts
 import { useEffect as useEffect2, useState as useState3 } from "react";
 function useAsyncState(fun, deps = [], options) {
   const [value, set] = useState3(options?.initial);
-  const [loading, execute, error] = useAsyncCallback(async (...args) => fun(...args).then(set));
+  const [loading, refetch, error] = useAsyncCallback(async (...args) => fun(...args).then(set));
   useEffect2(
     () => {
-      execute();
+      refetch();
     },
     deps
   );
-  return [{ value, loading, error }, execute];
+  return [{ value, loading, error }, refetch];
 }
 
 // src/hooks/useDebounce.ts
@@ -468,20 +468,36 @@ function useMounted() {
   return mounted;
 }
 
+// src/hooks/useOffsetPagination.ts
+import { useMemo as useMemo3, useState as useState6 } from "react";
+
+// src/hooks/useWatch.ts
+import { useEffect as useEffect8, useMemo as useMemo2, useRef as useRef4 } from "react";
+
+// src/hooks/usePrevious.ts
+import { useEffect as useEffect7, useRef as useRef3 } from "react";
+function usePrevious(value) {
+  const ref2 = useRef3(void 0);
+  useEffect7(() => {
+    ref2.current = value;
+  });
+  return ref2.current;
+}
+
 // src/hooks/useWatch.ts
-import { useEffect as useEffect7, useMemo as useMemo2, useRef as useRef3 } from "react";
 function useWatch(source, callback, options = {}) {
-  const firstUpdate = useRef3(false);
-  const then = useRef3(void 0);
+  const firstUpdate = useRef4(false);
+  const then = useRef4(void 0);
+  const oldValue = usePrevious(source);
   const deps = useMemo2(
     () => Array.isArray(source) ? source : [source],
     [source]
   );
-  useEffect7(() => {
+  useEffect8(() => {
     if (!firstUpdate.current)
       recordFirst();
     else
-      callback(source);
+      callback(source, oldValue);
   }, deps);
   async function recordFirst() {
     if (then.current)
@@ -489,13 +505,52 @@ function useWatch(source, callback, options = {}) {
     then.current = Promise.resolve(source);
     then.current.then(() => firstUpdate.current = true);
     if (options.immediate)
-      then.current.then((value) => callback(value));
+      then.current.then((value) => callback(value, oldValue));
   }
 }
 
+// src/hooks/useOffsetPagination.ts
+function useOffsetPagination(options) {
+  const [page, setPage] = useState6(options.page || 1);
+  const [pageSize, setPageSize] = useState6(options.pageSize || 10);
+  const total = options.total || 0;
+  const pageCount = useMemo3(() => Math.max(1, Math.ceil(total / pageSize)), [total, pageSize]);
+  const isFirstPage = useMemo3(() => page === 1, [page]);
+  const isLastPage = useMemo3(() => page === pageCount, [page, pageCount]);
+  function next() {
+    setPage((page2) => Math.min(pageCount, page2 + 1));
+  }
+  function prev() {
+    setPage((page2) => Math.max(1, page2 - 1));
+  }
+  function pageChange(page2) {
+    setPage(() => Math.max(1, Math.min(page2, pageCount)));
+  }
+  function pageSizeChange(limit) {
+    setPageSize(limit);
+    pageChange(1);
+  }
+  const pagination = {
+    next,
+    prev,
+    page,
+    pageSize,
+    isFirstPage,
+    pageSizeChange,
+    pageChange,
+    isLastPage,
+    pageCount,
+    total
+  };
+  useWatch(page, () => options.onChange?.(pagination));
+  useWatch(pageSize, () => options.onPageSizeChange?.(pagination));
+  useWatch(pageCount, () => options.onPageCountChange?.(pagination));
+  return pagination;
+}
+
 // src/hooks/useWhenever.ts
 function useWhenever(source, cb, options) {
-  useWatch(source, () => source && cb(source), options);
+  useWatch(source, (value, oldValue) => value && cb(value, oldValue), options);
 }
 
 // src/storage/defineStore.ts
@@ -712,6 +767,7 @@ export {
   useFetchRequestIntercept,
   useFetchResponseIntercept,
   useMounted,
+  useOffsetPagination,
   useStatus,
   useStore,
   useUpdate,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hairy/react-lib",
   "type": "module",
-  "version": "1.36.1",
+  "version": "1.38.0",
   "description": "Library for react",
   "author": "Hairyf <wwu710632@gmail.com>",
   "license": "MIT",
@@ -38,7 +38,7 @@
     "react-dom": "^19.1.0",
     "react-i18next": "^14.1.2",
     "react-use": "^17.6.0",
-    "@hairy/utils": "1.36.1"
+    "@hairy/utils": "1.38.0"
   },
   "scripts": {
     "build": "tsup",