rc-hooks
Version:
React Hooks Library.
108 lines (107 loc) • 7.04 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = require("react");
var ut2_1 = require("ut2");
var useAsync_1 = tslib_1.__importDefault(require("../useAsync"));
var useUpdateEffect_1 = tslib_1.__importDefault(require("../useUpdateEffect"));
/**
* 基于 `useAsync` 扩展，用于管理分页的 Hook。
*
* @param {Function} asyncFn 异步函数。
* @param {Object} [options] 配置项。
* @param {number} [options.defaultPageSize=10] 默认每页的数量。
* @param {boolean} [options.autoRun=true] 在初始化时自动执行异步函数。如果设置为 `false`，则需要手动调用 `run` 触发执行。默认 `true`。
* @param {*} [options.initialData] 初始化的 `data`。
* @param {boolean} [options.defaultLoading=false] 初始化默认 `loading` 值。默认值等于 `autoRun && !loadingDelay`。
* @param {Array} [options.defaultParams] 如果 `autoRun=true` 自动执行 `run` 的默认参数。
* @param {Array} [options.refreshDeps] 在 `autoRun = true` 时，refreshDeps 变化，会重置 `current` 到第一页，并执行 `run` 方法。
* @param {Function} [options.onBefore] 异步函数执行前触发，参数为 `params`。
* @param {Function} [options.onSuccess] 异步函数 `resolve` 时触发，参数为 `data` 和 `params`。
* @param {Function} [options.onError] 异步函数报错时触发，参数为 `error` 和 `params`。
* @param {string} [options.cacheKey] 缓存的键值。启用缓存机制，异步成功结果将被缓存。如果多个相同 cacheKey 的异步同时触发中，将共享第一个异步结果。
* @param {number} [options.cacheTime=5*60*1000] 缓存时间。单位毫秒。
* @param {boolean} [options.persisted=false] 持久化数据。当有缓存数据时，不再执行异步函数。需要配合 `cacheKey` `cacheTime` 使用。默认 `false`。
* @param {number} [options.loadingDelay] 设置 `loading` 延迟时间，避免闪烁，单位为毫秒。
* @param {number} [options.pollingInterval] 轮询间隔，单位为毫秒。设置后，将进入轮询模式，定时触发 `run`。
* @param {boolean} [options.pollingWhenHidden=true] 在页面隐藏时，是否继续轮询。如果为 `true`，不会停止轮询。如果为 `false`，在页面隐藏时会暂时停止轮询，页面重新显示时继续上次轮询。默认 `true`。
* @param {boolean} [options.refreshOnWindowFocus=false] 在屏幕重新获取焦点或重新显示时，是否重新发起请求。如果为 `false`，不会重新发起请求。如果为 `true`，在屏幕重新聚焦或重新显示时，会重新发起请求。默认 `false`。
* @param {number} [options.focusTimespan=5000] 屏幕重新聚焦，重新发起请求时间间隔。需要配置 `refreshOnWindowFocus` 使用。默认 `5000`。
* @param {number} [options.debounceInterval] 防抖间隔，单位为毫秒，设置后，请求进入防抖模式。
* @param {number} [options.throttleInterval] 节流间隔，单位为毫秒，设置后，请求进入节流模式。
* @returns {Object}
* @example
* const { data, error, loading, run, params, refresh, pagination, tableProps } = usePagination(asyncFn, options);
*/
function usePagination(asyncFn, options) {
var _a = options || {}, _b = _a.defaultPageSize, defaultPageSize = _b === void 0 ? 10 : _b, _c = _a.refreshDeps, refreshDeps = _c === void 0 ? [] : _c, defaultParamsProp = _a.defaultParams, _d = _a.autoRun, autoRun = _d === void 0 ? true : _d, restOptions = tslib_1.__rest(_a, ["defaultPageSize", "refreshDeps", "defaultParams", "autoRun"]);
var defaultParams = (0, react_1.useMemo)(function () { return defaultParamsProp || [{ current: 1, pageSize: defaultPageSize }]; }, [defaultPageSize, defaultParamsProp]);
var _e = (0, useAsync_1.default)(asyncFn, tslib_1.__assign({ defaultParams: defaultParams, autoRun: autoRun }, restOptions)), run = _e.run, data = _e.data, params = _e.params, loading = _e.loading, restAsyncReturn = tslib_1.__rest(_e, ["run", "data", "params", "loading"]);
var _f = params && params[0] ? params[0] : defaultParams[0], current = _f.current, pageSize = _f.pageSize;
var total = (data === null || data === void 0 ? void 0 : data.total) || 0;
var changePagination = (0, react_1.useCallback)(function (pagination) {
var _a = tslib_1.__read(params), oldParams = _a[0], restParams = _a.slice(1);
return run.apply(void 0, [tslib_1.__assign(tslib_1.__assign({}, oldParams), pagination)].concat(restParams));
}, [params, run]);
var refresh = (0, react_1.useCallback)(function () {
return changePagination({ current: current, pageSize: pageSize });
}, [changePagination, current, pageSize]);
var onChange = (0, react_1.useCallback)(function (c, p) {
var toCurrent = c <= 0 ? 1 : c;
var toPageSize = p <= 0 ? 1 : p;
var tempTotalPage = Math.ceil(total / toPageSize);
if (toCurrent > tempTotalPage && tempTotalPage > 0) {
toCurrent = tempTotalPage;
}
changePagination({
current: toCurrent,
pageSize: toPageSize
});
}, [changePagination, total]);
var changeCurrent = (0, react_1.useCallback)(function (c) {
onChange(c, pageSize);
}, [onChange, pageSize]);
var changePageSize = (0, react_1.useCallback)(function (p) {
onChange(current, p);
}, [current, onChange]);
var changeTable = (0, react_1.useCallback)(function (pagination, filters, sorter, extra) {
changePagination({
current: pagination === null || pagination === void 0 ? void 0 : pagination.current,
pageSize: pagination === null || pagination === void 0 ? void 0 : pagination.pageSize,
filters: filters,
sorter: sorter,
extra: extra
});
}, [changePagination]);
(0, useUpdateEffect_1.default)(function () {
if (autoRun && (0, ut2_1.isArray)(refreshDeps) && refreshDeps.length > 0) {
changeCurrent(1);
}
}, refreshDeps);
return tslib_1.__assign(tslib_1.__assign({}, restAsyncReturn), { data: data, run: run, refresh: refresh, loading: loading, params: params,
/**
* 分页数据及操作分页的方法。
*/
pagination: {
current: current,
pageSize: pageSize,
total: total,
onChange: onChange,
changeCurrent: changeCurrent,
changePageSize: changePageSize
},
/**
* 适配 antd Table 组件的数据结构，可以直接用在 antd Table 组件上。
*/
tableProps: {
dataSource: ((data === null || data === void 0 ? void 0 : data.list) || []),
loading: loading,
onChange: changeTable,
pagination: {
total: total,
current: current,
pageSize: pageSize
}
} });
}
exports.default = usePagination;