@akinon/ui-pagination 1.2.0 → 1.3.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 (9) hide show
  1. package/dist/cjs/index.d.ts +1 -1
  2. package/dist/cjs/index.d.ts.map +1 -1
  3. package/dist/cjs/index.js +111 -292
  4. package/dist/cjs/types.d.ts +11 -6
  5. package/dist/esm/index.d.ts +1 -1
  6. package/dist/esm/index.d.ts.map +1 -1
  7. package/dist/esm/index.js +111 -292
  8. package/dist/esm/types.d.ts +11 -6
  9. package/package.json +13 -8
package/dist/cjs/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { IPaginationProps } from './types';
2
+ import type { IPaginationProps } from './types';
3
3
  /**
4
4
  * Pagination component for data navigation and display.
5
5
  *
package/dist/cjs/index.d.ts.map CHANGED
@@ -1 +1 @@
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,sBAuXtE,CAAC;AAEF,YAAY,EAAE,gBAAgB,EAAE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;;;;;;;;;;;;;;GAeG;AAEH,eAAO,MAAM,UAAU,GAAI,4BAA4B,gBAAgB,sBAwLtE,CAAC;AAEF,YAAY,EAAE,gBAAgB,EAAE,CAAC"}
package/dist/cjs/index.js CHANGED
@@ -12,9 +12,12 @@ 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_button_1 = require("@akinon/ui-button");
16
+ const ui_select_1 = require("@akinon/ui-select");
15
17
  const ui_theme_1 = require("@akinon/ui-theme");
16
18
  const cssinjs_1 = require("@ant-design/cssinjs");
17
19
  const antd_1 = require("antd");
20
+ const clsx_1 = require("clsx");
18
21
  const React = require("react");
19
22
  /**
20
23
  * Pagination component for data navigation and display.
@@ -35,325 +38,141 @@ const React = require("react");
35
38
  const Pagination = (_a) => {
36
39
  var restPaginationProps = __rest(_a, []);
37
40
  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 handleProcessNewPageNumber = () => {
59
- const pageNumber = Number(inputValue);
60
- if (!isNaN(pageNumber) && pageNumber >= 1 && pageNumber <= totalPage) {
61
- handlePageChange(pageNumber, restPaginationProps.pageSize || 10);
62
- }
63
- else {
64
- setInputValue(currentPage);
65
- }
66
- };
67
- const handleInputKeyDown = (e) => {
68
- if (e.key === 'Enter') {
69
- handleProcessNewPageNumber();
70
- }
71
- };
72
- const handleInputBlur = () => {
73
- handleProcessNewPageNumber();
74
- };
75
- React.useEffect(() => {
76
- if (inputRef.current && spanRef.current) {
77
- spanRef.current.textContent = String(inputValue);
78
- inputRef.current.style.width = `${spanRef.current.offsetWidth + 10}px`;
79
- }
80
- }, [inputValue]);
81
- React.useEffect(() => {
82
- if (typeof restPaginationProps.current !== 'undefined') {
83
- setInputValue(restPaginationProps.current);
84
- }
85
- }, [restPaginationProps.current]);
41
+ const { token } = (0, ui_theme_1.useToken)();
86
42
  const useStyle = (0, cssinjs_1.useStyleRegister)({
87
43
  token: token,
88
44
  path: ['Pagination'],
89
45
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
90
46
  theme: theme
91
47
  }, () => {
92
- const prefixCls = `:where(.${hashId}).${getPrefixCls()}-pagination`;
93
- const customTokens = theme.CustomTokens || {};
48
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
49
+ const prefixWithoutHash = `${getPrefixCls()}-pagination`;
50
+ const prefixClsWithoutHash = `.${prefixWithoutHash}`;
94
51
  return {
95
- [prefixCls]: {
96
- '*': {
97
- boxSizing: 'initial'
52
+ [prefixClsWithoutHash]: {
53
+ [`.${getPrefixCls()}-btn, .${getPrefixCls()}-select`]: {
54
+ [`--${getPrefixCls()}-color-text`]: (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.components) === null || _a === void 0 ? void 0 : _a.Pagination) === null || _b === void 0 ? void 0 : _b.colorText,
55
+ [`--${getPrefixCls()}-color-text-quaternary`]: (_d = (_c = theme === null || theme === void 0 ? void 0 : theme.components) === null || _c === void 0 ? void 0 : _c.Pagination) === null || _d === void 0 ? void 0 : _d.colorText,
56
+ [`--${getPrefixCls()}-control-height`]: '100%',
57
+ [`--${getPrefixCls()}-line-width`]: 1,
58
+ [`--${getPrefixCls()}-select-selector-bg`]: 'white'
98
59
  },
99
- [`&${prefixClsWithoutHash}-simple`]: {
100
- height: customTokens.sizing.sizeMaxContent,
101
- maxWidth: customTokens.sizing.sizeMaxContent,
102
- [`${prefixClsWithoutHash}-simple-pager`]: {
103
- minWidth: paginationToken.Simple.minWidth,
104
- fontSize: paginationToken.fontSize,
105
- fontWeight: paginationToken.Simple.fontWeight,
106
- color: paginationToken.Simple.color
107
- },
108
- ['input']: {
109
- backgroundColor: `${customTokens.others.colorTransparent} !important`,
110
- border: `${customTokens.border.borderNone} !important`,
111
- color: paginationToken.Simple.input.textColor,
112
- fontSize: paginationToken.fontSize,
113
- fontWeight: customTokens.typography.fontWeightBold,
114
- padding: customTokens.sizing.valueZero,
115
- boxShadow: customTokens.layout.displayNone
116
- },
117
- [`${prefixClsWithoutHash}-prev, ${prefixClsWithoutHash}-next`]: {
118
- minWidth: customTokens.sizing.sizeMaxContent,
119
- [`svg`]: {
120
- width: paginationToken.Simple.prevNextButton.svgWidth,
121
- height: customTokens.sizing.valueFull,
122
- fill: paginationToken.Simple.prevNextButton.svgFill
123
- }
124
- },
125
- [`${prefixClsWithoutHash}-slash`]: {
126
- margin: customTokens.sizing.valueZero,
127
- paddingRight: paginationToken.Simple.slashPadding
128
- },
129
- [`&${prefixClsWithoutHash}-light`]: {
130
- [`&${prefixClsWithoutHash}-simple`]: {
131
- ['input']: {
132
- color: paginationToken.Simple.lightInputTextColor
133
- }
134
- }
135
- },
136
- [`&${prefixClsWithoutHash}-dark`]: {
137
- [`&${prefixClsWithoutHash}-simple`]: {
138
- ['input']: {
139
- color: paginationToken.Simple.darkInputTextColor
140
- }
141
- }
60
+ '& &-prev, & &-next': {
61
+ button: {
62
+ backgroundColor: 'white',
63
+ border: '1px solid',
64
+ borderColor: (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.components) === null || _e === void 0 ? void 0 : _e.Pagination) === null || _f === void 0 ? void 0 : _f.colorBorder
65
+ }
66
+ },
67
+ '& &-prev': {
68
+ button: {
69
+ borderRadius: '5px 0 0 5px',
70
+ borderInlineEnd: 'none'
142
71
  },
143
- [`${prefixClsWithoutHash}-options, ${prefixClsWithoutHash}-total-text`]: {
144
- display: customTokens.layout.displayNone
72
+ '& svg': {
73
+ transform: 'rotate(-90deg)'
145
74
  }
146
75
  },
147
- [`&:not(&${prefixClsWithoutHash}-simple)`]: {
148
- display: customTokens.layout.displayContents,
149
- [`${prefixClsWithoutHash}-total-text`]: {
150
- width: customTokens.sizing.sizeFitContent,
151
- fontWeight: customTokens.typography.fontWeightMedium,
152
- color: paginationToken.Table.totalText.color,
153
- margin: paginationToken.Table.totalText.margin,
154
- height: customTokens.sizing.valueFull,
155
- display: customTokens.layout.displayFlex,
156
- alignItems: customTokens.layout.flexCenter,
157
- gridArea: 'total'
76
+ '& &-next': {
77
+ button: {
78
+ borderRadius: '0 5px 5px 0',
79
+ borderInlineStart: 'none'
158
80
  },
159
- [`${prefixClsWithoutHash}-prev, ${prefixClsWithoutHash}-next`]: {
160
- height: customTokens.sizing.sizeMaxContent,
161
- lineHeight: customTokens.others.lineHeightShort,
162
- display: customTokens.layout.displayFlex,
163
- margin: customTokens.sizing.valueZero,
164
- [`${prefixClsWithoutHash}-item-link`]: {
165
- border: `${customTokens.border.borderNone} !important`,
166
- padding: customTokens.sizing.valueZero,
167
- lineHeight: customTokens.others.lineHeightShort,
168
- width: customTokens.sizing.sizeMaxContent,
169
- height: customTokens.sizing.sizeMaxContent
170
- },
171
- [`svg`]: {
172
- width: paginationToken.Table.prevNextButton.svgWidth,
173
- height: customTokens.sizing.sizeMaxContent,
174
- fill: paginationToken.Table.prevNextButton.svgFill,
175
- padding: paginationToken.Table.prevNextButton.svgPadding,
176
- border: paginationToken.Table.prevNextButton.svgBorder
177
- },
178
- [`&${prefixClsWithoutHash}-prev`]: {
179
- height: customTokens.sizing.sizeMaxContent,
180
- gridArea: 'previous',
181
- [`svg`]: {
182
- borderRightWidth: customTokens.sizing.valueZero,
183
- borderRadius: paginationToken.Table.prevNextButton.prevSvgBorderRadius
184
- }
185
- },
186
- [`&${prefixClsWithoutHash}-next`]: {
187
- height: customTokens.sizing.sizeMaxContent,
188
- gridArea: 'next',
189
- [`svg`]: {
190
- borderLeftWidth: customTokens.sizing.valueZero,
191
- borderRadius: paginationToken.Table.prevNextButton.nextSvgBorderRadius
192
- }
193
- }
81
+ '& svg': {
82
+ transform: 'rotate(90deg)'
83
+ }
84
+ },
85
+ '& &-total-text': {
86
+ marginInlineEnd: 32
87
+ },
88
+ '&-options': {
89
+ order: -1,
90
+ marginInlineEnd: 32
91
+ },
92
+ [`& &-simple`]: {
93
+ '&-pager': {
94
+ backgroundColor: 'white',
95
+ borderInlineEnd: '1px solid',
96
+ borderBlock: '1px solid',
97
+ borderColor: (_h = (_g = theme === null || theme === void 0 ? void 0 : theme.components) === null || _g === void 0 ? void 0 : _g.Pagination) === null || _h === void 0 ? void 0 : _h.colorBorder,
98
+ paddingInlineEnd: 8
194
99
  },
195
- [`${prefixClsWithoutHash}-item`]: {
196
- [`&:not(&${prefixClsWithoutHash}-item-active, ${prefixClsWithoutHash}-item-${totalPage})`]: {
197
- display: customTokens.layout.displayNone
198
- },
199
- [`&${prefixClsWithoutHash}-item-active, &${prefixClsWithoutHash}-item-${totalPage}`]: {
200
- margin: customTokens.sizing.valueZero,
201
- border: paginationToken.Table.pageInfo.border,
202
- borderRadius: customTokens.sizing.valueZero,
203
- minWidth: customTokens.sizing.sizeMaxContent,
204
- height: customTokens.sizing.sizeMaxContent,
205
- [`a`]: {
206
- padding: paginationToken.Table.pageInfo.padding,
207
- lineHeight: customTokens.others.lineHeightShort,
208
- width: customTokens.sizing.sizeMaxContent
209
- }
210
- },
211
- [`&${prefixClsWithoutHash}-item-active`]: {
212
- backgroundColor: paginationToken.Table.pageInfo.currentPageBgColor,
213
- display: customTokens.layout.displayNone,
214
- [`a`]: {
215
- minWidth: paginationToken.Table.pageInfo.currentPageMinWidth,
216
- color: paginationToken.Table.pageInfo.currentPageTextColor,
217
- fontWeight: paginationToken.Table.pageInfo.currentPageFontWeight
100
+ '&-pager input': {
101
+ marginInlineEnd: 8,
102
+ boxShadow: `inset 2px 2px 0 0 ${(_k = (_j = theme === null || theme === void 0 ? void 0 : theme.components) === null || _j === void 0 ? void 0 : _j.Pagination) === null || _k === void 0 ? void 0 : _k.boxShadow}`
103
+ }
104
+ },
105
+ '&.--light, &.--dark': {
106
+ [prefixClsWithoutHash]: {
107
+ '&-simple': {
108
+ '&-pager input': {
109
+ color: (_m = (_l = theme === null || theme === void 0 ? void 0 : theme.components) === null || _l === void 0 ? void 0 : _l.Pagination) === null || _m === void 0 ? void 0 : _m.colorTextBase,
110
+ borderInline: '1px solid',
111
+ borderColor: (_p = (_o = theme === null || theme === void 0 ? void 0 : theme.components) === null || _o === void 0 ? void 0 : _o.Pagination) === null || _p === void 0 ? void 0 : _p.colorBorder
218
112
  }
219
113
  }
220
- },
221
- [`${prefixClsWithoutHash}-jump-prev, ${prefixClsWithoutHash}-jump-next`]: {
222
- display: customTokens.layout.displayNone
223
- },
224
- [`${prefixClsWithoutHash}-options`]: {
225
- display: customTokens.layout.displayContents,
226
- [`&-size-changer`]: {
227
- gridArea: 'options',
228
- width: customTokens.sizing.sizeFitContent,
229
- height: customTokens.sizing.sizeMaxContent,
230
- display: customTokens.layout.displayFlex,
231
- flexDirection: customTokens.layout.flexDirectionRow,
232
- alignItems: customTokens.layout.flexCenter,
233
- columnGap: paginationToken.Table.sizeChanger.colGap,
234
- border: paginationToken.Table.sizeChanger.border,
235
- borderRadius: paginationToken.Table.sizeChanger.borderRadius,
236
- [`.akinon-select-selector`]: {
237
- border: `${customTokens.border.borderNone} !important`,
238
- lineHeight: customTokens.others.lineHeightShort,
239
- padding: paginationToken.Table.sizeChanger.item1.padding,
240
- [`.akinon-select-selection-item`]: {
241
- paddingInlineEnd: customTokens.sizing.valueZero,
242
- lineHeight: customTokens.others.lineHeightShort,
243
- fontWeight: customTokens.typography.fontWeightBold
244
- },
245
- [`&::after`]: {
246
- lineHeight: customTokens.others.lineHeightShort
114
+ }
115
+ },
116
+ '&.--ghost': {
117
+ '&.--dark': {
118
+ [prefixClsWithoutHash]: {
119
+ '&-simple': {
120
+ '&-pager input': {
121
+ color: 'white'
247
122
  }
248
- },
249
- [`.akinon-select-arrow`]: {
250
- width: paginationToken.Table.sizeChanger.icon.width,
251
- position: customTokens.layout.positionRelative,
252
- height: customTokens.sizing.valueAuto,
253
- top: customTokens.sizing.valueZero,
254
- margin: customTokens.sizing.valueAuto,
255
- fontWeight: customTokens.typography.fontWeightBold
256
123
  }
257
124
  }
258
125
  },
259
- [`:not(${prefixClsWithoutHash}-light)`]: {
260
- [`&${prefixClsWithoutHash}-item-${totalPage}`]: {
261
- backgroundColor: `${customTokens.others.colorTransparent} !important`,
262
- [`a`]: {
263
- color: paginationToken.Table.sizeChanger.item2.textColor
264
- }
265
- },
266
- [`${prefixClsWithoutHash}-options`]: {
267
- display: customTokens.layout.displayContents,
268
- [`&-size-changer`]: {
269
- background: `${customTokens.others.colorTransparent} !important`
270
- }
271
- },
272
- [`.akinon-select-selector`]: {
273
- background: `${customTokens.others.colorTransparent} !important`,
274
- [`.akinon-select-selection-item`]: {
275
- color: paginationToken.Table.sizeChanger.item2.textColor
276
- }
277
- },
278
- [`.akinon-select-arrow`]: {
279
- background: `${customTokens.others.colorTransparent} !important`
280
- }
281
- },
282
- [`${prefixClsWithoutHash}-light`]: {
283
- [`${prefixClsWithoutHash}-item-${totalPage}`]: {
284
- backgroundColor: paginationToken.Table.pageInfo.totalPageBgColor,
285
- [`a`]: {
286
- color: paginationToken.Table.pageInfo.totalPageTextColor
126
+ [prefixClsWithoutHash]: {
127
+ '&-simple': {
128
+ '&-pager': {
129
+ backgroundColor: 'transparent',
130
+ border: 'none',
131
+ padding: 0
132
+ },
133
+ '&-pager input': {
134
+ margin: 0,
135
+ boxShadow: 'none',
136
+ backgroundColor: 'transparent',
137
+ border: 'none'
287
138
  }
288
139
  },
289
- [`${prefixClsWithoutHash}-options`]: {
290
- [`&-size-changer`]: {
291
- background: paginationToken.Table.sizeChanger.bgColor
292
- },
293
- [`.akinon-select-selector`]: {
294
- background: paginationToken.Table.sizeChanger.item1.bgColor,
295
- [`.akinon-select-selection-item`]: {
296
- color: paginationToken.Table.sizeChanger.item2.textColor
297
- }
298
- },
299
- [`.akinon-select-arrow`]: {
300
- background: paginationToken.Table.sizeChanger.icon.bgColor
140
+ '&-prev, &-next': {
141
+ button: {
142
+ backgroundColor: 'transparent',
143
+ border: 'none'
301
144
  }
302
145
  }
303
146
  }
304
147
  }
305
- },
306
- [`${prefixClsWithoutHash}-parent`]: {
307
- display: customTokens.layout.displayGrid,
308
- gridTemplateAreas: `'options total previous goto showTotal next'`,
309
- gridTemplateColumns: 'max-content max-content max-content max-content max-content max-content',
310
- height: customTokens.sizing.sizeMaxContent,
311
- maxWidth: customTokens.sizing.sizeMaxContent
312
- },
313
- [`${prefixClsWithoutHash}-options-quick-jumper-new`]: {
314
- display: restPaginationProps.simple
315
- ? customTokens.layout.displayNone
316
- : customTokens.layout.displayBlock,
317
- gridArea: 'goto',
318
- overflow: customTokens.others.valueHidden,
319
- border: paginationToken.Jumper.border,
320
- borderRight: customTokens.sizing.valueZero,
321
- borderRadius: customTokens.sizing.valueZero,
322
- ['input, span']: {
323
- backgroundColor: paginationToken.Jumper.bgColor,
324
- color: paginationToken.Jumper.textColor,
325
- fontWeight: customTokens.typography.fontWeightBold,
326
- minWidth: paginationToken.Jumper.minWidth,
327
- border: `${customTokens.border.borderNone} !important`,
328
- height: paginationToken.Jumper.height,
329
- boxShadow: customTokens.layout.displayNone,
330
- textAlign: customTokens.typography.textAlignCenter,
331
- outline: customTokens.layout.displayNone
332
- },
333
- ['span']: {
334
- visibility: customTokens.others.valueHidden,
335
- whiteSpace: customTokens.typography.whiteSpacePre,
336
- position: customTokens.layout.positionAbsolute
337
- },
338
- [`&:not(${prefixClsWithoutHash}-light)`]: {
339
- ['input, span']: {
340
- backgroundColor: `${customTokens.others.colorTransparent} !important`,
341
- color: paginationToken.Table.prevNextButton.svgFill
342
- }
343
- },
344
- [`&${prefixClsWithoutHash}-light`]: {
345
- ['input, span']: {
346
- backgroundColor: `${customTokens.others.colorTransparent} !important`,
347
- color: paginationToken.Table.prevNextButton.svgFill
348
- }
349
- }
350
148
  }
351
149
  };
352
150
  });
353
- return useStyle(React.createElement("div", { className: `${prefixWithoutHash}-parent` },
354
- React.createElement(antd_1.Pagination, Object.assign({}, restPaginationProps, { className: themeClassName, locale: { jump_to: '', page: '', items_per_page: '' }, onChange: handlePageChange })),
355
- !restPaginationProps.simple && (React.createElement("div", { className: `${prefixWithoutHash}-options-quick-jumper-new ${themeClassName}` },
356
- React.createElement("span", { ref: spanRef }),
357
- React.createElement("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onBlur: handleInputBlur })))));
151
+ const themeClassName = restPaginationProps.theme === 'dark' ? '--dark' : '--light';
152
+ const ghostClassName = restPaginationProps.ghost ? '--ghost' : '';
153
+ // Custom item render - Only for navigation arrows
154
+ const itemRender = (_page, type, originalElement) => {
155
+ const shouldNotRender = type === 'jump-prev' || type === 'jump-next';
156
+ if (shouldNotRender) {
157
+ return null;
158
+ }
159
+ else if (type === 'prev' || type === 'next') {
160
+ return React.createElement(ui_button_1.Button, { icon: "chevron_up", type: "icon", iconSize: 10 });
161
+ }
162
+ return originalElement;
163
+ };
164
+ const commonProps = {
165
+ className: (0, clsx_1.default)(themeClassName, ghostClassName, restPaginationProps.className),
166
+ itemRender,
167
+ showQuickJumper: false,
168
+ simple: true,
169
+ locale: {
170
+ items_per_page: ''
171
+ }
172
+ };
173
+ return useStyle(React.createElement(antd_1.Pagination, Object.assign({}, restPaginationProps, commonProps, { showSizeChanger: restPaginationProps.ghost ? false : restPaginationProps.showSizeChanger,
174
+ // TODO: [next major antd version] sizeChangerRender prop comes from rc-pagination
175
+ // but ant design doesn't use it, this prop is deprecated but needs to be handled
176
+ selectComponentClass: (props) => React.createElement(ui_select_1.Select, Object.assign({}, props)) })));
358
177
  };
359
178
  exports.Pagination = Pagination;
package/dist/cjs/types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- import { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
1
+ import type { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
2
2
  import type { SelectProps } from 'antd';
3
- import { ReactNode } from 'react';
3
+ import type { ReactNode } from 'react';
4
4
 
5
5
  export type TPaginationAlign = 'start' | 'center' | 'end';
6
6
 
@@ -14,8 +14,6 @@ export type TPaginationShowQuickJumper = boolean | { goButton: ReactNode };
14
14
 
15
15
  export type TPaginationShowTotal = (total, range) => ReactNode;
16
16
 
17
- export type TPaginationSimple = boolean | { readOnly?: boolean };
18
-
19
17
  export type TPaginationSize = 'default' | 'small';
20
18
 
21
19
  export type TPaginationOnChange = (page, pageSize) => ReactNode;
@@ -113,9 +111,16 @@ export interface IPaginationProps extends React.HTMLAttributes<HTMLDivElement> {
113
111
  showTotal?: TPaginationShowTotal;
114
112
 
115
113
  /**
116
- * Whether to use simple mode
114
+ * Bordered or ghost pagination
115
+ * @default false
116
+ */
117
+ ghost?: boolean;
118
+
119
+ /**
120
+ * Read only mode
121
+ * @default false
117
122
  */
