@akinon/ui-pagination 1.0.0 → 1.0.1

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 (5) hide show
  1. package/dist/cjs/index.d.ts.map +1 -1
  2. package/dist/cjs/index.js +102 -89
  3. package/dist/esm/index.d.ts.map +1 -1
  4. package/dist/esm/index.js +102 -89
  5. package/package.json +3 -3
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,sBAuWtE,CAAC;AAEF,YAAY,EAAE,gBAAgB,EAAE,CAAC"}
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"}
package/dist/cjs/index.js CHANGED
@@ -55,23 +55,34 @@ const Pagination = (_a) => {
55
55
  const handleInputChange = (e) => {
56
56
  setInputValue(e.target.value);
57
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
+ };
58
67
  const handleInputKeyDown = (e) => {
59
68
  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
- }
69
+ handleProcessNewPageNumber();
67
70
  }
68
71
  };
72
+ const handleInputBlur = () => {
73
+ handleProcessNewPageNumber();
74
+ };
69
75
  React.useEffect(() => {
70
76
  if (inputRef.current && spanRef.current) {
71
77
  spanRef.current.textContent = String(inputValue);
72
78
  inputRef.current.style.width = `${spanRef.current.offsetWidth + 10}px`;
73
79
  }
74
80
  }, [inputValue]);
