@akinon/ui-pagination 0.5.0 → 1.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.
- package/dist/cjs/index.d.ts +19 -3
- package/dist/cjs/index.d.ts.map +1 -1
- package/dist/cjs/index.js +326 -1
- package/dist/cjs/types.d.ts +163 -0
- package/dist/esm/index.d.ts +19 -3
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +327 -2
- package/dist/esm/types.d.ts +163 -0
- package/package.json +5 -4
package/dist/cjs/index.d.ts
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
|
-
import type { PaginationProps as AntPaginationProps } from 'antd';
|
|
2
1
|
import * as React from 'react';
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
import { IPaginationProps } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* Pagination component for data navigation and display.
|
|
5
|
+
*
|
|
6
|
+
* The Pagination component is designed to handle large datasets by splitting them into smaller pages.
|
|
7
|
+
* It provides users with an intuitive way to navigate through the pages and configure the display options.
|
|
8
|
+
*
|
|
9
|
+
* Features:
|
|
10
|
+
* - Supports light and dark themes for seamless integration with different designs.
|
|
11
|
+
* - Flexible alignment options (`start`, `center`, `end`) for proper placement within the layout.
|
|
12
|
+
* - Configurable page sizes, responsive behavior, and customization of displayed items.
|
|
13
|
+
* - Advanced features like quick jumpers, size changers, and simple mode for improved usability.
|
|
14
|
+
* - Extensive event handling for page and size changes, enabling dynamic interactions.
|
|
15
|
+
* - Customizable item rendering for full control over the pagination UI.
|
|
16
|
+
*
|
|
17
|
+
* The Pagination component ensures efficient navigation and enhances the user experience when dealing with large datasets.
|
|
18
|
+
*/
|
|
19
|
+
export declare const Pagination: ({ ...restPaginationProps }: IPaginationProps) => React.JSX.Element;
|
|
20
|
+
export type { IPaginationProps };
|
|
5
21
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/cjs/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":"AAWA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C;;;;;;;;;;;;;;;GAeG;AAEH,eAAO,MAAM,UAAU,+BAAgC,gBAAgB,sBAuWtE,CAAC;AAEF,YAAY,EAAE,gBAAgB,EAAE,CAAC"}
|
package/dist/cjs/index.js
CHANGED
|
@@ -12,10 +12,335 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
12
|
};
|
|
13
13
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
14
|
exports.Pagination = void 0;
|
|
15
|
+
const ui_theme_1 = require("@akinon/ui-theme");
|
|
16
|
+
const cssinjs_1 = require("@ant-design/cssinjs");
|
|
15
17
|
const antd_1 = require("antd");
|
|
16
18
|
const React = require("react");
|
|
19
|
+
/**
|
|
20
|
+
* Pagination component for data navigation and display.
|
|
21
|
+
*
|
|
22
|
+
* The Pagination component is designed to handle large datasets by splitting them into smaller pages.
|
|
23
|
+
* It provides users with an intuitive way to navigate through the pages and configure the display options.
|
|
24
|
+
*
|
|
25
|
+
* Features:
|
|
26
|
+
* - Supports light and dark themes for seamless integration with different designs.
|
|
27
|
+
* - Flexible alignment options (`start`, `center`, `end`) for proper placement within the layout.
|
|
28
|
+
* - Configurable page sizes, responsive behavior, and customization of displayed items.
|
|
29
|
+
* - Advanced features like quick jumpers, size changers, and simple mode for improved usability.
|
|
30
|
+
* - Extensive event handling for page and size changes, enabling dynamic interactions.
|
|
31
|
+
* - Customizable item rendering for full control over the pagination UI.
|
|
32
|
+
*
|
|
33
|
+
* The Pagination component ensures efficient navigation and enhances the user experience when dealing with large datasets.
|
|
34
|
+
*/
|
|
17
35
|
const Pagination = (_a) => {
|
|
18
36
|
var restPaginationProps = __rest(_a, []);
|
|
19
|
-
|
|
37
|
+
const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
|
|
38
|
+
const { token, hashId } = (0, ui_theme_1.useToken)();
|
|
39
|
+
const paginationToken = token.Pagination;
|
|
40
|
+
const prefixWithoutHash = `${getPrefixCls()}-pagination`;
|
|
41
|
+
const prefixClsWithoutHash = `.${prefixWithoutHash}`;
|
|
42
|
+
const themeClassName = `${prefixWithoutHash}-${restPaginationProps.theme}`;
|
|
43
|
+
const totalPage = Math.ceil((restPaginationProps.total || 1) / (restPaginationProps.pageSize || 1));
|
|
44
|
+
const [currentPage, setCurrentPage] = React.useState(restPaginationProps.defaultCurrent || 1);
|
|
45
|
+
const [inputValue, setInputValue] = React.useState(currentPage);
|
|
46
|
+
const inputRef = React.useRef(null);
|
|
47
|
+
const spanRef = React.useRef(null);
|
|
48
|
+
const handlePageChange = (page, pageSize) => {
|
|
49
|
+
setCurrentPage(page);
|
|
50
|
+
setInputValue(page);
|
|
51
|
+
if (restPaginationProps.onChange) {
|
|
52
|
+
restPaginationProps.onChange(page, pageSize);
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
const handleInputChange = (e) => {
|
|
56
|
+
setInputValue(e.target.value);
|
|
57
|
+
};
|
|
58
|
+
const handleInputKeyDown = (e) => {
|
|
59
|
+
if (e.key === 'Enter') {
|
|
60
|
+
const pageNumber = Number(inputValue);
|
|
61
|
+
if (!isNaN(pageNumber) && pageNumber >= 1 && pageNumber <= totalPage) {
|
|
62
|
+
handlePageChange(pageNumber, restPaginationProps.pageSize || 10);
|
|
63
|
+
}
|
|
64
|
+
else {
|
|
65
|
+
setInputValue(currentPage);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
React.useEffect(() => {
|
|
70
|
+
if (inputRef.current && spanRef.current) {
|
|
71
|
+
spanRef.current.textContent = String(inputValue);
|
|
72
|
+
inputRef.current.style.width = `${spanRef.current.offsetWidth + 10}px`;
|
|
73
|
+
}
|
|
74
|
+
}, [inputValue]);
|
|
75
|
+
const useStyle = (0, cssinjs_1.useStyleRegister)({
|
|
76
|
+
token: token,
|
|
77
|
+
path: ['Pagination'],
|
|
78
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
79
|
+
theme: theme
|
|
80
|
+
}, () => {
|
|
81
|
+
const prefixCls = `:where(.${hashId}).${getPrefixCls()}-pagination`;
|
|
82
|
+
return {
|
|
83
|
+
[prefixCls]: {},
|
|
84
|
+
[prefixClsWithoutHash]: {
|
|
85
|
+
'*': {
|
|
86
|
+
boxSizing: 'initial'
|
|
87
|
+
},
|
|
88
|
+
[`&${prefixClsWithoutHash}-simple`]: {
|
|
89
|
+
height: paginationToken.maxContent,
|
|
90
|
+
maxWidth: paginationToken.maxContent,
|
|
91
|
+
[`${prefixClsWithoutHash}-simple-pager`]: {
|
|
92
|
+
minWidth: paginationToken.Simple.minWidth,
|
|
93
|
+
fontSize: paginationToken.fontSize,
|
|
94
|
+
fontWeight: paginationToken.Simple.fontWeight,
|
|
95
|
+
color: paginationToken.Simple.color
|
|
96
|
+
},
|
|
97
|
+
['input']: {
|
|
98
|
+
backgroundColor: paginationToken.transparent,
|
|
99
|
+
border: paginationToken.none,
|
|
100
|
+
color: paginationToken.Simple.input.textColor,
|
|
101
|
+
fontSize: paginationToken.fontSize,
|
|
102
|
+
fontWeight: paginationToken.Simple.input.fontWeight,
|
|
103
|
+
padding: paginationToken.zero,
|
|
104
|
+
boxShadow: paginationToken.none
|
|
105
|
+
},
|
|
106
|
+
[`${prefixClsWithoutHash}-prev, ${prefixClsWithoutHash}-next`]: {
|
|
107
|
+
minWidth: paginationToken.maxContent,
|
|
108
|
+
[`svg`]: {
|
|
109
|
+
width: paginationToken.Simple.prevNextButton.svgWidth,
|
|
110
|
+
height: paginationToken.Simple.prevNextButton.svgHeight,
|
|
111
|
+
fill: paginationToken.Simple.prevNextButton.svgFill
|
|
112
|
+
}
|
|
113
|
+
},
|
|
114
|
+
[`${prefixClsWithoutHash}-slash`]: {
|
|
115
|
+
margin: paginationToken.zero,
|
|
116
|
+
paddingRight: paginationToken.Simple.slashPadding
|
|
117
|
+
},
|
|
118
|
+
[`&${prefixClsWithoutHash}-light`]: {
|
|
119
|
+
[`&${prefixClsWithoutHash}-simple`]: {
|
|
120
|
+
['input']: {
|
|
121
|
+
color: paginationToken.Simple.lightInputTextColor
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
},
|
|
125
|
+
[`&${prefixClsWithoutHash}-dark`]: {
|
|
126
|
+
[`&${prefixClsWithoutHash}-simple`]: {
|
|
127
|
+
['input']: {
|
|
128
|
+
color: paginationToken.Simple.darkInputTextColor
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
},
|
|
132
|
+
[`${prefixClsWithoutHash}-options, ${prefixClsWithoutHash}-total-text`]: {
|
|
133
|
+
display: paginationToken.none
|
|
134
|
+
}
|
|
135
|
+
},
|
|
136
|
+
[`&:not(&${prefixClsWithoutHash}-simple)`]: {
|
|
137
|
+
display: paginationToken.displayContents,
|
|
138
|
+
[`${prefixClsWithoutHash}-total-text`]: {
|
|
139
|
+
width: paginationToken.Table.totalText.width,
|
|
140
|
+
fontWeight: paginationToken.Table.totalText.fontWeight,
|
|
141
|
+
color: paginationToken.Table.totalText.color,
|
|
142
|
+
margin: paginationToken.Table.totalText.margin,
|
|
143
|
+
height: paginationToken.full,
|
|
144
|
+
display: paginationToken.displayFlex,
|
|
145
|
+
alignItems: paginationToken.center,
|
|
146
|
+
gridArea: 'total'
|
|
147
|
+
},
|
|
148
|
+
[`${prefixClsWithoutHash}-prev, ${prefixClsWithoutHash}-next`]: {
|
|
149
|
+
height: paginationToken.maxContent,
|
|
150
|
+
lineHeight: paginationToken.lineHeight,
|
|
151
|
+
display: paginationToken.displayFlex,
|
|
152
|
+
margin: paginationToken.zero,
|
|
153
|
+
[`${prefixClsWithoutHash}-item-link`]: {
|
|
154
|
+
border: paginationToken.none,
|
|
155
|
+
padding: paginationToken.zero,
|
|
156
|
+
lineHeight: paginationToken.lineHeight,
|
|
157
|
+
width: paginationToken.maxContent,
|
|
158
|
+
height: paginationToken.maxContent
|
|
159
|
+
},
|
|
160
|
+
[`svg`]: {
|
|
161
|
+
width: paginationToken.Table.prevNextButton.svgWidth,
|
|
162
|
+
height: paginationToken.maxContent,
|
|
163
|
+
fill: paginationToken.Table.prevNextButton.svgFill,
|
|
164
|
+
padding: paginationToken.Table.prevNextButton.svgPadding,
|
|
165
|
+
border: paginationToken.Table.prevNextButton.svgBorder
|
|
166
|
+
},
|
|
167
|
+
[`&${prefixClsWithoutHash}-prev`]: {
|
|
168
|
+
height: paginationToken.maxContent,
|
|
169
|
+
gridArea: 'previous',
|
|
170
|
+
[`svg`]: {
|
|
171
|
+
borderRightWidth: paginationToken.zero,
|
|
172
|
+
borderRadius: paginationToken.Table.prevNextButton.prevSvgBorderRadius
|
|
173
|
+
}
|
|
174
|
+
},
|
|
175
|
+
[`&${prefixClsWithoutHash}-next`]: {
|
|
176
|
+
height: paginationToken.maxContent,
|
|
177
|
+
gridArea: 'next',
|
|
178
|
+
[`svg`]: {
|
|
179
|
+
borderLeftWidth: paginationToken.zero,
|
|
180
|
+
borderRadius: paginationToken.Table.prevNextButton.nextSvgBorderRadius
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
},
|
|
184
|
+
[`${prefixClsWithoutHash}-item`]: {
|
|
185
|
+
[`&:not(&${prefixClsWithoutHash}-item-active, ${prefixClsWithoutHash}-item-${totalPage})`]: {
|
|
186
|
+
display: paginationToken.none
|
|
187
|
+
},
|
|
188
|
+
[`&${prefixClsWithoutHash}-item-active, &${prefixClsWithoutHash}-item-${totalPage}`]: {
|
|
189
|
+
margin: paginationToken.zero,
|
|
190
|
+
border: paginationToken.Table.pageInfo.border,
|
|
191
|
+
borderRadius: paginationToken.zero,
|
|
192
|
+
minWidth: paginationToken.maxContent,
|
|
193
|
+
height: paginationToken.maxContent,
|
|
194
|
+
[`a`]: {
|
|
195
|
+
padding: paginationToken.Table.pageInfo.padding,
|
|
196
|
+
lineHeight: paginationToken.lineHeight,
|
|
197
|
+
width: paginationToken.maxContent
|
|
198
|
+
}
|
|
199
|
+
},
|
|
200
|
+
[`&${prefixClsWithoutHash}-item-active`]: {
|
|
201
|
+
backgroundColor: paginationToken.Table.pageInfo.currentPageBgColor,
|
|
202
|
+
display: paginationToken.none,
|
|
203
|
+
[`a`]: {
|
|
204
|
+
minWidth: paginationToken.Table.pageInfo.currentPageMinWidth,
|
|
205
|
+
color: paginationToken.Table.pageInfo.currentPageTextColor,
|
|
206
|
+
fontWeight: paginationToken.Table.pageInfo.currentPageFontWeight
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
},
|
|
210
|
+
[`${prefixClsWithoutHash}-jump-prev, ${prefixClsWithoutHash}-jump-next`]: {
|
|
211
|
+
display: paginationToken.none
|
|
212
|
+
},
|
|
213
|
+
[`${prefixClsWithoutHash}-options`]: {
|
|
214
|
+
display: paginationToken.displayContents,
|
|
215
|
+
[`&-size-changer`]: {
|
|
216
|
+
gridArea: 'options',
|
|
217
|
+
width: paginationToken.Table.sizeChanger.width,
|
|
218
|
+
height: paginationToken.maxContent,
|
|
219
|
+
display: paginationToken.displayFlex,
|
|
220
|
+
flexDirection: paginationToken.displayFlexRow,
|
|
221
|
+
alignItems: paginationToken.center,
|
|
222
|
+
columnGap: paginationToken.Table.sizeChanger.colGap,
|
|
223
|
+
border: paginationToken.Table.sizeChanger.border,
|
|
224
|
+
borderRadius: paginationToken.Table.sizeChanger.borderRadius,
|
|
225
|
+
[`.akinon-select-selector`]: {
|
|
226
|
+
border: paginationToken.none,
|
|
227
|
+
lineHeight: paginationToken.lineHeight,
|
|
228
|
+
padding: paginationToken.Table.sizeChanger.item1.padding,
|
|
229
|
+
[`.akinon-select-selection-item`]: {
|
|
230
|
+
paddingInlineEnd: paginationToken.zero,
|
|
231
|
+
lineHeight: paginationToken.lineHeight,
|
|
232
|
+
fontWeight: paginationToken.Table.sizeChanger.item2.fontWeight
|
|
233
|
+
},
|
|
234
|
+
[`&::after`]: {
|
|
235
|
+
lineHeight: paginationToken.lineHeight
|
|
236
|
+
}
|
|
237
|
+
},
|
|
238
|
+
[`.akinon-select-arrow`]: {
|
|
239
|
+
width: paginationToken.Table.sizeChanger.icon.width,
|
|
240
|
+
position: paginationToken.Table.sizeChanger.icon.position,
|
|
241
|
+
height: paginationToken.auto,
|
|
242
|
+
top: paginationToken.zero,
|
|
243
|
+
margin: paginationToken.auto,
|
|
244
|
+
fontWeight: paginationToken.Table.sizeChanger.icon.fontWeight
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
},
|
|
248
|
+
[`:not(${prefixClsWithoutHash}-light)`]: {
|
|
249
|
+
[`&${prefixClsWithoutHash}-item-${totalPage}`]: {
|
|
250
|
+
backgroundColor: 'transparent !important',
|
|
251
|
+
[`a`]: {
|
|
252
|
+
color: paginationToken.Table.sizeChanger.item2.textColor
|
|
253
|
+
}
|
|
254
|
+
},
|
|
255
|
+
[`${prefixClsWithoutHash}-options`]: {
|
|
256
|
+
display: paginationToken.displayContents,
|
|
257
|
+
[`&-size-changer`]: {
|
|
258
|
+
background: 'transparent !important'
|
|
259
|
+
}
|
|
260
|
+
},
|
|
261
|
+
[`.akinon-select-selector`]: {
|
|
262
|
+
background: 'transparent !important',
|
|
263
|
+
[`.akinon-select-selection-item`]: {
|
|
264
|
+
color: paginationToken.Table.sizeChanger.item2.textColor
|
|
265
|
+
}
|
|
266
|
+
},
|
|
267
|
+
[`.akinon-select-arrow`]: {
|
|
268
|
+
background: 'transparent !important'
|
|
269
|
+
}
|
|
270
|
+
},
|
|
271
|
+
[`${prefixClsWithoutHash}-light`]: {
|
|
272
|
+
[`${prefixClsWithoutHash}-item-${totalPage}`]: {
|
|
273
|
+
backgroundColor: paginationToken.Table.pageInfo.totalPageBgColor,
|
|
274
|
+
[`a`]: {
|
|
275
|
+
color: paginationToken.Table.pageInfo.totalPageTextColor
|
|
276
|
+
}
|
|
277
|
+
},
|
|
278
|
+
[`${prefixClsWithoutHash}-options`]: {
|
|
279
|
+
[`&-size-changer`]: {
|
|
280
|
+
background: paginationToken.Table.sizeChanger.bgColor
|
|
281
|
+
},
|
|
282
|
+
[`.akinon-select-selector`]: {
|
|
283
|
+
background: paginationToken.Table.sizeChanger.item1.bgColor,
|
|
284
|
+
[`.akinon-select-selection-item`]: {
|
|
285
|
+
color: paginationToken.Table.sizeChanger.item2.textColor
|
|
286
|
+
}
|
|
287
|
+
},
|
|
288
|
+
[`.akinon-select-arrow`]: {
|
|
289
|
+
background: paginationToken.Table.sizeChanger.icon.bgColor
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
}
|
|
294
|
+
},
|
|
295
|
+
[`${prefixClsWithoutHash}-parent`]: {
|
|
296
|
+
display: paginationToken.displayGrid,
|
|
297
|
+
gridTemplateAreas: `'options total previous goto showTotal next'`,
|
|
298
|
+
gridTemplateColumns: 'max-content max-content max-content max-content max-content max-content',
|
|
299
|
+
height: paginationToken.maxContent,
|
|
300
|
+
maxWidth: paginationToken.maxContent
|
|
301
|
+
},
|
|
302
|
+
[`${prefixClsWithoutHash}-options-quick-jumper-new`]: {
|
|
303
|
+
display: restPaginationProps.simple ? 'none' : 'block',
|
|
304
|
+
gridArea: 'goto',
|
|
305
|
+
overflow: paginationToken.hidden,
|
|
306
|
+
border: paginationToken.Jumper.border,
|
|
307
|
+
borderRight: paginationToken.zero,
|
|
308
|
+
borderRadius: paginationToken.zero,
|
|
309
|
+
['input, span']: {
|
|
310
|
+
backgroundColor: paginationToken.Jumper.bgColor,
|
|
311
|
+
color: paginationToken.Jumper.textColor,
|
|
312
|
+
fontWeight: paginationToken.Jumper.fontWeight,
|
|
313
|
+
minWidth: paginationToken.Jumper.minWidth,
|
|
314
|
+
border: paginationToken.none,
|
|
315
|
+
height: paginationToken.Jumper.height,
|
|
316
|
+
boxShadow: paginationToken.none,
|
|
317
|
+
textAlign: paginationToken.center,
|
|
318
|
+
outline: paginationToken.none
|
|
319
|
+
},
|
|
320
|
+
['span']: {
|
|
321
|
+
visibility: paginationToken.Jumper.spanVisibility,
|
|
322
|
+
whiteSpace: paginationToken.Jumper.spanWhiteSpace,
|
|
323
|
+
position: paginationToken.Jumper.spanPosition
|
|
324
|
+
},
|
|
325
|
+
[`&:not(${prefixClsWithoutHash}-light)`]: {
|
|
326
|
+
['input, span']: {
|
|
327
|
+
backgroundColor: 'transparent !important',
|
|
328
|
+
color: paginationToken.Table.prevNextButton.svgFill
|
|
329
|
+
}
|
|
330
|
+
},
|
|
331
|
+
[`&${prefixClsWithoutHash}-light`]: {
|
|
332
|
+
['input, span']: {
|
|
333
|
+
backgroundColor: 'transparent !important',
|
|
334
|
+
color: paginationToken.Table.prevNextButton.svgFill
|
|
335
|
+
}
|
|
336
|
+
}
|
|
337
|
+
}
|
|
338
|
+
};
|
|
339
|
+
});
|
|
340
|
+
return useStyle(React.createElement("div", { className: `${prefixWithoutHash}-parent` },
|
|
341
|
+
React.createElement(antd_1.Pagination, Object.assign({}, restPaginationProps, { className: themeClassName, locale: { jump_to: '', page: '', items_per_page: '' }, onChange: handlePageChange })),
|
|
342
|
+
!restPaginationProps.simple && (React.createElement("div", { className: `${prefixWithoutHash}-options-quick-jumper-new ${themeClassName}` },
|
|
343
|
+
React.createElement("span", { ref: spanRef }),
|
|
344
|
+
React.createElement("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleInputKeyDown })))));
|
|
20
345
|
};
|
|
21
346
|
exports.Pagination = Pagination;
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
import { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
|
|
2
|
+
import type { SelectProps } from 'antd';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
4
|
+
|
|
5
|
+
export type TPaginationAlign = 'start' | 'center' | 'end';
|
|
6
|
+
|
|
7
|
+
export type TPaginationItemRender = (
|
|
8
|
+
page,
|
|
9
|
+
type: 'page' | 'prev' | 'next',
|
|
10
|
+
originalElement
|
|
11
|
+
) => React.ReactNode;
|
|
12
|
+
|
|
13
|
+
export type TPaginationShowQuickJumper = boolean | { goButton: ReactNode };
|
|
14
|
+
|
|
15
|
+
export type TPaginationShowTotal = (total, range) => ReactNode;
|
|
16
|
+
|
|
17
|
+
export type TPaginationSimple = boolean | { readOnly?: boolean };
|
|
18
|
+
|
|
19
|
+
export type TPaginationSize = 'default' | 'small';
|
|
20
|
+
|
|
21
|
+
export type TPaginationOnChange = (page, pageSize) => ReactNode;
|
|
22
|
+
|
|
23
|
+
export type TPaginationOnShowSizeChange = (current, size) => ReactNode;
|
|
24
|
+
|
|
25
|
+
export interface IPaginationProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
26
|
+
/**
|
|
27
|
+
* Theme type
|
|
28
|
+
* @default dark
|
|
29
|
+
*/
|
|
30
|
+
theme?: 'light' | 'dark';
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* Alignment of the pagination component.
|
|
34
|
+
*/
|
|
35
|
+
align?: TPaginationAlign;
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* Current page number
|
|
39
|
+
*/
|
|
40
|
+
current?: number;
|
|
41
|
+
|
|
42
|
+
/**
|
|
43
|
+
* Default initial page number
|
|
44
|
+
* @default 1
|
|
45
|
+
*/
|
|
46
|
+
defaultCurrent?: number;
|
|
47
|
+
|
|
48
|
+
/**
|
|
49
|
+
* Default number of data items per page
|
|
50
|
+
* @default 10
|
|
51
|
+
*/
|
|
52
|
+
defaultPageSize?: number;
|
|
53
|
+
|
|
54
|
+
/**
|
|
55
|
+
* Disable pagination
|
|
56
|
+
*/
|
|
57
|
+
disabled?: boolean;
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* Whether to hide pager on single page
|
|
61
|
+
* @default false
|
|
62
|
+
*/
|
|
63
|
+
hideOnSinglePage?: boolean;
|
|
64
|
+
|
|
65
|
+
/**
|
|
66
|
+
* To customize item's innerHTML
|
|
67
|
+
*/
|
|
68
|
+
itemRender?: TPaginationItemRender;
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* Number of data items per page
|
|
72
|
+
*/
|
|
73
|
+
pageSize?: number;
|
|
74
|
+
|
|
75
|
+
/**
|
|
76
|
+
* Specify the sizeChanger options
|
|
77
|
+
* @default
|
|
78
|
+
* [10, 20, 50, 100]
|
|
79
|
+
*/
|
|
80
|
+
pageSizeOptions?: string[] | number[];
|
|
81
|
+
|
|
82
|
+
/**
|
|
83
|
+
* If size is not specified, Pagination would resize according to the width of the window
|
|
84
|
+
*/
|
|
85
|
+
responsive?: boolean;
|
|
86
|
+
|
|
87
|
+
/**
|
|
88
|
+
* Show less page items
|
|
89
|
+
* @default false
|
|
90
|
+
*/
|
|
91
|
+
showLessItems?: boolean;
|
|
92
|
+
|
|
93
|
+
/**
|
|
94
|
+
* Determine whether you can jump to pages directly
|
|
95
|
+
* @default false
|
|
96
|
+
*/
|
|
97
|
+
showQuickJumper?: TPaginationShowQuickJumper;
|
|
98
|
+
|
|
99
|
+
/**
|
|
100
|
+
* Determine whether to show pageSize select, it will be true when total > 50
|
|
101
|
+
*/
|
|
102
|
+
showSizeChanger?: boolean | SelectProps;
|
|
103
|
+
|
|
104
|
+
/**
|
|
105
|
+
* Show page item's title
|
|
106
|
+
* @default true
|
|
107
|
+
*/
|
|
108
|
+
showTitle?: boolean;
|
|
109
|
+
|
|
110
|
+
/**
|
|
111
|
+
* To display the total number and range
|
|
112
|
+
*/
|
|
113
|
+
showTotal?: TPaginationShowTotal;
|
|
114
|
+
|
|
115
|
+
/**
|
|
116
|
+
* Whether to use simple mode
|
|
117
|
+
*/
|
|
118
|
+
simple?: TPaginationSimple;
|
|
119
|
+
|
|
120
|
+
/**
|
|
121
|
+
* Specify the size of Pagination, can be set to small
|
|
122
|
+
* @default default
|
|
123
|
+
*/
|
|
124
|
+
size?: TPaginationSize;
|
|
125
|
+
|
|
126
|
+
/**
|
|
127
|
+
* Total number of data items
|
|
128
|
+
* @default 0
|
|
129
|
+
*/
|
|
130
|
+
total: number;
|
|
131
|
+
|
|
132
|
+
/**
|
|
133
|
+
* Called when the page number or pageSize is changed, and it takes the resulting page number and pageSize as its arguments
|
|
134
|
+
*/
|
|
135
|
+
onChange?: TPaginationOnChange;
|
|
136
|
+
|
|
137
|
+
/**
|
|
138
|
+
* Called when pageSize is changed
|
|
139
|
+
*/
|
|
140
|
+
onShowSizeChange?: TPaginationOnShowSizeChange;
|
|
141
|
+
|
|
142
|
+
/**
|
|
143
|
+
* Localization strings
|
|
144
|
+
*/
|
|
145
|
+
locale?: {
|
|
146
|
+
items_per_page?: string;
|
|
147
|
+
jump_to?: string;
|
|
148
|
+
jump_to_confirm?: string;
|
|
149
|
+
page?: string;
|
|
150
|
+
prev_page?: string;
|
|
151
|
+
next_page?: string;
|
|
152
|
+
prev_5?: string;
|
|
153
|
+
next_5?: string;
|
|
154
|
+
prev_3?: string;
|
|
155
|
+
next_3?: string;
|
|
156
|
+
};
|
|
157
|
+
|
|
158
|
+
/**
|
|
159
|
+
* Never use this prop. Akinon design system does not allow custom styles.
|
|
160
|
+
* @ignore
|
|
161
|
+
*/
|
|
162
|
+
style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
|
|
163
|
+
}
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
|
-
import type { PaginationProps as AntPaginationProps } from 'antd';
|
|
2
1
|
import * as React from 'react';
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
import { IPaginationProps } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* Pagination component for data navigation and display.
|
|
5
|
+
*
|
|
6
|
+
* The Pagination component is designed to handle large datasets by splitting them into smaller pages.
|
|
7
|
+
* It provides users with an intuitive way to navigate through the pages and configure the display options.
|
|
8
|
+
*
|
|
9
|
+
* Features:
|
|
10
|
+
* - Supports light and dark themes for seamless integration with different designs.
|
|
11
|
+
* - Flexible alignment options (`start`, `center`, `end`) for proper placement within the layout.
|
|
12
|
+
* - Configurable page sizes, responsive behavior, and customization of displayed items.
|
|
13
|
+
* - Advanced features like quick jumpers, size changers, and simple mode for improved usability.
|
|
14
|
+
* - Extensive event handling for page and size changes, enabling dynamic interactions.
|
|
15
|
+
* - Customizable item rendering for full control over the pagination UI.
|
|
16
|
+
*
|
|
17
|
+
* The Pagination component ensures efficient navigation and enhances the user experience when dealing with large datasets.
|
|
18
|
+
*/
|
|
19
|
+
export declare const Pagination: ({ ...restPaginationProps }: IPaginationProps) => React.JSX.Element;
|
|
20
|
+
export type { IPaginationProps };
|
|
5
21
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/esm/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":"AAWA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C;;;;;;;;;;;;;;;GAeG;AAEH,eAAO,MAAM,UAAU,+BAAgC,gBAAgB,sBAuWtE,CAAC;AAEF,YAAY,EAAE,gBAAgB,EAAE,CAAC"}
|
package/dist/esm/index.js
CHANGED
|
@@ -9,9 +9,334 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import {
|
|
12
|
+
import { useToken } from '@akinon/ui-theme';
|
|
13
|
+
import { useStyleRegister } from '@ant-design/cssinjs';
|
|
14
|
+
import { ConfigProvider, Pagination as AntPagination } from 'antd';
|
|
13
15
|
import * as React from 'react';
|
|
16
|
+
/**
|
|
17
|
+
* Pagination component for data navigation and display.
|
|
18
|
+
*
|
|
19
|
+
* The Pagination component is designed to handle large datasets by splitting them into smaller pages.
|
|
20
|
+
* It provides users with an intuitive way to navigate through the pages and configure the display options.
|
|
21
|
+
*
|
|
22
|
+
* Features:
|
|
23
|
+
* - Supports light and dark themes for seamless integration with different designs.
|
|
24
|
+
* - Flexible alignment options (`start`, `center`, `end`) for proper placement within the layout.
|
|
25
|
+
* - Configurable page sizes, responsive behavior, and customization of displayed items.
|
|
26
|
+
* - Advanced features like quick jumpers, size changers, and simple mode for improved usability.
|
|
27
|
+
* - Extensive event handling for page and size changes, enabling dynamic interactions.
|
|
28
|
+
* - Customizable item rendering for full control over the pagination UI.
|
|
29
|
+
*
|
|
30
|
+
* The Pagination component ensures efficient navigation and enhances the user experience when dealing with large datasets.
|
|
31
|
+
*/
|
|
14
32
|
export const Pagination = (_a) => {
|
|
15
33
|
var restPaginationProps = __rest(_a, []);
|
|
16
|
-
|
|
34
|
+
const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
|
|
35
|
+
const { token, hashId } = useToken();
|
|
36
|
+
const paginationToken = token.Pagination;
|
|
37
|
+
const prefixWithoutHash = `${getPrefixCls()}-pagination`;
|
|
38
|
+
const prefixClsWithoutHash = `.${prefixWithoutHash}`;
|
|
39
|
+
const themeClassName = `${prefixWithoutHash}-${restPaginationProps.theme}`;
|
|
40
|
+
const totalPage = Math.ceil((restPaginationProps.total || 1) / (restPaginationProps.pageSize || 1));
|
|
41
|
+
const [currentPage, setCurrentPage] = React.useState(restPaginationProps.defaultCurrent || 1);
|
|
42
|
+
const [inputValue, setInputValue] = React.useState(currentPage);
|
|
43
|
+
const inputRef = React.useRef(null);
|
|
44
|
+
const spanRef = React.useRef(null);
|
|
45
|
+
const handlePageChange = (page, pageSize) => {
|
|
46
|
+
setCurrentPage(page);
|
|
47
|
+
setInputValue(page);
|
|
48
|
+
if (restPaginationProps.onChange) {
|
|
49
|
+
restPaginationProps.onChange(page, pageSize);
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
const handleInputChange = (e) => {
|
|
53
|
+
setInputValue(e.target.value);
|
|
54
|
+
};
|
|
55
|
+
const handleInputKeyDown = (e) => {
|
|
56
|
+
if (e.key === 'Enter') {
|
|
57
|
+
const pageNumber = Number(inputValue);
|
|
58
|
+
if (!isNaN(pageNumber) && pageNumber >= 1 && pageNumber <= totalPage) {
|
|
59
|
+
handlePageChange(pageNumber, restPaginationProps.pageSize || 10);
|
|
60
|
+
}
|
|
61
|
+
else {
|
|
62
|
+
setInputValue(currentPage);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
React.useEffect(() => {
|
|
67
|
+
if (inputRef.current && spanRef.current) {
|
|
68
|
+
spanRef.current.textContent = String(inputValue);
|
|
69
|
+
inputRef.current.style.width = `${spanRef.current.offsetWidth + 10}px`;
|
|
70
|
+
}
|
|
71
|
+
}, [inputValue]);
|
|
72
|
+
const useStyle = useStyleRegister({
|
|
73
|
+
token: token,
|
|
74
|
+
path: ['Pagination'],
|
|
75
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
76
|
+
theme: theme
|
|
77
|
+
}, () => {
|
|
78
|
+
const prefixCls = `:where(.${hashId}).${getPrefixCls()}-pagination`;
|
|
79
|
+
return {
|
|
80
|
+
[prefixCls]: {},
|
|
81
|
+
[prefixClsWithoutHash]: {
|
|
82
|
+
'*': {
|
|
83
|
+
boxSizing: 'initial'
|
|
84
|
+
},
|
|
85
|
+
[`&${prefixClsWithoutHash}-simple`]: {
|
|
86
|
+
height: paginationToken.maxContent,
|
|
87
|
+
maxWidth: paginationToken.maxContent,
|
|
88
|
+
[`${prefixClsWithoutHash}-simple-pager`]: {
|
|
89
|
+
minWidth: paginationToken.Simple.minWidth,
|
|
90
|
+
fontSize: paginationToken.fontSize,
|
|
91
|
+
fontWeight: paginationToken.Simple.fontWeight,
|
|
92
|
+
color: paginationToken.Simple.color
|
|
93
|
+
},
|
|
94
|
+
['input']: {
|
|
95
|
+
backgroundColor: paginationToken.transparent,
|
|
96
|
+
border: paginationToken.none,
|
|
97
|
+
color: paginationToken.Simple.input.textColor,
|
|
98
|
+
fontSize: paginationToken.fontSize,
|
|
99
|
+
fontWeight: paginationToken.Simple.input.fontWeight,
|
|
100
|
+
padding: paginationToken.zero,
|
|
101
|
+
boxShadow: paginationToken.none
|
|
102
|
+
},
|
|
103
|
+
[`${prefixClsWithoutHash}-prev, ${prefixClsWithoutHash}-next`]: {
|
|
104
|
+
minWidth: paginationToken.maxContent,
|
|
105
|
+
[`svg`]: {
|
|
106
|
+
width: paginationToken.Simple.prevNextButton.svgWidth,
|
|
107
|
+
height: paginationToken.Simple.prevNextButton.svgHeight,
|
|
108
|
+
fill: paginationToken.Simple.prevNextButton.svgFill
|
|
109
|
+
}
|
|
110
|
+
},
|
|
111
|
+
[`${prefixClsWithoutHash}-slash`]: {
|
|
112
|
+
margin: paginationToken.zero,
|
|
113
|
+
paddingRight: paginationToken.Simple.slashPadding
|
|
114
|
+
},
|
|
115
|
+
[`&${prefixClsWithoutHash}-light`]: {
|
|
116
|
+
[`&${prefixClsWithoutHash}-simple`]: {
|
|
117
|
+
['input']: {
|
|
118
|
+
color: paginationToken.Simple.lightInputTextColor
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
},
|
|
122
|
+
[`&${prefixClsWithoutHash}-dark`]: {
|
|
123
|
+
[`&${prefixClsWithoutHash}-simple`]: {
|
|
124
|
+
['input']: {
|
|
125
|
+
color: paginationToken.Simple.darkInputTextColor
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
[`${prefixClsWithoutHash}-options, ${prefixClsWithoutHash}-total-text`]: {
|
|
130
|
+
display: paginationToken.none
|
|
131
|
+
}
|
|
132
|
+
},
|
|
133
|
+
[`&:not(&${prefixClsWithoutHash}-simple)`]: {
|
|
134
|
+
display: paginationToken.displayContents,
|
|
135
|
+
[`${prefixClsWithoutHash}-total-text`]: {
|
|
136
|
+
width: paginationToken.Table.totalText.width,
|
|
137
|
+
fontWeight: paginationToken.Table.totalText.fontWeight,
|
|
138
|
+
color: paginationToken.Table.totalText.color,
|
|
139
|
+
margin: paginationToken.Table.totalText.margin,
|
|
140
|
+
height: paginationToken.full,
|
|
141
|
+
display: paginationToken.displayFlex,
|
|
142
|
+
alignItems: paginationToken.center,
|
|
143
|
+
gridArea: 'total'
|
|
144
|
+
},
|
|
145
|
+
[`${prefixClsWithoutHash}-prev, ${prefixClsWithoutHash}-next`]: {
|
|
146
|
+
height: paginationToken.maxContent,
|
|
147
|
+
lineHeight: paginationToken.lineHeight,
|
|
148
|
+
display: paginationToken.displayFlex,
|
|
149
|
+
margin: paginationToken.zero,
|
|
150
|
+
[`${prefixClsWithoutHash}-item-link`]: {
|
|
151
|
+
border: paginationToken.none,
|
|
152
|
+
padding: paginationToken.zero,
|
|
153
|
+
lineHeight: paginationToken.lineHeight,
|
|
154
|
+
width: paginationToken.maxContent,
|
|
155
|
+
height: paginationToken.maxContent
|
|
156
|
+
},
|
|
157
|
+
[`svg`]: {
|
|
158
|
+
width: paginationToken.Table.prevNextButton.svgWidth,
|
|
159
|
+
height: paginationToken.maxContent,
|
|
160
|
+
fill: paginationToken.Table.prevNextButton.svgFill,
|
|
161
|
+
padding: paginationToken.Table.prevNextButton.svgPadding,
|
|
162
|
+
border: paginationToken.Table.prevNextButton.svgBorder
|
|
163
|
+
},
|
|
164
|
+
[`&${prefixClsWithoutHash}-prev`]: {
|
|
165
|
+
height: paginationToken.maxContent,
|
|
166
|
+
gridArea: 'previous',
|
|
167
|
+
[`svg`]: {
|
|
168
|
+
borderRightWidth: paginationToken.zero,
|
|
169
|
+
borderRadius: paginationToken.Table.prevNextButton.prevSvgBorderRadius
|
|
170
|
+
}
|
|
171
|
+
},
|
|
172
|
+
[`&${prefixClsWithoutHash}-next`]: {
|
|
173
|
+
height: paginationToken.maxContent,
|
|
174
|
+
gridArea: 'next',
|
|
175
|
+
[`svg`]: {
|
|
176
|
+
borderLeftWidth: paginationToken.zero,
|
|
177
|
+
borderRadius: paginationToken.Table.prevNextButton.nextSvgBorderRadius
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
},
|
|
181
|
+
[`${prefixClsWithoutHash}-item`]: {
|
|
182
|
+
[`&:not(&${prefixClsWithoutHash}-item-active, ${prefixClsWithoutHash}-item-${totalPage})`]: {
|
|
183
|
+
display: paginationToken.none
|
|
184
|
+
},
|
|
185
|
+
[`&${prefixClsWithoutHash}-item-active, &${prefixClsWithoutHash}-item-${totalPage}`]: {
|
|
186
|
+
margin: paginationToken.zero,
|
|
187
|
+
border: paginationToken.Table.pageInfo.border,
|
|
188
|
+
borderRadius: paginationToken.zero,
|
|
189
|
+
minWidth: paginationToken.maxContent,
|
|
190
|
+
height: paginationToken.maxContent,
|
|
191
|
+
[`a`]: {
|
|
192
|
+
padding: paginationToken.Table.pageInfo.padding,
|
|
193
|
+
lineHeight: paginationToken.lineHeight,
|
|
194
|
+
width: paginationToken.maxContent
|
|
195
|
+
}
|
|
196
|
+
},
|
|
197
|
+
[`&${prefixClsWithoutHash}-item-active`]: {
|
|
198
|
+
backgroundColor: paginationToken.Table.pageInfo.currentPageBgColor,
|
|
199
|
+
display: paginationToken.none,
|
|
200
|
+
[`a`]: {
|
|
201
|
+
minWidth: paginationToken.Table.pageInfo.currentPageMinWidth,
|
|
202
|
+
color: paginationToken.Table.pageInfo.currentPageTextColor,
|
|
203
|
+
fontWeight: paginationToken.Table.pageInfo.currentPageFontWeight
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
},
|
|
207
|
+
[`${prefixClsWithoutHash}-jump-prev, ${prefixClsWithoutHash}-jump-next`]: {
|
|
208
|
+
display: paginationToken.none
|
|
209
|
+
},
|
|
210
|
+
[`${prefixClsWithoutHash}-options`]: {
|
|
211
|
+
display: paginationToken.displayContents,
|
|
212
|
+
[`&-size-changer`]: {
|
|
213
|
+
gridArea: 'options',
|
|
214
|
+
width: paginationToken.Table.sizeChanger.width,
|
|
215
|
+
height: paginationToken.maxContent,
|
|
216
|
+
display: paginationToken.displayFlex,
|
|
217
|
+
flexDirection: paginationToken.displayFlexRow,
|
|
218
|
+
alignItems: paginationToken.center,
|
|
219
|
+
columnGap: paginationToken.Table.sizeChanger.colGap,
|
|
220
|
+
border: paginationToken.Table.sizeChanger.border,
|
|
221
|
+
borderRadius: paginationToken.Table.sizeChanger.borderRadius,
|
|
222
|
+
[`.akinon-select-selector`]: {
|
|
223
|
+
border: paginationToken.none,
|
|
224
|
+
lineHeight: paginationToken.lineHeight,
|
|
225
|
+
padding: paginationToken.Table.sizeChanger.item1.padding,
|
|
226
|
+
[`.akinon-select-selection-item`]: {
|
|
227
|
+
paddingInlineEnd: paginationToken.zero,
|
|
228
|
+
lineHeight: paginationToken.lineHeight,
|
|
229
|
+
fontWeight: paginationToken.Table.sizeChanger.item2.fontWeight
|
|
230
|
+
},
|
|
231
|
+
[`&::after`]: {
|
|
232
|
+
lineHeight: paginationToken.lineHeight
|
|
233
|
+
}
|
|
234
|
+
},
|
|
235
|
+
[`.akinon-select-arrow`]: {
|
|
236
|
+
width: paginationToken.Table.sizeChanger.icon.width,
|
|
237
|
+
position: paginationToken.Table.sizeChanger.icon.position,
|
|
238
|
+
height: paginationToken.auto,
|
|
239
|
+
top: paginationToken.zero,
|
|
240
|
+
margin: paginationToken.auto,
|
|
241
|
+
fontWeight: paginationToken.Table.sizeChanger.icon.fontWeight
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
},
|
|
245
|
+
[`:not(${prefixClsWithoutHash}-light)`]: {
|
|
246
|
+
[`&${prefixClsWithoutHash}-item-${totalPage}`]: {
|
|
247
|
+
backgroundColor: 'transparent !important',
|
|
248
|
+
[`a`]: {
|
|
249
|
+
color: paginationToken.Table.sizeChanger.item2.textColor
|
|
250
|
+
}
|
|
251
|
+
},
|
|
252
|
+
[`${prefixClsWithoutHash}-options`]: {
|
|
253
|
+
display: paginationToken.displayContents,
|
|
254
|
+
[`&-size-changer`]: {
|
|
255
|
+
background: 'transparent !important'
|
|
256
|
+
}
|
|
257
|
+
},
|
|
258
|
+
[`.akinon-select-selector`]: {
|
|
259
|
+
background: 'transparent !important',
|
|
260
|
+
[`.akinon-select-selection-item`]: {
|
|
261
|
+
color: paginationToken.Table.sizeChanger.item2.textColor
|
|
262
|
+
}
|
|
263
|
+
},
|
|
264
|
+
[`.akinon-select-arrow`]: {
|
|
265
|
+
background: 'transparent !important'
|
|
266
|
+
}
|
|
267
|
+
},
|
|
268
|
+
[`${prefixClsWithoutHash}-light`]: {
|
|
269
|
+
[`${prefixClsWithoutHash}-item-${totalPage}`]: {
|
|
270
|
+
backgroundColor: paginationToken.Table.pageInfo.totalPageBgColor,
|
|
271
|
+
[`a`]: {
|
|
272
|
+
color: paginationToken.Table.pageInfo.totalPageTextColor
|
|
273
|
+
}
|
|
274
|
+
},
|
|
275
|
+
[`${prefixClsWithoutHash}-options`]: {
|
|
276
|
+
[`&-size-changer`]: {
|
|
277
|
+
background: paginationToken.Table.sizeChanger.bgColor
|
|
278
|
+
},
|
|
279
|
+
[`.akinon-select-selector`]: {
|
|
280
|
+
background: paginationToken.Table.sizeChanger.item1.bgColor,
|
|
281
|
+
[`.akinon-select-selection-item`]: {
|
|
282
|
+
color: paginationToken.Table.sizeChanger.item2.textColor
|
|
283
|
+
}
|
|
284
|
+
},
|
|
285
|
+
[`.akinon-select-arrow`]: {
|
|
286
|
+
background: paginationToken.Table.sizeChanger.icon.bgColor
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
},
|
|
292
|
+
[`${prefixClsWithoutHash}-parent`]: {
|
|
293
|
+
display: paginationToken.displayGrid,
|
|
294
|
+
gridTemplateAreas: `'options total previous goto showTotal next'`,
|
|
295
|
+
gridTemplateColumns: 'max-content max-content max-content max-content max-content max-content',
|
|
296
|
+
height: paginationToken.maxContent,
|
|
297
|
+
maxWidth: paginationToken.maxContent
|
|
298
|
+
},
|
|
299
|
+
[`${prefixClsWithoutHash}-options-quick-jumper-new`]: {
|
|
300
|
+
display: restPaginationProps.simple ? 'none' : 'block',
|
|
301
|
+
gridArea: 'goto',
|
|
302
|
+
overflow: paginationToken.hidden,
|
|
303
|
+
border: paginationToken.Jumper.border,
|
|
304
|
+
borderRight: paginationToken.zero,
|
|
305
|
+
borderRadius: paginationToken.zero,
|
|
306
|
+
['input, span']: {
|
|
307
|
+
backgroundColor: paginationToken.Jumper.bgColor,
|
|
308
|
+
color: paginationToken.Jumper.textColor,
|
|
309
|
+
fontWeight: paginationToken.Jumper.fontWeight,
|
|
310
|
+
minWidth: paginationToken.Jumper.minWidth,
|
|
311
|
+
border: paginationToken.none,
|
|
312
|
+
height: paginationToken.Jumper.height,
|
|
313
|
+
boxShadow: paginationToken.none,
|
|
314
|
+
textAlign: paginationToken.center,
|
|
315
|
+
outline: paginationToken.none
|
|
316
|
+
},
|
|
317
|
+
['span']: {
|
|
318
|
+
visibility: paginationToken.Jumper.spanVisibility,
|
|
319
|
+
whiteSpace: paginationToken.Jumper.spanWhiteSpace,
|
|
320
|
+
position: paginationToken.Jumper.spanPosition
|
|
321
|
+
},
|
|
322
|
+
[`&:not(${prefixClsWithoutHash}-light)`]: {
|
|
323
|
+
['input, span']: {
|
|
324
|
+
backgroundColor: 'transparent !important',
|
|
325
|
+
color: paginationToken.Table.prevNextButton.svgFill
|
|
326
|
+
}
|
|
327
|
+
},
|
|
328
|
+
[`&${prefixClsWithoutHash}-light`]: {
|
|
329
|
+
['input, span']: {
|
|
330
|
+
backgroundColor: 'transparent !important',
|
|
331
|
+
color: paginationToken.Table.prevNextButton.svgFill
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
};
|
|
336
|
+
});
|
|
337
|
+
return useStyle(React.createElement("div", { className: `${prefixWithoutHash}-parent` },
|
|
338
|
+
React.createElement(AntPagination, Object.assign({}, restPaginationProps, { className: themeClassName, locale: { jump_to: '', page: '', items_per_page: '' }, onChange: handlePageChange })),
|
|
339
|
+
!restPaginationProps.simple && (React.createElement("div", { className: `${prefixWithoutHash}-options-quick-jumper-new ${themeClassName}` },
|
|
340
|
+
React.createElement("span", { ref: spanRef }),
|
|
341
|
+
React.createElement("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleInputKeyDown })))));
|
|
17
342
|
};
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
import { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
|
|
2
|
+
import type { SelectProps } from 'antd';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
4
|
+
|
|
5
|
+
export type TPaginationAlign = 'start' | 'center' | 'end';
|
|
6
|
+
|
|
7
|
+
export type TPaginationItemRender = (
|
|
8
|
+
page,
|
|
9
|
+
type: 'page' | 'prev' | 'next',
|
|
10
|
+
originalElement
|
|
11
|
+
) => React.ReactNode;
|
|
12
|
+
|
|
13
|
+
export type TPaginationShowQuickJumper = boolean | { goButton: ReactNode };
|
|
14
|
+
|
|
15
|
+
export type TPaginationShowTotal = (total, range) => ReactNode;
|
|
16
|
+
|
|
17
|
+
export type TPaginationSimple = boolean | { readOnly?: boolean };
|
|
18
|
+
|
|
19
|
+
export type TPaginationSize = 'default' | 'small';
|
|
20
|
+
|
|
21
|
+
export type TPaginationOnChange = (page, pageSize) => ReactNode;
|
|
22
|
+
|
|
23
|
+
export type TPaginationOnShowSizeChange = (current, size) => ReactNode;
|
|
24
|
+
|
|
25
|
+
export interface IPaginationProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
26
|
+
/**
|
|
27
|
+
* Theme type
|
|
28
|
+
* @default dark
|
|
29
|
+
*/
|
|
30
|
+
theme?: 'light' | 'dark';
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* Alignment of the pagination component.
|
|
34
|
+
*/
|
|
35
|
+
align?: TPaginationAlign;
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* Current page number
|
|
39
|
+
*/
|
|
40
|
+
current?: number;
|
|
41
|
+
|
|
42
|
+
/**
|
|
43
|
+
* Default initial page number
|
|
44
|
+
* @default 1
|
|
45
|
+
*/
|
|
46
|
+
defaultCurrent?: number;
|
|
47
|
+
|
|
48
|
+
/**
|
|
49
|
+
* Default number of data items per page
|
|
50
|
+
* @default 10
|
|
51
|
+
*/
|
|
52
|
+
defaultPageSize?: number;
|
|
53
|
+
|
|
54
|
+
/**
|
|
55
|
+
* Disable pagination
|
|
56
|
+
*/
|
|
57
|
+
disabled?: boolean;
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* Whether to hide pager on single page
|
|
61
|
+
* @default false
|
|
62
|
+
*/
|
|
63
|
+
hideOnSinglePage?: boolean;
|
|
64
|
+
|
|
65
|
+
/**
|
|
66
|
+
* To customize item's innerHTML
|
|
67
|
+
*/
|
|
68
|
+
itemRender?: TPaginationItemRender;
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* Number of data items per page
|
|
72
|
+
*/
|
|
73
|
+
pageSize?: number;
|
|
74
|
+
|
|
75
|
+
/**
|
|
76
|
+
* Specify the sizeChanger options
|
|
77
|
+
* @default
|
|
78
|
+
* [10, 20, 50, 100]
|
|
79
|
+
*/
|
|
80
|
+
pageSizeOptions?: string[] | number[];
|
|
81
|
+
|
|
82
|
+
/**
|
|
83
|
+
* If size is not specified, Pagination would resize according to the width of the window
|
|
84
|
+
*/
|
|
85
|
+
responsive?: boolean;
|
|
86
|
+
|
|
87
|
+
/**
|
|
88
|
+
* Show less page items
|
|
89
|
+
* @default false
|
|
90
|
+
*/
|
|
91
|
+
showLessItems?: boolean;
|
|
92
|
+
|
|
93
|
+
/**
|
|
94
|
+
* Determine whether you can jump to pages directly
|
|
95
|
+
* @default false
|
|
96
|
+
*/
|
|
97
|
+
showQuickJumper?: TPaginationShowQuickJumper;
|
|
98
|
+
|
|
99
|
+
/**
|
|
100
|
+
* Determine whether to show pageSize select, it will be true when total > 50
|
|
101
|
+
*/
|
|
102
|
+
showSizeChanger?: boolean | SelectProps;
|
|
103
|
+
|
|
104
|
+
/**
|
|
105
|
+
* Show page item's title
|
|
106
|
+
* @default true
|
|
107
|
+
*/
|
|
108
|
+
showTitle?: boolean;
|
|
109
|
+
|
|
110
|
+
/**
|
|
111
|
+
* To display the total number and range
|
|
112
|
+
*/
|
|
113
|
+
showTotal?: TPaginationShowTotal;
|
|
114
|
+
|
|
115
|
+
/**
|
|
116
|
+
* Whether to use simple mode
|
|
117
|
+
*/
|
|
118
|
+
simple?: TPaginationSimple;
|
|
119
|
+
|
|
120
|
+
/**
|
|
121
|
+
* Specify the size of Pagination, can be set to small
|
|
122
|
+
* @default default
|
|
123
|
+
*/
|
|
124
|
+
size?: TPaginationSize;
|
|
125
|
+
|
|
126
|
+
/**
|
|
127
|
+
* Total number of data items
|
|
128
|
+
* @default 0
|
|
129
|
+
*/
|
|
130
|
+
total: number;
|
|
131
|
+
|
|
132
|
+
/**
|
|
133
|
+
* Called when the page number or pageSize is changed, and it takes the resulting page number and pageSize as its arguments
|
|
134
|
+
*/
|
|
135
|
+
onChange?: TPaginationOnChange;
|
|
136
|
+
|
|
137
|
+
/**
|
|
138
|
+
* Called when pageSize is changed
|
|
139
|
+
*/
|
|
140
|
+
onShowSizeChange?: TPaginationOnShowSizeChange;
|
|
141
|
+
|
|
142
|
+
/**
|
|
143
|
+
* Localization strings
|
|
144
|
+
*/
|
|
145
|
+
locale?: {
|
|
146
|
+
items_per_page?: string;
|
|
147
|
+
jump_to?: string;
|
|
148
|
+
jump_to_confirm?: string;
|
|
149
|
+
page?: string;
|
|
150
|
+
prev_page?: string;
|
|
151
|
+
next_page?: string;
|
|
152
|
+
prev_5?: string;
|
|
153
|
+
next_5?: string;
|
|
154
|
+
prev_3?: string;
|
|
155
|
+
next_3?: string;
|
|
156
|
+
};
|
|
157
|
+
|
|
158
|
+
/**
|
|
159
|
+
* Never use this prop. Akinon design system does not allow custom styles.
|
|
160
|
+
* @ignore
|
|
161
|
+
*/
|
|
162
|
+
style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
|
|
163
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@akinon/ui-pagination",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Pagination component for Akinon UI",
|
|
6
6
|
"type": "module",
|
|
@@ -10,14 +10,15 @@
|
|
|
10
10
|
"dist"
|
|
11
11
|
],
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"antd": "5.
|
|
13
|
+
"antd": "5.22.6"
|
|
14
14
|
},
|
|
15
15
|
"devDependencies": {
|
|
16
16
|
"clean-package": "2.2.0",
|
|
17
17
|
"copyfiles": "^2.4.1",
|
|
18
18
|
"rimraf": "^5.0.5",
|
|
19
|
-
"typescript": "
|
|
20
|
-
"@akinon/typescript-config": "0.
|
|
19
|
+
"typescript": "*",
|
|
20
|
+
"@akinon/typescript-config": "1.0.0",
|
|
21
|
+
"@akinon/ui-theme": "1.0.0"
|
|
21
22
|
},
|
|
22
23
|
"peerDependencies": {
|
|
23
24
|
"react": ">=18",
|