From 16030d8ebf6a832389e5e25f7b222bf4f935da7d Mon Sep 17 00:00:00 2001 From: Kevin See Date: Thu, 16 Nov 2023 13:04:56 -0500 Subject: [PATCH] feat: paginationNav support high page counts This commit updates PaginationNav to support high page counts. I add a prop to PaginationNav which short circuits logic causing present issue --- README.md | 179 ------------------ .../__snapshots__/PublicAPI-test.js.snap | 3 + .../components/PaginationNav/PaginationNav.js | 44 ++++- .../PaginationNav/PaginationNav.stories.js | 12 ++ 4 files changed, 58 insertions(+), 180 deletions(-) diff --git a/README.md b/README.md index f91e7a582750..44ca44dd5d0a 100644 --- a/README.md +++ b/README.md @@ -85,185 +85,6 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Taylor Jones

πŸ’» πŸ“– ️️️️♿️

TJ Egan

πŸ’» πŸ“– πŸš‡ πŸ‘€ ️️️️♿️

Alessandra Davila

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Andrea N. Cardona

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Francine Lucca

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Scott Strubberg

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Alison Joseph

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Anna Gonzales

🎨 πŸ‘€

Lauren Rice

🎨 πŸ‘€

Josh Black

πŸ’» πŸ“– πŸš‡ πŸ‘€ ️️️️♿️

DAK

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Josefina Mancilla

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

emyarod

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Eric Marcoux

πŸ’»

Vince Picone

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

jillianhowarth

πŸ–‹ 🎨 πŸ‘€

Ricardo Henriquez

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

johnbister

🎨 πŸ‘€

Dominik Brugger

πŸ’» 🚧

Jan Hassel

πŸ’» πŸ“– ️️️️♿️ 🎨

Alexander Lyon

πŸ’»

Rosie Z

πŸ’»

Nishith P

πŸ“–

Eric Charpentier

πŸ’»

Luiza Mendes

πŸ’» 🚧

Akmal Hakimi Mohd Zamri

πŸ’»

sanjitbauli

πŸ“–

Laszlo Moczo

πŸ’»

LMapes

πŸ–‹ πŸ“–

conradennis

🎨

Eric Liu

πŸ’» πŸ“–

Richard VΕ‘ianskΓ½

πŸ’»

Lee Chase

πŸ’» πŸ“–

Anton

πŸ’»

Panpan Lin

πŸ“–

Ashley Harrison

πŸ’»

Jen Downs

πŸ’» πŸ“– ️️️️♿️

Abdul Rehman

πŸ’»

MIchael Dudley

🎨

David Bradshaw

πŸ’»

Simon Finney

πŸ’» ️️️️♿️

Attila Bartha

πŸ’»

λ°°ν•˜λžŒ

πŸ’»

Yohanna Gadelrab

πŸ“–

Akira Sudoh

πŸ’» πŸ“– ️️️️♿️ πŸš‡

Oyinkan Oyetunmibi

πŸ“–

pbenson322

πŸ“–

Abbey Hart

πŸ’» πŸ“– ️️️️♿️

Lucas

πŸ’»

Dylan Klohr

πŸ“–

Gilli Sigurdsson

🎨

kennylam

πŸ’» ️️️️♿️

SΓ©bastien

πŸ’»

Dusan Milko

πŸ’»

Taras Polovyi

πŸ’»

Chris Connors

🎨 πŸ“–

David Conner

πŸ’» ️️️️♿️

Harish Mohanani

πŸ’»

Frivalszky-Mayer PΓ©ter

πŸ’» ️️️️♿️

s100

πŸ’»

Taranveer Virk

πŸ’»

Niall Cargill

πŸ“–

Matt Chapman

πŸ’»

Boston Cartwright

πŸ’»

DavidSCChen

πŸ’»

molyholy

πŸ’»

Scott Dickerson

πŸ’»

Evgeniy Podgaetskiy

πŸ’»

CassidyJensen

πŸ’» ️️️️♿️

Zsolt Lattmann

πŸ’»

Conrad Schmidt

πŸ’»

Ignacio Becerra

πŸ’»

Swapnil Patil

πŸ“–

Fei Z

πŸ’»

Ignas Ausiejus

πŸ“–

Ryan O. Mackey

πŸ’»

DΓ‘vid HalΓ‘sz

