|
@@ -28,13 +28,12 @@ import { PageStats } from '../FileChooser/types';
|
|
|
import './Pagination.scss';
|
|
import './Pagination.scss';
|
|
|
|
|
|
|
|
interface PaginationProps {
|
|
interface PaginationProps {
|
|
|
- onNextPageButtonClicked: (nextPageNumber: number, numPages: number) => void;
|
|
|
|
|
- onPageNumberChange: (pageNumber: number) => void;
|
|
|
|
|
- onPageSizeChange: (pageSize: number) => void;
|
|
|
|
|
- onPreviousPageButtonClicked: (previousPageNumber: number) => void;
|
|
|
|
|
- pageSize: number;
|
|
|
|
|
|
|
+ setPageNumber: (pageNumber: number) => void;
|
|
|
|
|
+ setPageSize?: (pageSize: number) => void;
|
|
|
|
|
+ pageSize?: number;
|
|
|
pageSizeOptions?: number[];
|
|
pageSizeOptions?: number[];
|
|
|
pageStats: PageStats;
|
|
pageStats: PageStats;
|
|
|
|
|
+ showIndexes?: boolean;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const defaultProps = {
|
|
const defaultProps = {
|
|
@@ -42,17 +41,16 @@ const defaultProps = {
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
const Pagination = ({
|
|
const Pagination = ({
|
|
|
- onNextPageButtonClicked,
|
|
|
|
|
- onPageNumberChange,
|
|
|
|
|
- onPageSizeChange,
|
|
|
|
|
- onPreviousPageButtonClicked,
|
|
|
|
|
- pageSize,
|
|
|
|
|
|
|
+ setPageNumber,
|
|
|
|
|
+ setPageSize,
|
|
|
pageSizeOptions = [],
|
|
pageSizeOptions = [],
|
|
|
- pageStats
|
|
|
|
|
|
|
+ pageStats,
|
|
|
|
|
+ showIndexes = false
|
|
|
}: PaginationProps): JSX.Element => {
|
|
}: PaginationProps): JSX.Element => {
|
|
|
const { t } = i18nReact.useTranslation();
|
|
const { t } = i18nReact.useTranslation();
|
|
|
|
|
|
|
|
- const currentPageSize = pageSize;
|
|
|
|
|
|
|
+ const startIndex = pageStats.page_size * (pageStats.page_number - 1) + 1;
|
|
|
|
|
+ const endIndex = Math.min(pageStats.page_size * pageStats.page_number, pageStats.total_size);
|
|
|
|
|
|
|
|
const pageSizeOptionsMenu: MenuProps['items'] = pageSizeOptions.map(option => {
|
|
const pageSizeOptionsMenu: MenuProps['items'] = pageSizeOptions.map(option => {
|
|
|
return {
|
|
return {
|
|
@@ -60,8 +58,8 @@ const Pagination = ({
|
|
|
label: (
|
|
label: (
|
|
|
<BorderlessButton
|
|
<BorderlessButton
|
|
|
onClick={() => {
|
|
onClick={() => {
|
|
|
- onPageSizeChange(option);
|
|
|
|
|
- onPageNumberChange(1);
|
|
|
|
|
|
|
+ setPageSize && setPageSize(option);
|
|
|
|
|
+ setPageNumber(1);
|
|
|
}}
|
|
}}
|
|
|
className="hue-pagination__page-size-menu-item-btn"
|
|
className="hue-pagination__page-size-menu-item-btn"
|
|
|
data-event={''}
|
|
data-event={''}
|
|
@@ -74,45 +72,57 @@ const Pagination = ({
|
|
|
|
|
|
|
|
return (
|
|
return (
|
|
|
<div className="hue-pagination">
|
|
<div className="hue-pagination">
|
|
|
- <div className="hue-pagination__page-size-control">
|
|
|
|
|
- {t('Rows per page: ')}
|
|
|
|
|
- <Dropdown menu={{ items: pageSizeOptionsMenu }}>
|
|
|
|
|
- <BorderlessButton
|
|
|
|
|
- className="hue-pagination__page-size-menu-btn"
|
|
|
|
|
- data-event={''}
|
|
|
|
|
- icon={<DropdownIcon />}
|
|
|
|
|
- iconPosition="right"
|
|
|
|
|
- >
|
|
|
|
|
- {currentPageSize}
|
|
|
|
|
- </BorderlessButton>
|
|
|
|
|
- </Dropdown>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ {pageStats.page_size > 0 && (
|
|
|
|
|
+ <div className="hue-pagination__page-size-control">
|
|
|
|
|
+ {t('Rows per page: ')}
|
|
|
|
|
+ <Dropdown menu={{ items: pageSizeOptionsMenu }}>
|
|
|
|
|
+ <BorderlessButton
|
|
|
|
|
+ className="hue-pagination__page-size-menu-btn"
|
|
|
|
|
+ data-event={''}
|
|
|
|
|
+ icon={<DropdownIcon />}
|
|
|
|
|
+ iconPosition="right"
|
|
|
|
|
+ >
|
|
|
|
|
+ {pageStats.page_size}
|
|
|
|
|
+ </BorderlessButton>
|
|
|
|
|
+ </Dropdown>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ )}
|
|
|
<div className="hue-pagination__rows-stats-display">
|
|
<div className="hue-pagination__rows-stats-display">
|
|
|
- {pageStats.start_index} - {pageStats.end_index} of {pageStats.total_count}
|
|
|
|
|
|
|
+ {showIndexes
|
|
|
|
|
+ ? `${startIndex} - ${endIndex} of ${pageStats.total_size}`
|
|
|
|
|
+ : `${pageStats.page_number} of ${pageStats.total_pages}`}
|
|
|
</div>
|
|
</div>
|
|
|
<div className="hue-pagination__control-buttons-panel">
|
|
<div className="hue-pagination__control-buttons-panel">
|
|
|
<BorderlessButton
|
|
<BorderlessButton
|
|
|
- onClick={() => onPageNumberChange(1)}
|
|
|
|
|
|
|
+ onClick={() => setPageNumber(1)}
|
|
|
className="hue-pagination__control-button"
|
|
className="hue-pagination__control-button"
|
|
|
data-event={''}
|
|
data-event={''}
|
|
|
|
|
+ disabled={pageStats.page_number === 1}
|
|
|
|
|
+ title={t('First Page')}
|
|
|
icon={<PageFirstIcon />}
|
|
icon={<PageFirstIcon />}
|
|
|
/>
|
|
/>
|
|
|
<BorderlessButton
|
|
<BorderlessButton
|
|
|
- onClick={() => onPreviousPageButtonClicked(pageStats.previous_page_number)}
|
|
|
|
|
|
|
+ onClick={() => setPageNumber(pageStats.page_number - 1)}
|
|
|
className="hue-pagination__control-button"
|
|
className="hue-pagination__control-button"
|
|
|
data-event={''}
|
|
data-event={''}
|
|
|
|
|
+ disabled={pageStats.page_number === 1}
|
|
|
|
|
+ title={t('First Page')}
|
|
|
icon={<PagePreviousIcon />}
|
|
icon={<PagePreviousIcon />}
|
|
|
/>
|
|
/>
|
|
|
<BorderlessButton
|
|
<BorderlessButton
|
|
|
- onClick={() => onNextPageButtonClicked(pageStats.next_page_number, pageStats.num_pages)}
|
|
|
|
|
|
|
+ onClick={() => setPageNumber(pageStats.page_number + 1)}
|
|
|
className="hue-pagination__control-button"
|
|
className="hue-pagination__control-button"
|
|
|
data-event={''}
|
|
data-event={''}
|
|
|
|
|
+ disabled={pageStats.page_number === pageStats.total_pages}
|
|
|
|
|
+ title={t('Next Page')}
|
|
|
icon={<PageNextIcon />}
|
|
icon={<PageNextIcon />}
|
|
|
/>
|
|
/>
|
|
|
<BorderlessButton
|
|
<BorderlessButton
|
|
|
- onClick={() => onPageNumberChange(pageStats.num_pages)}
|
|
|
|
|
|
|
+ onClick={() => setPageNumber(pageStats.total_pages)}
|
|
|
className="hue-pagination__control-button"
|
|
className="hue-pagination__control-button"
|
|
|
data-event={''}
|
|
data-event={''}
|
|
|
|
|
+ disabled={pageStats.page_number === pageStats.total_pages}
|
|
|
|
|
+ title={t('Last Page')}
|
|
|
icon={<PageLastIcon />}
|
|
icon={<PageLastIcon />}
|
|
|
/>
|
|
/>
|
|
|
</div>
|
|
</div>
|