diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 2312609ce889..647770e0d9de 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -5845,6 +5845,9 @@ Map { "className": Object { "type": "string", }, + "disableOverflow": Object { + "type": "bool", + }, "itemsShown": Object { "type": "number", }, diff --git a/packages/react/src/components/PaginationNav/PaginationNav.js b/packages/react/src/components/PaginationNav/PaginationNav.js index 7ad76cb493bf..72820a777b7b 100644 --- a/packages/react/src/components/PaginationNav/PaginationNav.js +++ b/packages/react/src/components/PaginationNav/PaginationNav.js @@ -119,9 +119,32 @@ function PaginationOverflow({ fromIndex, count, onSelect, + // eslint-disable-next-line react/prop-types + disableOverflow, translateWithId: t = translateWithId, }) { const prefix = usePrefix(); + + //If overflow is disabled, return a select tag with no select options + if (disableOverflow === true && count > 1) { + return ( +
  • +
    + {/* eslint-disable-next-line jsx-a11y/no-onchange */} + +
    + +
    +
    +
  • + ); + } + if (count > 1) { return (
  • @@ -175,6 +198,7 @@ const PaginationNav = React.forwardRef(function PaginationNav( className, onChange = () => {}, totalItems, + disableOverflow, itemsShown = 10, page = 0, loop = false, @@ -192,7 +216,7 @@ const PaginationNav = React.forwardRef(function PaginationNav( ); const prevPage = usePrevious(currentPage); const prefix = usePrefix(); - + const [isOverflowDisabled, setIsOverFlowDisabled] = useState(disableOverflow); function jumpToItem(index) { if (index >= 0 && index < totalItems) { setCurrentPage(index); @@ -260,6 +284,10 @@ const PaginationNav = React.forwardRef(function PaginationNav( } }, [currentPage]); // eslint-disable-line react-hooks/exhaustive-deps + useEffect(() => { + setIsOverFlowDisabled(disableOverflow); + }, [disableOverflow]); + const classNames = classnames(`${prefix}--pagination-nav`, className); const backwardButtonDisabled = !loop && currentPage === 0; @@ -297,6 +325,7 @@ const PaginationNav = React.forwardRef(function PaginationNav( fromIndex={startOffset} count={cuts.front} onSelect={jumpToItem} + disableOverflow={isOverflowDisabled} /> { @@ -322,6 +351,7 @@ const PaginationNav = React.forwardRef(function PaginationNav( fromIndex={totalItems - cuts.back - 1} count={cuts.back} onSelect={jumpToItem} + disableOverflow={isOverflowDisabled} /> { @@ -432,6 +462,12 @@ PaginationNav.propTypes = { */ className: PropTypes.string, + /** + * If true, the '...' pagination overflow will not render page links between the first and last rendered buttons. + * Set this to true if you are having performance problems with large data sets. + */ + disableOverflow: PropTypes.bool, // eslint-disable-line react/prop-types + /** * The number of items to be shown. */ diff --git a/packages/react/src/components/PaginationNav/PaginationNav.stories.js b/packages/react/src/components/PaginationNav/PaginationNav.stories.js index 0519322cbcf2..4ef205ae5f50 100644 --- a/packages/react/src/components/PaginationNav/PaginationNav.stories.js +++ b/packages/react/src/components/PaginationNav/PaginationNav.stories.js @@ -32,6 +32,7 @@ Playground.args = { itemsShown: 10, page: 0, totalItems: 25, + disableOverflow: false, }; Playground.argTypes = { @@ -55,4 +56,9 @@ Playground.argTypes = { type: 'number', }, }, + disableOverflow: { + control: { + type: 'boolean', + }, + }, };