react-pagination-thami 1.0.0 → 1.0.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/Pagination/usePagination.d.ts +8 -2
- package/dist/index.css +9 -5
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +28 -48
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +28 -48
- package/dist/index.mjs.map +1 -1
- package/package.json +12 -9
|
@@ -1,2 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
interface Props {
|
|
2
|
+
total: number;
|
|
3
|
+
pageSize: number;
|
|
4
|
+
currentPage: number;
|
|
5
|
+
siblingCount: number;
|
|
6
|
+
}
|
|
7
|
+
export declare function usePagination({ total, pageSize, currentPage, siblingCount, }: Props): (string | number)[];
|
|
8
|
+
export {};
|
package/dist/index.css
CHANGED
|
@@ -5,24 +5,28 @@
|
|
|
5
5
|
list-style: none;
|
|
6
6
|
padding: 0;
|
|
7
7
|
align-items: center;
|
|
8
|
-
flex-wrap: wrap;
|
|
9
8
|
}
|
|
10
9
|
.pagination button {
|
|
11
|
-
padding: 6px 10px;
|
|
12
10
|
border: 1px solid #ddd;
|
|
13
|
-
|
|
11
|
+
padding: 6px 10px;
|
|
14
12
|
border-radius: 6px;
|
|
13
|
+
background: white;
|
|
15
14
|
cursor: pointer;
|
|
15
|
+
transition: 0.2s;
|
|
16
|
+
}
|
|
17
|
+
.pagination button:hover {
|
|
18
|
+
background: #f3f3f3;
|
|
16
19
|
}
|
|
17
20
|
.pagination button.active {
|
|
18
|
-
background:
|
|
21
|
+
background: #111;
|
|
19
22
|
color: white;
|
|
23
|
+
border-color: #111;
|
|
20
24
|
}
|
|
21
25
|
.pagination button:disabled {
|
|
22
26
|
opacity: 0.4;
|
|
23
27
|
cursor: not-allowed;
|
|
24
28
|
}
|
|
25
29
|
.dots {
|
|
26
|
-
padding: 6px
|
|
30
|
+
padding: 0 6px;
|
|
27
31
|
}
|
|
28
32
|
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Pagination/pagination.css"],"sourcesContent":[".pagination {\r\n display: flex;\r\n gap: 6px;\r\n list-style: none;\r\n padding: 0;\r\n align-items: center;\r\n
|
|
1
|
+
{"version":3,"sources":["../src/components/Pagination/pagination.css"],"sourcesContent":[".pagination {\r\n display: flex;\r\n gap: 6px;\r\n list-style: none;\r\n padding: 0;\r\n align-items: center;\r\n}\r\n\r\n.pagination button {\r\n border: 1px solid #ddd;\r\n padding: 6px 10px;\r\n border-radius: 6px;\r\n background: white;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n}\r\n\r\n.pagination button:hover {\r\n background: #f3f3f3;\r\n}\r\n\r\n.pagination button.active {\r\n background: #111;\r\n color: white;\r\n border-color: #111;\r\n}\r\n\r\n.pagination button:disabled {\r\n opacity: 0.4;\r\n cursor: not-allowed;\r\n}\r\n\r\n.dots {\r\n padding: 0 6px;\r\n}"],"mappings":";AAAA,CAAC;AACC,WAAS;AACT,OAAK;AACL,cAAY;AACZ,WAAS;AACT,eAAa;AACf;AAEA,CARC,WAQW;AACV,UAAQ,IAAI,MAAM;AAClB,WAAS,IAAI;AACb,iBAAe;AACf,cAAY;AACZ,UAAQ;AACR,cAAY;AACd;AAEA,CAjBC,WAiBW,MAAM;AAChB,cAAY;AACd;AAEA,CArBC,WAqBW,MAAM,CAAC;AACjB,cAAY;AACZ,SAAO;AACP,gBAAc;AAChB;AAEA,CA3BC,WA2BW,MAAM;AAChB,WAAS;AACT,UAAQ;AACV;AAEA,CAAC;AACC,WAAS,EAAE;AACb;","names":[]}
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -29,51 +29,33 @@ var import_react = require("react");
|
|
|
29
29
|
|
|
30
30
|
// src/components/Pagination/pagination.utils.ts
|
|
31
31
|
var DOTS = "...";
|
|
32
|
-
function range(start, end) {
|
|
33
|
-
return Array.from({ length: end - start + 1 }, (_, i) => start + i);
|
|
34
|
-
}
|
|
35
32
|
|
|
36
33
|
// src/components/Pagination/usePagination.ts
|
|
37
34
|
function usePagination({
|
|
38
35
|
total,
|
|
39
36
|
pageSize,
|
|
40
37
|
currentPage,
|
|
41
|
-
siblingCount
|
|
38
|
+
siblingCount
|
|
42
39
|
}) {
|
|
43
40
|
return (0, import_react.useMemo)(() => {
|
|
44
41
|
const totalPages = Math.ceil(total / pageSize);
|
|
45
42
|
const totalPageNumbers = siblingCount + 5;
|
|
46
43
|
if (totalPageNumbers >= totalPages) {
|
|
47
|
-
return
|
|
48
|
-
}
|
|
49
|
-
const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
|
|
50
|
-
const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
|
|
51
|
-
const showLeftDots = leftSiblingIndex > 2;
|
|
52
|
-
const showRightDots = rightSiblingIndex < totalPages - 2;
|
|
53
|
-
if (!showLeftDots && showRightDots) {
|
|
54
|
-
return [
|
|
55
|
-
...range(1, 3 + 2 * siblingCount),
|
|
56
|
-
DOTS,
|
|
57
|
-
totalPages
|
|
58
|
-
];
|
|
44
|
+
return Array.from({ length: totalPages }, (_, i) => i + 1);
|
|
59
45
|
}
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
46
|
+
const leftSibling = Math.max(currentPage - siblingCount, 1);
|
|
47
|
+
const rightSibling = Math.min(currentPage + siblingCount, totalPages);
|
|
48
|
+
const showLeftDots = leftSibling > 2;
|
|
49
|
+
const showRightDots = rightSibling < totalPages - 1;
|
|
50
|
+
const range = [];
|
|
51
|
+
range.push(1);
|
|
52
|
+
if (showLeftDots) range.push(DOTS);
|
|
53
|
+
for (let i = leftSibling; i <= rightSibling; i++) {
|
|
54
|
+
range.push(i);
|
|
66
55
|
}
|
|
67
|
-
if (
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
DOTS,
|
|
71
|
-
...range(leftSiblingIndex, rightSiblingIndex),
|
|
72
|
-
DOTS,
|
|
73
|
-
totalPages
|
|
74
|
-
];
|
|
75
|
-
}
|
|
76
|
-
return [];
|
|
56
|
+
if (showRightDots) range.push(DOTS);
|
|
57
|
+
range.push(totalPages);
|
|
58
|
+
return range;
|
|
77
59
|
}, [total, pageSize, currentPage, siblingCount]);
|
|
78
60
|
}
|
|
79
61
|
|
|
@@ -91,25 +73,26 @@ function Pagination({
|
|
|
91
73
|
total,
|
|
92
74
|
pageSize,
|
|
93
75
|
currentPage,
|
|
94
|
-
onChange,
|
|
95
76
|
siblingCount
|
|
96
77
|
});
|
|
97
|
-
if (totalPages <= 1
|
|
78
|
+
if (totalPages <= 1) return null;
|
|
79
|
+
const goToPage = (page) => {
|
|
80
|
+
if (page < 1 || page > totalPages) return;
|
|
81
|
+
onChange(page);
|
|
82
|
+
};
|
|
98
83
|
const handleKeyDown = (e, page) => {
|
|
99
84
|
if (page === DOTS) return;
|
|
100
85
|
if (e.key === "Enter" || e.key === " ") {
|
|
101
86
|
e.preventDefault();
|
|
102
|
-
|
|
87
|
+
goToPage(Number(page));
|
|
103
88
|
}
|
|
104
89
|
};
|
|
105
90
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { "aria-label": "Pagination", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ul", { className: "pagination", children: [
|
|
106
91
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
107
92
|
"button",
|
|
108
93
|
{
|
|
109
|
-
|
|
110
|
-
onClick: () => onChange(currentPage - 1),
|
|
94
|
+
onClick: () => goToPage(currentPage - 1),
|
|
111
95
|
disabled: currentPage === 1,
|
|
112
|
-
"aria-label": "Previous page",
|
|
113
96
|
children: "Prev"
|
|
114
97
|
}
|
|
115
98
|
) }),
|
|
@@ -117,26 +100,23 @@ function Pagination({
|
|
|
117
100
|
if (page === DOTS) {
|
|
118
101
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "dots", children: "..." }, `dots-${idx}`);
|
|
119
102
|
}
|
|
120
|
-
const pageNumber = Number(page);
|
|
121
103
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
122
104
|
"button",
|
|
123
105
|
{
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
onClick: () => onChange(pageNumber),
|
|
106
|
+
className: currentPage === page ? "active" : "",
|
|
107
|
+
onClick: () => goToPage(Number(page)),
|
|
127
108
|
onKeyDown: (e) => handleKeyDown(e, page),
|
|
128
|
-
"aria-current": currentPage ===
|
|
129
|
-
|
|
109
|
+
"aria-current": currentPage === page ? "page" : void 0,
|
|
110
|
+
"aria-label": `Go to page ${page}`,
|
|
111
|
+
children: page
|
|
130
112
|
}
|
|
131
|
-
) },
|
|
113
|
+
) }, page);
|
|
132
114
|
}),
|
|
133
115
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
134
116
|
"button",
|
|
135
117
|
{
|
|
136
|
-
|
|
137
|
-
onClick: () => onChange(currentPage + 1),
|
|
118
|
+
onClick: () => goToPage(currentPage + 1),
|
|
138
119
|
disabled: currentPage === totalPages,
|
|
139
|
-
"aria-label": "Next page",
|
|
140
120
|
children: "Next"
|
|
141
121
|
}
|
|
142
122
|
) })
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/components/Pagination/usePagination.ts","../src/components/Pagination/pagination.utils.ts","../src/components/Pagination/Pagination.tsx"],"sourcesContent":["export { default as Pagination } from \"./components/Pagination/Pagination\";","import { useMemo } from \"react\";\r\nimport { DOTS
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/components/Pagination/usePagination.ts","../src/components/Pagination/pagination.utils.ts","../src/components/Pagination/Pagination.tsx"],"sourcesContent":["export { default as Pagination } from \"./components/Pagination/Pagination\";\r\n\r\nexport type {\r\n PaginationProps\r\n} from \"./components/Pagination/pagination.types\";","import { useMemo } from \"react\";\r\nimport { DOTS } from \"./pagination.utils\";\r\n\r\ninterface Props {\r\n total: number;\r\n pageSize: number;\r\n currentPage: number;\r\n siblingCount: number;\r\n}\r\n\r\nexport function usePagination({\r\n total,\r\n pageSize,\r\n currentPage,\r\n siblingCount,\r\n}: Props) {\r\n return useMemo(() => {\r\n const totalPages = Math.ceil(total / pageSize);\r\n\r\n const totalPageNumbers = siblingCount + 5;\r\n\r\n if (totalPageNumbers >= totalPages) {\r\n return Array.from({ length: totalPages }, (_, i) => i + 1);\r\n }\r\n\r\n const leftSibling = Math.max(currentPage - siblingCount, 1);\r\n const rightSibling = Math.min(currentPage + siblingCount, totalPages);\r\n\r\n const showLeftDots = leftSibling > 2;\r\n const showRightDots = rightSibling < totalPages - 1;\r\n\r\n const range: (number | string)[] = [];\r\n\r\n range.push(1);\r\n\r\n if (showLeftDots) range.push(DOTS);\r\n\r\n for (let i = leftSibling; i <= rightSibling; i++) {\r\n range.push(i);\r\n }\r\n\r\n if (showRightDots) range.push(DOTS);\r\n\r\n range.push(totalPages);\r\n\r\n return range;\r\n }, [total, pageSize, currentPage, siblingCount]);\r\n}","export const DOTS = \"...\";\r\n\r\nexport function range(start: number, end: number) {\r\n return Array.from({ length: end - start + 1 }, (_, i) => start + i);\r\n}","import React from \"react\";\r\nimport { usePagination } from \"./usePagination\";\r\nimport { PaginationProps } from \"./pagination.types\";\r\nimport { DOTS } from \"./pagination.utils\";\r\nimport \"./pagination.css\";\r\n\r\nexport default function Pagination({\r\n total,\r\n pageSize,\r\n currentPage,\r\n onChange,\r\n siblingCount = 1,\r\n}: PaginationProps) {\r\n const totalPages = Math.ceil(total / pageSize);\r\n\r\n const paginationRange = usePagination({\r\n total,\r\n pageSize,\r\n currentPage,\r\n siblingCount,\r\n });\r\n\r\n if (totalPages <= 1) return null;\r\n\r\n const goToPage = (page: number) => {\r\n if (page < 1 || page > totalPages) return;\r\n onChange(page);\r\n };\r\n\r\n const handleKeyDown = (\r\n e: React.KeyboardEvent,\r\n page: number | string\r\n ) => {\r\n if (page === DOTS) return;\r\n\r\n if (e.key === \"Enter\" || e.key === \" \") {\r\n e.preventDefault();\r\n goToPage(Number(page));\r\n }\r\n };\r\n\r\n return (\r\n <nav aria-label=\"Pagination\">\r\n <ul className=\"pagination\">\r\n <li>\r\n <button\r\n onClick={() => goToPage(currentPage - 1)}\r\n disabled={currentPage === 1}\r\n >\r\n Prev\r\n </button>\r\n </li>\r\n\r\n {paginationRange.map((page, idx) => {\r\n if (page === DOTS) {\r\n return (\r\n <li key={`dots-${idx}`} className=\"dots\">\r\n ...\r\n </li>\r\n );\r\n }\r\n\r\n return (\r\n <li key={page}>\r\n <button\r\n className={currentPage === page ? \"active\" : \"\"}\r\n onClick={() => goToPage(Number(page))}\r\n onKeyDown={(e) => handleKeyDown(e, page)}\r\n aria-current={currentPage === page ? \"page\" : undefined}\r\n aria-label={`Go to page ${page}`}\r\n >\r\n {page}\r\n </button>\r\n </li>\r\n );\r\n })}\r\n\r\n <li>\r\n <button\r\n onClick={() => goToPage(currentPage + 1)}\r\n disabled={currentPage === totalPages}\r\n >\r\n Next\r\n </button>\r\n </li>\r\n </ul>\r\n </nav>\r\n );\r\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAwB;;;ACAjB,IAAM,OAAO;;;ADUb,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAU;AACR,aAAO,sBAAQ,MAAM;AACnB,UAAM,aAAa,KAAK,KAAK,QAAQ,QAAQ;AAE7C,UAAM,mBAAmB,eAAe;AAExC,QAAI,oBAAoB,YAAY;AAClC,aAAO,MAAM,KAAK,EAAE,QAAQ,WAAW,GAAG,CAAC,GAAG,MAAM,IAAI,CAAC;AAAA,IAC3D;AAEA,UAAM,cAAc,KAAK,IAAI,cAAc,cAAc,CAAC;AAC1D,UAAM,eAAe,KAAK,IAAI,cAAc,cAAc,UAAU;AAEpE,UAAM,eAAe,cAAc;AACnC,UAAM,gBAAgB,eAAe,aAAa;AAElD,UAAM,QAA6B,CAAC;AAEpC,UAAM,KAAK,CAAC;AAEZ,QAAI,aAAc,OAAM,KAAK,IAAI;AAEjC,aAAS,IAAI,aAAa,KAAK,cAAc,KAAK;AAChD,YAAM,KAAK,CAAC;AAAA,IACd;AAEA,QAAI,cAAe,OAAM,KAAK,IAAI;AAElC,UAAM,KAAK,UAAU;AAErB,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,UAAU,aAAa,YAAY,CAAC;AACjD;;;AEJM;AArCS,SAAR,WAA4B;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,GAAoB;AAClB,QAAM,aAAa,KAAK,KAAK,QAAQ,QAAQ;AAE7C,QAAM,kBAAkB,cAAc;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI,cAAc,EAAG,QAAO;AAE5B,QAAM,WAAW,CAAC,SAAiB;AACjC,QAAI,OAAO,KAAK,OAAO,WAAY;AACnC,aAAS,IAAI;AAAA,EACf;AAEA,QAAM,gBAAgB,CACpB,GACA,SACG;AACH,QAAI,SAAS,KAAM;AAEnB,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,eAAe;AACjB,eAAS,OAAO,IAAI,CAAC;AAAA,IACvB;AAAA,EACF;AAEA,SACE,4CAAC,SAAI,cAAW,cACd,uDAAC,QAAG,WAAU,cACZ;AAAA,gDAAC,QACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM,SAAS,cAAc,CAAC;AAAA,QACvC,UAAU,gBAAgB;AAAA,QAC3B;AAAA;AAAA,IAED,GACF;AAAA,IAEC,gBAAgB,IAAI,CAAC,MAAM,QAAQ;AAClC,UAAI,SAAS,MAAM;AACjB,eACE,4CAAC,QAAuB,WAAU,QAAO,mBAAhC,QAAQ,GAAG,EAEpB;AAAA,MAEJ;AAEA,aACE,4CAAC,QACC;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,gBAAgB,OAAO,WAAW;AAAA,UAC7C,SAAS,MAAM,SAAS,OAAO,IAAI,CAAC;AAAA,UACpC,WAAW,CAAC,MAAM,cAAc,GAAG,IAAI;AAAA,UACvC,gBAAc,gBAAgB,OAAO,SAAS;AAAA,UAC9C,cAAY,cAAc,IAAI;AAAA,UAE7B;AAAA;AAAA,MACH,KATO,IAUT;AAAA,IAEJ,CAAC;AAAA,IAED,4CAAC,QACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM,SAAS,cAAc,CAAC;AAAA,QACvC,UAAU,gBAAgB;AAAA,QAC3B;AAAA;AAAA,IAED,GACF;AAAA,KACF,GACF;AAEJ;","names":[]}
|
package/dist/index.mjs
CHANGED
|
@@ -3,51 +3,33 @@ import { useMemo } from "react";
|
|
|
3
3
|
|
|
4
4
|
// src/components/Pagination/pagination.utils.ts
|
|
5
5
|
var DOTS = "...";
|
|
6
|
-
function range(start, end) {
|
|
7
|
-
return Array.from({ length: end - start + 1 }, (_, i) => start + i);
|
|
8
|
-
}
|
|
9
6
|
|
|
10
7
|
// src/components/Pagination/usePagination.ts
|
|
11
8
|
function usePagination({
|
|
12
9
|
total,
|
|
13
10
|
pageSize,
|
|
14
11
|
currentPage,
|
|
15
|
-
siblingCount
|
|
12
|
+
siblingCount
|
|
16
13
|
}) {
|
|
17
14
|
return useMemo(() => {
|
|
18
15
|
const totalPages = Math.ceil(total / pageSize);
|
|
19
16
|
const totalPageNumbers = siblingCount + 5;
|
|
20
17
|
if (totalPageNumbers >= totalPages) {
|
|
21
|
-
return
|
|
22
|
-
}
|
|
23
|
-
const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
|
|
24
|
-
const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
|
|
25
|
-
const showLeftDots = leftSiblingIndex > 2;
|
|
26
|
-
const showRightDots = rightSiblingIndex < totalPages - 2;
|
|
27
|
-
if (!showLeftDots && showRightDots) {
|
|
28
|
-
return [
|
|
29
|
-
...range(1, 3 + 2 * siblingCount),
|
|
30
|
-
DOTS,
|
|
31
|
-
totalPages
|
|
32
|
-
];
|
|
18
|
+
return Array.from({ length: totalPages }, (_, i) => i + 1);
|
|
33
19
|
}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
20
|
+
const leftSibling = Math.max(currentPage - siblingCount, 1);
|
|
21
|
+
const rightSibling = Math.min(currentPage + siblingCount, totalPages);
|
|
22
|
+
const showLeftDots = leftSibling > 2;
|
|
23
|
+
const showRightDots = rightSibling < totalPages - 1;
|
|
24
|
+
const range = [];
|
|
25
|
+
range.push(1);
|
|
26
|
+
if (showLeftDots) range.push(DOTS);
|
|
27
|
+
for (let i = leftSibling; i <= rightSibling; i++) {
|
|
28
|
+
range.push(i);
|
|
40
29
|
}
|
|
41
|
-
if (
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
DOTS,
|
|
45
|
-
...range(leftSiblingIndex, rightSiblingIndex),
|
|
46
|
-
DOTS,
|
|
47
|
-
totalPages
|
|
48
|
-
];
|
|
49
|
-
}
|
|
50
|
-
return [];
|
|
30
|
+
if (showRightDots) range.push(DOTS);
|
|
31
|
+
range.push(totalPages);
|
|
32
|
+
return range;
|
|
51
33
|
}, [total, pageSize, currentPage, siblingCount]);
|
|
52
34
|
}
|
|
53
35
|
|
|
@@ -65,25 +47,26 @@ function Pagination({
|
|
|
65
47
|
total,
|
|
66
48
|
pageSize,
|
|
67
49
|
currentPage,
|
|
68
|
-
onChange,
|
|
69
50
|
siblingCount
|
|
70
51
|
});
|
|
71
|
-
if (totalPages <= 1
|
|
52
|
+
if (totalPages <= 1) return null;
|
|
53
|
+
const goToPage = (page) => {
|
|
54
|
+
if (page < 1 || page > totalPages) return;
|
|
55
|
+
onChange(page);
|
|
56
|
+
};
|
|
72
57
|
const handleKeyDown = (e, page) => {
|
|
73
58
|
if (page === DOTS) return;
|
|
74
59
|
if (e.key === "Enter" || e.key === " ") {
|
|
75
60
|
e.preventDefault();
|
|
76
|
-
|
|
61
|
+
goToPage(Number(page));
|
|
77
62
|
}
|
|
78
63
|
};
|
|
79
64
|
return /* @__PURE__ */ jsx("nav", { "aria-label": "Pagination", children: /* @__PURE__ */ jsxs("ul", { className: "pagination", children: [
|
|
80
65
|
/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
|
|
81
66
|
"button",
|
|
82
67
|
{
|
|
83
|
-
|
|
84
|
-
onClick: () => onChange(currentPage - 1),
|
|
68
|
+
onClick: () => goToPage(currentPage - 1),
|
|
85
69
|
disabled: currentPage === 1,
|
|
86
|
-
"aria-label": "Previous page",
|
|
87
70
|
children: "Prev"
|
|
88
71
|
}
|
|
89
72
|
) }),
|
|
@@ -91,26 +74,23 @@ function Pagination({
|
|
|
91
74
|
if (page === DOTS) {
|
|
92
75
|
return /* @__PURE__ */ jsx("li", { className: "dots", children: "..." }, `dots-${idx}`);
|
|
93
76
|
}
|
|
94
|
-
const pageNumber = Number(page);
|
|
95
77
|
return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
|
|
96
78
|
"button",
|
|
97
79
|
{
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
onClick: () => onChange(pageNumber),
|
|
80
|
+
className: currentPage === page ? "active" : "",
|
|
81
|
+
onClick: () => goToPage(Number(page)),
|
|
101
82
|
onKeyDown: (e) => handleKeyDown(e, page),
|
|
102
|
-
"aria-current": currentPage ===
|
|
103
|
-
|
|
83
|
+
"aria-current": currentPage === page ? "page" : void 0,
|
|
84
|
+
"aria-label": `Go to page ${page}`,
|
|
85
|
+
children: page
|
|
104
86
|
}
|
|
105
|
-
) },
|
|
87
|
+
) }, page);
|
|
106
88
|
}),
|
|
107
89
|
/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
|
|
108
90
|
"button",
|
|
109
91
|
{
|
|
110
|
-
|
|
111
|
-
onClick: () => onChange(currentPage + 1),
|
|
92
|
+
onClick: () => goToPage(currentPage + 1),
|
|
112
93
|
disabled: currentPage === totalPages,
|
|
113
|
-
"aria-label": "Next page",
|
|
114
94
|
children: "Next"
|
|
115
95
|
}
|
|
116
96
|
) })
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Pagination/usePagination.ts","../src/components/Pagination/pagination.utils.ts","../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import { useMemo } from \"react\";\r\nimport { DOTS
|
|
1
|
+
{"version":3,"sources":["../src/components/Pagination/usePagination.ts","../src/components/Pagination/pagination.utils.ts","../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import { useMemo } from \"react\";\r\nimport { DOTS } from \"./pagination.utils\";\r\n\r\ninterface Props {\r\n total: number;\r\n pageSize: number;\r\n currentPage: number;\r\n siblingCount: number;\r\n}\r\n\r\nexport function usePagination({\r\n total,\r\n pageSize,\r\n currentPage,\r\n siblingCount,\r\n}: Props) {\r\n return useMemo(() => {\r\n const totalPages = Math.ceil(total / pageSize);\r\n\r\n const totalPageNumbers = siblingCount + 5;\r\n\r\n if (totalPageNumbers >= totalPages) {\r\n return Array.from({ length: totalPages }, (_, i) => i + 1);\r\n }\r\n\r\n const leftSibling = Math.max(currentPage - siblingCount, 1);\r\n const rightSibling = Math.min(currentPage + siblingCount, totalPages);\r\n\r\n const showLeftDots = leftSibling > 2;\r\n const showRightDots = rightSibling < totalPages - 1;\r\n\r\n const range: (number | string)[] = [];\r\n\r\n range.push(1);\r\n\r\n if (showLeftDots) range.push(DOTS);\r\n\r\n for (let i = leftSibling; i <= rightSibling; i++) {\r\n range.push(i);\r\n }\r\n\r\n if (showRightDots) range.push(DOTS);\r\n\r\n range.push(totalPages);\r\n\r\n return range;\r\n }, [total, pageSize, currentPage, siblingCount]);\r\n}","export const DOTS = \"...\";\r\n\r\nexport function range(start: number, end: number) {\r\n return Array.from({ length: end - start + 1 }, (_, i) => start + i);\r\n}","import React from \"react\";\r\nimport { usePagination } from \"./usePagination\";\r\nimport { PaginationProps } from \"./pagination.types\";\r\nimport { DOTS } from \"./pagination.utils\";\r\nimport \"./pagination.css\";\r\n\r\nexport default function Pagination({\r\n total,\r\n pageSize,\r\n currentPage,\r\n onChange,\r\n siblingCount = 1,\r\n}: PaginationProps) {\r\n const totalPages = Math.ceil(total / pageSize);\r\n\r\n const paginationRange = usePagination({\r\n total,\r\n pageSize,\r\n currentPage,\r\n siblingCount,\r\n });\r\n\r\n if (totalPages <= 1) return null;\r\n\r\n const goToPage = (page: number) => {\r\n if (page < 1 || page > totalPages) return;\r\n onChange(page);\r\n };\r\n\r\n const handleKeyDown = (\r\n e: React.KeyboardEvent,\r\n page: number | string\r\n ) => {\r\n if (page === DOTS) return;\r\n\r\n if (e.key === \"Enter\" || e.key === \" \") {\r\n e.preventDefault();\r\n goToPage(Number(page));\r\n }\r\n };\r\n\r\n return (\r\n <nav aria-label=\"Pagination\">\r\n <ul className=\"pagination\">\r\n <li>\r\n <button\r\n onClick={() => goToPage(currentPage - 1)}\r\n disabled={currentPage === 1}\r\n >\r\n Prev\r\n </button>\r\n </li>\r\n\r\n {paginationRange.map((page, idx) => {\r\n if (page === DOTS) {\r\n return (\r\n <li key={`dots-${idx}`} className=\"dots\">\r\n ...\r\n </li>\r\n );\r\n }\r\n\r\n return (\r\n <li key={page}>\r\n <button\r\n className={currentPage === page ? \"active\" : \"\"}\r\n onClick={() => goToPage(Number(page))}\r\n onKeyDown={(e) => handleKeyDown(e, page)}\r\n aria-current={currentPage === page ? \"page\" : undefined}\r\n aria-label={`Go to page ${page}`}\r\n >\r\n {page}\r\n </button>\r\n </li>\r\n );\r\n })}\r\n\r\n <li>\r\n <button\r\n onClick={() => goToPage(currentPage + 1)}\r\n disabled={currentPage === totalPages}\r\n >\r\n Next\r\n </button>\r\n </li>\r\n </ul>\r\n </nav>\r\n );\r\n}"],"mappings":";AAAA,SAAS,eAAe;;;ACAjB,IAAM,OAAO;;;ADUb,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAU;AACR,SAAO,QAAQ,MAAM;AACnB,UAAM,aAAa,KAAK,KAAK,QAAQ,QAAQ;AAE7C,UAAM,mBAAmB,eAAe;AAExC,QAAI,oBAAoB,YAAY;AAClC,aAAO,MAAM,KAAK,EAAE,QAAQ,WAAW,GAAG,CAAC,GAAG,MAAM,IAAI,CAAC;AAAA,IAC3D;AAEA,UAAM,cAAc,KAAK,IAAI,cAAc,cAAc,CAAC;AAC1D,UAAM,eAAe,KAAK,IAAI,cAAc,cAAc,UAAU;AAEpE,UAAM,eAAe,cAAc;AACnC,UAAM,gBAAgB,eAAe,aAAa;AAElD,UAAM,QAA6B,CAAC;AAEpC,UAAM,KAAK,CAAC;AAEZ,QAAI,aAAc,OAAM,KAAK,IAAI;AAEjC,aAAS,IAAI,aAAa,KAAK,cAAc,KAAK;AAChD,YAAM,KAAK,CAAC;AAAA,IACd;AAEA,QAAI,cAAe,OAAM,KAAK,IAAI;AAElC,UAAM,KAAK,UAAU;AAErB,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,UAAU,aAAa,YAAY,CAAC;AACjD;;;AEJM,SAEI,KAFJ;AArCS,SAAR,WAA4B;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,GAAoB;AAClB,QAAM,aAAa,KAAK,KAAK,QAAQ,QAAQ;AAE7C,QAAM,kBAAkB,cAAc;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI,cAAc,EAAG,QAAO;AAE5B,QAAM,WAAW,CAAC,SAAiB;AACjC,QAAI,OAAO,KAAK,OAAO,WAAY;AACnC,aAAS,IAAI;AAAA,EACf;AAEA,QAAM,gBAAgB,CACpB,GACA,SACG;AACH,QAAI,SAAS,KAAM;AAEnB,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,eAAe;AACjB,eAAS,OAAO,IAAI,CAAC;AAAA,IACvB;AAAA,EACF;AAEA,SACE,oBAAC,SAAI,cAAW,cACd,+BAAC,QAAG,WAAU,cACZ;AAAA,wBAAC,QACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM,SAAS,cAAc,CAAC;AAAA,QACvC,UAAU,gBAAgB;AAAA,QAC3B;AAAA;AAAA,IAED,GACF;AAAA,IAEC,gBAAgB,IAAI,CAAC,MAAM,QAAQ;AAClC,UAAI,SAAS,MAAM;AACjB,eACE,oBAAC,QAAuB,WAAU,QAAO,mBAAhC,QAAQ,GAAG,EAEpB;AAAA,MAEJ;AAEA,aACE,oBAAC,QACC;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,gBAAgB,OAAO,WAAW;AAAA,UAC7C,SAAS,MAAM,SAAS,OAAO,IAAI,CAAC;AAAA,UACpC,WAAW,CAAC,MAAM,cAAc,GAAG,IAAI;AAAA,UACvC,gBAAc,gBAAgB,OAAO,SAAS;AAAA,UAC9C,cAAY,cAAc,IAAI;AAAA,UAE7B;AAAA;AAAA,MACH,KATO,IAUT;AAAA,IAEJ,CAAC;AAAA,IAED,oBAAC,QACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM,SAAS,cAAc,CAAC;AAAA,QACvC,UAAU,gBAAgB;AAAA,QAC3B;AAAA;AAAA,IAED,GACF;AAAA,KACF,GACF;AAEJ;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,31 +1,34 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-pagination-thami",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "1.0.1",
|
|
4
|
+
"description": "Production-ready React pagination component",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
8
|
-
"files": [
|
|
9
|
-
|
|
10
|
-
],
|
|
8
|
+
"files": ["dist"],
|
|
9
|
+
|
|
11
10
|
"scripts": {
|
|
12
|
-
"build
|
|
13
|
-
"build:js": "tsup src/index.ts",
|
|
11
|
+
"build:js": "tsup",
|
|
14
12
|
"build:types": "tsc --declaration --emitDeclarationOnly --outDir dist",
|
|
13
|
+
"build": "npm run build:js && npm run build:types",
|
|
15
14
|
"prepublishOnly": "npm run build"
|
|
16
15
|
},
|
|
16
|
+
|
|
17
17
|
"keywords": [
|
|
18
18
|
"react",
|
|
19
19
|
"pagination",
|
|
20
|
-
"
|
|
21
|
-
"
|
|
20
|
+
"ui",
|
|
21
|
+
"component"
|
|
22
22
|
],
|
|
23
|
+
|
|
23
24
|
"author": "thami",
|
|
24
25
|
"license": "MIT",
|
|
26
|
+
|
|
25
27
|
"peerDependencies": {
|
|
26
28
|
"react": ">=17",
|
|
27
29
|
"react-dom": ">=17"
|
|
28
30
|
},
|
|
31
|
+
|
|
29
32
|
"devDependencies": {
|
|
30
33
|
"typescript": "^5.0.0",
|
|
31
34
|
"tsup": "^8.0.0",
|