@flipdish/ui-library 0.36.0 → 0.36.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/molecules/Pagination/components/PaginationBase.cjs +2 -104
- package/dist/components/molecules/Pagination/components/PaginationBase.cjs.map +1 -1
- package/dist/components/molecules/Pagination/components/PaginationBase.d.ts +2 -14
- package/dist/components/molecules/Pagination/components/PaginationBase.d.ts.map +1 -1
- package/dist/components/molecules/Pagination/components/PaginationBase.js +3 -105
- package/dist/components/molecules/Pagination/components/PaginationBase.js.map +1 -1
- package/dist/components/molecules/Pagination/pagination.utils.cjs +89 -0
- package/dist/components/molecules/Pagination/pagination.utils.cjs.map +1 -0
- package/dist/components/molecules/Pagination/pagination.utils.d.ts +32 -0
- package/dist/components/molecules/Pagination/pagination.utils.d.ts.map +1 -0
- package/dist/components/molecules/Pagination/pagination.utils.js +87 -0
- package/dist/components/molecules/Pagination/pagination.utils.js.map +1 -0
- package/package.json +1 -1
|
@@ -3,104 +3,12 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
5
5
|
var React = require('react');
|
|
6
|
+
var pagination_utils = require('../pagination.utils.cjs');
|
|
6
7
|
|
|
7
8
|
const PaginationContext = React.createContext(undefined);
|
|
8
9
|
const PaginationRoot = ({ total, siblingCount = 1, page, onPageChange, children, style, className, 'data-testid': dataTestId, }) => {
|
|
9
|
-
const [pages, setPages] = React.useState([]);
|
|
10
10
|
const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'pagination', rootName: 'pagination' });
|
|
11
|
-
const
|
|
12
|
-
const items = [];
|
|
13
|
-
// Calculate the maximum number of pagination elements (pages, potential ellipsis, first and last) to show
|
|
14
|
-
const totalPageNumbers = siblingCount * 2 + 5;
|
|
15
|
-
// If the total number of items to show is greater than or equal to the total pages,
|
|
16
|
-
// we can simply list all pages without needing to collapse with ellipsis
|
|
17
|
-
if (totalPageNumbers >= total) {
|
|
18
|
-
for (let i = 1; i <= total; i++) {
|
|
19
|
-
items.push({
|
|
20
|
-
type: 'page',
|
|
21
|
-
value: i,
|
|
22
|
-
isCurrent: i === page,
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
else {
|
|
27
|
-
// Calculate left and right sibling boundaries around the current page
|
|
28
|
-
const leftSiblingIndex = Math.max(page - siblingCount, 1);
|
|
29
|
-
const rightSiblingIndex = Math.min(page + siblingCount, total);
|
|
30
|
-
// Determine if we need to show ellipsis on either side
|
|
31
|
-
const showLeftEllipsis = leftSiblingIndex > 2;
|
|
32
|
-
const showRightEllipsis = rightSiblingIndex < total - 1;
|
|
33
|
-
// Case 1: No left ellipsis, but right ellipsis is needed
|
|
34
|
-
if (!showLeftEllipsis && showRightEllipsis) {
|
|
35
|
-
// Calculate how many page numbers to show starting from the beginning
|
|
36
|
-
const leftItemCount = siblingCount * 2 + 3;
|
|
37
|
-
const leftRange = range(1, leftItemCount);
|
|
38
|
-
// biome-ignore lint/suspicious/useIterableCallbackReturn: This is a side effect
|
|
39
|
-
leftRange.forEach((pageNum) => items.push({
|
|
40
|
-
type: 'page',
|
|
41
|
-
value: pageNum,
|
|
42
|
-
isCurrent: pageNum === page,
|
|
43
|
-
}));
|
|
44
|
-
// Insert ellipsis after the left range and add the last page
|
|
45
|
-
items.push({ type: 'ellipsis', key: leftItemCount + 1 });
|
|
46
|
-
items.push({
|
|
47
|
-
type: 'page',
|
|
48
|
-
value: total,
|
|
49
|
-
isCurrent: total === page,
|
|
50
|
-
});
|
|
51
|
-
}
|
|
52
|
-
// Case 2: Left ellipsis needed, but right ellipsis is not needed
|
|
53
|
-
else if (showLeftEllipsis && !showRightEllipsis) {
|
|
54
|
-
// Determine how many items from the end should be shown
|
|
55
|
-
const rightItemCount = siblingCount * 2 + 3;
|
|
56
|
-
const rightRange = range(total - rightItemCount + 1, total);
|
|
57
|
-
// Always show the first page, then add an ellipsis to indicate skipped pages
|
|
58
|
-
items.push({
|
|
59
|
-
type: 'page',
|
|
60
|
-
value: 1,
|
|
61
|
-
isCurrent: page === 1,
|
|
62
|
-
});
|
|
63
|
-
items.push({ type: 'ellipsis', key: total - rightItemCount });
|
|
64
|
-
// biome-ignore lint/suspicious/useIterableCallbackReturn: This is a side effect
|
|
65
|
-
rightRange.forEach((pageNum) => items.push({
|
|
66
|
-
type: 'page',
|
|
67
|
-
value: pageNum,
|
|
68
|
-
isCurrent: pageNum === page,
|
|
69
|
-
}));
|
|
70
|
-
}
|
|
71
|
-
// Case 3: Both left and right ellipsis are needed
|
|
72
|
-
else if (showLeftEllipsis && showRightEllipsis) {
|
|
73
|
-
// Always show the first page
|
|
74
|
-
items.push({
|
|
75
|
-
type: 'page',
|
|
76
|
-
value: 1,
|
|
77
|
-
isCurrent: page === 1,
|
|
78
|
-
});
|
|
79
|
-
// Insert left ellipsis after the first page
|
|
80
|
-
items.push({ type: 'ellipsis', key: leftSiblingIndex - 1 });
|
|
81
|
-
// Show a range of pages around the current page
|
|
82
|
-
const middleRange = range(leftSiblingIndex, rightSiblingIndex);
|
|
83
|
-
// biome-ignore lint/suspicious/useIterableCallbackReturn: This is a side effect
|
|
84
|
-
middleRange.forEach((pageNum) => items.push({
|
|
85
|
-
type: 'page',
|
|
86
|
-
value: pageNum,
|
|
87
|
-
isCurrent: pageNum === page,
|
|
88
|
-
}));
|
|
89
|
-
// Insert right ellipsis and finally the last page
|
|
90
|
-
items.push({ type: 'ellipsis', key: rightSiblingIndex + 1 });
|
|
91
|
-
items.push({
|
|
92
|
-
type: 'page',
|
|
93
|
-
value: total,
|
|
94
|
-
isCurrent: total === page,
|
|
95
|
-
});
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
return items;
|
|
99
|
-
}, [total, siblingCount, page]);
|
|
100
|
-
React.useEffect(() => {
|
|
101
|
-
const paginationItems = createPaginationItems();
|
|
102
|
-
setPages(paginationItems);
|
|
103
|
-
}, [createPaginationItems]);
|
|
11
|
+
const pages = pagination_utils.createPaginationItems({ total, siblingCount, page });
|
|
104
12
|
const onPageChangeHandler = (newPage) => {
|
|
105
13
|
onPageChange?.(newPage);
|
|
106
14
|
};
|
|
@@ -113,16 +21,6 @@ const PaginationRoot = ({ total, siblingCount = 1, page, onPageChange, children,
|
|
|
113
21
|
};
|
|
114
22
|
return (jsxRuntime.jsx(PaginationContext.Provider, { value: paginationContextValue, children: jsxRuntime.jsx("nav", { "aria-label": "Pagination Navigation", "data-testid": rootTestId, style: style, className: className, children: children }) }));
|
|
115
23
|
};
|
|
116
|
-
/**
|
|
117
|
-
* Creates an array of numbers from start to end.
|
|
118
|
-
* @param start - The start number.
|
|
119
|
-
* @param end - The end number.
|
|
120
|
-
* @returns An array of numbers from start to end.
|
|
121
|
-
*/
|
|
122
|
-
const range = (start, end) => {
|
|
123
|
-
const length = end - start + 1;
|
|
124
|
-
return Array.from({ length }, (_, index) => index + start);
|
|
125
|
-
};
|
|
126
24
|
const Trigger = ({ children, style, className, asChild = false, direction, ariaLabel }) => {
|
|
127
25
|
const context = React.useContext(PaginationContext);
|
|
128
26
|
if (!context) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationBase.cjs","sources":["../../../../../src/components/molecules/Pagination/components/PaginationBase.tsx"],"sourcesContent":[null],"names":["createContext","
|
|
1
|
+
{"version":3,"file":"PaginationBase.cjs","sources":["../../../../../src/components/molecules/Pagination/components/PaginationBase.tsx"],"sourcesContent":[null],"names":["createContext","useResolvedTestId","createPaginationItems","_jsx","useContext","joinTestId","_Fragment","isValidElement","cloneElement"],"mappings":"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"}
|
|
@@ -1,20 +1,8 @@
|
|
|
1
1
|
import type { CSSProperties, FC, ReactNode } from 'react';
|
|
2
|
-
type
|
|
3
|
-
/** The type of the pagination item. */
|
|
4
|
-
type: 'page';
|
|
5
|
-
/** The value of the pagination item. */
|
|
6
|
-
value: number;
|
|
7
|
-
/** Whether the pagination item is the current page. */
|
|
8
|
-
isCurrent: boolean;
|
|
9
|
-
};
|
|
10
|
-
type PaginationEllipsisType = {
|
|
11
|
-
type: 'ellipsis';
|
|
12
|
-
key: number;
|
|
13
|
-
};
|
|
14
|
-
type PaginationItemType = PaginationPage | PaginationEllipsisType;
|
|
2
|
+
import { type PaginationWindowItem } from '../pagination.utils';
|
|
15
3
|
interface PaginationContextType {
|
|
16
4
|
/** The pages of the pagination. */
|
|
17
|
-
pages:
|
|
5
|
+
pages: PaginationWindowItem[];
|
|
18
6
|
/** The current page of the pagination. */
|
|
19
7
|
currentPage: number;
|
|
20
8
|
/** The total number of pages. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationBase.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Pagination/components/PaginationBase.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,EAAE,EAAkB,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"PaginationBase.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Pagination/components/PaginationBase.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,104 +1,12 @@
|
|
|
1
1
|
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { useResolvedTestId, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
3
|
-
import { createContext,
|
|
3
|
+
import { createContext, useContext, isValidElement, cloneElement } from 'react';
|
|
4
|
+
import { createPaginationItems } from '../pagination.utils.js';
|
|
4
5
|
|
|
5
6
|
const PaginationContext = createContext(undefined);
|
|
6
7
|
const PaginationRoot = ({ total, siblingCount = 1, page, onPageChange, children, style, className, 'data-testid': dataTestId, }) => {
|
|
7
|
-
const [pages, setPages] = useState([]);
|
|
8
8
|
const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'pagination', rootName: 'pagination' });
|
|
9
|
-
const
|
|
10
|
-
const items = [];
|
|
11
|
-
// Calculate the maximum number of pagination elements (pages, potential ellipsis, first and last) to show
|
|
12
|
-
const totalPageNumbers = siblingCount * 2 + 5;
|
|
13
|
-
// If the total number of items to show is greater than or equal to the total pages,
|
|
14
|
-
// we can simply list all pages without needing to collapse with ellipsis
|
|
15
|
-
if (totalPageNumbers >= total) {
|
|
16
|
-
for (let i = 1; i <= total; i++) {
|
|
17
|
-
items.push({
|
|
18
|
-
type: 'page',
|
|
19
|
-
value: i,
|
|
20
|
-
isCurrent: i === page,
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
else {
|
|
25
|
-
// Calculate left and right sibling boundaries around the current page
|
|
26
|
-
const leftSiblingIndex = Math.max(page - siblingCount, 1);
|
|
27
|
-
const rightSiblingIndex = Math.min(page + siblingCount, total);
|
|
28
|
-
// Determine if we need to show ellipsis on either side
|
|
29
|
-
const showLeftEllipsis = leftSiblingIndex > 2;
|
|
30
|
-
const showRightEllipsis = rightSiblingIndex < total - 1;
|
|
31
|
-
// Case 1: No left ellipsis, but right ellipsis is needed
|
|
32
|
-
if (!showLeftEllipsis && showRightEllipsis) {
|
|
33
|
-
// Calculate how many page numbers to show starting from the beginning
|
|
34
|
-
const leftItemCount = siblingCount * 2 + 3;
|
|
35
|
-
const leftRange = range(1, leftItemCount);
|
|
36
|
-
// biome-ignore lint/suspicious/useIterableCallbackReturn: This is a side effect
|
|
37
|
-
leftRange.forEach((pageNum) => items.push({
|
|
38
|
-
type: 'page',
|
|
39
|
-
value: pageNum,
|
|
40
|
-
isCurrent: pageNum === page,
|
|
41
|
-
}));
|
|
42
|
-
// Insert ellipsis after the left range and add the last page
|
|
43
|
-
items.push({ type: 'ellipsis', key: leftItemCount + 1 });
|
|
44
|
-
items.push({
|
|
45
|
-
type: 'page',
|
|
46
|
-
value: total,
|
|
47
|
-
isCurrent: total === page,
|
|
48
|
-
});
|
|
49
|
-
}
|
|
50
|
-
// Case 2: Left ellipsis needed, but right ellipsis is not needed
|
|
51
|
-
else if (showLeftEllipsis && !showRightEllipsis) {
|
|
52
|
-
// Determine how many items from the end should be shown
|
|
53
|
-
const rightItemCount = siblingCount * 2 + 3;
|
|
54
|
-
const rightRange = range(total - rightItemCount + 1, total);
|
|
55
|
-
// Always show the first page, then add an ellipsis to indicate skipped pages
|
|
56
|
-
items.push({
|
|
57
|
-
type: 'page',
|
|
58
|
-
value: 1,
|
|
59
|
-
isCurrent: page === 1,
|
|
60
|
-
});
|
|
61
|
-
items.push({ type: 'ellipsis', key: total - rightItemCount });
|
|
62
|
-
// biome-ignore lint/suspicious/useIterableCallbackReturn: This is a side effect
|
|
63
|
-
rightRange.forEach((pageNum) => items.push({
|
|
64
|
-
type: 'page',
|
|
65
|
-
value: pageNum,
|
|
66
|
-
isCurrent: pageNum === page,
|
|
67
|
-
}));
|
|
68
|
-
}
|
|
69
|
-
// Case 3: Both left and right ellipsis are needed
|
|
70
|
-
else if (showLeftEllipsis && showRightEllipsis) {
|
|
71
|
-
// Always show the first page
|
|
72
|
-
items.push({
|
|
73
|
-
type: 'page',
|
|
74
|
-
value: 1,
|
|
75
|
-
isCurrent: page === 1,
|
|
76
|
-
});
|
|
77
|
-
// Insert left ellipsis after the first page
|
|
78
|
-
items.push({ type: 'ellipsis', key: leftSiblingIndex - 1 });
|
|
79
|
-
// Show a range of pages around the current page
|
|
80
|
-
const middleRange = range(leftSiblingIndex, rightSiblingIndex);
|
|
81
|
-
// biome-ignore lint/suspicious/useIterableCallbackReturn: This is a side effect
|
|
82
|
-
middleRange.forEach((pageNum) => items.push({
|
|
83
|
-
type: 'page',
|
|
84
|
-
value: pageNum,
|
|
85
|
-
isCurrent: pageNum === page,
|
|
86
|
-
}));
|
|
87
|
-
// Insert right ellipsis and finally the last page
|
|
88
|
-
items.push({ type: 'ellipsis', key: rightSiblingIndex + 1 });
|
|
89
|
-
items.push({
|
|
90
|
-
type: 'page',
|
|
91
|
-
value: total,
|
|
92
|
-
isCurrent: total === page,
|
|
93
|
-
});
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
return items;
|
|
97
|
-
}, [total, siblingCount, page]);
|
|
98
|
-
useEffect(() => {
|
|
99
|
-
const paginationItems = createPaginationItems();
|
|
100
|
-
setPages(paginationItems);
|
|
101
|
-
}, [createPaginationItems]);
|
|
9
|
+
const pages = createPaginationItems({ total, siblingCount, page });
|
|
102
10
|
const onPageChangeHandler = (newPage) => {
|
|
103
11
|
onPageChange?.(newPage);
|
|
104
12
|
};
|
|
@@ -111,16 +19,6 @@ const PaginationRoot = ({ total, siblingCount = 1, page, onPageChange, children,
|
|
|
111
19
|
};
|
|
112
20
|
return (jsx(PaginationContext.Provider, { value: paginationContextValue, children: jsx("nav", { "aria-label": "Pagination Navigation", "data-testid": rootTestId, style: style, className: className, children: children }) }));
|
|
113
21
|
};
|
|
114
|
-
/**
|
|
115
|
-
* Creates an array of numbers from start to end.
|
|
116
|
-
* @param start - The start number.
|
|
117
|
-
* @param end - The end number.
|
|
118
|
-
* @returns An array of numbers from start to end.
|
|
119
|
-
*/
|
|
120
|
-
const range = (start, end) => {
|
|
121
|
-
const length = end - start + 1;
|
|
122
|
-
return Array.from({ length }, (_, index) => index + start);
|
|
123
|
-
};
|
|
124
22
|
const Trigger = ({ children, style, className, asChild = false, direction, ariaLabel }) => {
|
|
125
23
|
const context = useContext(PaginationContext);
|
|
126
24
|
if (!context) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationBase.js","sources":["../../../../../src/components/molecules/Pagination/components/PaginationBase.tsx"],"sourcesContent":[null],"names":["_jsx","_Fragment"],"mappings":"
|
|
1
|
+
{"version":3,"file":"PaginationBase.js","sources":["../../../../../src/components/molecules/Pagination/components/PaginationBase.tsx"],"sourcesContent":[null],"names":["_jsx","_Fragment"],"mappings":"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"}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const range = (start, end) => {
|
|
4
|
+
const length = end - start + 1;
|
|
5
|
+
return Array.from({ length }, (_, index) => index + start);
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* Chooses the page numbers and ellipses shown between the previous and next controls.
|
|
9
|
+
*
|
|
10
|
+
* @param options Current page, total pages and how many siblings stay beside the current page.
|
|
11
|
+
* @returns Items in display order. Every page is listed when they fit; otherwise a run at the start or the end collapses behind one ellipsis, and a page in the middle keeps both.
|
|
12
|
+
*/
|
|
13
|
+
const createPaginationItems = ({ page, total, siblingCount }) => {
|
|
14
|
+
const items = [];
|
|
15
|
+
// Current page, one sibling run on each side, the first and last pages, and two ellipses.
|
|
16
|
+
const totalPageNumbers = siblingCount * 2 + 5;
|
|
17
|
+
if (totalPageNumbers >= total) {
|
|
18
|
+
for (let i = 1; i <= total; i++) {
|
|
19
|
+
items.push({
|
|
20
|
+
type: 'page',
|
|
21
|
+
value: i,
|
|
22
|
+
isCurrent: i === page,
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
return items;
|
|
26
|
+
}
|
|
27
|
+
const leftSiblingIndex = Math.max(page - siblingCount, 1);
|
|
28
|
+
const rightSiblingIndex = Math.min(page + siblingCount, total);
|
|
29
|
+
const showLeftEllipsis = leftSiblingIndex > 2;
|
|
30
|
+
const showRightEllipsis = rightSiblingIndex < total - 1;
|
|
31
|
+
if (!showLeftEllipsis && showRightEllipsis) {
|
|
32
|
+
const leftItemCount = siblingCount * 2 + 3;
|
|
33
|
+
for (const pageNum of range(1, leftItemCount)) {
|
|
34
|
+
items.push({
|
|
35
|
+
type: 'page',
|
|
36
|
+
value: pageNum,
|
|
37
|
+
isCurrent: pageNum === page,
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
items.push({ type: 'ellipsis', key: leftItemCount + 1 });
|
|
41
|
+
items.push({
|
|
42
|
+
type: 'page',
|
|
43
|
+
value: total,
|
|
44
|
+
isCurrent: total === page,
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
else if (showLeftEllipsis && !showRightEllipsis) {
|
|
48
|
+
const rightItemCount = siblingCount * 2 + 3;
|
|
49
|
+
const rightRange = range(total - rightItemCount + 1, total);
|
|
50
|
+
items.push({
|
|
51
|
+
type: 'page',
|
|
52
|
+
value: 1,
|
|
53
|
+
isCurrent: page === 1,
|
|
54
|
+
});
|
|
55
|
+
items.push({ type: 'ellipsis', key: total - rightItemCount });
|
|
56
|
+
for (const pageNum of rightRange) {
|
|
57
|
+
items.push({
|
|
58
|
+
type: 'page',
|
|
59
|
+
value: pageNum,
|
|
60
|
+
isCurrent: pageNum === page,
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
else if (showLeftEllipsis && showRightEllipsis) {
|
|
65
|
+
items.push({
|
|
66
|
+
type: 'page',
|
|
67
|
+
value: 1,
|
|
68
|
+
isCurrent: page === 1,
|
|
69
|
+
});
|
|
70
|
+
items.push({ type: 'ellipsis', key: leftSiblingIndex - 1 });
|
|
71
|
+
for (const pageNum of range(leftSiblingIndex, rightSiblingIndex)) {
|
|
72
|
+
items.push({
|
|
73
|
+
type: 'page',
|
|
74
|
+
value: pageNum,
|
|
75
|
+
isCurrent: pageNum === page,
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
items.push({ type: 'ellipsis', key: rightSiblingIndex + 1 });
|
|
79
|
+
items.push({
|
|
80
|
+
type: 'page',
|
|
81
|
+
value: total,
|
|
82
|
+
isCurrent: total === page,
|
|
83
|
+
});
|
|
84
|
+
}
|
|
85
|
+
return items;
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
exports.createPaginationItems = createPaginationItems;
|
|
89
|
+
//# sourceMappingURL=pagination.utils.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pagination.utils.cjs","sources":["../../../../src/components/molecules/Pagination/pagination.utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;AA4BA,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,GAAW,KAAc;AACrD,IAAA,MAAM,MAAM,GAAG,GAAG,GAAG,KAAK,GAAG,CAAC;AAE9B,IAAA,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,KAAK,GAAG,KAAK,CAAC;AAC5D,CAAC;AAED;;;;;AAKG;AACI,MAAM,qBAAqB,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAA2B,KAA4B;IACtH,MAAM,KAAK,GAA2B,EAAE;;AAExC,IAAA,MAAM,gBAAgB,GAAG,YAAY,GAAG,CAAC,GAAG,CAAC;AAE7C,IAAA,IAAI,gBAAgB,IAAI,KAAK,EAAE;AAC7B,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,KAAK,EAAE,CAAC,EAAE,EAAE;YAC/B,KAAK,CAAC,IAAI,CAAC;AACT,gBAAA,IAAI,EAAE,MAAM;AACZ,gBAAA,KAAK,EAAE,CAAC;gBACR,SAAS,EAAE,CAAC,KAAK,IAAI;AACtB,aAAA,CAAC;QACJ;AAEA,QAAA,OAAO,KAAK;IACd;AAEA,IAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,YAAY,EAAE,CAAC,CAAC;AACzD,IAAA,MAAM,iBAAiB,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,YAAY,EAAE,KAAK,CAAC;AAC9D,IAAA,MAAM,gBAAgB,GAAG,gBAAgB,GAAG,CAAC;AAC7C,IAAA,MAAM,iBAAiB,GAAG,iBAAiB,GAAG,KAAK,GAAG,CAAC;AAEvD,IAAA,IAAI,CAAC,gBAAgB,IAAI,iBAAiB,EAAE;AAC1C,QAAA,MAAM,aAAa,GAAG,YAAY,GAAG,CAAC,GAAG,CAAC;QAC1C,KAAK,MAAM,OAAO,IAAI,KAAK,CAAC,CAAC,EAAE,aAAa,CAAC,EAAE;YAC7C,KAAK,CAAC,IAAI,CAAC;AACT,gBAAA,IAAI,EAAE,MAAM;AACZ,gBAAA,KAAK,EAAE,OAAO;gBACd,SAAS,EAAE,OAAO,KAAK,IAAI;AAC5B,aAAA,CAAC;QACJ;AAEA,QAAA,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,aAAa,GAAG,CAAC,EAAE,CAAC;QACxD,KAAK,CAAC,IAAI,CAAC;AACT,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,KAAK,EAAE,KAAK;YACZ,SAAS,EAAE,KAAK,KAAK,IAAI;AAC1B,SAAA,CAAC;IACJ;AAAO,SAAA,IAAI,gBAAgB,IAAI,CAAC,iBAAiB,EAAE;AACjD,QAAA,MAAM,cAAc,GAAG,YAAY,GAAG,CAAC,GAAG,CAAC;AAC3C,QAAA,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,GAAG,cAAc,GAAG,CAAC,EAAE,KAAK,CAAC;QAE3D,KAAK,CAAC,IAAI,CAAC;AACT,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,KAAK,EAAE,CAAC;YACR,SAAS,EAAE,IAAI,KAAK,CAAC;AACtB,SAAA,CAAC;AACF,QAAA,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK,GAAG,cAAc,EAAE,CAAC;AAC7D,QAAA,KAAK,MAAM,OAAO,IAAI,UAAU,EAAE;YAChC,KAAK,CAAC,IAAI,CAAC;AACT,gBAAA,IAAI,EAAE,MAAM;AACZ,gBAAA,KAAK,EAAE,OAAO;gBACd,SAAS,EAAE,OAAO,KAAK,IAAI;AAC5B,aAAA,CAAC;QACJ;IACF;AAAO,SAAA,IAAI,gBAAgB,IAAI,iBAAiB,EAAE;QAChD,KAAK,CAAC,IAAI,CAAC;AACT,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,KAAK,EAAE,CAAC;YACR,SAAS,EAAE,IAAI,KAAK,CAAC;AACtB,SAAA,CAAC;AACF,QAAA,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,gBAAgB,GAAG,CAAC,EAAE,CAAC;QAE3D,KAAK,MAAM,OAAO,IAAI,KAAK,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,EAAE;YAChE,KAAK,CAAC,IAAI,CAAC;AACT,gBAAA,IAAI,EAAE,MAAM;AACZ,gBAAA,KAAK,EAAE,OAAO;gBACd,SAAS,EAAE,OAAO,KAAK,IAAI;AAC5B,aAAA,CAAC;QACJ;AAEA,QAAA,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,iBAAiB,GAAG,CAAC,EAAE,CAAC;QAC5D,KAAK,CAAC,IAAI,CAAC;AACT,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,KAAK,EAAE,KAAK;YACZ,SAAS,EAAE,KAAK,KAAK,IAAI;AAC1B,SAAA,CAAC;IACJ;AAEA,IAAA,OAAO,KAAK;AACd;;"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/** One numbered page in the window between the previous and next controls. */
|
|
2
|
+
export interface PaginationPageItem {
|
|
3
|
+
type: 'page';
|
|
4
|
+
/** 1-based page number. */
|
|
5
|
+
value: number;
|
|
6
|
+
/** Whether this page is the one currently selected. */
|
|
7
|
+
isCurrent: boolean;
|
|
8
|
+
}
|
|
9
|
+
/** A collapsed gap. `key` is the page number on the collapsed side of the visible window. */
|
|
10
|
+
export interface PaginationEllipsisItem {
|
|
11
|
+
type: 'ellipsis';
|
|
12
|
+
key: number;
|
|
13
|
+
}
|
|
14
|
+
/** A page button or an ellipsis, in the order the numbered row renders them. */
|
|
15
|
+
export type PaginationWindowItem = PaginationPageItem | PaginationEllipsisItem;
|
|
16
|
+
/** Inputs that decide which page numbers stay visible. */
|
|
17
|
+
export interface PaginationWindowOptions {
|
|
18
|
+
/** 1-based page currently selected. A page outside `1..total` selects nothing. */
|
|
19
|
+
page: number;
|
|
20
|
+
/** Total number of pages. `0` yields no items. */
|
|
21
|
+
total: number;
|
|
22
|
+
/** How many pages stay visible on each side of the current page before the row collapses. */
|
|
23
|
+
siblingCount: number;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* Chooses the page numbers and ellipses shown between the previous and next controls.
|
|
27
|
+
*
|
|
28
|
+
* @param options Current page, total pages and how many siblings stay beside the current page.
|
|
29
|
+
* @returns Items in display order. Every page is listed when they fit; otherwise a run at the start or the end collapses behind one ellipsis, and a page in the middle keeps both.
|
|
30
|
+
*/
|
|
31
|
+
export declare const createPaginationItems: ({ page, total, siblingCount }: PaginationWindowOptions) => PaginationWindowItem[];
|
|
32
|
+
//# sourceMappingURL=pagination.utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pagination.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Pagination/pagination.utils.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,6FAA6F;AAC7F,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,UAAU,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;CACb;AAED,gFAAgF;AAChF,MAAM,MAAM,oBAAoB,GAAG,kBAAkB,GAAG,sBAAsB,CAAC;AAE/E,0DAA0D;AAC1D,MAAM,WAAW,uBAAuB;IACtC,kFAAkF;IAClF,IAAI,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,6FAA6F;IAC7F,YAAY,EAAE,MAAM,CAAC;CACtB;AAQD;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,+BAA+B,uBAAuB,KAAG,oBAAoB,EAgFlH,CAAC"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
const range = (start, end) => {
|
|
2
|
+
const length = end - start + 1;
|
|
3
|
+
return Array.from({ length }, (_, index) => index + start);
|
|
4
|
+
};
|
|
5
|
+
/**
|
|
6
|
+
* Chooses the page numbers and ellipses shown between the previous and next controls.
|
|
7
|
+
*
|
|
8
|
+
* @param options Current page, total pages and how many siblings stay beside the current page.
|
|
9
|
+
* @returns Items in display order. Every page is listed when they fit; otherwise a run at the start or the end collapses behind one ellipsis, and a page in the middle keeps both.
|
|
10
|
+
*/
|
|
11
|
+
const createPaginationItems = ({ page, total, siblingCount }) => {
|
|
12
|
+
const items = [];
|
|
13
|
+
// Current page, one sibling run on each side, the first and last pages, and two ellipses.
|
|
14
|
+
const totalPageNumbers = siblingCount * 2 + 5;
|
|
15
|
+
if (totalPageNumbers >= total) {
|
|
16
|
+
for (let i = 1; i <= total; i++) {
|
|
17
|
+
items.push({
|
|
18
|
+
type: 'page',
|
|
19
|
+
value: i,
|
|
20
|
+
isCurrent: i === page,
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
return items;
|
|
24
|
+
}
|
|
25
|
+
const leftSiblingIndex = Math.max(page - siblingCount, 1);
|
|
26
|
+
const rightSiblingIndex = Math.min(page + siblingCount, total);
|
|
27
|
+
const showLeftEllipsis = leftSiblingIndex > 2;
|
|
28
|
+
const showRightEllipsis = rightSiblingIndex < total - 1;
|
|
29
|
+
if (!showLeftEllipsis && showRightEllipsis) {
|
|
30
|
+
const leftItemCount = siblingCount * 2 + 3;
|
|
31
|
+
for (const pageNum of range(1, leftItemCount)) {
|
|
32
|
+
items.push({
|
|
33
|
+
type: 'page',
|
|
34
|
+
value: pageNum,
|
|
35
|
+
isCurrent: pageNum === page,
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
items.push({ type: 'ellipsis', key: leftItemCount + 1 });
|
|
39
|
+
items.push({
|
|
40
|
+
type: 'page',
|
|
41
|
+
value: total,
|
|
42
|
+
isCurrent: total === page,
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
else if (showLeftEllipsis && !showRightEllipsis) {
|
|
46
|
+
const rightItemCount = siblingCount * 2 + 3;
|
|
47
|
+
const rightRange = range(total - rightItemCount + 1, total);
|
|
48
|
+
items.push({
|
|
49
|
+
type: 'page',
|
|
50
|
+
value: 1,
|
|
51
|
+
isCurrent: page === 1,
|
|
52
|
+
});
|
|
53
|
+
items.push({ type: 'ellipsis', key: total - rightItemCount });
|
|
54
|
+
for (const pageNum of rightRange) {
|
|
55
|
+
items.push({
|
|
56
|
+
type: 'page',
|
|
57
|
+
value: pageNum,
|
|
58
|
+
isCurrent: pageNum === page,
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
else if (showLeftEllipsis && showRightEllipsis) {
|
|
63
|
+
items.push({
|
|
64
|
+
type: 'page',
|
|
65
|
+
value: 1,
|
|
66
|
+
isCurrent: page === 1,
|
|
67
|
+
});
|
|
68
|
+
items.push({ type: 'ellipsis', key: leftSiblingIndex - 1 });
|
|
69
|
+
for (const pageNum of range(leftSiblingIndex, rightSiblingIndex)) {
|
|
70
|
+
items.push({
|
|
71
|
+
type: 'page',
|
|
72
|
+
value: pageNum,
|
|
73
|
+
isCurrent: pageNum === page,
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
items.push({ type: 'ellipsis', key: rightSiblingIndex + 1 });
|
|
77
|
+
items.push({
|
|
78
|
+
type: 'page',
|
|
79
|
+
value: total,
|
|
80
|
+
isCurrent: total === page,
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
return items;
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
export { createPaginationItems };
|
|
87
|
+
//# sourceMappingURL=pagination.utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pagination.utils.js","sources":["../../../../src/components/molecules/Pagination/pagination.utils.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}
|