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

use S2 with react

import { __awaiter } from "tslib";
import { S2Event, } from '@antv/s2';
import { useUpdateEffect } from 'ahooks';
import { isEmpty } from 'lodash';
import React from 'react';
const DEFAULT_PAGE_SIZE = 10;
const DEFAULT_PAGE_NUMBER = 1;
/**
 * s2-react 内部不消费, 提供给外部的自行实现的分页便捷组合使用
 */
export const usePagination = (s2, options) => {
    var _a;
    const defaultPagination = options === null || options === void 0 ? void 0 : options.pagination;
    const [pagination, setPagination] = React.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
    useUpdateEffect(() => {
        const render = () => __awaiter(void 0, void 0, void 0, function* () {
            if (!s2 || 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
    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
    useUpdateEffect(() => {
        if (!s2 || isEmpty(defaultPagination)) {
            return;
        }
        const totalUpdateCallback = (data) => {
            setPagination((prev) => {
                return Object.assign(Object.assign({}, prev), { total: data.total });
            });
        };
        s2.on(S2Event.LAYOUT_PAGINATION, totalUpdateCallback);
        return () => {
            s2.off(S2Event.LAYOUT_PAGINATION, totalUpdateCallback);
        };
    }, [defaultPagination, s2]);
    return Object.assign(Object.assign(Object.assign({}, defaultPagination), pagination), { onShowSizeChange,
        onChange });
};
//# sourceMappingURL=usePagination.js.map