fix(SearchPagination): disable next button on last page

Signed-off-by: Phil Kuang <pkuang@factset.com>
This commit is contained in:
Phil Kuang
2023-02-23 15:53:30 -05:00
parent e81995a8b6
commit 553f3c9501
3 changed files with 27 additions and 3 deletions
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-search-react': patch
---
Correctly disable next button in `SearchPagination` on last page
+6 -1
View File
@@ -234,6 +234,7 @@ export type SearchPaginationBaseProps = {
className?: string;
total?: number;
cursor?: string;
hasNextPage?: boolean;
onCursorChange?: (pageCursor: string) => void;
limit?: number;
limitLabel?: ReactNode;
@@ -264,7 +265,11 @@ export type SearchPaginationLimitText = (params: {
// @public
export type SearchPaginationProps = Omit<
SearchPaginationBaseProps,
'pageLimit' | 'onPageLimitChange' | 'pageCursor' | 'onPageCursorChange'
| 'pageLimit'
| 'onPageLimitChange'
| 'pageCursor'
| 'onPageCursorChange'
| 'hasNextPage'
>;
// @public
@@ -77,6 +77,10 @@ export type SearchPaginationBaseProps = {
* The cursor for the current page.
*/
cursor?: string;
/**
* Whether a next page exists
*/
hasNextPage?: boolean;
/**
* Callback fired when the current page cursor is changed.
*/
@@ -118,6 +122,7 @@ export const SearchPaginationBase = (props: SearchPaginationBaseProps) => {
const {
total: count = -1,
cursor: pageCursor,
hasNextPage,
onCursorChange: onPageCursorChange,
limit: rowsPerPage = 25,
limitLabel: labelRowsPerPage = 'Results per page:',
@@ -151,6 +156,9 @@ export const SearchPaginationBase = (props: SearchPaginationBaseProps) => {
component="div"
count={count}
page={page}
nextIconButtonProps={{
...(hasNextPage !== undefined && { disabled: !hasNextPage }),
}}
onPageChange={handlePageChange}
rowsPerPage={rowsPerPage}
labelRowsPerPage={labelRowsPerPage}
@@ -167,7 +175,11 @@ export const SearchPaginationBase = (props: SearchPaginationBaseProps) => {
*/
export type SearchPaginationProps = Omit<
SearchPaginationBaseProps,
'pageLimit' | 'onPageLimitChange' | 'pageCursor' | 'onPageCursorChange'
| 'pageLimit'
| 'onPageLimitChange'
| 'pageCursor'
| 'onPageCursorChange'
| 'hasNextPage'
>;
/**
@@ -176,11 +188,13 @@ export type SearchPaginationProps = Omit<
* @public
*/
export const SearchPagination = (props: SearchPaginationProps) => {
const { pageLimit, setPageLimit, pageCursor, setPageCursor } = useSearch();
const { pageLimit, setPageLimit, pageCursor, setPageCursor, fetchNextPage } =
useSearch();
return (
<SearchPaginationBase
{...props}
hasNextPage={!!fetchNextPage}
limit={pageLimit}
onLimitChange={setPageLimit}
cursor={pageCursor}