Skip to content

Commit a1303b0

Browse files
presleyppresleyp
committed
Extract utils
1 parent 5837c28 commit a1303b0

File tree

3 files changed

+60
-59
lines changed

3 files changed

+60
-59
lines changed

‎site/src/components/PaginationWidget/PaginationWidget.tsx

Lines changed: 1 addition & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
77
import { Maybe } from "components/Conditionals/Maybe"
88
import { CSSProperties } from "react"
99
import { PageButton } from "./PageButton"
10+
import { buildPagedList, DEFAULT_RECORDS_PER_PAGE } from "./utils"
1011

1112
export type PaginationWidgetProps = {
1213
prevLabel: string
@@ -20,64 +21,6 @@ export type PaginationWidgetProps = {
2021
containerStyle?: CSSProperties
2122
}
2223

23-
/**
24-
* Generates a ranged array with an option to step over values.
25-
* Shamelessly stolen from:
26-
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#sequence_generator_range
27-
*/
28-
const range = (start: number, stop: number, step = 1) =>
29-
Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step)
30-
31-
export const DEFAULT_RECORDS_PER_PAGE = 25
32-
// Number of pages to the left or right of the current page selection.
33-
const PAGE_NEIGHBORS = 1
34-
// Number of pages displayed for cases where there are multiple ellipsis showing. This can be
35-
// thought of as the minimum number of page numbers to display when multiple ellipsis are showing.
36-
const PAGES_TO_DISPLAY = PAGE_NEIGHBORS * 2 + 3
37-
// Total page blocks(page numbers or ellipsis) displayed, including the maximum number of ellipsis (2).
38-
// This gives us maximum number of 7 page blocks to be displayed when the page neighbors value is 1.
39-
const NUM_PAGE_BLOCKS = PAGES_TO_DISPLAY + 2
40-
41-
/**
42-
* Builds a list of pages based on how many pages exist and where the user is in their navigation of those pages.
43-
* List result is used to from the buttons that make up the Pagination Widget
44-
*/
45-
export const buildPagedList = (
46-
numPages: number,
47-
activePage: number,
48-
): (string | number)[] => {
49-
if (numPages > NUM_PAGE_BLOCKS) {
50-
let pages = []
51-
const leftBound = activePage - PAGE_NEIGHBORS
52-
const rightBound = activePage + PAGE_NEIGHBORS
53-
const beforeLastPage = numPages - 1
54-
const startPage = leftBound > 2 ? leftBound : 2
55-
const endPage = rightBound < beforeLastPage ? rightBound : beforeLastPage
56-
57-
pages = range(startPage, endPage)
58-
59-
const singleSpillOffset = PAGES_TO_DISPLAY - pages.length - 1
60-
const hasLeftOverflow = startPage > 2
61-
const hasRightOverflow = endPage < beforeLastPage
62-
const leftOverflowPage = "left"
63-
const rightOverflowPage = "right"
64-
65-
if (hasLeftOverflow && !hasRightOverflow) {
66-
const extraPages = range(startPage - singleSpillOffset, startPage - 1)
67-
pages = [leftOverflowPage, ...extraPages, ...pages]
68-
} else if (!hasLeftOverflow && hasRightOverflow) {
69-
const extraPages = range(endPage + 1, endPage + singleSpillOffset)
70-
pages = [...pages, ...extraPages, rightOverflowPage]
71-
} else if (hasLeftOverflow && hasRightOverflow) {
72-
pages = [leftOverflowPage, ...pages, rightOverflowPage]
73-
}
74-
75-
return [1, ...pages, numPages]
76-
}
77-
78-
return range(1, numPages)
79-
}
80-
8124
export const PaginationWidget = ({
8225
prevLabel,
8326
nextLabel,

‎site/src/components/PaginationWidget/buildPagedList.test.ts renamed to ‎site/src/components/PaginationWidget/utils.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { buildPagedList } from "./PaginationWidget"
1+
import { buildPagedList } from "./utils"
22

33
describe("unit/PaginationWidget", () => {
44
describe("buildPagedList", () => {

‎site/src/components/PaginationWidget/utils.ts

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
2+
/**
3+
* Generates a ranged array with an option to step over values.
4+
* Shamelessly stolen from:
5+
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#sequence_generator_range
6+
*/
7+
const range = (start: number, stop: number, step = 1) =>
8+
Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step)
9+
10+
export const DEFAULT_RECORDS_PER_PAGE = 25
11+
// Number of pages to the left or right of the current page selection.
12+
const PAGE_NEIGHBORS = 1
13+
// Number of pages displayed for cases where there are multiple ellipsis showing. This can be
14+
// thought of as the minimum number of page numbers to display when multiple ellipsis are showing.
15+
const PAGES_TO_DISPLAY = PAGE_NEIGHBORS * 2 + 3
16+
// Total page blocks(page numbers or ellipsis) displayed, including the maximum number of ellipsis (2).
17+
// This gives us maximum number of 7 page blocks to be displayed when the page neighbors value is 1.
18+
const NUM_PAGE_BLOCKS = PAGES_TO_DISPLAY + 2
19+
20+
/**
21+
* Builds a list of pages based on how many pages exist and where the user is in their navigation of those pages.
22+
* List result is used to from the buttons that make up the Pagination Widget
23+
*/
24+
export const buildPagedList = (
25+
numPages: number,
26+
activePage: number,
27+
): (string | number)[] => {
28+
if (numPages > NUM_PAGE_BLOCKS) {
29+
let pages = []
30+
const leftBound = activePage - PAGE_NEIGHBORS
31+
const rightBound = activePage + PAGE_NEIGHBORS
32+
const beforeLastPage = numPages - 1
33+
const startPage = leftBound > 2 ? leftBound : 2
34+
const endPage = rightBound < beforeLastPage ? rightBound : beforeLastPage
35+
36+
pages = range(startPage, endPage)
37+
38+
const singleSpillOffset = PAGES_TO_DISPLAY - pages.length - 1
39+
const hasLeftOverflow = startPage > 2
40+
const hasRightOverflow = endPage < beforeLastPage
41+
const leftOverflowPage = "left"
42+
const rightOverflowPage = "right"
43+
44+
if (hasLeftOverflow && !hasRightOverflow) {
45+
const extraPages = range(startPage - singleSpillOffset, startPage - 1)
46+
pages = [leftOverflowPage, ...extraPages, ...pages]
47+
} else if (!hasLeftOverflow && hasRightOverflow) {
48+
const extraPages = range(endPage + 1, endPage + singleSpillOffset)
49+
pages = [...pages, ...extraPages, rightOverflowPage]
50+
} else if (hasLeftOverflow && hasRightOverflow) {
51+
pages = [leftOverflowPage, ...pages, rightOverflowPage]
52+
}
53+
54+
return [1, ...pages, numPages]
55+
}
56+
57+
return range(1, numPages)
58+
}

0 commit comments

Comments
 (0)