@starasia/pagination 1.0.3 → 1.0.4
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/pagination.es.js +26 -19
- package/dist/pagination.umd.js +17 -10
- package/package.json +1 -1
package/dist/pagination.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useMemo as
|
|
1
|
+
import { jsxs as v, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo as h } from "react";
|
|
3
3
|
const x = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
|
|
4
4
|
|
|
5
5
|
:root {
|
|
@@ -29,11 +29,11 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght
|
|
|
29
29
|
#f9fafb
|
|
30
30
|
);
|
|
31
31
|
/* brand color */
|
|
32
|
-
--starasia-ui-pagination-color-primary-blue: var(--starasia-ui-brand-primary-default);
|
|
33
|
-
--starasia-ui-pagination-color-secondary-blue: var(--starasia-ui-brand-primary-default);
|
|
34
|
-
--starasia-ui-pagination-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary);
|
|
35
|
-
--starasia-ui-pagination-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary);
|
|
36
|
-
--starasia-ui-pagination-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary);
|
|
32
|
+
--starasia-ui-pagination-color-primary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
|
|
33
|
+
--starasia-ui-pagination-color-secondary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
|
|
34
|
+
--starasia-ui-pagination-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary, rgba(144, 176, 218, 1));
|
|
35
|
+
--starasia-ui-pagination-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
|
|
36
|
+
--starasia-ui-pagination-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
|
|
37
37
|
|
|
38
38
|
/* border radius */
|
|
39
39
|
--starasia-ui-pagination-border-radius: var(--starasia-ui-radii-base, 4px);
|
|
@@ -66,10 +66,12 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght
|
|
|
66
66
|
display: flex;
|
|
67
67
|
box-sizing: border-box;
|
|
68
68
|
align-items: center;
|
|
69
|
-
|
|
69
|
+
justify-content: center;
|
|
70
|
+
border-radius: 8px !important;
|
|
71
|
+
height: 32px !important;
|
|
72
|
+
width: 32px !important;
|
|
70
73
|
font-size: var(--starasia-ui-pagination-font-size-sm);
|
|
71
74
|
font-family: "Montserrat";
|
|
72
|
-
text-align: center;
|
|
73
75
|
}
|
|
74
76
|
|
|
75
77
|
.starasia-pagination-item.starasia-pagination-item-responsive {
|
|
@@ -91,10 +93,15 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght
|
|
|
91
93
|
|
|
92
94
|
.starasia-pagination-item.starasia-pagination-selected {
|
|
93
95
|
background-color: var(--starasia-ui-pagination-color-quinary-blue);
|
|
94
|
-
color:
|
|
96
|
+
color: #ffffff !important;
|
|
95
97
|
font-weight: var(--starasia-ui-pagination-font-weight);
|
|
96
98
|
}
|
|
97
99
|
|
|
100
|
+
.starasia-pagination-selected {
|
|
101
|
+
background-color: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1)) !important;
|
|
102
|
+
border-radius: 8px !important;
|
|
103
|
+
}
|
|
104
|
+
|
|
98
105
|
.starasia-pagination-arrow::before {
|
|
99
106
|
position: relative;
|
|
100
107
|
/* top: 3pt; Uncomment this to lower the icons as requested in comments*/
|
|
@@ -140,33 +147,33 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght
|
|
|
140
147
|
// pageSize,
|
|
141
148
|
siblingCount: i = 1,
|
|
142
149
|
currentPage: s
|
|
143
|
-
}) =>
|
|
150
|
+
}) => h(() => {
|
|
144
151
|
const a = n;
|
|
145
152
|
if (i + 5 >= a)
|
|
146
153
|
return m(1, a);
|
|
147
154
|
const u = Math.max(s - i, 1), c = Math.min(
|
|
148
155
|
s + i,
|
|
149
156
|
a
|
|
150
|
-
), g = u > 2, r = c < a - 2, p = 1,
|
|
157
|
+
), g = u > 2, r = c < a - 2, p = 1, b = a;
|
|
151
158
|
if (!g && r) {
|
|
152
159
|
let l = 3 + 2 * i;
|
|
153
160
|
return [...m(1, l), d, a];
|
|
154
161
|
}
|
|
155
162
|
if (g && !r) {
|
|
156
|
-
let l = 3 + 2 * i,
|
|
163
|
+
let l = 3 + 2 * i, f = m(
|
|
157
164
|
a - l + 1,
|
|
158
165
|
a
|
|
159
166
|
);
|
|
160
|
-
return [p, d, ...
|
|
167
|
+
return [p, d, ...f];
|
|
161
168
|
}
|
|
162
169
|
if (g && r) {
|
|
163
170
|
let l = m(u, c);
|
|
164
|
-
return [p, d, ...l, d,
|
|
171
|
+
return [p, d, ...l, d, b];
|
|
165
172
|
}
|
|
166
|
-
}, [n, i, s]),
|
|
167
|
-
if (!document.getElementById(
|
|
173
|
+
}, [n, i, s]), y = "starasia-pagination-styles", k = (n) => {
|
|
174
|
+
if (!document.getElementById(y)) {
|
|
168
175
|
const i = document.createElement("style");
|
|
169
|
-
i.id =
|
|
176
|
+
i.id = y, i.textContent = n, document.head.appendChild(i);
|
|
170
177
|
}
|
|
171
178
|
};
|
|
172
179
|
k(x);
|
|
@@ -191,7 +198,7 @@ const N = ({
|
|
|
191
198
|
n(t - 1);
|
|
192
199
|
};
|
|
193
200
|
let g = e[e.length - 1];
|
|
194
|
-
return /* @__PURE__ */
|
|
201
|
+
return /* @__PURE__ */ v("ul", { className: "starasia-pagination-container", style: { padding: 0 }, children: [
|
|
195
202
|
/* @__PURE__ */ o(
|
|
196
203
|
"li",
|
|
197
204
|
{
|
package/dist/pagination.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(s,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],n):(s=typeof globalThis<"u"?globalThis:s||self,n(s.Pagination={},s.jsxRuntime,s.React))})(this,function(s,n,h){"use strict";const
|
|
1
|
+
(function(s,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],n):(s=typeof globalThis<"u"?globalThis:s||self,n(s.Pagination={},s.jsxRuntime,s.React))})(this,function(s,n,h){"use strict";const v=`@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
|
|
2
2
|
|
|
3
3
|
:root {
|
|
4
4
|
/* spacing */
|
|
@@ -27,11 +27,11 @@
|
|
|
27
27
|
#f9fafb
|
|
28
28
|
);
|
|
29
29
|
/* brand color */
|
|
30
|
-
--starasia-ui-pagination-color-primary-blue: var(--starasia-ui-brand-primary-default);
|
|
31
|
-
--starasia-ui-pagination-color-secondary-blue: var(--starasia-ui-brand-primary-default);
|
|
32
|
-
--starasia-ui-pagination-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary);
|
|
33
|
-
--starasia-ui-pagination-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary);
|
|
34
|
-
--starasia-ui-pagination-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary);
|
|
30
|
+
--starasia-ui-pagination-color-primary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
|
|
31
|
+
--starasia-ui-pagination-color-secondary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
|
|
32
|
+
--starasia-ui-pagination-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary, rgba(144, 176, 218, 1));
|
|
33
|
+
--starasia-ui-pagination-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
|
|
34
|
+
--starasia-ui-pagination-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
|
|
35
35
|
|
|
36
36
|
/* border radius */
|
|
37
37
|
--starasia-ui-pagination-border-radius: var(--starasia-ui-radii-base, 4px);
|
|
@@ -64,10 +64,12 @@
|
|
|
64
64
|
display: flex;
|
|
65
65
|
box-sizing: border-box;
|
|
66
66
|
align-items: center;
|
|
67
|
-
|
|
67
|
+
justify-content: center;
|
|
68
|
+
border-radius: 8px !important;
|
|
69
|
+
height: 32px !important;
|
|
70
|
+
width: 32px !important;
|
|
68
71
|
font-size: var(--starasia-ui-pagination-font-size-sm);
|
|
69
72
|
font-family: "Montserrat";
|
|
70
|
-
text-align: center;
|
|
71
73
|
}
|
|
72
74
|
|
|
73
75
|
.starasia-pagination-item.starasia-pagination-item-responsive {
|
|
@@ -89,10 +91,15 @@
|
|
|
89
91
|
|
|
90
92
|
.starasia-pagination-item.starasia-pagination-selected {
|
|
91
93
|
background-color: var(--starasia-ui-pagination-color-quinary-blue);
|
|
92
|
-
color:
|
|
94
|
+
color: #ffffff !important;
|
|
93
95
|
font-weight: var(--starasia-ui-pagination-font-weight);
|
|
94
96
|
}
|
|
95
97
|
|
|
98
|
+
.starasia-pagination-selected {
|
|
99
|
+
background-color: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1)) !important;
|
|
100
|
+
border-radius: 8px !important;
|
|
101
|
+
}
|
|
102
|
+
|
|
96
103
|
.starasia-pagination-arrow::before {
|
|
97
104
|
position: relative;
|
|
98
105
|
/* top: 3pt; Uncomment this to lower the icons as requested in comments*/
|
|
@@ -130,4 +137,4 @@
|
|
|
130
137
|
background-color: transparent;
|
|
131
138
|
cursor: default;
|
|
132
139
|
}
|
|
133
|
-
`,
|
|
140
|
+
`,p="...",u=(t,i)=>{let e=i-t+1;return Array.from({length:e},(r,a)=>a+t)},x=({totalCount:t,siblingCount:i=1,currentPage:e})=>h.useMemo(()=>{const a=t;if(i+5>=a)return u(1,a);const m=Math.max(e-i,1),f=Math.min(e+i,a),l=m>2,o=f<a-2,d=1,S=a;if(!l&&o){let c=3+2*i;return[...u(1,c),p,a]}if(l&&!o){let c=3+2*i,b=u(a-c+1,a);return[d,p,...b]}if(l&&o){let c=u(m,f);return[d,p,...c,p,S]}},[t,i,e]),y="starasia-pagination-styles";(t=>{if(!document.getElementById(y)){const i=document.createElement("style");i.id=y,i.textContent=t,document.head.appendChild(i)}})(v);const w=({onPageChange:t,totalCount:i,siblingCount:e=1,currentPage:r,size:a="md"})=>{const g=x({currentPage:r,totalCount:i,siblingCount:e});if(r===0||g.length<2)return null;const m=()=>{t(r+1)},f=()=>{t(r-1)};let l=g[g.length-1];return n.jsxs("ul",{className:"starasia-pagination-container",style:{padding:0},children:[n.jsx("li",{className:`starasia-pagination-item ${r===1?"starasia-pagination-disabled":null} ${a==="sm"?"starasia-pagination-item-responsive":""}`,onClick:f,children:n.jsx("div",{className:"starasia-pagination-arrow starasia-pagination-left"})}),g.map((o,d)=>o===p?n.jsx("li",{className:`starasia-pagination-item starasia-pagination-dots ${a==="sm"?"starasia-pagination-item-responsive":""}`,children:"…"},d):n.jsx("li",{className:`starasia-pagination-item ${o===r?"starasia-pagination-selected":null} ${a==="sm"?"starasia-pagination-item-responsive":""}`,onClick:()=>t(Number(o)),children:o},d)),n.jsx("li",{className:`starasia-pagination-item ${r===l?"starasia-pagination-disabled":null} ${a==="sm"?"starasia-pagination-item-responsive":""}`,onClick:m,children:n.jsx("div",{className:"starasia-pagination-arrow starasia-pagination-right"})})]})};s.Pagination=w,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
|