πŸ’»

Bill Guigue

πŸ’»

szymonbrandys

πŸ’»

Adam Alston

πŸ“–

Krithika S Udupa

πŸ“–

Eshin Griffith

πŸ’»

@RianTavaresOn

πŸ’» 🎨

ColbyJohnIBM

πŸ’»

HΓ₯kon

πŸ’» πŸ“–

Tanner Summers

πŸ’»

Zhen Wang

πŸ’» πŸ“–

Cathal Kenneally

πŸ’»

Joel Humberto GΓ³mez Paredes

πŸ’»

James Nash

πŸ’» πŸ“–

Jakub Faliszewski

πŸ’»

Nick Gong

πŸ’»

Hannele Valtanen

πŸ’»

Llam4u

πŸ’» πŸ›

G. Torres

πŸ’»

Fiona

πŸ’»

kindoflew

πŸ’»

Mario Gueyraud

πŸ’»

Dongjoon Lee

πŸ’»

ShankarV-CodeJunkie

πŸ’»

dario platania

πŸ’»

Mateusz KrzyΕΌanowski

πŸ’»

jpsorensen

πŸ’»

jae kaplan

πŸš‡

Sierra Wetmore

πŸ’»

kcprevatt

πŸ’»

Marcin Lewandowski

πŸ’»

remolueoend

πŸ’»

Jesse Hull

πŸ’» ️️️️♿️

Ashvin Warrier

πŸ’»

GalvinGao

πŸ’»

Bianca Sparxs

πŸ’»

Mahmoud Abdulazim

πŸ’»

Dave Steinberg

πŸ’»

Seong-Hyun Ryoo

πŸ’»

Pratik Karad

πŸ’» ️️️️♿️

Gerzon

πŸ’»

Guilherme Datilio Ribeiro

πŸ’» πŸ“– ️️️️♿️ πŸ‘€

Josef Kubíček

πŸ’»

Sunny Johal

πŸ’»

Steven Black

πŸ’» ️️️️♿️

Mark Judy

πŸ’»

Anton Tsymuk

πŸ’»

Mohammed Aslam P. A.

πŸ’» πŸ“–

Tony ZL

πŸ’»

Petr Kadlec

πŸ’»

David Ragsdale

πŸ’»

Hao Cheng

πŸ’»

cordesmj

πŸ’»

Aziz Chebbi

πŸ’»

MichaΕ‚ Konopski

πŸ’»

Omkar Ajagunde

πŸ’» πŸ“–

Aman Lajpal

πŸ’» πŸ“–

Allison Ishida

πŸ’»

Alex Lewitt

πŸ’»

Tresau-IBM

πŸ’»
- diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 1ca356b34d0d..61bf7264628a 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -5729,6 +5729,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..ff45193e1b40 100644 --- a/packages/react/src/components/PaginationNav/PaginationNav.js +++ b/packages/react/src/components/PaginationNav/PaginationNav.js @@ -119,9 +119,38 @@ 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 +204,7 @@ const PaginationNav = React.forwardRef(function PaginationNav( className, onChange = () => {}, totalItems, + disableOverflow, itemsShown = 10, page = 0, loop = false, @@ -192,7 +222,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 +290,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 +331,7 @@ const PaginationNav = React.forwardRef(function PaginationNav( fromIndex={startOffset} count={cuts.front} onSelect={jumpToItem} + disableOverflow={isOverflowDisabled} /> { @@ -322,6 +357,7 @@ const PaginationNav = React.forwardRef(function PaginationNav( fromIndex={totalItems - cuts.back - 1} count={cuts.back} onSelect={jumpToItem} + disableOverflow={isOverflowDisabled} /> { @@ -432,6 +468,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..f310469f51d3 100644 --- a/packages/react/src/components/PaginationNav/PaginationNav.stories.js +++ b/packages/react/src/components/PaginationNav/PaginationNav.stories.js @@ -27,11 +27,18 @@ export const Playground = (args) => ( ); +export const OverflowDisabled = () => ( +
    + +
    +); + Playground.args = { loop: false, itemsShown: 10, page: 0, totalItems: 25, + disableOverflow: false, }; Playground.argTypes = { @@ -55,4 +62,9 @@ Playground.argTypes = { type: 'number', }, }, + disableOverflow: { + control: { + type: 'boolean', + }, + }, };