@antv/s2-react/lib/hooks/usePagination.js

use S2 with react

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.usePagination = void 0;
const tslib_1 = require("tslib");
const s2_1 = require("@antv/s2");
const ahooks_1 = require("ahooks");
const lodash_1 = require("lodash");
const react_1 = tslib_1.__importDefault(require("react"));
const DEFAULT_PAGE_SIZE = 10;
const DEFAULT_PAGE_NUMBER = 1;
/**
 * s2-react 内部不消费, 提供给外部的自行实现的分页便捷组合使用
 */
const usePagination = (s2, options) => {
    var _a;
    const defaultPagination = options === null || options === void 0 ? void 0 : options.pagination;
    const [pagination, setPagination] = react_1.default.useState({
        total: ((_a = s2 === null || s2 === void 0 ? void 0 : s2.facet) === null || _a === void 0 ? void 0 : _a.viewCellHeights.getTotalLength()) || 0,
        current: (defaultPagination === null || defaultPagination === void 0 ? void 0 : defaultPagination.current) || DEFAULT_PAGE_NUMBER,
        pageSize: (defaultPagination === null || defaultPagination === void 0 ? void 0 : defaultPagination.pageSize) || DEFAULT_PAGE_SIZE,
    });
    const onShowSizeChange = (current, pageSize) => {
        setPagination(Object.assign(Object.assign({}, pagination), { current, pageSize }));
    };
    const onChange = (current, pageSize) => {
        setPagination(Object.assign(Object.assign({}, pagination), { current, pageSize }));
    };
    // sync state.pagination -> s2.pagination
    (0, ahooks_1.useUpdateEffect)(() => {
        const render = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
            if (!s2 || (0, lodash_1.isEmpty)(defaultPagination)) {
                return;
            }
            s2.updatePagination({
                current: pagination.current,
                pageSize: pagination.pageSize,
            });
            yield s2.render(false);
        });
        render();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [pagination.current, pagination.pageSize, s2]);
    // sync props.pagination -> state.pagination
    (0, ahooks_1.useUpdateEffect)(() => {
        var _a;
        setPagination({
            total: ((_a = s2 === null || s2 === void 0 ? void 0 : s2.facet) === null || _a === void 0 ? void 0 : _a.viewCellHeights.getTotalLength()) || 0,
            current: (defaultPagination === null || defaultPagination === void 0 ? void 0 : defaultPagination.current) || DEFAULT_PAGE_NUMBER,
            pageSize: (defaultPagination === null || defaultPagination === void 0 ? void 0 : defaultPagination.pageSize) || DEFAULT_PAGE_SIZE,
        });
    }, [defaultPagination, s2]);
    // sync layout result total -> state.total
    (0, ahooks_1.useUpdateEffect)(() => {
        if (!s2 || (0, lodash_1.isEmpty)(defaultPagination)) {
            return;
        }
        const totalUpdateCallback = (data) => {
            setPagination((prev) => {
                return Object.assign(Object.assign({}, prev), { total: data.total });
            });
        };
        s2.on(s2_1.S2Event.LAYOUT_PAGINATION, totalUpdateCallback);
        return () => {
            s2.off(s2_1.S2Event.LAYOUT_PAGINATION, totalUpdateCallback);
        };
    }, [defaultPagination, s2]);
    return Object.assign(Object.assign(Object.assign({}, defaultPagination), pagination), { onShowSizeChange,
        onChange });
};
exports.usePagination = usePagination;
//# sourceMappingURL=usePagination.js.map