@ichaingo/pagination 1.2.2 → 1.2.3
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/index.d.ts +3 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +19 -18
- package/package.json +2 -2
- package/src/index.tsx +4 -2
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as React from "react";
|
|
1
2
|
interface CustomPaginationProps {
|
|
2
3
|
className?: string;
|
|
3
4
|
total: number;
|
|
@@ -7,7 +8,8 @@ interface CustomPaginationProps {
|
|
|
7
8
|
layout?: ('prev' | 'page' | 'next' | 'ellipsis' | 'sizes' | 'total')[];
|
|
8
9
|
onPageChange?: (page: number) => void;
|
|
9
10
|
onPageSizeChange?: (pageSize: number) => void;
|
|
11
|
+
totalLabel?: React.ReactNode;
|
|
10
12
|
}
|
|
11
|
-
export default function CustomPagination({ className, total: initialTotal, pageSize, pageSizeOptions, currentPage, layout, onPageChange, onPageSizeChange, }: CustomPaginationProps): import("react/jsx-runtime").JSX.Element | null;
|
|
13
|
+
export default function CustomPagination({ className, total: initialTotal, pageSize, pageSizeOptions, currentPage, layout, onPageChange, onPageSizeChange, totalLabel }: CustomPaginationProps): import("react/jsx-runtime").JSX.Element | null;
|
|
12
14
|
export {};
|
|
13
15
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmB/B,UAAU,qBAAqB;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,MAAM,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC,EAAE,CAAC;IACvE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,SAAS,EACT,KAAK,EAAE,YAAY,EACnB,QAAQ,EACR,eAA8B,EAC9B,WAAW,EACX,MAA+D,EAC/D,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACX,EAAE,qBAAqB,kDA4KvB"}
|
package/dist/index.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as i, jsxs as d } from "react/jsx-runtime";
|
|
3
|
-
import * as
|
|
4
|
-
import { Pagination as
|
|
5
|
-
import { Select as
|
|
3
|
+
import * as z from "react";
|
|
4
|
+
import { Pagination as j, PaginationContent as V, PaginationItem as s, PaginationLink as a, PaginationEllipsis as v } from "@ichaingo/ui/pagination";
|
|
5
|
+
import { Select as S, SelectTrigger as L, SelectValue as I, SelectContent as R, SelectItem as E } from "@ichaingo/ui/select";
|
|
6
6
|
import { twMerge as m } from "tailwind-merge";
|
|
7
|
-
import { useTranslations as
|
|
8
|
-
import { ChevronRight as
|
|
7
|
+
import { useTranslations as F } from "next-intl";
|
|
8
|
+
import { ChevronRight as G, ChevronLeft as T } from "lucide-react";
|
|
9
9
|
const N = 1e4;
|
|
10
|
-
function
|
|
10
|
+
function K({
|
|
11
11
|
className: k,
|
|
12
12
|
total: p,
|
|
13
13
|
pageSize: x,
|
|
@@ -15,9 +15,10 @@ function J({
|
|
|
15
15
|
currentPage: r,
|
|
16
16
|
layout: u = ["prev", "page", "next", "ellipsis", "sizes", "total"],
|
|
17
17
|
onPageChange: t,
|
|
18
|
-
onPageSizeChange: h
|
|
18
|
+
onPageSizeChange: h,
|
|
19
|
+
totalLabel: M
|
|
19
20
|
}) {
|
|
20
|
-
const f =
|
|
21
|
+
const f = F(), w = Math.min(p, N), l = Math.ceil(w / x), y = () => {
|
|
21
22
|
const e = [];
|
|
22
23
|
let o = Math.max(1, r - Math.floor(1.5));
|
|
23
24
|
const n = Math.min(l, o + 3 - 1);
|
|
@@ -69,8 +70,8 @@ function J({
|
|
|
69
70
|
) }, "last")
|
|
70
71
|
)), e;
|
|
71
72
|
};
|
|
72
|
-
return w <= b[0] ? null : /* @__PURE__ */ i(
|
|
73
|
-
u.includes("total") && /* @__PURE__ */ i(s, { className: "mr-auto order-1 flex-1 overflow-hidden md:overflow-visible md:order-0 ", children: /* @__PURE__ */ d("span", { className: "text-sm block text-subtitle w-full truncate", children: [
|
|
73
|
+
return w <= b[0] ? null : /* @__PURE__ */ i(j, { className: m("w-full max-w-[100vw] mt-3", k), children: /* @__PURE__ */ d(V, { className: "w-full flex flex-row items-center justify-between flex-wrap", children: [
|
|
74
|
+
u.includes("total") && /* @__PURE__ */ i(s, { className: "mr-auto order-1 flex-1 overflow-hidden md:overflow-visible md:order-0 ", children: M || /* @__PURE__ */ d("span", { className: "text-sm block text-subtitle w-full truncate", children: [
|
|
74
75
|
f("common.pagination.total"),
|
|
75
76
|
" ",
|
|
76
77
|
p,
|
|
@@ -91,11 +92,11 @@ function J({
|
|
|
91
92
|
r === 1 ? "pointer-events-none opacity-50" : ""
|
|
92
93
|
),
|
|
93
94
|
onClick: () => t == null ? void 0 : t(Math.max(1, r - 1)),
|
|
94
|
-
children: /* @__PURE__ */ i(
|
|
95
|
+
children: /* @__PURE__ */ i(T, { size: 16 })
|
|
95
96
|
}
|
|
96
97
|
) }, "prev");
|
|
97
98
|
case "page":
|
|
98
|
-
return /* @__PURE__ */ i(
|
|
99
|
+
return /* @__PURE__ */ i(z.Fragment, { children: y() }, "page");
|
|
99
100
|
case "next":
|
|
100
101
|
return /* @__PURE__ */ i(s, { children: /* @__PURE__ */ i(
|
|
101
102
|
a,
|
|
@@ -106,7 +107,7 @@ function J({
|
|
|
106
107
|
r === l ? "pointer-events-none opacity-50" : ""
|
|
107
108
|
),
|
|
108
109
|
onClick: () => t == null ? void 0 : t(Math.min(l, r + 1)),
|
|
109
|
-
children: /* @__PURE__ */ i(
|
|
110
|
+
children: /* @__PURE__ */ i(G, { size: 16 })
|
|
110
111
|
}
|
|
111
112
|
) }, "next");
|
|
112
113
|
default:
|
|
@@ -116,20 +117,20 @@ function J({
|
|
|
116
117
|
u.includes("sizes") && h && /* @__PURE__ */ d(s, { className: "gap-2 flex shrink-0 order-1 lg:order-0 items-center py-0.5 flex-1 justify-end", children: [
|
|
117
118
|
/* @__PURE__ */ i("span", { className: "text-sm text-muted-foreground", children: f("common.pagination.sizeLabel") }),
|
|
118
119
|
/* @__PURE__ */ d(
|
|
119
|
-
|
|
120
|
+
S,
|
|
120
121
|
{
|
|
121
122
|
value: x.toString(),
|
|
122
123
|
onValueChange: (e) => h(Number(e)),
|
|
123
124
|
children: [
|
|
124
125
|
/* @__PURE__ */ i(
|
|
125
|
-
|
|
126
|
+
L,
|
|
126
127
|
{
|
|
127
128
|
size: "sm",
|
|
128
129
|
className: " border-1 border-input w-[70px] focus:ring-0 text-black bg-background focus-visible:outline-0 focus-ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-input py-1",
|
|
129
|
-
children: /* @__PURE__ */ i(
|
|
130
|
+
children: /* @__PURE__ */ i(I, {})
|
|
130
131
|
}
|
|
131
132
|
),
|
|
132
|
-
/* @__PURE__ */ i(
|
|
133
|
+
/* @__PURE__ */ i(R, { className: "w-20 bg-module", children: b.map((e) => /* @__PURE__ */ i(E, { value: e.toString(), className: "text-sm px-2 py-1 cursor-pointer hover:bg-background", children: e }, e)) })
|
|
133
134
|
]
|
|
134
135
|
}
|
|
135
136
|
)
|
|
@@ -137,5 +138,5 @@ function J({
|
|
|
137
138
|
] }) });
|
|
138
139
|
}
|
|
139
140
|
export {
|
|
140
|
-
|
|
141
|
+
K as default
|
|
141
142
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ichaingo/pagination",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"next-intl": ">=4",
|
|
20
20
|
"tailwind-merge": "^2.5.5",
|
|
21
21
|
"lucide-react": "^0.539.0",
|
|
22
|
-
"@ichaingo/ui": "1.2.
|
|
22
|
+
"@ichaingo/ui": "1.2.3"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {},
|
|
25
25
|
"devDependencies": {
|
package/src/index.tsx
CHANGED
|
@@ -27,6 +27,7 @@ interface CustomPaginationProps {
|
|
|
27
27
|
layout?: ('prev' | 'page' | 'next' | 'ellipsis' | 'sizes' | 'total')[];
|
|
28
28
|
onPageChange?: (page: number) => void;
|
|
29
29
|
onPageSizeChange?: (pageSize: number) => void;
|
|
30
|
+
totalLabel?: React.ReactNode;
|
|
30
31
|
}
|
|
31
32
|
const limit = 10000
|
|
32
33
|
export default function CustomPagination({
|
|
@@ -38,6 +39,7 @@ export default function CustomPagination({
|
|
|
38
39
|
layout = ['prev', 'page', 'next', 'ellipsis', 'sizes', 'total'],
|
|
39
40
|
onPageChange,
|
|
40
41
|
onPageSizeChange,
|
|
42
|
+
totalLabel
|
|
41
43
|
}: CustomPaginationProps) {
|
|
42
44
|
const t = useTranslations()
|
|
43
45
|
const total = Math.min(initialTotal, limit)
|
|
@@ -137,10 +139,10 @@ export default function CustomPagination({
|
|
|
137
139
|
<PaginationContent className="w-full flex flex-row items-center justify-between flex-wrap">
|
|
138
140
|
{layout.includes('total') && (
|
|
139
141
|
<PaginationItem key="total" className="mr-auto order-1 flex-1 overflow-hidden md:overflow-visible md:order-0 ">
|
|
140
|
-
<span className="text-sm block text-subtitle w-full truncate">
|
|
142
|
+
{ totalLabel || <span className="text-sm block text-subtitle w-full truncate">
|
|
141
143
|
{t('common.pagination.total')} {initialTotal} {t('common.pagination.item')}
|
|
142
144
|
{initialTotal > limit ? `${t('common.pagination.totalTip')}` : ''}
|
|
143
|
-
</span>
|
|
145
|
+
</span>}
|
|
144
146
|
</PaginationItem>
|
|
145
147
|
)}
|
|
146
148
|
<div className="w-full md:w-auto md:flex-2 flex items-center justify-center">
|