118
- simple?: TPaginationSimple;
123
+ readonly?: boolean;
119
124
 
120
125
  /**
121
126
  * Specify the size of Pagination, can be set to small
package/dist/esm/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { IPaginationProps } from './types';
2
+ import type { IPaginationProps } from './types';
3
3
  /**
4
4
  * Pagination component for data navigation and display.
5
5
  *
package/dist/esm/index.d.ts.map CHANGED
@@ -1 +1 @@
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,sBAuXtE,CAAC;AAEF,YAAY,EAAE,gBAAgB,EAAE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;;;;;;;;;;;;;;GAeG;AAEH,eAAO,MAAM,UAAU,GAAI,4BAA4B,gBAAgB,sBAwLtE,CAAC;AAEF,YAAY,EAAE,gBAAgB,EAAE,CAAC"}
package/dist/esm/index.js CHANGED
@@ -9,9 +9,12 @@ var __rest = (this && this.__rest) || function (s, e) {
9
9
  }
10
10
  return t;
11
11
  };
12
+ import { Button } from '@akinon/ui-button';
13
+ import { Select } from '@akinon/ui-select';
12
14
  import { useToken } from '@akinon/ui-theme';
13
15
  import { useStyleRegister } from '@ant-design/cssinjs';
14
16
  import { ConfigProvider, Pagination as AntPagination } from 'antd';
17
+ import clsx from 'clsx';
15
18
  import * as React from 'react';
16
19
  /**
17
20
  * Pagination component for data navigation and display.
@@ -32,324 +35,140 @@ import * as React from 'react';
32
35
  export const Pagination = (_a) => {
33
36
  var restPaginationProps = __rest(_a, []);
34
37
  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 handleProcessNewPageNumber = () => {
56
- const pageNumber = Number(inputValue);
57
- if (!isNaN(pageNumber) && pageNumber >= 1 && pageNumber <= totalPage) {
58
- handlePageChange(pageNumber, restPaginationProps.pageSize || 10);
59
- }
60
- else {
61
- setInputValue(currentPage);
62
- }
63
- };
64
- const handleInputKeyDown = (e) => {
65
- if (e.key === 'Enter') {
66
- handleProcessNewPageNumber();
67
- }
68
- };
69
- const handleInputBlur = () => {
70
- handleProcessNewPageNumber();
71
- };
72
- React.useEffect(() => {
73
- if (inputRef.current && spanRef.current) {
74
- spanRef.current.textContent = String(inputValue);
75
- inputRef.current.style.width = `${spanRef.current.offsetWidth + 10}px`;
76
- }
77
- }, [inputValue]);
78
- React.useEffect(() => {
79
- if (typeof restPaginationProps.current !== 'undefined') {
80
- setInputValue(restPaginationProps.current);
81
- }
82
- }, [restPaginationProps.current]);
38
+ const { token } = useToken();
83
39
  const useStyle = useStyleRegister({
84
40
  token: token,
85
41
  path: ['Pagination'],
86
42
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
87
43
  theme: theme
88
44
  }, () => {
89
- const prefixCls = `:where(.${hashId}).${getPrefixCls()}-pagination`;
90
- const customTokens = theme.CustomTokens || {};
45
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
46
+ const prefixWithoutHash = `${getPrefixCls()}-pagination`;
47
+ const prefixClsWithoutHash = `.${prefixWithoutHash}`;
91
48
  return {
92
- [prefixCls]: {
93
- '*': {
94
- boxSizing: 'initial'
49
+ [prefixClsWithoutHash]: {
50
+ [`.${getPrefixCls()}-btn, .${getPrefixCls()}-select`]: {
51
+ [`--${getPrefixCls()}-color-text`]: (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.components) === null || _a === void 0 ? void 0 : _a.Pagination) === null || _b === void 0 ? void 0 : _b.colorText,
52
+ [`--${getPrefixCls()}-color-text-quaternary`]: (_d = (_c = theme === null || theme === void 0 ? void 0 : theme.components) === null || _c === void 0 ? void 0 : _c.Pagination) === null || _d === void 0 ? void 0 : _d.colorText,
53
+ [`--${getPrefixCls()}-control-height`]: '100%',
54
+ [`--${getPrefixCls()}-line-width`]: 1,
55
+ [`--${getPrefixCls()}-select-selector-bg`]: 'white'
95
56
  },
96
- [`&${prefixClsWithoutHash}-simple`]: {
97
- height: customTokens.sizing.sizeMaxContent,
98
- maxWidth: customTokens.sizing.sizeMaxContent,
99
- [`${prefixClsWithoutHash}-simple-pager`]: {
100
- minWidth: paginationToken.Simple.minWidth,
101
- fontSize: paginationToken.fontSize,
102
- fontWeight: paginationToken.Simple.fontWeight,
103
- color: paginationToken.Simple.color
104
- },
105
- ['input']: {
106
- backgroundColor: `${customTokens.others.colorTransparent} !important`,
107
- border: `${customTokens.border.borderNone} !important`,
108
- color: paginationToken.Simple.input.textColor,
109
- fontSize: paginationToken.fontSize,
110
- fontWeight: customTokens.typography.fontWeightBold,
111
- padding: customTokens.sizing.valueZero,
112
- boxShadow: customTokens.layout.displayNone
113
- },
114
- [`${prefixClsWithoutHash}-prev, ${prefixClsWithoutHash}-next`]: {
115
- minWidth: customTokens.sizing.sizeMaxContent,
116
- [`svg`]: {
117
- width: paginationToken.Simple.prevNextButton.svgWidth,
118
- height: customTokens.sizing.valueFull,
119
- fill: paginationToken.Simple.prevNextButton.svgFill
120
- }
121
- },
122
- [`${prefixClsWithoutHash}-slash`]: {
123
- margin: customTokens.sizing.valueZero,
124
- paddingRight: paginationToken.Simple.slashPadding
125
- },
126
- [`&${prefixClsWithoutHash}-light`]: {
127
- [`&${prefixClsWithoutHash}-simple`]: {
128
- ['input']: {
129
- color: paginationToken.Simple.lightInputTextColor
130
- }
131
- }
132
- },
133
- [`&${prefixClsWithoutHash}-dark`]: {
134
- [`&${prefixClsWithoutHash}-simple`]: {
135
- ['input']: {
136
- color: paginationToken.Simple.darkInputTextColor
137
- }
138
- }
57
+ '& &-prev, & &-next': {
58
+ button: {
59
+ backgroundColor: 'white',
60
+ border: '1px solid',
61
+ borderColor: (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.components) === null || _e === void 0 ? void 0 : _e.Pagination) === null || _f === void 0 ? void 0 : _f.colorBorder
62
+ }
63
+ },
64
+ '& &-prev': {
65
+ button: {
66
+ borderRadius: '5px 0 0 5px',
67
+ borderInlineEnd: 'none'
139
68
  },
140
- [`${prefixClsWithoutHash}-options, ${prefixClsWithoutHash}-total-text`]: {
141
- display: customTokens.layout.displayNone
69
+ '& svg': {
70
+ transform: 'rotate(-90deg)'
142
71
  }
143
72
  },
144
- [`&:not(&${prefixClsWithoutHash}-simple)`]: {
145
- display: customTokens.layout.displayContents,
146
- [`${prefixClsWithoutHash}-total-text`]: {
147
- width: customTokens.sizing.sizeFitContent,
148
- fontWeight: customTokens.typography.fontWeightMedium,
149
- color: paginationToken.Table.totalText.color,
150
- margin: paginationToken.Table.totalText.margin,
151
- height: customTokens.sizing.valueFull,
152
- display: customTokens.layout.displayFlex,
153
- alignItems: customTokens.layout.flexCenter,
154
- gridArea: 'total'
73
+ '& &-next': {
74
+ button: {
75
+ borderRadius: '0 5px 5px 0',
76
+ borderInlineStart: 'none'
155
77
  },
156
- [`${prefixClsWithoutHash}-prev, ${prefixClsWithoutHash}-next`]: {
157
- height: customTokens.sizing.sizeMaxContent,
158
- lineHeight: customTokens.others.lineHeightShort,
159
- display: customTokens.layout.displayFlex,
160
- margin: customTokens.sizing.valueZero,
161
- [`${prefixClsWithoutHash}-item-link`]: {
162
- border: `${customTokens.border.borderNone} !important`,
163
- padding: customTokens.sizing.valueZero,
164
- lineHeight: customTokens.others.lineHeightShort,
165
- width: customTokens.sizing.sizeMaxContent,
166
- height: customTokens.sizing.sizeMaxContent
167
- },
168
- [`svg`]: {
169
- width: paginationToken.Table.prevNextButton.svgWidth,
170
- height: customTokens.sizing.sizeMaxContent,
171
- fill: paginationToken.Table.prevNextButton.svgFill,
172
- padding: paginationToken.Table.prevNextButton.svgPadding,
173
- border: paginationToken.Table.prevNextButton.svgBorder
174
- },
175
- [`&${prefixClsWithoutHash}-prev`]: {
176
- height: customTokens.sizing.sizeMaxContent,
177
- gridArea: 'previous',
178
- [`svg`]: {
179
- borderRightWidth: customTokens.sizing.valueZero,
180
- borderRadius: paginationToken.Table.prevNextButton.prevSvgBorderRadius
181
- }
182
- },
183
- [`&${prefixClsWithoutHash}-next`]: {
184
- height: customTokens.sizing.sizeMaxContent,
185
- gridArea: 'next',
186
- [`svg`]: {
187
- borderLeftWidth: customTokens.sizing.valueZero,
188
- borderRadius: paginationToken.Table.prevNextButton.nextSvgBorderRadius
189
- }
190
- }
78
+ '& svg': {
79
+ transform: 'rotate(90deg)'
80
+ }
81
+ },
82
+ '& &-total-text': {
83
+ marginInlineEnd: 32
84
+ },
85
+ '&-options': {
86
+ order: -1,
87
+ marginInlineEnd: 32
88
+ },
89
+ [`& &-simple`]: {
90
+ '&-pager': {
91
+ backgroundColor: 'white',
92
+ borderInlineEnd: '1px solid',
93
+ borderBlock: '1px solid',
94
+ borderColor: (_h = (_g = theme === null || theme === void 0 ? void 0 : theme.components) === null || _g === void 0 ? void 0 : _g.Pagination) === null || _h === void 0 ? void 0 : _h.colorBorder,
95
+ paddingInlineEnd: 8
191
96
  },
192
- [`${prefixClsWithoutHash}-item`]: {
193
- [`&:not(&${prefixClsWithoutHash}-item-active, ${prefixClsWithoutHash}-item-${totalPage})`]: {
194
- display: customTokens.layout.displayNone
195
- },
196
- [`&${prefixClsWithoutHash}-item-active, &${prefixClsWithoutHash}-item-${totalPage}`]: {
197
- margin: customTokens.sizing.valueZero,
198
- border: paginationToken.Table.pageInfo.border,
199
- borderRadius: customTokens.sizing.valueZero,
200
- minWidth: customTokens.sizing.sizeMaxContent,
201
- height: customTokens.sizing.sizeMaxContent,
202
- [`a`]: {
203
- padding: paginationToken.Table.pageInfo.padding,
204
- lineHeight: customTokens.others.lineHeightShort,
205
- width: customTokens.sizing.sizeMaxContent
206
- }
207
- },
208
- [`&${prefixClsWithoutHash}-item-active`]: {
209
- backgroundColor: paginationToken.Table.pageInfo.currentPageBgColor,
210
- display: customTokens.layout.displayNone,
211
- [`a`]: {
212
- minWidth: paginationToken.Table.pageInfo.currentPageMinWidth,
213
- color: paginationToken.Table.pageInfo.currentPageTextColor,
214
- fontWeight: paginationToken.Table.pageInfo.currentPageFontWeight
97
+ '&-pager input': {
98
+ marginInlineEnd: 8,
99
+ boxShadow: `inset 2px 2px 0 0 ${(_k = (_j = theme === null || theme === void 0 ? void 0 : theme.components) === null || _j === void 0 ? void 0 : _j.Pagination) === null || _k === void 0 ? void 0 : _k.boxShadow}`
100
+ }
101
+ },
102
+ '&.--light, &.--dark': {
103
+ [prefixClsWithoutHash]: {
104
+ '&-simple': {
105
+ '&-pager input': {
106
+ color: (_m = (_l = theme === null || theme === void 0 ? void 0 : theme.components) === null || _l === void 0 ? void 0 : _l.Pagination) === null || _m === void 0 ? void 0 : _m.colorTextBase,
107
+ borderInline: '1px solid',
108
+ borderColor: (_p = (_o = theme === null || theme === void 0 ? void 0 : theme.components) === null || _o === void 0 ? void 0 : _o.Pagination) === null || _p === void 0 ? void 0 : _p.colorBorder
215
109
  }
216
110
  }
217
- },
218
- [`${prefixClsWithoutHash}-jump-prev, ${prefixClsWithoutHash}-jump-next`]: {
219
- display: customTokens.layout.displayNone
220
- },
221
- [`${prefixClsWithoutHash}-options`]: {
222
- display: customTokens.layout.displayContents,
223
- [`&-size-changer`]: {
224
- gridArea: 'options',
225
- width: customTokens.sizing.sizeFitContent,
226
- height: customTokens.sizing.sizeMaxContent,
227
- display: customTokens.layout.displayFlex,
228
- flexDirection: customTokens.layout.flexDirectionRow,
229
- alignItems: customTokens.layout.flexCenter,
230
- columnGap: paginationToken.Table.sizeChanger.colGap,
231
- border: paginationToken.Table.sizeChanger.border,
232
- borderRadius: paginationToken.Table.sizeChanger.borderRadius,
233
- [`.akinon-select-selector`]: {
234
- border: `${customTokens.border.borderNone} !important`,
235
- lineHeight: customTokens.others.lineHeightShort,
236
- padding: paginationToken.Table.sizeChanger.item1.padding,
237
- [`.akinon-select-selection-item`]: {
238
- paddingInlineEnd: customTokens.sizing.valueZero,
239
- lineHeight: customTokens.others.lineHeightShort,
240
- fontWeight: customTokens.typography.fontWeightBold
241
- },
242
- [`&::after`]: {
243
- lineHeight: customTokens.others.lineHeightShort
111
+ }
112
+ },
113
+ '&.--ghost': {
114
+ '&.--dark': {
115
+ [prefixClsWithoutHash]: {
116
+ '&-simple': {
117
+ '&-pager input': {
118
+ color: 'white'
244
119
  }
245
- },
246
- [`.akinon-select-arrow`]: {
247
- width: paginationToken.Table.sizeChanger.icon.width,
248
- position: customTokens.layout.positionRelative,
249
- height: customTokens.sizing.valueAuto,
250
- top: customTokens.sizing.valueZero,
251
- margin: customTokens.sizing.valueAuto,
252
- fontWeight: customTokens.typography.fontWeightBold
253
120
  }
254
121
  }
255
122
  },
256
- [`:not(${prefixClsWithoutHash}-light)`]: {
257
- [`&${prefixClsWithoutHash}-item-${totalPage}`]: {
258
- backgroundColor: `${customTokens.others.colorTransparent} !important`,
259
- [`a`]: {
260
- color: paginationToken.Table.sizeChanger.item2.textColor
261
- }
262
- },
263
- [`${prefixClsWithoutHash}-options`]: {
264
- display: customTokens.layout.displayContents,
265
- [`&-size-changer`]: {
266
- background: `${customTokens.others.colorTransparent} !important`
267
- }
268
- },
269
- [`.akinon-select-selector`]: {
270
- background: `${customTokens.others.colorTransparent} !important`,
271
- [`.akinon-select-selection-item`]: {
272
- color: paginationToken.Table.sizeChanger.item2.textColor
273
- }
274
- },
275
- [`.akinon-select-arrow`]: {
276
- background: `${customTokens.others.colorTransparent} !important`
277
- }
278
- },
279
- [`${prefixClsWithoutHash}-light`]: {
280
- [`${prefixClsWithoutHash}-item-${totalPage}`]: {
281
- backgroundColor: paginationToken.Table.pageInfo.totalPageBgColor,
282
- [`a`]: {
283
- color: paginationToken.Table.pageInfo.totalPageTextColor
123
+ [prefixClsWithoutHash]: {
124
+ '&-simple': {
125
+ '&-pager': {
126
+ backgroundColor: 'transparent',
127
+ border: 'none',
128
+ padding: 0
129
+ },
130
+ '&-pager input': {
131
+ margin: 0,
132
+ boxShadow: 'none',
133
+ backgroundColor: 'transparent',
134
+ border: 'none'
284
135
  }
285
136
  },
286
- [`${prefixClsWithoutHash}-options`]: {
287
- [`&-size-changer`]: {
288
- background: paginationToken.Table.sizeChanger.bgColor
289
- },
290
- [`.akinon-select-selector`]: {
291
- background: paginationToken.Table.sizeChanger.item1.bgColor,
292
- [`.akinon-select-selection-item`]: {
293
- color: paginationToken.Table.sizeChanger.item2.textColor
294
- }
295
- },
296
- [`.akinon-select-arrow`]: {
297
- background: paginationToken.Table.sizeChanger.icon.bgColor
137
+ '&-prev, &-next': {
138
+ button: {
139
+ backgroundColor: 'transparent',
140
+ border: 'none'
298
141
  }
299
142
  }
300
143
  }
301
144
  }
302
- },
303
- [`${prefixClsWithoutHash}-parent`]: {
304
- display: customTokens.layout.displayGrid,
305
- gridTemplateAreas: `'options total previous goto showTotal next'`,
306
- gridTemplateColumns: 'max-content max-content max-content max-content max-content max-content',
307
- height: customTokens.sizing.sizeMaxContent,
308
- maxWidth: customTokens.sizing.sizeMaxContent
309
- },
310
- [`${prefixClsWithoutHash}-options-quick-jumper-new`]: {
311
- display: restPaginationProps.simple
312
- ? customTokens.layout.displayNone
313
- : customTokens.layout.displayBlock,
314
- gridArea: 'goto',
315
- overflow: customTokens.others.valueHidden,
316
- border: paginationToken.Jumper.border,
317
- borderRight: customTokens.sizing.valueZero,
318
- borderRadius: customTokens.sizing.valueZero,
319
- ['input, span']: {
320
- backgroundColor: paginationToken.Jumper.bgColor,
321
- color: paginationToken.Jumper.textColor,
322
- fontWeight: customTokens.typography.fontWeightBold,
323
- minWidth: paginationToken.Jumper.minWidth,
324
- border: `${customTokens.border.borderNone} !important`,
325
- height: paginationToken.Jumper.height,
326
- boxShadow: customTokens.layout.displayNone,
327
- textAlign: customTokens.typography.textAlignCenter,
328
- outline: customTokens.layout.displayNone
329
- },
330
- ['span']: {
331
- visibility: customTokens.others.valueHidden,
332
- whiteSpace: customTokens.typography.whiteSpacePre,
333
- position: customTokens.layout.positionAbsolute
334
- },
335
- [`&:not(${prefixClsWithoutHash}-light)`]: {
336
- ['input, span']: {
337
- backgroundColor: `${customTokens.others.colorTransparent} !important`,
338
- color: paginationToken.Table.prevNextButton.svgFill
339
- }
340
- },
341
- [`&${prefixClsWithoutHash}-light`]: {
342
- ['input, span']: {
343
- backgroundColor: `${customTokens.others.colorTransparent} !important`,
344
- color: paginationToken.Table.prevNextButton.svgFill
345
- }
346
- }
347
145
  }
348
146
  };
349
147
  });
350
- return useStyle(React.createElement("div", { className: `${prefixWithoutHash}-parent` },
351
- React.createElement(AntPagination, Object.assign({}, restPaginationProps, { className: themeClassName, locale: { jump_to: '', page: '', items_per_page: '' }, onChange: handlePageChange })),
352
- !restPaginationProps.simple && (React.createElement("div", { className: `${prefixWithoutHash}-options-quick-jumper-new ${themeClassName}` },
353
- React.createElement("span", { ref: spanRef }),
354
- React.createElement("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onBlur: handleInputBlur })))));
148
+ const themeClassName = restPaginationProps.theme === 'dark' ? '--dark' : '--light';
149
+ const ghostClassName = restPaginationProps.ghost ? '--ghost' : '';
150
+ // Custom item render - Only for navigation arrows
151
+ const itemRender = (_page, type, originalElement) => {
152
+ const shouldNotRender = type === 'jump-prev' || type === 'jump-next';
153
+ if (shouldNotRender) {
154
+ return null;
155
+ }
156
+ else if (type === 'prev' || type === 'next') {
157
+ return React.createElement(Button, { icon: "chevron_up", type: "icon", iconSize: 10 });
158
+ }
159
+ return originalElement;
160
+ };
161
+ const commonProps = {
162
+ className: clsx(themeClassName, ghostClassName, restPaginationProps.className),
163
+ itemRender,
164
+ showQuickJumper: false,
165
+ simple: true,
166
+ locale: {
167
+ items_per_page: ''
168
+ }
169
+ };
170
+ return useStyle(React.createElement(AntPagination, Object.assign({}, restPaginationProps, commonProps, { showSizeChanger: restPaginationProps.ghost ? false : restPaginationProps.showSizeChanger,
171
+ // TODO: [next major antd version] sizeChangerRender prop comes from rc-pagination
172
+ // but ant design doesn't use it, this prop is deprecated but needs to be handled
173
+ selectComponentClass: (props) => React.createElement(Select, Object.assign({}, props)) })));
355
174
  };
package/dist/esm/types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- import { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
1
+ import type { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
2
2
  import type { SelectProps } from 'antd';
3
- import { ReactNode } from 'react';
3
+ import type { ReactNode } from 'react';
4
4
 
5
5
  export type TPaginationAlign = 'start' | 'center' | 'end';
6
6
 
@@ -14,8 +14,6 @@ export type TPaginationShowQuickJumper = boolean | { goButton: ReactNode };
14
14
 
15
15
  export type TPaginationShowTotal = (total, range) => ReactNode;
16
16
 
17
- export type TPaginationSimple = boolean | { readOnly?: boolean };
18
-
19
17
  export type TPaginationSize = 'default' | 'small';
20
18
 
21
19
  export type TPaginationOnChange = (page, pageSize) => ReactNode;
@@ -113,9 +111,16 @@ export interface IPaginationProps extends React.HTMLAttributes<HTMLDivElement> {
113
111
  showTotal?: TPaginationShowTotal;
114
112
 
115
113
  /**
116
- * Whether to use simple mode
114
+ * Bordered or ghost pagination
115
+ * @default false
116
+ */
117
+ ghost?: boolean;
118
+
119
+ /**
120
+ * Read only mode
121
+ * @default false
117
122
  */
