lbg-hooks

LBG Hooks

开发

编译发包

npm run build //目前是使用tsc简单的编译源文件，之后会优化为rollup构建，以支持treeShaking等优化

npm publish

使用文档

useAntdTable

@desc 处理antd的table分页场景

import { FC } from 'react';
import { Table } from 'antd'
import { useAntdTable } from 'lbg-hooks';
import { PageParams } from 'lbg-hooks/lib/useAntdTable';//用来修饰页码的TS类型
const HookDemo:FC<{}> = ()=>{

    const [queryParams, setQueryParams] = useState<Partial<ListQueryParams>>({});

     // 列表请求
    const requestTableData = async (pageParams: PageParams) => {
        const res:any = await get(GET_LIST, {
            ...queryParams,
            ...pageParams,
        }, true);

        return {
            total: res?.count || 0,
            data: res?.data || [],
        };
    };

    const { tableProps, resetTable, reloadTable } = useAntdTable(requestTableData, [
        queryParams,
    ]);

    return   <Table rowKey='id' columns={columns} {...tableProps} />
}
   

参数	解释
request	请求方法。 需返回一个结果包含总页数及列表数据的Promise实例
deps	表格重置的依赖项。需要依赖一个状态，任意依赖项发生变化，重置页码为1，自动调用request方法，设计灵感来源于react的useEffect，区别是react是依赖变化运行渲染副作用，这里是重置表格数据。
options	自定义选项 {isInit:true;//是否在初始化时候默认触发一次请求 默认为true}

除了以上依靠deps参数实现的自动模式，也另外导出了一些hook内部的实用方法,以灵活应对更多场景:

interface Result<RecordType> {
  tableProps: TableProps<RecordType>; // 表格属性
  resetTable: () => void; // 手动重置表格 页码会重置为第一页
  reloadTable: () => void; // 手动刷新当前页的表格数据
}