@starasia/pagination 1.0.4 → 2.0.0

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.
Files changed (3) hide show
  1. package/dist/pagination.es.js +91 -130
  2. package/dist/pagination.umd.js +31 -70
  3. package/package.json +1 -1
package/dist/pagination.es.js CHANGED
@@ -1,55 +1,16 @@
1
- import { jsxs as v, jsx as o } from "react/jsx-runtime";
2
- import { useMemo as h } from "react";
3
- const x = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
1
+ import { jsxs as b, jsx as r } from "react/jsx-runtime";
2
+ import { useMemo as u } from "react";
3
+ const y = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
4
4
 
5
5
  :root {
6
- /* spacing */
7
- --starasia-ui-pagination-spacing-xs: var(--starasia-ui-spacing-xs, 4px);
8
- --starasia-ui-pagination-spacing-sm: var(--starasia-ui-spacing-sm, 8px);
9
-
10
- /* color */
11
- --starasia-ui-pagination-color-primary-gray: var(
12
- --starasia-ui-color-gray-700,
13
- #374151
14
- );
15
- --starasia-ui-pagination-color-secondary-gray: var(
16
- --starasia-ui-color-gray-500,
17
- #6b7280
18
- );
19
- --starasia-ui-pagination-color-tertiary-gray: var(
20
- --starasia-ui-color-gray-300,
21
- #d1d5db
22
- );
23
- --starasia-ui-pagination-color-quaternary-gray: var(
24
- --starasia-ui-color-gray-100,
25
- #f3f4f6
26
- );
27
- --starasia-ui-pagination-color-quinary-gray: var(
28
- --starasia-ui-color-gray-50,
29
- #f9fafb
30
- );
31
- /* brand color */
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
-
38
- /* border radius */
39
- --starasia-ui-pagination-border-radius: var(--starasia-ui-radii-base, 4px);
40
-
41
- /* font size */
42
- --starasia-ui-pagination-font-size-xs: var(--starasia-ui-fontSizes-sm, 12px);
43
- --starasia-ui-pagination-font-size-sm: var(--starasia-ui-fontSizes-md, 14px);
44
-
45
- /* font weight */
46
- --starasia-ui-pagination-font-weight: var(
47
- --starasia-ui-fontWeights-medium,
48
- 400
49
- );
50
-
51
- /* border widht */
52
- --starasia-ui-pagination-border-width: var(--starasia-ui-border, 1px);
6
+ --sa-pagination-text: var(--sa-color-gray-700, #6b6e76);
7
+ --sa-pagination-text-muted: var(--sa-color-gray-500, #8c8f97);
8
+ --sa-pagination-divider: var(--sa-color-gray-300, #dddee1);
9
+ --sa-pagination-bg-hover: var(--sa-color-gray-100, #f8f8f8);
10
+ --sa-pagination-bg-selected: var(--sa-color-brand-50, #e6edf6);
11
+ --sa-pagination-color-selected: var(--sa-background-primary, #ffffff);
12
+ --sa-pagination-bg-active: var(--sa-background-brand, #04254f);
13
+ --sa-pagination-radius: var(--sa-radii-base, 0.25rem);
53
14
  }
54
15
 
55
16
  .starasia-pagination-container {
@@ -58,11 +19,11 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght
58
19
  }
59
20
 
60
21
  .starasia-pagination-item {
61
- padding: var(--starasia-ui-pagination-spacing-xs)
62
- var(--starasia-ui-pagination-spacing-sm);
22
+ padding: var(--sa-spacing-xs, 4px)
23
+ var(--sa-spacing-sm, 8px);
63
24
  text-align: center;
64
- margin: auto var(--starasia-ui-pagination-spacing-xs);
65
- color: var(--starasia-ui-pagination-color-primary-gray);
25
+ margin: auto var(--sa-spacing-xs, 4px);
26
+ color: var(--sa-pagination-text);
66
27
  display: flex;
67
28
  box-sizing: border-box;
68
29
  align-items: center;
@@ -70,15 +31,15 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght
70
31
  border-radius: 8px !important;
71
32
  height: 32px !important;
72
33
  width: 32px !important;
73
- font-size: var(--starasia-ui-pagination-font-size-sm);
34
+ font-size: var(--sa-font-size-md, 14px);
74
35
  font-family: "Montserrat";
75
36
  }
76
37
 
77
38
  .starasia-pagination-item.starasia-pagination-item-responsive {
78
39
  margin: auto 0;
79
- font-size: var(--starasia-ui-pagination-font-size-xs);
80
- padding: var(--starasia-ui-pagination-spacing-xs)
81
- var(--starasia-ui-pagination-spacing-sm);
40
+ font-size: var(--sa-font-size-sm, 12px);
41
+ padding: var(--sa-spacing-xs, 4px)
42
+ var(--sa-spacing-sm, 8px);
82
43
  }
83
44
 
84
45
  .starasia-pagination-item.starasia-pagination-dots:hover {
@@ -87,18 +48,18 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght
87
48
  }
88
49
 
89
50
  .starasia-pagination-item:hover {
90
- background-color: var(--starasia-ui-pagination-color-quaternary-gray);
51
+ background-color: var(--sa-pagination-bg-hover);
91
52
  cursor: pointer;
92
53
  }
93
54
 
94
55
  .starasia-pagination-item.starasia-pagination-selected {
95
- background-color: var(--starasia-ui-pagination-color-quinary-blue);
96
- color: #ffffff !important;
97
- font-weight: var(--starasia-ui-pagination-font-weight);
56
+ background-color: var(--sa-pagination-bg-selected);
57
+ color: var(--sa-pagination-color-selected) !important;
58
+ font-weight: var(--sa-font-weight-medium, 400);
98
59
  }
99
60
 
100
61
  .starasia-pagination-selected {
101
- background-color: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1)) !important;
62
+ background-color: var(--sa-pagination-bg-active) !important;
102
63
  border-radius: 8px !important;
103
64
  }
104
65
 
@@ -110,10 +71,10 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght
110
71
  display: inline-block;
111
72
  width: 6px;
112
73
  height: 6px;
113
- border-right: var(--starasia-ui-pagination-border-width) solid
114
- var(--starasia-ui-pagination-color-primary-gray);
115
- border-top: var(--starasia-ui-pagination-border-width) solid
116
- var(--starasia-ui-pagination-color-primary-gray);
74
+ border-right: var(--sa-border, 1px) solid
75
+ var(--sa-pagination-text);
76
+ border-top: var(--sa-border, 1px) solid
77
+ var(--sa-pagination-text);
117
78
  }
118
79
 
119
80
  .starasia-pagination-arrow.starasia-pagination-left {
@@ -130,105 +91,105 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght
130
91
 
131
92
  .starasia-pagination-item.starasia-pagination-disabled
132
93
  .starasia-pagination-arrow::before {
133
- border-right: var(--starasia-ui-pagination-border-width) solid
134
- var(--starasia-ui-pagination-color-tertiary-gray);
135
- border-top: var(--starasia-ui-pagination-border-width) solid
136
- var(--starasia-ui-pagination-color-tertiary-gray);
94
+ border-right: var(--sa-border, 1px) solid
95
+ var(--sa-pagination-divider);
96
+ border-top: var(--sa-border, 1px) solid
97
+ var(--sa-pagination-divider);
137
98
  }
138
99
  .starasia-pagination-item.starasia-pagination-disabled:hover {
139
100
  background-color: transparent;
140
101
  cursor: default;
141
102
  }
142
- `, d = "...", m = (n, i) => {
143
- let s = i - n + 1;
144
- return Array.from({ length: s }, (t, a) => a + n);
103
+ `, d = "...", f = (t, n) => {
104
+ let o = n - t + 1;
105
+ return Array.from({ length: o }, (i, a) => a + t);
145
106
  }, w = ({
146
- totalCount: n,
107
+ totalCount: t,
147
108
  // pageSize,
148
- siblingCount: i = 1,
149
- currentPage: s
150
- }) => h(() => {
151
- const a = n;
152
- if (i + 5 >= a)
153
- return m(1, a);
154
- const u = Math.max(s - i, 1), c = Math.min(
155
- s + i,
109
+ siblingCount: n = 1,
110
+ currentPage: o
111
+ }) => u(() => {
112
+ const a = t;
113
+ if (n + 5 >= a)
114
+ return f(1, a);
115
+ const c = Math.max(o - n, 1), m = Math.min(
116
+ o + n,
156
117
  a
157
- ), g = u > 2, r = c < a - 2, p = 1, b = a;
158
- if (!g && r) {
159
- let l = 3 + 2 * i;
160
- return [...m(1, l), d, a];
118
+ ), p = c > 2, s = m < a - 2, l = 1, x = a;
119
+ if (!p && s) {
120
+ let g = 3 + 2 * n;
121
+ return [...f(1, g), d, a];
161
122
  }
162
- if (g && !r) {
163
- let l = 3 + 2 * i, f = m(
164
- a - l + 1,
123
+ if (p && !s) {
124
+ let g = 3 + 2 * n, v = f(
125
+ a - g + 1,
165
126
  a
166
127
  );
167
- return [p, d, ...f];
128
+ return [l, d, ...v];
168
129
  }
169
- if (g && r) {
170
- let l = m(u, c);
171
- return [p, d, ...l, d, b];
130
+ if (p && s) {
131
+ let g = f(c, m);
132
+ return [l, d, ...g, d, x];
172
133
  }
173
- }, [n, i, s]), y = "starasia-pagination-styles", k = (n) => {
174
- if (!document.getElementById(y)) {
175
- const i = document.createElement("style");
176
- i.id = y, i.textContent = n, document.head.appendChild(i);
134
+ }, [t, n, o]), h = "starasia-pagination-styles", k = (t) => {
135
+ if (!document.getElementById(h)) {
136
+ const n = document.createElement("style");
137
+ n.id = h, n.textContent = t, document.head.appendChild(n);
177
138
  }
178
139
  };
179
- k(x);
180
- const N = ({
181
- onPageChange: n,
182
- totalCount: i,
183
- siblingCount: s = 1,
184
- currentPage: t,
140
+ k(y);
141
+ const R = ({
142
+ onPageChange: t,
143
+ totalCount: n,
144
+ siblingCount: o = 1,
145
+ currentPage: i,
185
146
  size: a = "md"
186
147
  }) => {
187
148
  const e = w({
188
- currentPage: t,
189
- totalCount: i,
190
- siblingCount: s
149
+ currentPage: i,
150
+ totalCount: n,
151
+ siblingCount: o
191
152
  // pageSize
192
153
  });
193
- if (t === 0 || e.length < 2)
154
+ if (i === 0 || e.length < 2)
194
155
  return null;
195
- const u = () => {
196
- n(t + 1);
197
- }, c = () => {
198
- n(t - 1);
156
+ const c = () => {
157
+ t(i + 1);
158
+ }, m = () => {
159
+ t(i - 1);
199
160
  };
200
- let g = e[e.length - 1];
201
- return /* @__PURE__ */ v("ul", { className: "starasia-pagination-container", style: { padding: 0 }, children: [
202
- /* @__PURE__ */ o(
161
+ let p = e[e.length - 1];
162
+ return /* @__PURE__ */ b("ul", { className: "starasia-pagination-container", style: { padding: 0 }, children: [
163
+ /* @__PURE__ */ r(
203
164
  "li",
204
165
  {
205
- className: `starasia-pagination-item ${t === 1 ? "starasia-pagination-disabled" : null} ${a === "sm" ? "starasia-pagination-item-responsive" : ""}`,
206
- onClick: c,
207
- children: /* @__PURE__ */ o("div", { className: "starasia-pagination-arrow starasia-pagination-left" })
166
+ className: `starasia-pagination-item ${i === 1 ? "starasia-pagination-disabled" : null} ${a === "sm" ? "starasia-pagination-item-responsive" : ""}`,
167
+ onClick: m,
168
+ children: /* @__PURE__ */ r("div", { className: "starasia-pagination-arrow starasia-pagination-left" })
208
169
  }
209
170
  ),
210
- e.map((r, p) => r === d ? /* @__PURE__ */ o(
171
+ e.map((s, l) => s === d ? /* @__PURE__ */ r(
211
172
  "li",
212
173
  {
213
174
  className: `starasia-pagination-item starasia-pagination-dots ${a === "sm" ? "starasia-pagination-item-responsive" : ""}`,
214
175
  children: "…"
215
176
  },
216
- p
217
- ) : /* @__PURE__ */ o(
177
+ l
178
+ ) : /* @__PURE__ */ r(
218
179
  "li",
219
180
  {
220
- className: `starasia-pagination-item ${r === t ? "starasia-pagination-selected" : null} ${a === "sm" ? "starasia-pagination-item-responsive" : ""}`,
221
- onClick: () => n(Number(r)),
222
- children: r
181
+ className: `starasia-pagination-item ${s === i ? "starasia-pagination-selected" : null} ${a === "sm" ? "starasia-pagination-item-responsive" : ""}`,
182
+ onClick: () => t(Number(s)),
183
+ children: s
223
184
  },
224
- p
185
+ l
225
186
  )),
226
- /* @__PURE__ */ o(
187
+ /* @__PURE__ */ r(
227
188
  "li",
228
189
  {
229
- className: `starasia-pagination-item ${t === g ? "starasia-pagination-disabled" : null} ${a === "sm" ? "starasia-pagination-item-responsive" : ""}`,
230
- onClick: u,
231
- children: /* @__PURE__ */ o(
190
+ className: `starasia-pagination-item ${i === p ? "starasia-pagination-disabled" : null} ${a === "sm" ? "starasia-pagination-item-responsive" : ""}`,
191
+ onClick: c,
192
+ children: /* @__PURE__ */ r(
232
193
  "div",
233
194
  {
234
195
  className: "starasia-pagination-arrow starasia-pagination-right"
@@ -239,5 +200,5 @@ const N = ({
239
200
  ] });
240
201
  };
241
202
  export {
242
- N as Pagination
203
+ R as Pagination
243
204
  };
package/dist/pagination.umd.js CHANGED
@@ -1,53 +1,14 @@
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");
1
+ (function(e,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],t):(e=typeof globalThis<"u"?globalThis:e||self,t(e.Pagination={},e.jsxRuntime,e.React))})(this,function(e,t,x){"use strict";const b=`@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
2
2
 
3
3
  :root {
4
- /* spacing */
5
- --starasia-ui-pagination-spacing-xs: var(--starasia-ui-spacing-xs, 4px);
6
- --starasia-ui-pagination-spacing-sm: var(--starasia-ui-spacing-sm, 8px);
7
-
8
- /* color */
9
- --starasia-ui-pagination-color-primary-gray: var(
10
- --starasia-ui-color-gray-700,
11
- #374151
12
- );
13
- --starasia-ui-pagination-color-secondary-gray: var(
14
- --starasia-ui-color-gray-500,
15
- #6b7280
16
- );
17
- --starasia-ui-pagination-color-tertiary-gray: var(
18
- --starasia-ui-color-gray-300,
19
- #d1d5db
20
- );
21
- --starasia-ui-pagination-color-quaternary-gray: var(
22
- --starasia-ui-color-gray-100,
23
- #f3f4f6
24
- );
25
- --starasia-ui-pagination-color-quinary-gray: var(
26
- --starasia-ui-color-gray-50,
27
- #f9fafb
28
- );
29
- /* brand color */
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
-
36
- /* border radius */
37
- --starasia-ui-pagination-border-radius: var(--starasia-ui-radii-base, 4px);
38
-
39
- /* font size */
40
- --starasia-ui-pagination-font-size-xs: var(--starasia-ui-fontSizes-sm, 12px);
41
- --starasia-ui-pagination-font-size-sm: var(--starasia-ui-fontSizes-md, 14px);
42
-
43
- /* font weight */
44
- --starasia-ui-pagination-font-weight: var(
45
- --starasia-ui-fontWeights-medium,
46
- 400
47
- );
48
-
49
- /* border widht */
50
- --starasia-ui-pagination-border-width: var(--starasia-ui-border, 1px);
4
+ --sa-pagination-text: var(--sa-color-gray-700, #6b6e76);
5
+ --sa-pagination-text-muted: var(--sa-color-gray-500, #8c8f97);
6
+ --sa-pagination-divider: var(--sa-color-gray-300, #dddee1);
7
+ --sa-pagination-bg-hover: var(--sa-color-gray-100, #f8f8f8);
8
+ --sa-pagination-bg-selected: var(--sa-color-brand-50, #e6edf6);
9
+ --sa-pagination-color-selected: var(--sa-background-primary, #ffffff);
10
+ --sa-pagination-bg-active: var(--sa-background-brand, #04254f);
11
+ --sa-pagination-radius: var(--sa-radii-base, 0.25rem);
51
12
  }
52
13
 
53
14
  .starasia-pagination-container {
@@ -56,11 +17,11 @@
56
17
  }
57
18
 
58
19
  .starasia-pagination-item {
59
- padding: var(--starasia-ui-pagination-spacing-xs)
60
- var(--starasia-ui-pagination-spacing-sm);
20
+ padding: var(--sa-spacing-xs, 4px)
21
+ var(--sa-spacing-sm, 8px);
61
22
  text-align: center;
62
- margin: auto var(--starasia-ui-pagination-spacing-xs);
63
- color: var(--starasia-ui-pagination-color-primary-gray);
23
+ margin: auto var(--sa-spacing-xs, 4px);
24
+ color: var(--sa-pagination-text);
64
25
  display: flex;
65
26
  box-sizing: border-box;
66
27
  align-items: center;
@@ -68,15 +29,15 @@
68
29
  border-radius: 8px !important;
69
30
  height: 32px !important;
70
31
  width: 32px !important;
71
- font-size: var(--starasia-ui-pagination-font-size-sm);
32
+ font-size: var(--sa-font-size-md, 14px);
72
33
  font-family: "Montserrat";
73
34
  }
74
35
 
75
36
  .starasia-pagination-item.starasia-pagination-item-responsive {
76
37
  margin: auto 0;
77
- font-size: var(--starasia-ui-pagination-font-size-xs);
78
- padding: var(--starasia-ui-pagination-spacing-xs)
79
- var(--starasia-ui-pagination-spacing-sm);
38
+ font-size: var(--sa-font-size-sm, 12px);
39
+ padding: var(--sa-spacing-xs, 4px)
40
+ var(--sa-spacing-sm, 8px);
80
41
  }
81
42
 
82
43
  .starasia-pagination-item.starasia-pagination-dots:hover {
@@ -85,18 +46,18 @@
85
46
  }
86
47
 
87
48
  .starasia-pagination-item:hover {
88
- background-color: var(--starasia-ui-pagination-color-quaternary-gray);
49
+ background-color: var(--sa-pagination-bg-hover);
89
50
  cursor: pointer;
90
51
  }
91
52
 
92
53
  .starasia-pagination-item.starasia-pagination-selected {
93
- background-color: var(--starasia-ui-pagination-color-quinary-blue);
94
- color: #ffffff !important;
95
- font-weight: var(--starasia-ui-pagination-font-weight);
54
+ background-color: var(--sa-pagination-bg-selected);
55
+ color: var(--sa-pagination-color-selected) !important;
56
+ font-weight: var(--sa-font-weight-medium, 400);
96
57
  }
97
58
 
98
59
  .starasia-pagination-selected {
99
- background-color: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1)) !important;
60
+ background-color: var(--sa-pagination-bg-active) !important;
100
61
  border-radius: 8px !important;
101
62
  }
102
63
 
@@ -108,10 +69,10 @@
108
69
  display: inline-block;
109
70
  width: 6px;
110
71
  height: 6px;
111
- border-right: var(--starasia-ui-pagination-border-width) solid
112
- var(--starasia-ui-pagination-color-primary-gray);
113
- border-top: var(--starasia-ui-pagination-border-width) solid
114
- var(--starasia-ui-pagination-color-primary-gray);
72
+ border-right: var(--sa-border, 1px) solid
73
+ var(--sa-pagination-text);
74
+ border-top: var(--sa-border, 1px) solid
75
+ var(--sa-pagination-text);
115
76
  }
116
77
 
117
78
  .starasia-pagination-arrow.starasia-pagination-left {
@@ -128,13 +89,13 @@
128
89
 
129
90
  .starasia-pagination-item.starasia-pagination-disabled
130
91
  .starasia-pagination-arrow::before {
131
- border-right: var(--starasia-ui-pagination-border-width) solid
132
- var(--starasia-ui-pagination-color-tertiary-gray);
133
- border-top: var(--starasia-ui-pagination-border-width) solid
134
- var(--starasia-ui-pagination-color-tertiary-gray);
92
+ border-right: var(--sa-border, 1px) solid
93
+ var(--sa-pagination-divider);
94
+ border-top: var(--sa-border, 1px) solid
95
+ var(--sa-pagination-divider);
135
96
  }
136
97
  .starasia-pagination-item.starasia-pagination-disabled:hover {
137
98
  background-color: transparent;
138
99
  cursor: default;
139
100
  }
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"})});
101
+ `,p="...",m=(i,n)=>{let r=n-i+1;return Array.from({length:r},(s,a)=>a+i)},y=({totalCount:i,siblingCount:n=1,currentPage:r})=>x.useMemo(()=>{const a=i;if(n+5>=a)return m(1,a);const f=Math.max(r-n,1),v=Math.min(r+n,a),d=f>2,o=v<a-2,g=1,k=a;if(!d&&o){let c=3+2*n;return[...m(1,c),p,a]}if(d&&!o){let c=3+2*n,u=m(a-c+1,a);return[g,p,...u]}if(d&&o){let c=m(f,v);return[g,p,...c,p,k]}},[i,n,r]),h="starasia-pagination-styles";(i=>{if(!document.getElementById(h)){const n=document.createElement("style");n.id=h,n.textContent=i,document.head.appendChild(n)}})(b);const w=({onPageChange:i,totalCount:n,siblingCount:r=1,currentPage:s,size:a="md"})=>{const l=y({currentPage:s,totalCount:n,siblingCount:r});if(s===0||l.length<2)return null;const f=()=>{i(s+1)},v=()=>{i(s-1)};let d=l[l.length-1];return t.jsxs("ul",{className:"starasia-pagination-container",style:{padding:0},children:[t.jsx("li",{className:`starasia-pagination-item ${s===1?"starasia-pagination-disabled":null} ${a==="sm"?"starasia-pagination-item-responsive":""}`,onClick:v,children:t.jsx("div",{className:"starasia-pagination-arrow starasia-pagination-left"})}),l.map((o,g)=>o===p?t.jsx("li",{className:`starasia-pagination-item starasia-pagination-dots ${a==="sm"?"starasia-pagination-item-responsive":""}`,children:"…"},g):t.jsx("li",{className:`starasia-pagination-item ${o===s?"starasia-pagination-selected":null} ${a==="sm"?"starasia-pagination-item-responsive":""}`,onClick:()=>i(Number(o)),children:o},g)),t.jsx("li",{className:`starasia-pagination-item ${s===d?"starasia-pagination-disabled":null} ${a==="sm"?"starasia-pagination-item-responsive":""}`,onClick:f,children:t.jsx("div",{className:"starasia-pagination-arrow starasia-pagination-right"})})]})};e.Pagination=w,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@starasia/pagination",
3
- "version": "1.0.4",
3
+ "version": "2.0.0",
4
4
  "description": "pagination component for starasia UI",
5
5
  "author": "Prawito Hudoro",
6
6
  "main": "dist/pagination.umd.js",