118
- simple?: TPaginationSimple;
123
+ readonly?: boolean;
119
124
 
120
125
  /**
121
126
  * Specify the size of Pagination, can be set to small
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@akinon/ui-pagination",
3
- "version": "1.2.0",
3
+ "version": "1.3.0",
4
4
  "private": false,
5
5
  "description": "Pagination component for Akinon UI",
6
6
  "type": "module",
@@ -10,19 +10,24 @@
10
10
  "dist"
11
11
  ],
12
12
  "dependencies": {
13
- "antd": "5.22.6",
14
- "@akinon/ui-theme": "1.0.1"
13
+ "@ant-design/cssinjs": "^1.24.0",
14
+ "antd": "^5.27.0",
15
+ "clsx": "^2.1.1",
16
+ "@akinon/ui-theme": "1.1.0",
17
+ "@akinon/ui-button": "1.3.0",
18
+ "@akinon/ui-select": "1.3.0",
19
+ "@akinon/icons": "1.1.0"
15
20
  },
16
21
  "devDependencies": {
17
22
  "clean-package": "2.2.0",
18
23
  "copyfiles": "^2.4.1",
19
24
  "rimraf": "^5.0.5",
20
25
  "typescript": "*",
21
- "@akinon/typescript-config": "1.0.1"
26
+ "@akinon/typescript-config": "1.1.0"
22
27
  },
23
28
  "peerDependencies": {
24
- "react": ">=18",
25
- "react-dom": ">=18"
29
+ "react": "^18 || ^19",
30
+ "react-dom": "^18 || ^19"
26
31
  },
27
32
  "clean-package": "../../../clean-package.config.json",
28
33
  "types": "dist/esm/index.d.ts",
@@ -36,10 +41,10 @@
36
41
  },
37
42
  "scripts": {
38
43
  "build": "pnpm run build:esm && pnpm run build:commonjs && pnpm run copy:files",
39
- "build:esm": "tsc --outDir dist/esm",
40
44
  "build:commonjs": "tsc --module commonjs --outDir dist/cjs",
41
- "copy:files": "copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/esm && copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/cjs",
45
+ "build:esm": "tsc --outDir dist/esm",
42
46
  "clean": "rimraf dist/",
47
+ "copy:files": "copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/esm && copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/cjs",
43
48
  "typecheck": "tsc --noEmit"
44
49
  }
45
50
  }