Skip to content

Commit

Permalink
Fix #5978: Paginator add metadata to PageLinks (#5982)
Browse files Browse the repository at this point in the history
  • Loading branch information
@melloware
melloware authored Feb 15, 2024
1 parent b3ce776 commit 68eeefb
Show file tree
Hide file tree
Showing 3 changed files with 173 additions and 21 deletions.
2 changes: 1 addition & 1 deletion components/lib/paginator/CurrentPageReport.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export const CurrentPageReport = React.memo((inProps) => {

const report = {
currentPage: props.page + 1,
totalPages: props.pageCount,
totalPages: props.totalPages,
first: Math.min(props.first + 1, props.totalRecords),
last: Math.min(props.first + props.rows, props.totalRecords),
rows: props.rows,
Expand Down
104 changes: 84 additions & 20 deletions components/lib/paginator/Paginator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as React from 'react';
import { PrimeReactContext } from '../api/Api';
import { useHandleStyle } from '../componentbase/ComponentBase';
import { useMergeProps, useUpdateEffect } from '../hooks/Hooks';
import { classNames, ObjectUtils } from '../utils/Utils';
import { ObjectUtils, classNames } from '../utils/Utils';
import { CurrentPageReport } from './CurrentPageReport';
import { FirstPageLink } from './FirstPageLink';
import { JumpToPageInput } from './JumpToPageInput';
Expand All @@ -27,13 +27,13 @@ export const Paginator = React.memo(
useHandleStyle(PaginatorBase.css.styles, isUnstyled, { name: 'paginator' });
const elementRef = React.useRef(null);
const page = Math.floor(props.first / props.rows);
const pageCount = Math.ceil(props.totalRecords / props.rows);
const totalPages = Math.ceil(props.totalRecords / props.rows);
const isFirstPage = page === 0;
const isLastPage = page === pageCount - 1;
const isEmpty = pageCount === 0;
const isLastPage = page === totalPages - 1;
const isEmpty = totalPages === 0;

const calculatePageLinkBoundaries = () => {
let numberOfPages = pageCount;
let numberOfPages = totalPages;
let visiblePages = Math.min(props.pageLinkSize, numberOfPages);

//calculate range, keep current in middle if necessary
Expand Down Expand Up @@ -62,15 +62,15 @@ export const Paginator = React.memo(
};

const changePage = (first, rows) => {
let pc = pageCount;
let pc = totalPages;
let p = Math.floor(first / rows);

if (p >= 0 && p < pc) {
let newPageState = {
first: first,
rows: rows,
page: p,
pageCount: pc
totalPages: pc
};

if (props.onPageChange) {
Expand Down Expand Up @@ -99,7 +99,7 @@ export const Paginator = React.memo(
};

const changePageToLast = (event) => {
changePage((pageCount - 1) * props.rows, props.rows);
changePage((totalPages - 1) * props.rows, props.rows);
event.preventDefault();
};

Expand All @@ -116,7 +116,7 @@ export const Paginator = React.memo(

useUpdateEffect(() => {
if (page > 0 && props.first >= props.totalRecords) {
changePage((pageCount - 1) * props.rows, props.rows);
changePage((totalPages - 1) * props.rows, props.rows);
}
}, [props.totalRecords]);

Expand All @@ -125,23 +125,85 @@ export const Paginator = React.memo(

switch (key) {
case 'FirstPageLink':
element = <FirstPageLink hostName="Paginator" key={key} onClick={changePageToFirst} disabled={isFirstPage || isEmpty} template={template} firstPageLinkIcon={props.firstPageLinkIcon} ptm={ptm} cx={cx} />;
element = (
<FirstPageLink
hostName="Paginator"
key={key}
page={page}
totalPages={totalPages}
totalRecords={props.totalRecords}
rows={props.rows}
onClick={changePageToFirst}
disabled={isFirstPage || isEmpty}
template={template}
firstPageLinkIcon={props.firstPageLinkIcon}
ptm={ptm}
cx={cx}
/>
);
break;

case 'PrevPageLink':
element = <PrevPageLink hostName="Paginator" key={key} onClick={changePageToPrev} disabled={isFirstPage || isEmpty} template={template} prevPageLinkIcon={props.prevPageLinkIcon} ptm={ptm} cx={cx} />;
element = (
<PrevPageLink
hostName="Paginator"
key={key}
page={page}
totalPages={totalPages}
totalRecords={props.totalRecords}
rows={props.rows}
onClick={changePageToPrev}
disabled={isFirstPage || isEmpty}
template={template}
prevPageLinkIcon={props.prevPageLinkIcon}
ptm={ptm}
cx={cx}
/>
);
break;

case 'NextPageLink':
element = <NextPageLink hostName="Paginator" key={key} onClick={changePageToNext} disabled={isLastPage || isEmpty} template={template} nextPageLinkIcon={props.nextPageLinkIcon} ptm={ptm} cx={cx} />;
element = (
<NextPageLink
hostName="Paginator"
key={key}
page={page}
totalPages={totalPages}
totalRecords={props.totalRecords}
rows={props.rows}
onClick={changePageToNext}
disabled={isLastPage || isEmpty}
template={template}
nextPageLinkIcon={props.nextPageLinkIcon}
ptm={ptm}
cx={cx}
/>
);
break;

case 'LastPageLink':
element = <LastPageLink hostName="Paginator" key={key} onClick={changePageToLast} disabled={isLastPage || isEmpty} template={template} lastPageLinkIcon={props.lastPageLinkIcon} ptm={ptm} cx={cx} />;
element = (
<LastPageLink
hostName="Paginator"
key={key}
page={page}
totalPages={totalPages}
totalRecords={props.totalRecords}
rows={props.rows}
onClick={changePageToLast}
disabled={isLastPage || isEmpty}
template={template}
lastPageLinkIcon={props.lastPageLinkIcon}
ptm={ptm}
cx={cx}
/>
);
break;

case 'PageLinks':
element = <PageLinks hostName="Paginator" key={key} value={updatePageLinks()} page={page} rows={props.rows} pageCount={pageCount} onClick={onPageLinkClick} template={template} ptm={ptm} cx={cx} />;
element = (
<PageLinks hostName="Paginator" key={key} page={page} totalPages={totalPages} totalRecords={props.totalRecords} rows={props.rows} value={updatePageLinks()} onClick={onPageLinkClick} template={template} ptm={ptm} cx={cx} />
);
break;

case 'RowsPerPageDropdown':
Expand All @@ -151,7 +213,7 @@ export const Paginator = React.memo(
key={key}
value={props.rows}
page={page}
pageCount={pageCount}
totalPages={totalPages}
totalRecords={props.totalRecords}
options={props.rowsPerPageOptions}
onChange={onRowsChange}
Expand All @@ -173,17 +235,19 @@ export const Paginator = React.memo(
reportTemplate={props.currentPageReportTemplate}
key={key}
page={page}
pageCount={pageCount}
first={props.first}
rows={props.rows}
totalPages={totalPages}
totalRecords={props.totalRecords}
rows={props.rows}
first={props.first}
template={template}
ptm={ptm}
/>
);
break;
case 'JumpToPageInput':
element = <JumpToPageInput hostName="Paginator" key={key} rows={props.rows} page={page} pageCount={pageCount} onChange={changePage} disabled={isEmpty} template={template} ptm={ptm} unstyled={props.unstyled} metaData={metaData} />;
element = (
<JumpToPageInput hostName="Paginator" key={key} rows={props.rows} page={page} totalPages={totalPages} onChange={changePage} disabled={isEmpty} template={template} ptm={ptm} unstyled={props.unstyled} metaData={metaData} />
);
break;

default:
Expand Down Expand Up @@ -218,7 +282,7 @@ export const Paginator = React.memo(
return null;
};

if (!props.alwaysShow && pageCount <= 1) {
if (!props.alwaysShow && totalPages <= 1) {
return null;
} else {
const leftContent = ObjectUtils.getJSXElement(props.leftContent, props);
Expand Down
88 changes: 88 additions & 0 deletions components/lib/paginator/paginator.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,6 +173,26 @@ interface PaginatorFirstPageLinkOptions {
* JSX element to be used as the first page link.
*/
element: JSX.Element;
/**
* The page number.
*/
page: number;
/**
* The current page number.
*/
currentPage: number;
/**
* The total number of pages.
*/
totalPages: number;
/**
* The total number of records.
*/
totalRecords: number;
/**
* The number of rows per page.
*/
rows: number;
/**
* The props of Paginator component
*/
Expand Down Expand Up @@ -204,6 +224,26 @@ interface PaginatorPrevPageLinkOptions {
* JSX element to be used as the prev page link.
*/
element: JSX.Element;
/**
* The page number.
*/
page: number;
/**
* The current page number.
*/
currentPage: number;
/**
* The total number of pages.
*/
totalPages: number;
/**
* The total number of records.
*/
totalRecords: number;
/**
* The number of rows per page.
*/
rows: number;
/**
* The props of Paginator component
*/
Expand Down Expand Up @@ -253,6 +293,14 @@ interface PaginatorPageLinksOptions {
* The total number of pages.
*/
totalPages: number;
/**
* The total number of records.
*/
totalRecords: number;
/**
* The number of rows per page.
*/
rows: number;
/**
* JSX element to be used as the page links.
*/
Expand Down Expand Up @@ -288,6 +336,26 @@ interface PaginatorNextPageLinkOptions {
* JSX element to be used as the next page link.
*/
element: JSX.Element;
/**
* The page number.
*/
page: number;
/**
* The current page number.
*/
currentPage: number;
/**
* The total number of pages.
*/
totalPages: number;
/**
* The total number of records.
*/
totalRecords: number;
/**
* The number of rows per page.
*/
rows: number;
/**
* The props of Paginator component
*/
Expand Down Expand Up @@ -319,6 +387,26 @@ interface PaginatorLastPageLinkOptions {
* JSX element to be used as the last page link.
*/
element: JSX.Element;
/**
* The page number.
*/
page: number;
/**
* The current page number.
*/
currentPage: number;
/**
* The total number of pages.
*/
totalPages: number;
/**
* The total number of records.
*/
totalRecords: number;
/**
* The number of rows per page.
*/
rows: number;
/**
* The props of Paginator component
*/
Expand Down

0 comments on commit 68eeefb

Please sign in to comment.