@widergy/energy-ui 3.100.0 → 3.100.2
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/CHANGELOG.md +14 -0
- package/dist/components/UTPagination/README.md +242 -0
- package/dist/components/UTPagination/components/Pagination/components/NavigationButton/index.js +8 -3
- package/dist/components/UTPagination/components/Pagination/index.js +24 -72
- package/dist/components/UTPagination/index.js +4 -1
- package/dist/components/UTPagination/theme.js +8 -2
- package/dist/components/UTPanel/versions/V1/components/DataItem/index.js +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
## [3.100.2](https://github.com/widergy/energy-ui/compare/v3.100.1...v3.100.2) (2025-08-20)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* [SFPE-456] ut icon for ut pagination ([#669](https://github.com/widergy/energy-ui/issues/669)) ([cbe0c4c](https://github.com/widergy/energy-ui/commit/cbe0c4ccd197e31097e327cf24d5e85f1dd0a945))
|
|
7
|
+
|
|
8
|
+
## [3.100.1](https://github.com/widergy/energy-ui/compare/v3.100.0...v3.100.1) (2025-08-20)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
* panel icon data item ([#672](https://github.com/widergy/energy-ui/issues/672)) ([07b9289](https://github.com/widergy/energy-ui/commit/07b92897ee8851cc8d0bb8aabee29d9c6168b04f))
|
|
14
|
+
|
|
1
15
|
# [3.100.0](https://github.com/widergy/energy-ui/compare/v3.99.1...v3.100.0) (2025-08-20)
|
|
2
16
|
|
|
3
17
|
|
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
# UTPagination
|
|
2
|
+
|
|
3
|
+
A comprehensive pagination component that provides both page navigation and page size selection functionality. The component consists of two main parts: a page size selector and pagination controls.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **Page Size Selection**: Dropdown to select number of items per page
|
|
8
|
+
- **Page Navigation**: Previous/next buttons with page numbers
|
|
9
|
+
- **Responsive Design**: Adapts to different screen sizes
|
|
10
|
+
- **Customizable Themes**: Support for different color themes
|
|
11
|
+
- **Accessibility**: Proper ARIA labels and keyboard navigation
|
|
12
|
+
- **Double Arrow Navigation**: Quick navigation to first/last page for large datasets
|
|
13
|
+
- **Size Variants**: Support for different button sizes
|
|
14
|
+
|
|
15
|
+
## Props
|
|
16
|
+
|
|
17
|
+
| Prop | Type | Default | Description |
|
|
18
|
+
| -------------------- | -------------------------------- | --------- | ----------------------------------- |
|
|
19
|
+
| `page` | `number` | - | Current page number (0-based) |
|
|
20
|
+
| `rowsPerPage` | `number` | - | Number of rows per page |
|
|
21
|
+
| `totalRows` | `number` | - | Total number of rows |
|
|
22
|
+
| `rowsPerPageOptions` | `number[]` | - | Available options for rows per page |
|
|
23
|
+
| `totalRowsLabel` | `string` | - | Label for total rows display |
|
|
24
|
+
| `onChangePage` | `function` | - | Callback when page changes |
|
|
25
|
+
| `onChangeRowPerPage` | `function` | - | Callback when rows per page changes |
|
|
26
|
+
| `isResponsive` | `boolean` | - | Enable responsive behavior |
|
|
27
|
+
| `colorThemes` | `object` | `{}` | Color themes for different elements |
|
|
28
|
+
| `classes` | `object` | - | Custom CSS classes |
|
|
29
|
+
| `size` | `'small' \| 'medium' \| 'large'` | `'large'` | Size variant for navigation buttons |
|
|
30
|
+
|
|
31
|
+
### Color Themes
|
|
32
|
+
|
|
33
|
+
| Theme | Type | Description |
|
|
34
|
+
| ------------------ | -------- | ----------------------------------- |
|
|
35
|
+
| `pageButton` | `string` | Color theme for page number buttons |
|
|
36
|
+
| `navigationButton` | `string` | Color theme for navigation buttons |
|
|
37
|
+
| `totalRows` | `string` | Color theme for total rows label |
|
|
38
|
+
|
|
39
|
+
### Classes
|
|
40
|
+
|
|
41
|
+
| Class | Description |
|
|
42
|
+
| ------------------------- | ----------------------------- |
|
|
43
|
+
| `paginationContainer` | Main container wrapper |
|
|
44
|
+
| `pagination` | Pagination controls container |
|
|
45
|
+
| `pageSizeSelectContainer` | Page size selector container |
|
|
46
|
+
| `pageSizeSelect` | Page size select dropdown |
|
|
47
|
+
| `totalRowsLabel` | Total rows label |
|
|
48
|
+
|
|
49
|
+
## Usage
|
|
50
|
+
|
|
51
|
+
### Basic Usage
|
|
52
|
+
|
|
53
|
+
```jsx
|
|
54
|
+
import React, { useState } from 'react';
|
|
55
|
+
import { UTPagination } from '@energy/ui';
|
|
56
|
+
|
|
57
|
+
function MyComponent() {
|
|
58
|
+
const [page, setPage] = useState(0);
|
|
59
|
+
const [rowsPerPage, setRowsPerPage] = useState(10);
|
|
60
|
+
const totalRows = 150;
|
|
61
|
+
const rowsPerPageOptions = [10, 25, 50, 100];
|
|
62
|
+
|
|
63
|
+
const handlePageChange = newPage => {
|
|
64
|
+
setPage(newPage);
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
const handleRowsPerPageChange = newRowsPerPage => {
|
|
68
|
+
setRowsPerPage(newRowsPerPage);
|
|
69
|
+
setPage(0); // Reset to first page when changing page size
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
return (
|
|
73
|
+
<UTPagination
|
|
74
|
+
page={page}
|
|
75
|
+
rowsPerPage={rowsPerPage}
|
|
76
|
+
totalRows={totalRows}
|
|
77
|
+
rowsPerPageOptions={rowsPerPageOptions}
|
|
78
|
+
totalRowsLabel="items"
|
|
79
|
+
onChangePage={handlePageChange}
|
|
80
|
+
onChangeRowPerPage={handleRowsPerPageChange}
|
|
81
|
+
/>
|
|
82
|
+
);
|
|
83
|
+
}
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### With Custom Themes
|
|
87
|
+
|
|
88
|
+
```jsx
|
|
89
|
+
<UTPagination
|
|
90
|
+
page={page}
|
|
91
|
+
rowsPerPage={rowsPerPage}
|
|
92
|
+
totalRows={totalRows}
|
|
93
|
+
rowsPerPageOptions={[10, 25, 50]}
|
|
94
|
+
totalRowsLabel="records"
|
|
95
|
+
onChangePage={handlePageChange}
|
|
96
|
+
onChangeRowPerPage={handleRowsPerPageChange}
|
|
97
|
+
colorThemes={{
|
|
98
|
+
pageButton: 'primary',
|
|
99
|
+
navigationButton: 'secondary',
|
|
100
|
+
totalRows: 'gray'
|
|
101
|
+
}}
|
|
102
|
+
/>
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
### With Custom Size
|
|
106
|
+
|
|
107
|
+
The `size` prop controls the size of navigation buttons (previous/next arrows and double arrows). Available values:
|
|
108
|
+
|
|
109
|
+
- `'small'`: Compact button size
|
|
110
|
+
- `'medium'`: Standard button size
|
|
111
|
+
- `'large'`: Large button size (default)
|
|
112
|
+
|
|
113
|
+
```jsx
|
|
114
|
+
<UTPagination
|
|
115
|
+
page={page}
|
|
116
|
+
rowsPerPage={rowsPerPage}
|
|
117
|
+
totalRows={totalRows}
|
|
118
|
+
rowsPerPageOptions={[10, 25, 50]}
|
|
119
|
+
totalRowsLabel="items"
|
|
120
|
+
onChangePage={handlePageChange}
|
|
121
|
+
onChangeRowPerPage={handleRowsPerPageChange}
|
|
122
|
+
size="medium"
|
|
123
|
+
/>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
### Responsive Pagination
|
|
127
|
+
|
|
128
|
+
```jsx
|
|
129
|
+
<UTPagination
|
|
130
|
+
page={page}
|
|
131
|
+
rowsPerPage={rowsPerPage}
|
|
132
|
+
totalRows={totalRows}
|
|
133
|
+
rowsPerPageOptions={[10, 25, 50]}
|
|
134
|
+
totalRowsLabel="items"
|
|
135
|
+
onChangePage={handlePageChange}
|
|
136
|
+
onChangeRowPerPage={handleRowsPerPageChange}
|
|
137
|
+
isResponsive={true}
|
|
138
|
+
/>
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
### With Custom Classes
|
|
142
|
+
|
|
143
|
+
```jsx
|
|
144
|
+
<UTPagination
|
|
145
|
+
page={page}
|
|
146
|
+
rowsPerPage={rowsPerPage}
|
|
147
|
+
totalRows={totalRows}
|
|
148
|
+
rowsPerPageOptions={[10, 25, 50]}
|
|
149
|
+
totalRowsLabel="items"
|
|
150
|
+
onChangePage={handlePageChange}
|
|
151
|
+
onChangeRowPerPage={handleRowsPerPageChange}
|
|
152
|
+
classes={{
|
|
153
|
+
paginationContainer: 'custom-pagination-wrapper',
|
|
154
|
+
pagination: 'custom-pagination-controls',
|
|
155
|
+
pageSizeSelectContainer: 'custom-select-container',
|
|
156
|
+
pageSizeSelect: 'custom-select',
|
|
157
|
+
totalRowsLabel: 'custom-total-label'
|
|
158
|
+
}}
|
|
159
|
+
/>
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
## Component Structure
|
|
163
|
+
|
|
164
|
+
The UTPagination component is composed of two main sub-components:
|
|
165
|
+
|
|
166
|
+
### PageSizeSelector
|
|
167
|
+
|
|
168
|
+
- Displays a dropdown to select the number of items per page
|
|
169
|
+
- Shows total count with customizable label
|
|
170
|
+
- Supports custom styling and themes
|
|
171
|
+
- Uses UTSelect component with outlined variant
|
|
172
|
+
|
|
173
|
+
### Pagination
|
|
174
|
+
|
|
175
|
+
- Navigation buttons (previous/next)
|
|
176
|
+
- Page number buttons with active state styling
|
|
177
|
+
- Double arrow navigation for large datasets (first/last page)
|
|
178
|
+
- Responsive behavior that hides double arrows on smaller screens
|
|
179
|
+
- Support for different button sizes
|
|
180
|
+
|
|
181
|
+
## Constants
|
|
182
|
+
|
|
183
|
+
| Constant | Value | Description |
|
|
184
|
+
| -------------------------------- | ------ | --------------------------------------------- |
|
|
185
|
+
| `PREPOSITION` | `'de'` | Preposition used in total rows label |
|
|
186
|
+
| `PAGINATION_LIMIT_DOUBLE_ARROWS` | `10` | Minimum pages to show double arrow navigation |
|
|
187
|
+
| `MAX_PAGINATION_ITEMS` | `5` | Maximum page numbers to display |
|
|
188
|
+
|
|
189
|
+
## Theme Integration
|
|
190
|
+
|
|
191
|
+
The component integrates with the Energy UI theme system and supports the following theme properties:
|
|
192
|
+
|
|
193
|
+
```javascript
|
|
194
|
+
{
|
|
195
|
+
UTPagination: {
|
|
196
|
+
paginationContainer: {
|
|
197
|
+
marginTop: 32
|
|
198
|
+
},
|
|
199
|
+
pageSizeSelect: {
|
|
200
|
+
background: 'transparent',
|
|
201
|
+
fontSize: '14px',
|
|
202
|
+
padding: 6,
|
|
203
|
+
textAlign: 'center',
|
|
204
|
+
border: '1px solid #ccc',
|
|
205
|
+
hover: {
|
|
206
|
+
border: '1px solid #999'
|
|
207
|
+
}
|
|
208
|
+
},
|
|
209
|
+
pagination: {
|
|
210
|
+
gridGap: '16px'
|
|
211
|
+
}
|
|
212
|
+
},
|
|
213
|
+
Fonts: {
|
|
214
|
+
fontFamily: 'your-font-family'
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
## Accessibility
|
|
220
|
+
|
|
221
|
+
- Proper ARIA labels for navigation buttons
|
|
222
|
+
- Keyboard navigation support
|
|
223
|
+
- Screen reader friendly page announcements
|
|
224
|
+
- Focus management for interactive elements
|
|
225
|
+
- Semantic HTML structure
|
|
226
|
+
|
|
227
|
+
## Browser Support
|
|
228
|
+
|
|
229
|
+
- Chrome (latest)
|
|
230
|
+
- Firefox (latest)
|
|
231
|
+
- Safari (latest)
|
|
232
|
+
- Edge (latest)
|
|
233
|
+
|
|
234
|
+
## Dependencies
|
|
235
|
+
|
|
236
|
+
- React 16.8+
|
|
237
|
+
- PropTypes
|
|
238
|
+
- Energy UI theme system
|
|
239
|
+
- UTButton component
|
|
240
|
+
- UTSelect component
|
|
241
|
+
- UTLabel component
|
|
242
|
+
- @tabler/icons-react (for navigation icons)
|
package/dist/components/UTPagination/components/Pagination/components/NavigationButton/index.js
CHANGED
|
@@ -16,8 +16,10 @@ const NavigationButton = _ref => {
|
|
|
16
16
|
colorTheme,
|
|
17
17
|
disabled,
|
|
18
18
|
Icon,
|
|
19
|
+
iconPlacement,
|
|
19
20
|
label,
|
|
20
|
-
onClick
|
|
21
|
+
onClick,
|
|
22
|
+
size
|
|
21
23
|
} = _ref;
|
|
22
24
|
return /*#__PURE__*/_react.default.createElement(_UTButton.default, {
|
|
23
25
|
classNames: {
|
|
@@ -26,8 +28,9 @@ const NavigationButton = _ref => {
|
|
|
26
28
|
colorTheme: colorTheme,
|
|
27
29
|
disabled: disabled,
|
|
28
30
|
Icon: Icon,
|
|
31
|
+
iconPlacement: iconPlacement,
|
|
29
32
|
onClick: onClick,
|
|
30
|
-
size:
|
|
33
|
+
size: size,
|
|
31
34
|
variant: "semitransparent"
|
|
32
35
|
}, label && /*#__PURE__*/_react.default.createElement("span", {
|
|
33
36
|
className: _stylesModule.default.label
|
|
@@ -38,7 +41,9 @@ NavigationButton.propTypes = {
|
|
|
38
41
|
colorTheme: _propTypes.string,
|
|
39
42
|
disabled: _propTypes.bool,
|
|
40
43
|
Icon: _propTypes.elementType,
|
|
44
|
+
iconPlacement: _propTypes.string,
|
|
41
45
|
label: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.number]),
|
|
42
|
-
onClick: _propTypes.func
|
|
46
|
+
onClick: _propTypes.func,
|
|
47
|
+
size: _propTypes.string
|
|
43
48
|
};
|
|
44
49
|
var _default = exports.default = /*#__PURE__*/(0, _react.memo)(NavigationButton);
|
|
@@ -13,110 +13,61 @@ var _NavigationButton = _interopRequireDefault(require("./components/NavigationB
|
|
|
13
13
|
var _utils = require("./utils");
|
|
14
14
|
var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
|
|
15
15
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
16
|
-
var NavigateBeforeIcon = function NavigateBeforeIcon(props) {
|
|
17
|
-
return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
|
|
18
|
-
fillRule: "evenodd",
|
|
19
|
-
clipRule: "evenodd",
|
|
20
|
-
d: "M13.362 17a.996.996 0 0 1-.719-.305l-3.863-4a1 1 0 0 1 .013-1.402l4-4a.999.999 0 1 1 1.414 1.414l-3.305 3.305 3.18 3.293a1 1 0 0 1-.72 1.695Z",
|
|
21
|
-
fill: "#091E42"
|
|
22
|
-
}));
|
|
23
|
-
};
|
|
24
|
-
NavigateBeforeIcon.defaultProps = {
|
|
25
|
-
width: "24",
|
|
26
|
-
height: "24",
|
|
27
|
-
viewBox: "0 0 24 24",
|
|
28
|
-
fill: "none",
|
|
29
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
30
|
-
};
|
|
31
|
-
var NavigateNextIcon = function NavigateNextIcon(props) {
|
|
32
|
-
return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
|
|
33
|
-
fillRule: "evenodd",
|
|
34
|
-
clipRule: "evenodd",
|
|
35
|
-
d: "M10.5 17a.999.999 0 0 1-.707-1.707l3.305-3.305-3.18-3.293a1 1 0 0 1 1.439-1.39l3.862 4a1 1 0 0 1-.012 1.402l-4 4A.997.997 0 0 1 10.5 17Z",
|
|
36
|
-
fill: "#091E42"
|
|
37
|
-
}));
|
|
38
|
-
};
|
|
39
|
-
NavigateNextIcon.defaultProps = {
|
|
40
|
-
width: "24",
|
|
41
|
-
height: "24",
|
|
42
|
-
viewBox: "0 0 24 24",
|
|
43
|
-
fill: "none",
|
|
44
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
45
|
-
};
|
|
46
|
-
var NavigateHeaderBeforeIcon = function NavigateHeaderBeforeIcon(props) {
|
|
47
|
-
return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
|
|
48
|
-
fill: "#FFF",
|
|
49
|
-
d: "M5.232.36a1 1 0 0 1 1.536 1.28L2.292 7.01l4.315 5.363a1 1 0 0 1-1.558 1.254l-4.828-6A1 1 0 0 1 .232 6.36Zm7 0a1 1 0 0 1 1.537 1.28L9.293 7.011l4.315 5.362a1 1 0 0 1-1.56 1.254l-4.828-6a1 1 0 0 1 .012-1.267Z",
|
|
50
|
-
fillRule: "evenodd"
|
|
51
|
-
}));
|
|
52
|
-
};
|
|
53
|
-
NavigateHeaderBeforeIcon.defaultProps = {
|
|
54
|
-
width: "14",
|
|
55
|
-
height: "14",
|
|
56
|
-
viewBox: "0 0 14 14",
|
|
57
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
58
|
-
};
|
|
59
|
-
var NavigateHeaderNextIcon = function NavigateHeaderNextIcon(props) {
|
|
60
|
-
return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
|
|
61
|
-
fill: "#FFF",
|
|
62
|
-
d: "M7.545.221a1 1 0 0 1 1.406.152l4.828 6a1 1 0 0 1-.01 1.267l-5 6a1 1 0 1 1-1.537-1.28l4.476-5.371-4.316-5.362A1 1 0 0 1 7.545.221Zm-7 0a1 1 0 0 1 1.406.152l4.828 6a1 1 0 0 1-.01 1.267l-5 6a1 1 0 1 1-1.537-1.28l4.475-5.371L.392 1.627A1 1 0 0 1 .545.221Z",
|
|
63
|
-
fillRule: "evenodd"
|
|
64
|
-
}));
|
|
65
|
-
};
|
|
66
|
-
NavigateHeaderNextIcon.defaultProps = {
|
|
67
|
-
width: "14",
|
|
68
|
-
height: "14",
|
|
69
|
-
viewBox: "0 0 14 14",
|
|
70
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
71
|
-
};
|
|
72
16
|
const Pagination = _ref => {
|
|
73
17
|
let {
|
|
74
18
|
classes,
|
|
75
19
|
colorThemes,
|
|
76
20
|
currentPage,
|
|
21
|
+
isResponsive,
|
|
77
22
|
onChangePage,
|
|
78
23
|
rowsPerPage,
|
|
79
|
-
|
|
80
|
-
|
|
24
|
+
size,
|
|
25
|
+
totalRows
|
|
81
26
|
} = _ref;
|
|
82
27
|
const totalPages = rowsPerPage >= totalRows ? 1 : Math.ceil(totalRows / rowsPerPage);
|
|
83
28
|
const pageList = (0, _utils.getPageNumbers)(totalPages, currentPage, isResponsive);
|
|
84
29
|
const navigationButtonColorTheme = colorThemes.navigationButton || 'secondary';
|
|
30
|
+
const navigationButtonSize = size || 'large';
|
|
31
|
+
const pageButtonSize = size || 'medium';
|
|
85
32
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
86
33
|
className: "".concat(_stylesModule.default.pagination, " ").concat(classes.pagination)
|
|
87
34
|
}, totalPages > _constants.PAGINATION_LIMIT_DOUBLE_ARROWS && !isResponsive && /*#__PURE__*/_react.default.createElement(_NavigationButton.default, {
|
|
88
|
-
className: _stylesModule.default.invertNavigationLabel,
|
|
89
35
|
colorTheme: navigationButtonColorTheme,
|
|
90
|
-
Icon: NavigateHeaderBeforeIcon,
|
|
91
|
-
label: "1",
|
|
92
36
|
disabled: currentPage === 0,
|
|
93
|
-
|
|
37
|
+
Icon: "IconChevronsLeft",
|
|
38
|
+
label: "1",
|
|
39
|
+
onClick: () => onChangePage(0),
|
|
40
|
+
size: navigationButtonSize
|
|
94
41
|
}), /*#__PURE__*/_react.default.createElement(_NavigationButton.default, {
|
|
95
42
|
colorTheme: navigationButtonColorTheme,
|
|
96
|
-
Icon: NavigateBeforeIcon,
|
|
97
43
|
disabled: currentPage === 0,
|
|
98
|
-
|
|
44
|
+
Icon: "IconChevronLeft",
|
|
45
|
+
onClick: () => onChangePage(currentPage - 1),
|
|
46
|
+
size: navigationButtonSize
|
|
99
47
|
}), pageList.map(page => /*#__PURE__*/_react.default.createElement(_UTButton.default, {
|
|
100
|
-
key: "page_".concat(page),
|
|
101
48
|
classNames: {
|
|
102
49
|
childrenContainer: _stylesModule.default.pageButtonChildrenContainer,
|
|
103
50
|
root: "".concat(_stylesModule.default.pageButton, " ").concat(currentPage === page && _stylesModule.default.pageButtondisabled)
|
|
104
51
|
},
|
|
105
52
|
colorTheme: colorThemes.pageButton || currentPage === page ? 'primary' : 'secondary',
|
|
53
|
+
key: "page_".concat(page),
|
|
106
54
|
onClick: () => onChangePage(page),
|
|
107
|
-
variant: currentPage === page ? 'semitransparent' : 'text'
|
|
55
|
+
variant: currentPage === page ? 'semitransparent' : 'text',
|
|
56
|
+
size: pageButtonSize
|
|
108
57
|
}, page + 1)), /*#__PURE__*/_react.default.createElement(_NavigationButton.default, {
|
|
109
58
|
colorTheme: navigationButtonColorTheme,
|
|
110
|
-
Icon: NavigateNextIcon,
|
|
111
59
|
disabled: currentPage === totalPages - 1,
|
|
112
|
-
|
|
60
|
+
Icon: "IconChevronRight",
|
|
61
|
+
onClick: () => onChangePage(currentPage + 1),
|
|
62
|
+
size: navigationButtonSize
|
|
113
63
|
}), totalPages > _constants.PAGINATION_LIMIT_DOUBLE_ARROWS && !isResponsive && /*#__PURE__*/_react.default.createElement(_NavigationButton.default, {
|
|
114
|
-
className: _stylesModule.default.navigationLabel,
|
|
115
64
|
colorTheme: navigationButtonColorTheme,
|
|
116
|
-
Icon: NavigateHeaderNextIcon,
|
|
117
|
-
label: totalPages,
|
|
118
65
|
disabled: currentPage === totalPages - 1,
|
|
119
|
-
|
|
66
|
+
Icon: "IconChevronsRight",
|
|
67
|
+
iconPlacement: "right",
|
|
68
|
+
label: totalPages,
|
|
69
|
+
onClick: () => onChangePage(totalPages - 1),
|
|
70
|
+
size: navigationButtonSize
|
|
120
71
|
}));
|
|
121
72
|
};
|
|
122
73
|
Pagination.propTypes = {
|
|
@@ -130,6 +81,7 @@ Pagination.propTypes = {
|
|
|
130
81
|
isResponsive: _propTypes.bool,
|
|
131
82
|
onChangePage: _propTypes.func,
|
|
132
83
|
rowsPerPage: _propTypes.number,
|
|
84
|
+
size: (0, _propTypes.oneOf)(['small', 'medium', 'large']),
|
|
133
85
|
totalRows: _propTypes.number
|
|
134
86
|
};
|
|
135
87
|
var _default = exports.default = Pagination;
|
|
@@ -25,6 +25,7 @@ const UTPagination = _ref => {
|
|
|
25
25
|
page,
|
|
26
26
|
rowsPerPage,
|
|
27
27
|
rowsPerPageOptions,
|
|
28
|
+
size,
|
|
28
29
|
totalRows,
|
|
29
30
|
totalRowsLabel
|
|
30
31
|
} = _ref;
|
|
@@ -45,6 +46,7 @@ const UTPagination = _ref => {
|
|
|
45
46
|
isResponsive: isResponsive,
|
|
46
47
|
onChangePage: onChangePage,
|
|
47
48
|
rowsPerPage: rowsPerPage,
|
|
49
|
+
size: size,
|
|
48
50
|
totalRows: totalRows
|
|
49
51
|
}));
|
|
50
52
|
};
|
|
@@ -56,11 +58,12 @@ UTPagination.propTypes = {
|
|
|
56
58
|
totalRows: _propTypes.string
|
|
57
59
|
}),
|
|
58
60
|
isResponsive: _propTypes.bool,
|
|
59
|
-
page: _propTypes.number,
|
|
60
61
|
onChangePage: _propTypes.func,
|
|
61
62
|
onChangeRowPerPage: _propTypes.func,
|
|
63
|
+
page: _propTypes.number,
|
|
62
64
|
rowsPerPage: _propTypes.number,
|
|
63
65
|
rowsPerPageOptions: (0, _propTypes.arrayOf)(_propTypes.number),
|
|
66
|
+
size: (0, _propTypes.oneOf)(['small', 'medium', 'large']),
|
|
64
67
|
totalRows: _propTypes.number,
|
|
65
68
|
totalRowsLabel: _propTypes.string
|
|
66
69
|
};
|
|
@@ -7,7 +7,7 @@ exports.retrieveStyle = void 0;
|
|
|
7
7
|
var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
|
|
8
8
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
9
|
const retrieveStyle = _ref => {
|
|
10
|
-
var _theme$UTPagination, _theme$UTPagination2, _theme$Fonts, _theme$UTPagination3, _theme$UTPagination4, _theme$UTPagination5, _theme$UTPagination6, _theme$UTPagination7, _theme$UTPagination8;
|
|
10
|
+
var _theme$UTPagination, _theme$UTPagination2, _theme$Fonts, _theme$UTPagination3, _theme$UTPagination4, _theme$UTPagination5, _theme$UTPagination6, _theme$UTPagination7, _theme$UTPagination8, _theme$UTPagination9, _theme$UTPagination0;
|
|
11
11
|
let {
|
|
12
12
|
theme
|
|
13
13
|
} = _ref;
|
|
@@ -28,10 +28,16 @@ const retrieveStyle = _ref => {
|
|
|
28
28
|
},
|
|
29
29
|
'&:hover fieldset': {
|
|
30
30
|
border: (theme === null || theme === void 0 || (_theme$UTPagination7 = theme.UTPagination) === null || _theme$UTPagination7 === void 0 || (_theme$UTPagination7 = _theme$UTPagination7.pageSizeSelect) === null || _theme$UTPagination7 === void 0 || (_theme$UTPagination7 = _theme$UTPagination7.hover) === null || _theme$UTPagination7 === void 0 ? void 0 : _theme$UTPagination7.border) || "1px solid ".concat(_colorsModule.default.gray2)
|
|
31
|
+
},
|
|
32
|
+
'&:hover:focus-within fieldset': {
|
|
33
|
+
border: (theme === null || theme === void 0 || (_theme$UTPagination8 = theme.UTPagination) === null || _theme$UTPagination8 === void 0 || (_theme$UTPagination8 = _theme$UTPagination8.pageSizeSelect) === null || _theme$UTPagination8 === void 0 || (_theme$UTPagination8 = _theme$UTPagination8.focused) === null || _theme$UTPagination8 === void 0 ? void 0 : _theme$UTPagination8.border) || "1px solid ".concat(_colorsModule.default.gray3)
|
|
34
|
+
},
|
|
35
|
+
'&:focus-within fieldset': {
|
|
36
|
+
border: (theme === null || theme === void 0 || (_theme$UTPagination9 = theme.UTPagination) === null || _theme$UTPagination9 === void 0 || (_theme$UTPagination9 = _theme$UTPagination9.pageSizeSelect) === null || _theme$UTPagination9 === void 0 || (_theme$UTPagination9 = _theme$UTPagination9.focused) === null || _theme$UTPagination9 === void 0 ? void 0 : _theme$UTPagination9.border) || "1px solid ".concat(_colorsModule.default.gray3, " !important")
|
|
31
37
|
}
|
|
32
38
|
},
|
|
33
39
|
pagination: {
|
|
34
|
-
gridGap: (theme === null || theme === void 0 || (_theme$
|
|
40
|
+
gridGap: (theme === null || theme === void 0 || (_theme$UTPagination0 = theme.UTPagination) === null || _theme$UTPagination0 === void 0 || (_theme$UTPagination0 = _theme$UTPagination0.pagination) === null || _theme$UTPagination0 === void 0 ? void 0 : _theme$UTPagination0.gridGap) || '16px'
|
|
35
41
|
}
|
|
36
42
|
};
|
|
37
43
|
};
|
|
@@ -21,7 +21,7 @@ const DataItem = _ref => {
|
|
|
21
21
|
} = _ref;
|
|
22
22
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
23
23
|
className: "".concat(_stylesModule.default.container, " ").concat(_stylesModule.default[_constants.SIZES[size]])
|
|
24
|
-
}, /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
|
|
24
|
+
}, !!icon && /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
|
|
25
25
|
className: _stylesModule.default.icon,
|
|
26
26
|
colorTheme: "gray",
|
|
27
27
|
name: icon
|