From 16030d8ebf6a832389e5e25f7b222bf4f935da7d Mon Sep 17 00:00:00 2001 From: Kevin See Date: Thu, 16 Nov 2023 13:04:56 -0500 Subject: [PATCH 1/4] 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', + }, + }, }; From dafa851e00a16f56a351fd58163ffba5a1946629 Mon Sep 17 00:00:00 2001 From: Kevin See <37549026+kSee04@users.noreply.github.com> Date: Thu, 16 Nov 2023 13:25:13 -0500 Subject: [PATCH 2/4] Update README.md --- README.md | 180 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 180 insertions(+) diff --git a/README.md b/README.md index 44ca44dd5d0a..b426c10c93d8 100644 --- a/README.md +++ b/README.md @@ -85,6 +85,186 @@ 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

    πŸ’»

    Kevin See

    πŸ’»
    + From 50205bd5c3049bbe33533a1f7a14145231143f50 Mon Sep 17 00:00:00 2001 From: Kevin See Date: Thu, 16 Nov 2023 14:36:04 -0500 Subject: [PATCH 3/4] fix: code review --- .../react/src/components/PaginationNav/PaginationNav.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/react/src/components/PaginationNav/PaginationNav.js b/packages/react/src/components/PaginationNav/PaginationNav.js index ff45193e1b40..72820a777b7b 100644 --- a/packages/react/src/components/PaginationNav/PaginationNav.js +++ b/packages/react/src/components/PaginationNav/PaginationNav.js @@ -134,13 +134,7 @@ function PaginationOverflow({ + disabled>
    Date: Mon, 11 Dec 2023 08:12:12 -0600 Subject: [PATCH 4/4] docs(paginationnav): remove test story --- .../src/components/PaginationNav/PaginationNav.stories.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/react/src/components/PaginationNav/PaginationNav.stories.js b/packages/react/src/components/PaginationNav/PaginationNav.stories.js index f310469f51d3..4ef205ae5f50 100644 --- a/packages/react/src/components/PaginationNav/PaginationNav.stories.js +++ b/packages/react/src/components/PaginationNav/PaginationNav.stories.js @@ -27,12 +27,6 @@ export const Playground = (args) => (
    ); -export const OverflowDisabled = () => ( -
    - -
    -); - Playground.args = { loop: false, itemsShown: 10,