opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat: hide pagination widget when not needed (#4957)

Browse Source 
* Hide pagination widget when not needed. Don't merge until count is in.

* Format

* Refactor

* Remove story

* Fix bug

* Format
This commit is contained in:
Presley Pizzo
2022-11-08 13:29:32 -05:00
committed by GitHub
parent e906d0dc54
commit fa844d0878
2 changed files with 42 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/PaginationWidget/PaginationWidget.stories.tsx
-5
View File
@@ -25,11 +25,6 @@ const Template: Story<PaginationWidgetProps> = (
args: PaginationWidgetProps,
) => <PaginationWidget {...args} />
export const UnknownPageNumbers = Template.bind({})
UnknownPageNumbers.args = {
numRecords: undefined,
}
export const LessThan8Pages = Template.bind({})
LessThan8Pages.args = {
numRecords: 84,
site/src/components/PaginationWidget/PaginationWidget.tsx
+42 -43
View File
@@ -34,24 +34,24 @@ export const PaginationWidget = ({
const currentPage = paginationState.context.page
const numRecordsPerPage = paginationState.context.limit
const numPages = numRecords
? Math.ceil(numRecords / numRecordsPerPage)
: undefined
const numPages = numRecords ? Math.ceil(numRecords / numRecordsPerPage) : 0
const firstPageActive = currentPage === 1 && numPages !== 0
const lastPageActive = currentPage === numPages && numPages !== 0
// if beyond page 1, show pagination widget even if there's only one true page, so user can navigate back
const showWidget = numPages > 1 || currentPage > 1
return (
<div style={containerStyle} className={styles.defaultContainerStyles}>
<Button
className={styles.prevLabelStyles}
aria-label="Previous page"
disabled={firstPageActive}
onClick={() => send({ type: "PREVIOUS_PAGE" })}
>
<KeyboardArrowLeft />
<div>{prevLabel}</div>
</Button>
<Maybe condition={numPages !== undefined}>
<Maybe condition={showWidget}>
<div style={containerStyle} className={styles.defaultContainerStyles}>
<Button
className={styles.prevLabelStyles}
aria-label="Previous page"
disabled={firstPageActive}
onClick={() => send({ type: "PREVIOUS_PAGE" })}
>
<KeyboardArrowLeft />
<div>{prevLabel}</div>
</Button>
<ChooseOne>
<Cond condition={isMobile}>
<PageButton
@@ -61,37 +61,36 @@ export const PaginationWidget = ({
/>
</Cond>
<Cond>
{numPages &&
buildPagedList(numPages, currentPage).map((page) =>
typeof page !== "number" ? (
<PageButton
key={`Page${page}`}
activePage={currentPage}
placeholder="..."
disabled
/>
) : (
<PageButton
key={`Page${page}`}
activePage={currentPage}
page={page}
numPages={numPages}
onPageClick={() => send({ type: "GO_TO_PAGE", page })}
/>
),
)}
{buildPagedList(numPages, currentPage).map((page) =>
typeof page !== "number" ? (
<PageButton
key={`Page${page}`}
activePage={currentPage}
placeholder="..."
disabled
/>
) : (
<PageButton
key={`Page${page}`}
activePage={currentPage}
page={page}
numPages={numPages}
onPageClick={() => send({ type: "GO_TO_PAGE", page })}
/>
),
)}
</Cond>
</ChooseOne>
</Maybe>
<Button
aria-label="Next page"
disabled={lastPageActive}
onClick={() => send({ type: "NEXT_PAGE" })}
>
<div>{nextLabel}</div>
<KeyboardArrowRight />
</Button>
</div>
<Button
aria-label="Next page"
disabled={lastPageActive}
onClick={() => send({ type: "NEXT_PAGE" })}
>
<div>{nextLabel}</div>
<KeyboardArrowRight />
</Button>
</div>
</Maybe>
)
}