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