@itcase/ui 1.8.131 → 1.8.132
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/components/Pagination.js +48 -8
- package/dist/components/Pagination.js +48 -8
- package/dist/css/components/Pagination/Pagination.css +3 -0
- package/dist/types/components/Pagination/appearance/paginationShape.d.ts +34 -0
- package/dist/types/components/Pagination/appearance/paginationSurface.d.ts +5 -1
- package/package.json +6 -6
|
@@ -73,6 +73,40 @@ const paginationAppearanceAccent = {
|
|
|
73
73
|
},
|
|
74
74
|
};
|
|
75
75
|
|
|
76
|
+
const paginationAppearanceShape = {
|
|
77
|
+
circular: {
|
|
78
|
+
shape: 'circular',
|
|
79
|
+
},
|
|
80
|
+
rounded: {
|
|
81
|
+
fillInputShape: 'rounded',
|
|
82
|
+
pageCountDropdownShape: 'rounded',
|
|
83
|
+
},
|
|
84
|
+
roundedXL: {
|
|
85
|
+
fillInputShape: 'rounded',
|
|
86
|
+
fillInputShapeStrength: '2m',
|
|
87
|
+
pageCountDropdownShape: 'rounded',
|
|
88
|
+
pageCountDropdownShapeStrength: '2m'
|
|
89
|
+
},
|
|
90
|
+
roundedL: {
|
|
91
|
+
fillInputShape: 'rounded',
|
|
92
|
+
fillInputShapeStrength: '1_5m',
|
|
93
|
+
pageCountDropdownShape: 'rounded',
|
|
94
|
+
pageCountDropdownShapeStrength: '1_5m'
|
|
95
|
+
},
|
|
96
|
+
roundedM: {
|
|
97
|
+
fillInputShape: 'rounded',
|
|
98
|
+
fillInputShapeStrength: '1m',
|
|
99
|
+
pageCountDropdownShape: 'rounded',
|
|
100
|
+
pageCountDropdownShapeStrength: '1m'
|
|
101
|
+
},
|
|
102
|
+
roundedS: {
|
|
103
|
+
fillInputShape: 'rounded',
|
|
104
|
+
fillInputShapeStrength: '0_5m',
|
|
105
|
+
pageCountDropdownShape: 'rounded',
|
|
106
|
+
pageCountDropdownShapeStrength: '0_5m'
|
|
107
|
+
},
|
|
108
|
+
};
|
|
109
|
+
|
|
76
110
|
const paginationAppearanceSize = {
|
|
77
111
|
sizeL: {
|
|
78
112
|
size: 'l',
|
|
@@ -168,16 +202,21 @@ const paginationAppearanceSurface = {
|
|
|
168
202
|
surfacePrimary: {
|
|
169
203
|
fill: 'surfacePrimary',
|
|
170
204
|
fillHover: 'surfaceTertiary',
|
|
171
|
-
fillActive: '
|
|
172
|
-
fillActiveHover: '
|
|
205
|
+
fillActive: 'accentPrimary',
|
|
206
|
+
fillActiveHover: 'accentHoverPrimary',
|
|
173
207
|
fillInput: 'surfacePrimary',
|
|
208
|
+
fillInputHover: 'surfaceTertiary',
|
|
174
209
|
textColor: 'surfaceTextPrimary',
|
|
210
|
+
textColorHover: 'surfaceTextPrimary',
|
|
211
|
+
textColorActive: 'accentTextPrimary',
|
|
212
|
+
textColorActiveHover: 'accentTextPrimary',
|
|
175
213
|
builderIconFillIcon: 'surfaceItemPrimary',
|
|
176
214
|
nextIconFillIcon: 'surfaceItemPrimary',
|
|
177
215
|
pageCountDescTextColor: 'surfaceTextPrimary',
|
|
178
216
|
pageCountDropdownAlignment: 'topCenter',
|
|
179
217
|
pageCountDropdownElevation: 8,
|
|
180
218
|
pageCountDropdownFill: 'surfacePrimary',
|
|
219
|
+
pageCountDropdownFillHover: 'surfaceTertiary',
|
|
181
220
|
pageCountDropdownItemDividerFill: 'surfaceSecondary',
|
|
182
221
|
pageCountDropdownItemFill: 'surfacePrimary',
|
|
183
222
|
pageCountDropdownItemFillActive: 'accentPrimary',
|
|
@@ -188,7 +227,6 @@ const paginationAppearanceSurface = {
|
|
|
188
227
|
pageCountDropdownItemLabelColorActive: 'accentTextPrimary',
|
|
189
228
|
pageCountDropdownItemLabelColorActiveHover: 'accentTextPrimary',
|
|
190
229
|
pageCountDropdownItemLabelColorHover: 'surfaceTextPrimary',
|
|
191
|
-
pageCountDropdownShape: 'rounded',
|
|
192
230
|
pageCountInputIconColor: 'surfaceItemPrimary',
|
|
193
231
|
pageCountInputTextColor: 'surfaceTextPrimary',
|
|
194
232
|
previousIconFillIcon: 'surfaceItemPrimary',
|
|
@@ -199,6 +237,7 @@ const paginationAppearance = {
|
|
|
199
237
|
...paginationAppearanceSurface,
|
|
200
238
|
...paginationAppearanceAccent,
|
|
201
239
|
...paginationAppearanceSize,
|
|
240
|
+
...paginationAppearanceShape,
|
|
202
241
|
...paginationAppearanceStyle,
|
|
203
242
|
};
|
|
204
243
|
|
|
@@ -268,15 +307,16 @@ function Pagination(props) {
|
|
|
268
307
|
}, [pageNumber]);
|
|
269
308
|
const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, paginationConfig, isDisabled);
|
|
270
309
|
const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
271
|
-
const { justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillInputClass, fillInputHoverClass, textColorClass, textSizeClass, builderIcon, builderIconFill, builderIconFillIcon, builderIconFillSize, builderIconSize, marginPagesDisplayed, nextIcon, nextIconFill, nextIconFillIcon, nextIconFillSize, nextIconSize, pageCountDescTextColor, pageCountDescTextSize, pageCountDropdownAlignment, pageCountDropdownElevation, pageCountDropdownFill, pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize, pageCountDropdownItemFill, pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActiveHover, pageCountDropdownItemLabelColorHover, pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider, pageCountDropdownItemSize, pageCountDropdownItemWidth, pageCountDropdownShape, pageCountInputIcon, pageCountInputIconColor, pageCountInputIconFillSize, pageCountInputIconSrc, pageCountInputTextColor, pageCountInputTextSize, pageRangeDisplayed, previousIcon, previousIconFill, previousIconFillIcon, previousIconFillSize, previousIconSize, sizeClass, } = propsGenerator;
|
|
310
|
+
const { justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillInputClass, fillInputHoverClass, fillInputShapeClass, fillInputShapeStrengthClass, textColorClass, textColorHoverClass, textColorActiveClass, textColorActiveHoverClass, textSizeClass, builderIcon, builderIconFill, builderIconFillIcon, builderIconFillSize, builderIconSize, marginPagesDisplayed, nextIcon, nextIconFill, nextIconFillIcon, nextIconFillSize, nextIconSize, pageCountDescTextColor, pageCountDescTextSize, pageCountDropdownAlignment, pageCountDropdownElevation, pageCountDropdownFill, pageCountDropdownFillHover, pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize, pageCountDropdownItemFill, pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActiveHover, pageCountDropdownItemLabelColorHover, pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider, pageCountDropdownItemSize, pageCountDropdownItemWidth, pageCountDropdownShape, pageCountDropdownShapeStrength, pageCountInputIcon, pageCountInputIconColor, pageCountInputIconFillSize, pageCountInputIconSrc, pageCountInputTextColor, pageCountInputTextSize, pageRangeDisplayed, previousIcon, previousIconFill, previousIconFillIcon, previousIconFillSize, previousIconSize, sizeClass, } = propsGenerator;
|
|
272
311
|
const { styles: paginationStyles } = useStyles.useStyles(props);
|
|
273
|
-
return (allItemsCount > perPageCount && (jsxRuntime.jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsxRuntime.jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill_active_${fillActiveClass}`,
|
|
312
|
+
return (allItemsCount > perPageCount && (jsxRuntime.jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsxRuntime.jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill_active_${fillActiveClass}`, fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`), activeLinkClassName: clsx('pagination__item-link_state_active', textColorActiveClass && `text-color_active_${textColorActiveClass}`, textColorActiveHoverClass &&
|
|
313
|
+
`text-color_active_hover_${textColorActiveHoverClass}`), breakClassName: "pagination__item pagination__item_break", breakLabel: "...", breakLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass &&
|
|
274
314
|
`pagination_justify-content_${justifyContentClass}`), disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled",
|
|
275
315
|
// pages settings
|
|
276
|
-
forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed, nextClassName: clsx('pagination__item pagination__item_next', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`),
|
|
316
|
+
forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed, nextClassName: clsx('pagination__item pagination__item_next', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`),
|
|
277
317
|
// next button
|
|
278
|
-
nextLabel: jsxRuntime.jsx(Icon.Icon, { fill: nextIconFill, fillSize: nextIconFillSize, iconFill: nextIconFillIcon, iconSize: nextIconSize, shape: "circular", SvgImage: nextIcon }), nextLinkClassName: "pagination__item-link", pageClassName: clsx('pagination__item', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`), pageCount: paginationPagesCount, pageLabelBuilder: isPageLabelBuilder &&
|
|
279
|
-
(() => (jsxRuntime.jsx(Icon.Icon, { fill: builderIconFill, fillSize: builderIconFillSize, iconFill: builderIconFillIcon, iconSize: builderIconSize, shape: "circular", SvgImage: builderIcon }))), pageLinkClassName: clsx('pagination__item-link', textSizeClass && `pagination__item-link_size_${textSizeClass}`, textColorClass &&
|
|
318
|
+
nextLabel: jsxRuntime.jsx(Icon.Icon, { fill: nextIconFill, fillSize: nextIconFillSize, iconFill: nextIconFillIcon, iconSize: nextIconSize, shape: "circular", SvgImage: nextIcon }), nextLinkClassName: "pagination__item-link", pageClassName: clsx('pagination__item', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), pageCount: paginationPagesCount, pageLabelBuilder: isPageLabelBuilder &&
|
|
319
|
+
(() => (jsxRuntime.jsx(Icon.Icon, { fill: builderIconFill, fillSize: builderIconFillSize, iconFill: builderIconFillIcon, iconSize: builderIconSize, shape: "circular", SvgImage: builderIcon }))), pageLinkClassName: clsx('pagination__item-link', textSizeClass && `pagination__item-link_size_${textSizeClass}`, textColorClass && `text text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`), pageRangeDisplayed: pageRangeDisplayed, previousClassName: clsx('pagination__item pagination__item_previous', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), previousLabel: jsxRuntime.jsx(Icon.Icon, { fill: previousIconFill, fillSize: previousIconFillSize, iconFill: previousIconFillIcon, iconSize: previousIconSize, shape: "circular", SvgImage: previousIcon }), previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (jsxRuntime.jsxs("div", { className: clsx(className, 'pagination__count'), children: [jsxRuntime.jsx(Text.Text, { className: "pagination__count-text", size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxRuntime.jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillInputClass && `fill_${fillInputClass}`, fillInputHoverClass && `fill_hover_${fillInputHoverClass}`, fillInputShapeClass && `shape_${fillInputShapeClass}`, fillInputShapeStrengthClass && `shape-strength_${fillInputShapeStrengthClass}`), onClick: onClickCommandMenuButton, children: [jsxRuntime.jsx(Text.Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsxRuntime.jsx(Icon.Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsxRuntime.jsx(DropdownItem.Dropdown, { className: "pagination__dropdown", alignment: pageCountDropdownAlignment, fill: pageCountDropdownFill, fillHover: pageCountDropdownFillHover, elevation: pageCountDropdownElevation, setIsOpen: setIsOpenDropdown, shape: pageCountDropdownShape, shapeStrength: pageCountDropdownShapeStrength, isOpen: isOpenDropdown, children: pageCountDropdownArray.map((item, index) => activeDropdownItem === item ? (jsxRuntime.jsx(DropdownItem.DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextColorActiveHover: pageCountDropdownItemLabelColorActiveHover, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
|
|
280
320
|
pageCountDropdownItemShowDivider, isActive: true, onClick: (event) => handleDropdownItemClick(event, item) }, item)) : (jsxRuntime.jsx(DropdownItem.DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
|
|
281
321
|
pageCountDropdownItemShowDivider, isActive: false, onClick: (event) => handleDropdownItemClick(event, item) }, item))) })] })] }))] })));
|
|
282
322
|
}
|
|
@@ -71,6 +71,40 @@ const paginationAppearanceAccent = {
|
|
|
71
71
|
},
|
|
72
72
|
};
|
|
73
73
|
|
|
74
|
+
const paginationAppearanceShape = {
|
|
75
|
+
circular: {
|
|
76
|
+
shape: 'circular',
|
|
77
|
+
},
|
|
78
|
+
rounded: {
|
|
79
|
+
fillInputShape: 'rounded',
|
|
80
|
+
pageCountDropdownShape: 'rounded',
|
|
81
|
+
},
|
|
82
|
+
roundedXL: {
|
|
83
|
+
fillInputShape: 'rounded',
|
|
84
|
+
fillInputShapeStrength: '2m',
|
|
85
|
+
pageCountDropdownShape: 'rounded',
|
|
86
|
+
pageCountDropdownShapeStrength: '2m'
|
|
87
|
+
},
|
|
88
|
+
roundedL: {
|
|
89
|
+
fillInputShape: 'rounded',
|
|
90
|
+
fillInputShapeStrength: '1_5m',
|
|
91
|
+
pageCountDropdownShape: 'rounded',
|
|
92
|
+
pageCountDropdownShapeStrength: '1_5m'
|
|
93
|
+
},
|
|
94
|
+
roundedM: {
|
|
95
|
+
fillInputShape: 'rounded',
|
|
96
|
+
fillInputShapeStrength: '1m',
|
|
97
|
+
pageCountDropdownShape: 'rounded',
|
|
98
|
+
pageCountDropdownShapeStrength: '1m'
|
|
99
|
+
},
|
|
100
|
+
roundedS: {
|
|
101
|
+
fillInputShape: 'rounded',
|
|
102
|
+
fillInputShapeStrength: '0_5m',
|
|
103
|
+
pageCountDropdownShape: 'rounded',
|
|
104
|
+
pageCountDropdownShapeStrength: '0_5m'
|
|
105
|
+
},
|
|
106
|
+
};
|
|
107
|
+
|
|
74
108
|
const paginationAppearanceSize = {
|
|
75
109
|
sizeL: {
|
|
76
110
|
size: 'l',
|
|
@@ -166,16 +200,21 @@ const paginationAppearanceSurface = {
|
|
|
166
200
|
surfacePrimary: {
|
|
167
201
|
fill: 'surfacePrimary',
|
|
168
202
|
fillHover: 'surfaceTertiary',
|
|
169
|
-
fillActive: '
|
|
170
|
-
fillActiveHover: '
|
|
203
|
+
fillActive: 'accentPrimary',
|
|
204
|
+
fillActiveHover: 'accentHoverPrimary',
|
|
171
205
|
fillInput: 'surfacePrimary',
|
|
206
|
+
fillInputHover: 'surfaceTertiary',
|
|
172
207
|
textColor: 'surfaceTextPrimary',
|
|
208
|
+
textColorHover: 'surfaceTextPrimary',
|
|
209
|
+
textColorActive: 'accentTextPrimary',
|
|
210
|
+
textColorActiveHover: 'accentTextPrimary',
|
|
173
211
|
builderIconFillIcon: 'surfaceItemPrimary',
|
|
174
212
|
nextIconFillIcon: 'surfaceItemPrimary',
|
|
175
213
|
pageCountDescTextColor: 'surfaceTextPrimary',
|
|
176
214
|
pageCountDropdownAlignment: 'topCenter',
|
|
177
215
|
pageCountDropdownElevation: 8,
|
|
178
216
|
pageCountDropdownFill: 'surfacePrimary',
|
|
217
|
+
pageCountDropdownFillHover: 'surfaceTertiary',
|
|
179
218
|
pageCountDropdownItemDividerFill: 'surfaceSecondary',
|
|
180
219
|
pageCountDropdownItemFill: 'surfacePrimary',
|
|
181
220
|
pageCountDropdownItemFillActive: 'accentPrimary',
|
|
@@ -186,7 +225,6 @@ const paginationAppearanceSurface = {
|
|
|
186
225
|
pageCountDropdownItemLabelColorActive: 'accentTextPrimary',
|
|
187
226
|
pageCountDropdownItemLabelColorActiveHover: 'accentTextPrimary',
|
|
188
227
|
pageCountDropdownItemLabelColorHover: 'surfaceTextPrimary',
|
|
189
|
-
pageCountDropdownShape: 'rounded',
|
|
190
228
|
pageCountInputIconColor: 'surfaceItemPrimary',
|
|
191
229
|
pageCountInputTextColor: 'surfaceTextPrimary',
|
|
192
230
|
previousIconFillIcon: 'surfaceItemPrimary',
|
|
@@ -197,6 +235,7 @@ const paginationAppearance = {
|
|
|
197
235
|
...paginationAppearanceSurface,
|
|
198
236
|
...paginationAppearanceAccent,
|
|
199
237
|
...paginationAppearanceSize,
|
|
238
|
+
...paginationAppearanceShape,
|
|
200
239
|
...paginationAppearanceStyle,
|
|
201
240
|
};
|
|
202
241
|
|
|
@@ -266,15 +305,16 @@ function Pagination(props) {
|
|
|
266
305
|
}, [pageNumber]);
|
|
267
306
|
const appearanceConfig = useAppearanceConfig(appearance, paginationConfig, isDisabled);
|
|
268
307
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
269
|
-
const { justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillInputClass, fillInputHoverClass, textColorClass, textSizeClass, builderIcon, builderIconFill, builderIconFillIcon, builderIconFillSize, builderIconSize, marginPagesDisplayed, nextIcon, nextIconFill, nextIconFillIcon, nextIconFillSize, nextIconSize, pageCountDescTextColor, pageCountDescTextSize, pageCountDropdownAlignment, pageCountDropdownElevation, pageCountDropdownFill, pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize, pageCountDropdownItemFill, pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActiveHover, pageCountDropdownItemLabelColorHover, pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider, pageCountDropdownItemSize, pageCountDropdownItemWidth, pageCountDropdownShape, pageCountInputIcon, pageCountInputIconColor, pageCountInputIconFillSize, pageCountInputIconSrc, pageCountInputTextColor, pageCountInputTextSize, pageRangeDisplayed, previousIcon, previousIconFill, previousIconFillIcon, previousIconFillSize, previousIconSize, sizeClass, } = propsGenerator;
|
|
308
|
+
const { justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillInputClass, fillInputHoverClass, fillInputShapeClass, fillInputShapeStrengthClass, textColorClass, textColorHoverClass, textColorActiveClass, textColorActiveHoverClass, textSizeClass, builderIcon, builderIconFill, builderIconFillIcon, builderIconFillSize, builderIconSize, marginPagesDisplayed, nextIcon, nextIconFill, nextIconFillIcon, nextIconFillSize, nextIconSize, pageCountDescTextColor, pageCountDescTextSize, pageCountDropdownAlignment, pageCountDropdownElevation, pageCountDropdownFill, pageCountDropdownFillHover, pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize, pageCountDropdownItemFill, pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActiveHover, pageCountDropdownItemLabelColorHover, pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider, pageCountDropdownItemSize, pageCountDropdownItemWidth, pageCountDropdownShape, pageCountDropdownShapeStrength, pageCountInputIcon, pageCountInputIconColor, pageCountInputIconFillSize, pageCountInputIconSrc, pageCountInputTextColor, pageCountInputTextSize, pageRangeDisplayed, previousIcon, previousIconFill, previousIconFillIcon, previousIconFillSize, previousIconSize, sizeClass, } = propsGenerator;
|
|
270
309
|
const { styles: paginationStyles } = useStyles(props);
|
|
271
|
-
return (allItemsCount > perPageCount && (jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill_active_${fillActiveClass}`,
|
|
310
|
+
return (allItemsCount > perPageCount && (jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill_active_${fillActiveClass}`, fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`), activeLinkClassName: clsx('pagination__item-link_state_active', textColorActiveClass && `text-color_active_${textColorActiveClass}`, textColorActiveHoverClass &&
|
|
311
|
+
`text-color_active_hover_${textColorActiveHoverClass}`), breakClassName: "pagination__item pagination__item_break", breakLabel: "...", breakLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass &&
|
|
272
312
|
`pagination_justify-content_${justifyContentClass}`), disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled",
|
|
273
313
|
// pages settings
|
|
274
|
-
forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed, nextClassName: clsx('pagination__item pagination__item_next', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`),
|
|
314
|
+
forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed, nextClassName: clsx('pagination__item pagination__item_next', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`),
|
|
275
315
|
// next button
|
|
276
|
-
nextLabel: jsx(Icon, { fill: nextIconFill, fillSize: nextIconFillSize, iconFill: nextIconFillIcon, iconSize: nextIconSize, shape: "circular", SvgImage: nextIcon }), nextLinkClassName: "pagination__item-link", pageClassName: clsx('pagination__item', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`), pageCount: paginationPagesCount, pageLabelBuilder: isPageLabelBuilder &&
|
|
277
|
-
(() => (jsx(Icon, { fill: builderIconFill, fillSize: builderIconFillSize, iconFill: builderIconFillIcon, iconSize: builderIconSize, shape: "circular", SvgImage: builderIcon }))), pageLinkClassName: clsx('pagination__item-link', textSizeClass && `pagination__item-link_size_${textSizeClass}`, textColorClass &&
|
|
316
|
+
nextLabel: jsx(Icon, { fill: nextIconFill, fillSize: nextIconFillSize, iconFill: nextIconFillIcon, iconSize: nextIconSize, shape: "circular", SvgImage: nextIcon }), nextLinkClassName: "pagination__item-link", pageClassName: clsx('pagination__item', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), pageCount: paginationPagesCount, pageLabelBuilder: isPageLabelBuilder &&
|
|
317
|
+
(() => (jsx(Icon, { fill: builderIconFill, fillSize: builderIconFillSize, iconFill: builderIconFillIcon, iconSize: builderIconSize, shape: "circular", SvgImage: builderIcon }))), pageLinkClassName: clsx('pagination__item-link', textSizeClass && `pagination__item-link_size_${textSizeClass}`, textColorClass && `text text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`), pageRangeDisplayed: pageRangeDisplayed, previousClassName: clsx('pagination__item pagination__item_previous', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), previousLabel: jsx(Icon, { fill: previousIconFill, fillSize: previousIconFillSize, iconFill: previousIconFillIcon, iconSize: previousIconSize, shape: "circular", SvgImage: previousIcon }), previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (jsxs("div", { className: clsx(className, 'pagination__count'), children: [jsx(Text, { className: "pagination__count-text", size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillInputClass && `fill_${fillInputClass}`, fillInputHoverClass && `fill_hover_${fillInputHoverClass}`, fillInputShapeClass && `shape_${fillInputShapeClass}`, fillInputShapeStrengthClass && `shape-strength_${fillInputShapeStrengthClass}`), onClick: onClickCommandMenuButton, children: [jsx(Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsx(Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsx(Dropdown, { className: "pagination__dropdown", alignment: pageCountDropdownAlignment, fill: pageCountDropdownFill, fillHover: pageCountDropdownFillHover, elevation: pageCountDropdownElevation, setIsOpen: setIsOpenDropdown, shape: pageCountDropdownShape, shapeStrength: pageCountDropdownShapeStrength, isOpen: isOpenDropdown, children: pageCountDropdownArray.map((item, index) => activeDropdownItem === item ? (jsx(DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextColorActiveHover: pageCountDropdownItemLabelColorActiveHover, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
|
|
278
318
|
pageCountDropdownItemShowDivider, isActive: true, onClick: (event) => handleDropdownItemClick(event, item) }, item)) : (jsx(DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
|
|
279
319
|
pageCountDropdownItemShowDivider, isActive: false, onClick: (event) => handleDropdownItemClick(event, item) }, item))) })] })] }))] })));
|
|
280
320
|
}
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
&__input {
|
|
24
24
|
position: relative;
|
|
25
25
|
display: flex;
|
|
26
|
+
transition: var(--paginator-input-transition);
|
|
26
27
|
justify-content: center;
|
|
27
28
|
align-items: center;
|
|
28
29
|
}
|
|
@@ -199,6 +200,8 @@
|
|
|
199
200
|
--paginator-item-disabled-text: var(--color-surface-text-primary);
|
|
200
201
|
--paginator-item-disabled-icon: var(--color-surface-item-disabled);
|
|
201
202
|
|
|
203
|
+
--paginator-input-transition: all 0.2s ease 0s;
|
|
204
|
+
|
|
202
205
|
--pagination-input-size-l-padding: 10px 12px;
|
|
203
206
|
--pagination-input-size-l-gap: 4px;
|
|
204
207
|
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
declare const paginationAppearanceShape: {
|
|
2
|
+
circular: {
|
|
3
|
+
shape: string;
|
|
4
|
+
};
|
|
5
|
+
rounded: {
|
|
6
|
+
fillInputShape: string;
|
|
7
|
+
pageCountDropdownShape: string;
|
|
8
|
+
};
|
|
9
|
+
roundedXL: {
|
|
10
|
+
fillInputShape: string;
|
|
11
|
+
fillInputShapeStrength: string;
|
|
12
|
+
pageCountDropdownShape: string;
|
|
13
|
+
pageCountDropdownShapeStrength: string;
|
|
14
|
+
};
|
|
15
|
+
roundedL: {
|
|
16
|
+
fillInputShape: string;
|
|
17
|
+
fillInputShapeStrength: string;
|
|
18
|
+
pageCountDropdownShape: string;
|
|
19
|
+
pageCountDropdownShapeStrength: string;
|
|
20
|
+
};
|
|
21
|
+
roundedM: {
|
|
22
|
+
fillInputShape: string;
|
|
23
|
+
fillInputShapeStrength: string;
|
|
24
|
+
pageCountDropdownShape: string;
|
|
25
|
+
pageCountDropdownShapeStrength: string;
|
|
26
|
+
};
|
|
27
|
+
roundedS: {
|
|
28
|
+
fillInputShape: string;
|
|
29
|
+
fillInputShapeStrength: string;
|
|
30
|
+
pageCountDropdownShape: string;
|
|
31
|
+
pageCountDropdownShapeStrength: string;
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
export { paginationAppearanceShape };
|
|
@@ -5,13 +5,18 @@ declare const paginationAppearanceSurface: {
|
|
|
5
5
|
fillActive: string;
|
|
6
6
|
fillActiveHover: string;
|
|
7
7
|
fillInput: string;
|
|
8
|
+
fillInputHover: string;
|
|
8
9
|
textColor: string;
|
|
10
|
+
textColorHover: string;
|
|
11
|
+
textColorActive: string;
|
|
12
|
+
textColorActiveHover: string;
|
|
9
13
|
builderIconFillIcon: string;
|
|
10
14
|
nextIconFillIcon: string;
|
|
11
15
|
pageCountDescTextColor: string;
|
|
12
16
|
pageCountDropdownAlignment: string;
|
|
13
17
|
pageCountDropdownElevation: number;
|
|
14
18
|
pageCountDropdownFill: string;
|
|
19
|
+
pageCountDropdownFillHover: string;
|
|
15
20
|
pageCountDropdownItemDividerFill: string;
|
|
16
21
|
pageCountDropdownItemFill: string;
|
|
17
22
|
pageCountDropdownItemFillActive: string;
|
|
@@ -22,7 +27,6 @@ declare const paginationAppearanceSurface: {
|
|
|
22
27
|
pageCountDropdownItemLabelColorActive: string;
|
|
23
28
|
pageCountDropdownItemLabelColorActiveHover: string;
|
|
24
29
|
pageCountDropdownItemLabelColorHover: string;
|
|
25
|
-
pageCountDropdownShape: string;
|
|
26
30
|
pageCountInputIconColor: string;
|
|
27
31
|
pageCountInputTextColor: string;
|
|
28
32
|
previousIconFillIcon: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itcase/ui",
|
|
3
|
-
"version": "1.8.
|
|
3
|
+
"version": "1.8.132",
|
|
4
4
|
"description": "UI components (Modal, Loader, Popup, etc)",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Modal",
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
"@emotion/is-prop-valid": "^1.4.0",
|
|
104
104
|
"@itcase/common": "^1.2.32",
|
|
105
105
|
"@itcase/icons": "^1.2.19",
|
|
106
|
-
"@itcase/storybook-config": "^1.2.
|
|
106
|
+
"@itcase/storybook-config": "^1.2.11",
|
|
107
107
|
"@itcase/tokens-am": "^1.1.19",
|
|
108
108
|
"@itcase/tokens-baikal": "^1.1.17",
|
|
109
109
|
"@itcase/tokens-palette": "^1.1.11",
|
|
@@ -121,7 +121,7 @@
|
|
|
121
121
|
"react-dom": "^18.3.1",
|
|
122
122
|
"react-indiana-drag-scroll": "^3.0.3-alpha",
|
|
123
123
|
"react-inlinesvg": "^4.2.0",
|
|
124
|
-
"react-modal-sheet": "5.1.
|
|
124
|
+
"react-modal-sheet": "5.1.2",
|
|
125
125
|
"react-modern-drawer": "^1.4.0",
|
|
126
126
|
"react-otp-input": "^3.1.1",
|
|
127
127
|
"react-paginate": "^8.3.0",
|
|
@@ -140,7 +140,7 @@
|
|
|
140
140
|
"@commitlint/cli": "^19.8.1",
|
|
141
141
|
"@commitlint/config-conventional": "^19.8.1",
|
|
142
142
|
"@itcase/config": "^1.0.57",
|
|
143
|
-
"@itcase/lint": "^1.1.
|
|
143
|
+
"@itcase/lint": "^1.1.61",
|
|
144
144
|
"@itcase/types": "^1.0.45",
|
|
145
145
|
"@rollup/plugin-alias": "^5.1.1",
|
|
146
146
|
"@rollup/plugin-babel": "^6.0.4",
|
|
@@ -171,13 +171,13 @@
|
|
|
171
171
|
"lint-staged": "^16.1.6",
|
|
172
172
|
"prettier": "^3.6.2",
|
|
173
173
|
"react-docgen-typescript": "^2.4.0",
|
|
174
|
-
"rollup": "^4.50.
|
|
174
|
+
"rollup": "^4.50.2",
|
|
175
175
|
"rollup-plugin-copy": "^3.5.0",
|
|
176
176
|
"rollup-plugin-dts": "^6.2.3",
|
|
177
177
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
178
178
|
"rollup-preserve-directives": "^1.1.3",
|
|
179
179
|
"semantic-release": "^24.2.8",
|
|
180
|
-
"storybook": "^9.1.
|
|
180
|
+
"storybook": "^9.1.6",
|
|
181
181
|
"stylelint": "^16.24.0",
|
|
182
182
|
"typescript": "^5.9.2"
|
|
183
183
|
}
|