mirror of
https://github.com/Syngnat/GoNavi.git
synced 2026-07-11 07:21:37 +08:00
feat(data-grid): expose total count action in pagination
This commit is contained in:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user