fix(SearchPagination): disable next button on last page
Signed-off-by: Phil Kuang <pkuang@factset.com>
This commit is contained in:
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'@backstage/plugin-search-react': patch
|
||||
---
|
||||
|
||||
Correctly disable next button in `SearchPagination` on last page
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user