81
+ React.useEffect(() => {
82
+ if (typeof restPaginationProps.current !== 'undefined') {
83
+ setInputValue(restPaginationProps.current);
84
+ }
85
+ }, [restPaginationProps.current]);
75
86
  const useStyle = (0, cssinjs_1.useStyleRegister)({
76
87
  token: token,
77
88
  path: ['Pagination'],
@@ -79,15 +90,15 @@ const Pagination = (_a) => {
79
90
  theme: theme
80
91
  }, () => {
81
92
  const prefixCls = `:where(.${hashId}).${getPrefixCls()}-pagination`;
93
+ const customTokens = theme.CustomTokens || {};
82
94
  return {
83
- [prefixCls]: {},
84
- [prefixClsWithoutHash]: {
95
+ [prefixCls]: {
85
96
  '*': {
86
97
  boxSizing: 'initial'
87
98
  },
88
99
  [`&${prefixClsWithoutHash}-simple`]: {
89
- height: paginationToken.maxContent,
90
- maxWidth: paginationToken.maxContent,
100
+ height: customTokens.sizing.sizeMaxContent,
101
+ maxWidth: customTokens.sizing.sizeMaxContent,
91
102
  [`${prefixClsWithoutHash}-simple-pager`]: {
92
103
  minWidth: paginationToken.Simple.minWidth,
93
104
  fontSize: paginationToken.fontSize,
@@ -95,24 +106,24 @@ const Pagination = (_a) => {
95
106
  color: paginationToken.Simple.color
96
107
  },
97
108
  ['input']: {
98
- backgroundColor: paginationToken.transparent,
99
- border: paginationToken.none,
109
+ backgroundColor: `${customTokens.others.colorTransparent} !important`,
110
+ border: `${customTokens.border.borderNone} !important`,
100
111
  color: paginationToken.Simple.input.textColor,
101
112
  fontSize: paginationToken.fontSize,
102
- fontWeight: paginationToken.Simple.input.fontWeight,
103
- padding: paginationToken.zero,
104
- boxShadow: paginationToken.none
113
+ fontWeight: customTokens.typography.fontWeightBold,
114
+ padding: customTokens.sizing.valueZero,
115
+ boxShadow: customTokens.layout.displayNone
105
116
  },
106
117
  [`${prefixClsWithoutHash}-prev, ${prefixClsWithoutHash}-next`]: {
107
- minWidth: paginationToken.maxContent,
118
+ minWidth: customTokens.sizing.sizeMaxContent,
108
119
  [`svg`]: {
109
120
  width: paginationToken.Simple.prevNextButton.svgWidth,
110
- height: paginationToken.Simple.prevNextButton.svgHeight,
121
+ height: customTokens.sizing.valueFull,
111
122
  fill: paginationToken.Simple.prevNextButton.svgFill
112
123
  }
113
124
  },
114
125
  [`${prefixClsWithoutHash}-slash`]: {
115
- margin: paginationToken.zero,
126
+ margin: customTokens.sizing.valueZero,
116
127
  paddingRight: paginationToken.Simple.slashPadding
117
128
  },
118
129
  [`&${prefixClsWithoutHash}-light`]: {
@@ -130,76 +141,76 @@ const Pagination = (_a) => {
130
141
  }
131
142
  },
132
143
  [`${prefixClsWithoutHash}-options, ${prefixClsWithoutHash}-total-text`]: {
133
- display: paginationToken.none
144
+ display: customTokens.layout.displayNone
134
145
  }
135
146
  },
136
147
  [`&:not(&${prefixClsWithoutHash}-simple)`]: {
137
- display: paginationToken.displayContents,
148
+ display: customTokens.layout.displayContents,
138
149
  [`${prefixClsWithoutHash}-total-text`]: {
139
- width: paginationToken.Table.totalText.width,
140
- fontWeight: paginationToken.Table.totalText.fontWeight,
150
+ width: customTokens.sizing.sizeFitContent,
151
+ fontWeight: customTokens.typography.fontWeightMedium,
141
152
  color: paginationToken.Table.totalText.color,
142
153
  margin: paginationToken.Table.totalText.margin,
143
- height: paginationToken.full,
144
- display: paginationToken.displayFlex,
145
- alignItems: paginationToken.center,
154
+ height: customTokens.sizing.valueFull,
155
+ display: customTokens.layout.displayFlex,
156
+ alignItems: customTokens.layout.flexCenter,
146
157
  gridArea: 'total'
147
158
  },
148
159
  [`${prefixClsWithoutHash}-prev, ${prefixClsWithoutHash}-next`]: {
149
- height: paginationToken.maxContent,
150
- lineHeight: paginationToken.lineHeight,
151
- display: paginationToken.displayFlex,
152
- margin: paginationToken.zero,
160
+ height: customTokens.sizing.sizeMaxContent,
161
+ lineHeight: customTokens.others.lineHeightShort,
162
+ display: customTokens.layout.displayFlex,
163
+ margin: customTokens.sizing.valueZero,
153
164
  [`${prefixClsWithoutHash}-item-link`]: {
154
- border: paginationToken.none,
155
- padding: paginationToken.zero,
156
- lineHeight: paginationToken.lineHeight,
157
- width: paginationToken.maxContent,
158
- height: paginationToken.maxContent
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
159
170
  },
160
171
  [`svg`]: {
161
172
  width: paginationToken.Table.prevNextButton.svgWidth,
162
- height: paginationToken.maxContent,
173
+ height: customTokens.sizing.sizeMaxContent,
163
174
  fill: paginationToken.Table.prevNextButton.svgFill,
164
175
  padding: paginationToken.Table.prevNextButton.svgPadding,
165
176
  border: paginationToken.Table.prevNextButton.svgBorder
166
177
  },
167
178
  [`&${prefixClsWithoutHash}-prev`]: {
168
- height: paginationToken.maxContent,
179
+ height: customTokens.sizing.sizeMaxContent,
169
180
  gridArea: 'previous',
170
181
  [`svg`]: {
171
- borderRightWidth: paginationToken.zero,
182
+ borderRightWidth: customTokens.sizing.valueZero,
172
183
  borderRadius: paginationToken.Table.prevNextButton.prevSvgBorderRadius
173
184
  }
174
185
  },
175
186
  [`&${prefixClsWithoutHash}-next`]: {
176
- height: paginationToken.maxContent,
187
+ height: customTokens.sizing.sizeMaxContent,
177
188
  gridArea: 'next',
178
189
  [`svg`]: {
179
- borderLeftWidth: paginationToken.zero,
190
+ borderLeftWidth: customTokens.sizing.valueZero,
180
191
  borderRadius: paginationToken.Table.prevNextButton.nextSvgBorderRadius
181
192
  }
182
193
  }
183
194
  },
184
195
  [`${prefixClsWithoutHash}-item`]: {
185
196
  [`&:not(&${prefixClsWithoutHash}-item-active, ${prefixClsWithoutHash}-item-${totalPage})`]: {
186
- display: paginationToken.none
197
+ display: customTokens.layout.displayNone
187
198
  },
188
199
  [`&${prefixClsWithoutHash}-item-active, &${prefixClsWithoutHash}-item-${totalPage}`]: {
189
- margin: paginationToken.zero,
200
+ margin: customTokens.sizing.valueZero,
190
201
  border: paginationToken.Table.pageInfo.border,
191
- borderRadius: paginationToken.zero,
192
- minWidth: paginationToken.maxContent,
193
- height: paginationToken.maxContent,
202
+ borderRadius: customTokens.sizing.valueZero,
203
+ minWidth: customTokens.sizing.sizeMaxContent,
204
+ height: customTokens.sizing.sizeMaxContent,
194
205
  [`a`]: {
195
206
  padding: paginationToken.Table.pageInfo.padding,
196
- lineHeight: paginationToken.lineHeight,
197
- width: paginationToken.maxContent
207
+ lineHeight: customTokens.others.lineHeightShort,
208
+ width: customTokens.sizing.sizeMaxContent
198
209
  }
199
210
  },
200
211
  [`&${prefixClsWithoutHash}-item-active`]: {
201
212
  backgroundColor: paginationToken.Table.pageInfo.currentPageBgColor,
202
- display: paginationToken.none,
213
+ display: customTokens.layout.displayNone,
203
214
  [`a`]: {
204
215
  minWidth: paginationToken.Table.pageInfo.currentPageMinWidth,
205
216
  color: paginationToken.Table.pageInfo.currentPageTextColor,
@@ -208,64 +219,64 @@ const Pagination = (_a) => {
208
219
  }
209
220
  },
210
221
  [`${prefixClsWithoutHash}-jump-prev, ${prefixClsWithoutHash}-jump-next`]: {
211
- display: paginationToken.none
222
+ display: customTokens.layout.displayNone
212
223
  },
213
224
  [`${prefixClsWithoutHash}-options`]: {
214
- display: paginationToken.displayContents,
225
+ display: customTokens.layout.displayContents,
215
226
  [`&-size-changer`]: {
216
227
  gridArea: 'options',
217
- width: paginationToken.Table.sizeChanger.width,
218
- height: paginationToken.maxContent,
219
- display: paginationToken.displayFlex,
220
- flexDirection: paginationToken.displayFlexRow,
221
- alignItems: paginationToken.center,
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,
222
233
  columnGap: paginationToken.Table.sizeChanger.colGap,
223
234
  border: paginationToken.Table.sizeChanger.border,
224
235
  borderRadius: paginationToken.Table.sizeChanger.borderRadius,
225
236
  [`.akinon-select-selector`]: {
226
- border: paginationToken.none,
227
- lineHeight: paginationToken.lineHeight,
237
+ border: `${customTokens.border.borderNone} !important`,
238
+ lineHeight: customTokens.others.lineHeightShort,
228
239
  padding: paginationToken.Table.sizeChanger.item1.padding,
229
240
  [`.akinon-select-selection-item`]: {
230
- paddingInlineEnd: paginationToken.zero,
231
- lineHeight: paginationToken.lineHeight,
232
- fontWeight: paginationToken.Table.sizeChanger.item2.fontWeight
241
+ paddingInlineEnd: customTokens.sizing.valueZero,
242
+ lineHeight: customTokens.others.lineHeightShort,
243
+ fontWeight: customTokens.typography.fontWeightBold
233
244
  },
234
245
  [`&::after`]: {
235
- lineHeight: paginationToken.lineHeight
246
+ lineHeight: customTokens.others.lineHeightShort
236
247
  }
237
248
  },
238
249
  [`.akinon-select-arrow`]: {
239
250
  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
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
245
256
  }
246
257
  }
247
258
  },
248
259
  [`:not(${prefixClsWithoutHash}-light)`]: {
249
260
  [`&${prefixClsWithoutHash}-item-${totalPage}`]: {
250
- backgroundColor: 'transparent !important',
261
+ backgroundColor: `${customTokens.others.colorTransparent} !important`,
251
262
  [`a`]: {
252
263
  color: paginationToken.Table.sizeChanger.item2.textColor
253
264
  }
254
265
  },
255
266
  [`${prefixClsWithoutHash}-options`]: {
256
- display: paginationToken.displayContents,
267
+ display: customTokens.layout.displayContents,
257
268
  [`&-size-changer`]: {
258
- background: 'transparent !important'
269
+ background: `${customTokens.others.colorTransparent} !important`
259
270
  }
260
271
  },
261
272
  [`.akinon-select-selector`]: {
262
- background: 'transparent !important',
273
+ background: `${customTokens.others.colorTransparent} !important`,
263
274
  [`.akinon-select-selection-item`]: {
264
275
  color: paginationToken.Table.sizeChanger.item2.textColor
265
276
  }
266
277
  },
267
278
  [`.akinon-select-arrow`]: {
268
- background: 'transparent !important'
279
+ background: `${customTokens.others.colorTransparent} !important`
269
280
  }
270
281
  },
271
282
  [`${prefixClsWithoutHash}-light`]: {
@@ -293,44 +304,46 @@ const Pagination = (_a) => {
293
304
  }
294
305
  },
295
306
  [`${prefixClsWithoutHash}-parent`]: {
296
- display: paginationToken.displayGrid,
307
+ display: customTokens.layout.displayGrid,
297
308
  gridTemplateAreas: `'options total previous goto showTotal next'`,
298
309
  gridTemplateColumns: 'max-content max-content max-content max-content max-content max-content',
299
- height: paginationToken.maxContent,
300
- maxWidth: paginationToken.maxContent
310
+ height: customTokens.sizing.sizeMaxContent,
311
+ maxWidth: customTokens.sizing.sizeMaxContent
301
312
  },
302
313
  [`${prefixClsWithoutHash}-options-quick-jumper-new`]: {
303
- display: restPaginationProps.simple ? 'none' : 'block',
314
+ display: restPaginationProps.simple
315
+ ? customTokens.layout.displayNone
316
+ : customTokens.layout.displayBlock,
304
317
  gridArea: 'goto',
305
- overflow: paginationToken.hidden,
318
+ overflow: customTokens.others.valueHidden,
306
319
  border: paginationToken.Jumper.border,
307
- borderRight: paginationToken.zero,
308
- borderRadius: paginationToken.zero,
320
+ borderRight: customTokens.sizing.valueZero,
321
+ borderRadius: customTokens.sizing.valueZero,
309
322
  ['input, span']: {
310
323
  backgroundColor: paginationToken.Jumper.bgColor,
311
324
  color: paginationToken.Jumper.textColor,
312
- fontWeight: paginationToken.Jumper.fontWeight,
325
+ fontWeight: customTokens.typography.fontWeightBold,
313
326
  minWidth: paginationToken.Jumper.minWidth,
314
- border: paginationToken.none,
327
+ border: `${customTokens.border.borderNone} !important`,
315
328
  height: paginationToken.Jumper.height,
316
- boxShadow: paginationToken.none,
317
- textAlign: paginationToken.center,
318
- outline: paginationToken.none
329
+ boxShadow: customTokens.layout.displayNone,
330
+ textAlign: customTokens.typography.textAlignCenter,
331
+ outline: customTokens.layout.displayNone
319
332
  },
320
333
  ['span']: {
321
- visibility: paginationToken.Jumper.spanVisibility,
322
- whiteSpace: paginationToken.Jumper.spanWhiteSpace,
323
- position: paginationToken.Jumper.spanPosition
334
+ visibility: customTokens.others.valueHidden,
335
+ whiteSpace: customTokens.typography.whiteSpacePre,
336
+ position: customTokens.layout.positionAbsolute
324
337
  },
325
338
  [`&:not(${prefixClsWithoutHash}-light)`]: {
326
339
  ['input, span']: {
327
- backgroundColor: 'transparent !important',
340
+ backgroundColor: `${customTokens.others.colorTransparent} !important`,
328
341
  color: paginationToken.Table.prevNextButton.svgFill
329
342
  }
330
343
  },
331
344
  [`&${prefixClsWithoutHash}-light`]: {
332
345
  ['input, span']: {
333
- backgroundColor: 'transparent !important',
346
+ backgroundColor: `${customTokens.others.colorTransparent} !important`,
334
347
  color: paginationToken.Table.prevNextButton.svgFill
335
348
  }
336
349
  }
@@ -341,6 +354,6 @@ const Pagination = (_a) => {
341
354
  React.createElement(antd_1.Pagination, Object.assign({}, restPaginationProps, { className: themeClassName, locale: { jump_to: '', page: '', items_per_page: '' }, onChange: handlePageChange })),
342
355
  !restPaginationProps.simple && (React.createElement("div", { className: `${prefixWithoutHash}-options-quick-jumper-new ${themeClassName}` },
343
356
  React.createElement("span", { ref: spanRef }),
344
- React.createElement("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleInputKeyDown })))));
357
+ React.createElement("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onBlur: handleInputBlur })))));
345
358
  };
346
359
  exports.Pagination = Pagination;
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,sBAuWtE,CAAC;AAEF,YAAY,EAAE,gBAAgB,EAAE,CAAC"}
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"}
package/dist/esm/index.js CHANGED
@@ -52,23 +52,34 @@ export const Pagination = (_a) => {
52
52
  const handleInputChange = (e) => {
53
53
  setInputValue(e.target.value);
54
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
+ };
55
64
  const handleInputKeyDown = (e) => {
56
65
  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
- }
66
+ handleProcessNewPageNumber();
64
67
  }
65
68
  };
69
+ const handleInputBlur = () => {
70
+ handleProcessNewPageNumber();
71
+ };
66
72
  React.useEffect(() => {
67
73
  if (inputRef.current && spanRef.current) {
68
74
  spanRef.current.textContent = String(inputValue);
69
75
  inputRef.current.style.width = `${spanRef.current.offsetWidth + 10}px`;
70
76
  }
71
77
  }, [inputValue]);
78
+ React.useEffect(() => {
79
+ if (typeof restPaginationProps.current !== 'undefined') {
80
+ setInputValue(restPaginationProps.current);
81
+ }
82
+ }, [restPaginationProps.current]);
72
83
  const useStyle = useStyleRegister({
73
84
  token: token,
74
85
  path: ['Pagination'],
@@ -76,15 +87,15 @@ export const Pagination = (_a) => {
76
87
  theme: theme
77
88
  }, () => {
78
89
  const prefixCls = `:where(.${hashId}).${getPrefixCls()}-pagination`;
90
+ const customTokens = theme.CustomTokens || {};
79
91
  return {
80
- [prefixCls]: {},
81
- [prefixClsWithoutHash]: {
92
+ [prefixCls]: {
82
93
  '*': {
83
94
  boxSizing: 'initial'
84
95
  },
85
96
  [`&${prefixClsWithoutHash}-simple`]: {
86
- height: paginationToken.maxContent,
87
- maxWidth: paginationToken.maxContent,
97
+ height: customTokens.sizing.sizeMaxContent,
98
+ maxWidth: customTokens.sizing.sizeMaxContent,
88
99
  [`${prefixClsWithoutHash}-simple-pager`]: {
89
100
  minWidth: paginationToken.Simple.minWidth,
90
101
  fontSize: paginationToken.fontSize,
@@ -92,24 +103,24 @@ export const Pagination = (_a) => {
92
103
  color: paginationToken.Simple.color
93
104
  },
94
105
  ['input']: {
95
- backgroundColor: paginationToken.transparent,
96
- border: paginationToken.none,
106
+ backgroundColor: `${customTokens.others.colorTransparent} !important`,
107
+ border: `${customTokens.border.borderNone} !important`,
97
108
  color: paginationToken.Simple.input.textColor,
98
109
  fontSize: paginationToken.fontSize,
99
- fontWeight: paginationToken.Simple.input.fontWeight,
100
- padding: paginationToken.zero,
101
- boxShadow: paginationToken.none
110
+ fontWeight: customTokens.typography.fontWeightBold,
111
+ padding: customTokens.sizing.valueZero,
112
+ boxShadow: customTokens.layout.displayNone
102
113
  },
103
114
  [`${prefixClsWithoutHash}-prev, ${prefixClsWithoutHash}-next`]: {
104
- minWidth: paginationToken.maxContent,
115
+ minWidth: customTokens.sizing.sizeMaxContent,
105
116
  [`svg`]: {
106
117
  width: paginationToken.Simple.prevNextButton.svgWidth,
107
- height: paginationToken.Simple.prevNextButton.svgHeight,
118
+ height: customTokens.sizing.valueFull,
108
119
  fill: paginationToken.Simple.prevNextButton.svgFill
109
120
  }
110
121
  },
111
122
  [`${prefixClsWithoutHash}-slash`]: {
112
- margin: paginationToken.zero,
123
+ margin: customTokens.sizing.valueZero,
113
124
  paddingRight: paginationToken.Simple.slashPadding
114
125
  },
115
126
  [`&${prefixClsWithoutHash}-light`]: {
@@ -127,76 +138,76 @@ export const Pagination = (_a) => {
127
138
  }
128
139
  },
129
140
  [`${prefixClsWithoutHash}-options, ${prefixClsWithoutHash}-total-text`]: {
130
- display: paginationToken.none
141
+ display: customTokens.layout.displayNone
131
142
  }
132
143
  },
133
144
  [`&:not(&${prefixClsWithoutHash}-simple)`]: {
134
- display: paginationToken.displayContents,
145
+ display: customTokens.layout.displayContents,
135
146
  [`${prefixClsWithoutHash}-total-text`]: {
136
- width: paginationToken.Table.totalText.width,
137
- fontWeight: paginationToken.Table.totalText.fontWeight,
147
+ width: customTokens.sizing.sizeFitContent,
148
+ fontWeight: customTokens.typography.fontWeightMedium,
138
149
  color: paginationToken.Table.totalText.color,
139
150
  margin: paginationToken.Table.totalText.margin,
140
- height: paginationToken.full,
141
- display: paginationToken.displayFlex,
142
- alignItems: paginationToken.center,
151
+ height: customTokens.sizing.valueFull,
152
+ display: customTokens.layout.displayFlex,
153
+ alignItems: customTokens.layout.flexCenter,
143
154
  gridArea: 'total'
144
155
  },
145
156
  [`${prefixClsWithoutHash}-prev, ${prefixClsWithoutHash}-next`]: {
146
- height: paginationToken.maxContent,
147
- lineHeight: paginationToken.lineHeight,
148
- display: paginationToken.displayFlex,
149
- margin: paginationToken.zero,
157
+ height: customTokens.sizing.sizeMaxContent,
158
+ lineHeight: customTokens.others.lineHeightShort,
159
+ display: customTokens.layout.displayFlex,
160
+ margin: customTokens.sizing.valueZero,
150
161
  [`${prefixClsWithoutHash}-item-link`]: {
151
- border: paginationToken.none,
152
- padding: paginationToken.zero,
153
- lineHeight: paginationToken.lineHeight,
154
- width: paginationToken.maxContent,
155
- height: paginationToken.maxContent
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
156
167
  },
157
168
  [`svg`]: {
158
169
  width: paginationToken.Table.prevNextButton.svgWidth,
159
- height: paginationToken.maxContent,
170
+ height: customTokens.sizing.sizeMaxContent,
160
171
  fill: paginationToken.Table.prevNextButton.svgFill,
161
172
  padding: paginationToken.Table.prevNextButton.svgPadding,
162
173
  border: paginationToken.Table.prevNextButton.svgBorder
163
174
  },
164
175
  [`&${prefixClsWithoutHash}-prev`]: {
165
- height: paginationToken.maxContent,
176
+ height: customTokens.sizing.sizeMaxContent,
166
177
  gridArea: 'previous',
167
178
  [`svg`]: {
168
- borderRightWidth: paginationToken.zero,
179
+ borderRightWidth: customTokens.sizing.valueZero,
169
180
  borderRadius: paginationToken.Table.prevNextButton.prevSvgBorderRadius
170
181
  }
171
182
  },
172
183
  [`&${prefixClsWithoutHash}-next`]: {
173
- height: paginationToken.maxContent,
184
+ height: customTokens.sizing.sizeMaxContent,
174
185
  gridArea: 'next',
175
186
  [`svg`]: {
176
- borderLeftWidth: paginationToken.zero,
187
+ borderLeftWidth: customTokens.sizing.valueZero,
177
188
  borderRadius: paginationToken.Table.prevNextButton.nextSvgBorderRadius
178
189
  }
179
190
  }
180
191
  },
181
192
  [`${prefixClsWithoutHash}-item`]: {
182
193
  [`&:not(&${prefixClsWithoutHash}-item-active, ${prefixClsWithoutHash}-item-${totalPage})`]: {
183
- display: paginationToken.none
194
+ display: customTokens.layout.displayNone
184
195
  },
185
196
  [`&${prefixClsWithoutHash}-item-active, &${prefixClsWithoutHash}-item-${totalPage}`]: {
186
- margin: paginationToken.zero,
197
+ margin: customTokens.sizing.valueZero,
187
198
  border: paginationToken.Table.pageInfo.border,
188
- borderRadius: paginationToken.zero,
189
- minWidth: paginationToken.maxContent,
190
- height: paginationToken.maxContent,
199
+ borderRadius: customTokens.sizing.valueZero,
200
+ minWidth: customTokens.sizing.sizeMaxContent,
201
+ height: customTokens.sizing.sizeMaxContent,
191
202
  [`a`]: {
192
203
  padding: paginationToken.Table.pageInfo.padding,
193
- lineHeight: paginationToken.lineHeight,
194
- width: paginationToken.maxContent
204
+ lineHeight: customTokens.others.lineHeightShort,
205
+ width: customTokens.sizing.sizeMaxContent
195
206
  }
196
207
  },
197
208
  [`&${prefixClsWithoutHash}-item-active`]: {
198
209
  backgroundColor: paginationToken.Table.pageInfo.currentPageBgColor,
199
- display: paginationToken.none,
210
+ display: customTokens.layout.displayNone,
200
211
  [`a`]: {
201
212
  minWidth: paginationToken.Table.pageInfo.currentPageMinWidth,
202
213
  color: paginationToken.Table.pageInfo.currentPageTextColor,
@@ -205,64 +216,64 @@ export const Pagination = (_a) => {
205
216
  }
206
217
  },
207
218
  [`${prefixClsWithoutHash}-jump-prev, ${prefixClsWithoutHash}-jump-next`]: {
208
- display: paginationToken.none
219
+ display: customTokens.layout.displayNone
209
220
  },
210
221
  [`${prefixClsWithoutHash}-options`]: {
211
- display: paginationToken.displayContents,
222
+ display: customTokens.layout.displayContents,
212
223
  [`&-size-changer`]: {
213
224
  gridArea: 'options',
214
- width: paginationToken.Table.sizeChanger.width,
215
- height: paginationToken.maxContent,
216
- display: paginationToken.displayFlex,
217
- flexDirection: paginationToken.displayFlexRow,
218
- alignItems: paginationToken.center,
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,
219
230
  columnGap: paginationToken.Table.sizeChanger.colGap,
220
231
  border: paginationToken.Table.sizeChanger.border,
221
232
  borderRadius: paginationToken.Table.sizeChanger.borderRadius,
222
233
  [`.akinon-select-selector`]: {
223
- border: paginationToken.none,
224
- lineHeight: paginationToken.lineHeight,
234
+ border: `${customTokens.border.borderNone} !important`,
235
+ lineHeight: customTokens.others.lineHeightShort,
225
236
  padding: paginationToken.Table.sizeChanger.item1.padding,
226
237
  [`.akinon-select-selection-item`]: {
227
- paddingInlineEnd: paginationToken.zero,
228
- lineHeight: paginationToken.lineHeight,
229
- fontWeight: paginationToken.Table.sizeChanger.item2.fontWeight
238
+ paddingInlineEnd: customTokens.sizing.valueZero,
239
+ lineHeight: customTokens.others.lineHeightShort,
240
+ fontWeight: customTokens.typography.fontWeightBold
230
241
  },
231
242
  [`&::after`]: {
232
- lineHeight: paginationToken.lineHeight
243
+ lineHeight: customTokens.others.lineHeightShort
233
244
  }
234
245
  },
235
246
  [`.akinon-select-arrow`]: {
236
247
  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
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
242
253
  }
243
254
  }
244
255
  },
245
256
  [`:not(${prefixClsWithoutHash}-light)`]: {
246
257
  [`&${prefixClsWithoutHash}-item-${totalPage}`]: {
247
- backgroundColor: 'transparent !important',
258
+ backgroundColor: `${customTokens.others.colorTransparent} !important`,
248
259
  [`a`]: {
249
260
  color: paginationToken.Table.sizeChanger.item2.textColor
250
261
  }
251
262
  },
252
263
  [`${prefixClsWithoutHash}-options`]: {
253
- display: paginationToken.displayContents,
264
+ display: customTokens.layout.displayContents,
254
265
  [`&-size-changer`]: {
255
- background: 'transparent !important'
266
+ background: `${customTokens.others.colorTransparent} !important`
256
267
  }
257
268
  },
258
269
  [`.akinon-select-selector`]: {
259
- background: 'transparent !important',
270
+ background: `${customTokens.others.colorTransparent} !important`,
260
271
  [`.akinon-select-selection-item`]: {
261
272
  color: paginationToken.Table.sizeChanger.item2.textColor
262
273
  }
263
274
  },
264
275
  [`.akinon-select-arrow`]: {
265
- background: 'transparent !important'
276
+ background: `${customTokens.others.colorTransparent} !important`
266
277
  }
267
278
  },
268
279
  [`${prefixClsWithoutHash}-light`]: {
@@ -290,44 +301,46 @@ export const Pagination = (_a) => {
290
301
  }
291
302
  },
292
303
  [`${prefixClsWithoutHash}-parent`]: {
293
- display: paginationToken.displayGrid,
304
+ display: customTokens.layout.displayGrid,
294
305
  gridTemplateAreas: `'options total previous goto showTotal next'`,
295
306
  gridTemplateColumns: 'max-content max-content max-content max-content max-content max-content',
296
- height: paginationToken.maxContent,
297
- maxWidth: paginationToken.maxContent
307
+ height: customTokens.sizing.sizeMaxContent,
308
+ maxWidth: customTokens.sizing.sizeMaxContent
298
309
  },
299
310
  [`${prefixClsWithoutHash}-options-quick-jumper-new`]: {
300
- display: restPaginationProps.simple ? 'none' : 'block',
311
+ display: restPaginationProps.simple
312
+ ? customTokens.layout.displayNone
313
+ : customTokens.layout.displayBlock,
301
314
  gridArea: 'goto',
302
- overflow: paginationToken.hidden,
315
+ overflow: customTokens.others.valueHidden,
303
316
  border: paginationToken.Jumper.border,
304
- borderRight: paginationToken.zero,
305
- borderRadius: paginationToken.zero,
317
+ borderRight: customTokens.sizing.valueZero,
318
+ borderRadius: customTokens.sizing.valueZero,
306
319
  ['input, span']: {
307
320
  backgroundColor: paginationToken.Jumper.bgColor,
308
321
  color: paginationToken.Jumper.textColor,
309
- fontWeight: paginationToken.Jumper.fontWeight,
322
+ fontWeight: customTokens.typography.fontWeightBold,
310
323
  minWidth: paginationToken.Jumper.minWidth,
311
- border: paginationToken.none,
324
+ border: `${customTokens.border.borderNone} !important`,
312
325
  height: paginationToken.Jumper.height,
313
- boxShadow: paginationToken.none,
314
- textAlign: paginationToken.center,
315
- outline: paginationToken.none
326
+ boxShadow: customTokens.layout.displayNone,
327
+ textAlign: customTokens.typography.textAlignCenter,
328
+ outline: customTokens.layout.displayNone
316
329
  },
317
330
  ['span']: {
318
- visibility: paginationToken.Jumper.spanVisibility,
319
- whiteSpace: paginationToken.Jumper.spanWhiteSpace,
320
- position: paginationToken.Jumper.spanPosition
331
+ visibility: customTokens.others.valueHidden,
332
+ whiteSpace: customTokens.typography.whiteSpacePre,
333
+ position: customTokens.layout.positionAbsolute
321
334
  },
322
335
  [`&:not(${prefixClsWithoutHash}-light)`]: {
323
336
  ['input, span']: {
324
- backgroundColor: 'transparent !important',
337
+ backgroundColor: `${customTokens.others.colorTransparent} !important`,
325
338
  color: paginationToken.Table.prevNextButton.svgFill
326
339
  }
327
340
  },
328
341
  [`&${prefixClsWithoutHash}-light`]: {
329
342
  ['input, span']: {
330
- backgroundColor: 'transparent !important',
343
+ backgroundColor: `${customTokens.others.colorTransparent} !important`,
331
344
  color: paginationToken.Table.prevNextButton.svgFill
332
345
  }
333
346
  }
@@ -338,5 +351,5 @@ export const Pagination = (_a) => {
338
351
  React.createElement(AntPagination, Object.assign({}, restPaginationProps, { className: themeClassName, locale: { jump_to: '', page: '', items_per_page: '' }, onChange: handlePageChange })),
339
352
  !restPaginationProps.simple && (React.createElement("div", { className: `${prefixWithoutHash}-options-quick-jumper-new ${themeClassName}` },
340
353
  React.createElement("span", { ref: spanRef }),
341
- React.createElement("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleInputKeyDown })))));
354
+ React.createElement("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onBlur: handleInputBlur })))));
342
355
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@akinon/ui-pagination",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "private": false,
5
5
  "description": "Pagination component for Akinon UI",
6
6
  "type": "module",
@@ -17,8 +17,8 @@
17
17
  "copyfiles": "^2.4.1",
18
18
  "rimraf": "^5.0.5",
19
19
  "typescript": "*",
20
- "@akinon/typescript-config": "1.0.0",
21
- "@akinon/ui-theme": "1.0.0"
20
+ "@akinon/typescript-config": "1.0.1",
21
+ "@akinon/ui-theme": "1.0.1"
22
22
  },
23
23
  "peerDependencies": {
24
24
  "react": ">=18",