feat(data-grid): expose total count action in pagination

This commit is contained in:
Syngnat
2026-07-07 17:31:53 +08:00
parent 4fee58999d
commit 8c968c1a87

View File

@@ -1,6 +1,6 @@
import React from 'react';
import { Button, InputNumber, Pagination, Select } from 'antd';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { CloseOutlined, LeftOutlined, RightOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons';
import { t as defaultTranslate, type I18nParams } from '../i18n';
interface DataGridPaginationState {
@@ -26,9 +26,12 @@ export interface DataGridPaginationBarProps {
paginationPageText: string;
paginationPageSizeOptions: string[];
showKnownPageCount: boolean;
manualTotalCountAvailable?: boolean;
totalCountLoading?: boolean;
onPageChange?: (page: number, size: number) => void;
onPageSizeChange: (value: string) => void;
onV2PageStep: (direction: 'previous' | 'next') => void;
onToggleTotalCount?: () => void;
translate?: DataGridPaginationTranslate;
}
@@ -42,9 +45,12 @@ const DataGridPaginationBar: React.FC<DataGridPaginationBarProps> = ({
paginationPageText,
paginationPageSizeOptions,
showKnownPageCount,
manualTotalCountAvailable = false,
totalCountLoading = false,
onPageChange,
onPageSizeChange,
onV2PageStep,
onToggleTotalCount,
translate = defaultTranslate,
}) => {
const [jumpPage, setJumpPage] = React.useState<number | null>(pagination?.current ?? null);
@@ -58,6 +64,17 @@ const DataGridPaginationBar: React.FC<DataGridPaginationBarProps> = ({
return null;
}
const totalCountButton = manualTotalCountAvailable && onToggleTotalCount ? (
<Button
data-grid-pagination-total-count="true"
size="small"
icon={totalCountLoading ? <CloseOutlined /> : <VerticalAlignBottomOutlined />}
onClick={onToggleTotalCount}
>
{totalCountLoading ? translate('data_grid.toolbar.cancel_count') : translate('data_grid.toolbar.count_total')}
</Button>
) : null;
const maxJumpPage = showKnownPageCount ? Math.max(1, paginationTotalPages) : null;
const normalizedJumpPage = Number.isFinite(Number(jumpPage)) && Number(jumpPage) > 0
? (maxJumpPage !== null
@@ -132,6 +149,7 @@ const DataGridPaginationBar: React.FC<DataGridPaginationBarProps> = ({
<div className="data-grid-pagination-summary" aria-live="polite">
<span className="data-grid-pagination-summary-value">{paginationV2SummaryText}</span>
</div>
{totalCountButton}
<Button
data-grid-v2-pagination-prev="true"
size="small"
@@ -174,6 +192,7 @@ const DataGridPaginationBar: React.FC<DataGridPaginationBarProps> = ({
<span className="data-grid-pagination-kicker">{translate('data_grid.pagination.result_set')}</span>
<span className="data-grid-pagination-summary-value">{paginationSummaryText}</span>
</div>
{totalCountButton}
{showSequentialPagination ? sequentialPaginationControl : (
<Pagination
current={pagination.current}