|
1 | 1 | /**
|
2 | 2 | * Generates a ranged array with an option to step over values.
|
3 | 3 | * Shamelessly stolen from:
|
4 |
| - * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#sequence_generator_range |
| 4 | + * {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#sequence_generator_range} |
5 | 5 | */
|
6 | 6 | const range = (start: number, stop: number, step = 1) =>
|
7 | 7 | Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);
|
8 | 8 |
|
9 | 9 | export const DEFAULT_RECORDS_PER_PAGE = 25;
|
10 |
| -// Number of pages to the left or right of the current page selection. |
| 10 | + |
| 11 | +// Number of pages to display on either side of the current page selection |
11 | 12 | const PAGE_NEIGHBORS = 1;
|
12 |
| -// Number of pages displayed for cases where there are multiple ellipsis showing. This can be |
13 |
| -// thought of as the minimum number of page numbers to display when multiple ellipsis are showing. |
| 13 | + |
| 14 | +// Minimum number of pages to display at all times (assuming there are enough |
| 15 | +// pages). Needed to handle case where there are the left and right |
| 16 | +// placeholder/ellipsis elements are both showing |
14 | 17 | const PAGES_TO_DISPLAY = PAGE_NEIGHBORS * 2 + 3;
|
15 |
| -// Total page blocks(page numbers or ellipsis) displayed, including the maximum number of ellipsis (2). |
16 |
| -// This gives us maximum number of 7 page blocks to be displayed when the page neighbors value is 1. |
17 |
| -const NUM_PAGE_BLOCKS = PAGES_TO_DISPLAY + 2; |
| 18 | + |
| 19 | +// Total number of pagination elements to display (accounting for visible pages |
| 20 | +// and up to two ellipses placeholders). With 1 page neighbor on either side, |
| 21 | +// the UI will show up to seven elements total |
| 22 | +const TOTAL_PAGE_BLOCKS = PAGES_TO_DISPLAY + 2; |
18 | 23 |
|
19 | 24 | /**
|
20 |
| - * Builds a list of pages based on how many pages exist and where the user is in their navigation of those pages. |
21 |
| - * List result is used to from the buttons that make up the Pagination Widget |
| 25 | + * Takes the total number of pages from a pagination result, and truncates it |
| 26 | + * into a UI-friendly list. |
22 | 27 | */
|
23 | 28 | export const buildPagedList = (
|
24 | 29 | numPages: number,
|
25 | 30 | activePage: number,
|
26 | 31 | ): ("left" | "right" | number)[] => {
|
27 |
| - if (numPages > NUM_PAGE_BLOCKS) { |
| 32 | + if (numPages > TOTAL_PAGE_BLOCKS) { |
28 | 33 | let pages = [];
|
29 | 34 | const leftBound = activePage - PAGE_NEIGHBORS;
|
30 | 35 | const rightBound = activePage + PAGE_NEIGHBORS;
|
@@ -56,12 +61,14 @@ export const buildPagedList = (
|
56 | 61 | return range(1, numPages);
|
57 | 62 | };
|
58 | 63 |
|
59 |
| -// pages count from 1 |
60 |
| -export const getOffset = (page: number, limit: number): number => { |
| 64 | +/** |
| 65 | + * Calculates the current offset from the start of a paginated dataset |
| 66 | + */ |
| 67 | +export const getOffset = (page: number, pageSize: number): number => { |
61 | 68 | const pageIsValid = Number.isInteger(page) && page >= 1;
|
62 | 69 | const pageToUse = pageIsValid ? page : 1;
|
63 | 70 |
|
64 |
| - return (pageToUse - 1) * limit; |
| 71 | + return (pageToUse - 1) * pageSize; |
65 | 72 | };
|
66 | 73 |
|
67 | 74 | export const isNonInitialPage = (searchParams: URLSearchParams): boolean => {
|
|
0 commit comments