feat: add @pansy/use-pagination

hooks/usePagination/.redbudrc.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from 'redbud';
+
+export default defineConfig({
+  extends: '../../.redbudrc.base.ts'
+});

hooks/usePagination/docs/demo/demo01.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Pagination } from 'antd';
+import { usePagination } from '@pansy/use-pagination';
+import Mock from 'mockjs';
+
+interface UserListItem {
+  id: string;
+  name: string;
+  gender: 'male' | 'female';
+  email: string;
+  disabled: boolean;
+}
+
+const userList = (current: number, pageSize: number) =>
+  Mock.mock({
+    total: 55,
+    [`list|${pageSize}`]: [
+      {
+        id: '@guid',
+        name: '@name',
+        'gender|1': ['male', 'female'],
+        email: '@email',
+        disabled: false,
+      },
+    ],
+  });
+
+async function getUserList(params: {
+  current: number;
+  pageSize: number;
+}): Promise<{ total: number; list: UserListItem[] }> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(userList(params.current, params.pageSize));
+    }, 1000);
+  });
+}
+
+export default () => {
+  const { data, loading, pagination } = usePagination(getUserList);
+  return (
+    <div>
+      {loading ? (
+        <p>loading</p>
+      ) : (
+        <ul>
+          {data?.list?.map((item) => (
+            <li key={item.email}>
+              {item.name} - {item.email}
+            </li>
+          ))}
+        </ul>
+      )}
+      <Pagination
+        current={pagination.current}
+        pageSize={pagination.pageSize}
+        total={data?.total}
+        onChange={pagination.onChange}
+        onShowSizeChange={pagination.onChange}
+        showQuickJumper
+        showSizeChanger
+        style={{ marginTop: 16, textAlign: 'right' }}
+      />
+    </div>
+  );
+};

hooks/usePagination/docs/usePagination.md

@@ -0,0 +1,11 @@
+---
+title: usePagination
+group:
+  title: 场景
+---
+
+# usePagination
+
+## 代码演示
+
+<code src="./demo/demo01.tsx"></code>

hooks/usePagination/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@pansy/use-pagination",
+  "description": "封装分页逻辑",
+  "version": "0.0.1",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "types": "es/index.d.ts",
+  "files": [
+    "es",
+    "lib",
+    "dist"
+  ],
+  "scripts": {
+    "dev": "redbud dev",
+    "build": "redbud build"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "dependencies": {
+    "@pansy/use-request": "^0.3.1",
+    "@pansy/use-memoized-fn": "^0.3.1"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  }
+}

hooks/usePagination/src/index.ts

@@ -0,0 +1,66 @@
+import { useMemo } from 'react';
+import { useRequest } from '@pansy/use-request';
+import { useMemoizedFn } from '@pansy/use-memoized-fn';
+
+import type { Data, Service, Params, PaginationOptions } from './types';
+
+export const usePagination = <D extends Data, P extends Params>(
+  service: Service<D, P>,
+  options: PaginationOptions<D, P> = {},
+) => {
+  const { defaultPageSize = 10, defaultCurrent = 1, ...rest } = options;
+
+  const result = useRequest(service, {
+    defaultParams: [{ current: defaultCurrent, pageSize: defaultPageSize }],
+    refreshDepsAction: () => {
+      changeCurrent(1);
+    },
+    ...rest,
+  });
+
+  const { current = 1, pageSize = defaultPageSize } = result.params[0] || {};
+
+  const total = result.data?.total || 0;
+  const totalPage = useMemo(() => Math.ceil(total / pageSize), [pageSize, total]);
+
+  const onChange = (c: number, p: number) => {
+    let toCurrent = c <= 0 ? 1 : c;
+    const toPageSize = p <= 0 ? 1 : p;
+    const tempTotalPage = Math.ceil(total / toPageSize);
+    if (toCurrent > tempTotalPage) {
+      toCurrent = Math.max(1, tempTotalPage);
+    }
+
+    const [oldPaginationParams = {}, ...restParams] = result.params || [];
+
+    result.run(
+      {
+        ...oldPaginationParams,
+        current: toCurrent,
+        pageSize: toPageSize,
+      },
+      ...restParams,
+    );
+  };
+
+  const changeCurrent = (c: number) => {
+    onChange(c, pageSize);
+  };
+
+  const changePageSize = (p: number) => {
+    onChange(current, p);
+  };
+
+  return {
+    ...result,
+    pagination: {
+      current,
+      pageSize,
+      total,
+      totalPage,
+      onChange: useMemoizedFn(onChange),
+      changeCurrent: useMemoizedFn(changeCurrent),
+      changePageSize: useMemoizedFn(changePageSize),
+    },
+  }
+}

hooks/usePagination/src/types.ts

@@ -0,0 +1,31 @@
+import type { Options, Result } from '@pansy/use-request';
+
+export interface Data<D = any> {
+  total: number;
+  list: D[];
+}
+
+export type Params = [{ current: number; pageSize: number; [key: string]: any }, ...any[]];
+
+export type Service<D extends Data, TParams extends Params> = (
+  ...args: TParams
+) => Promise<D>;
+
+export interface PaginationResult<D extends Data, P extends Params>
+  extends Result<D, P> {
+  pagination: {
+    current: number;
+    pageSize: number;
+    total: number;
+    totalPage: number;
+    onChange: (current: number, pageSize: number) => void;
+    changeCurrent: (current: number) => void;
+    changePageSize: (pageSize: number) => void;
+  };
+}
+
+export interface PaginationOptions<D extends Data, P extends Params>
+  extends Options<D, P> {
+  defaultPageSize?: number;
+  defaultCurrent?: number;
+}

hooks/usePagination/test/index.test.ts

@@ -0,0 +1,7 @@
+import { usePagination } from '../src/index';
+
+describe('usePagination', () => {
+  it('should be defined', () => {
+    expect(usePagination).toBeDefined();
+  });
+})

hooks/usePagination/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src"]
+}

package.json

@@ -57,6 +57,7 @@
     "@pansy/use-mqtt": "workspace:*",
     "@pansy/use-previous": "workspace:*",
     "@pansy/use-raf-state": "workspace:*",
+    "@pansy/use-pagination": "workspace:*",
     "@pansy/use-request": "workspace:*",
     "@pansy/use-scroll": "workspace:*",
     "@pansy/use-scroll-lock": "workspace:*",