@widergy/energy-ui 3.85.2 → 3.86.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
# [3.86.0](https://github.com/widergy/energy-ui/compare/v3.85.2...v3.86.0) (2025-07-11)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* [SFPE-406] UTPanel Pagination and MainStatus ([#639](https://github.com/widergy/energy-ui/issues/639)) ([2d726ad](https://github.com/widergy/energy-ui/commit/2d726ad8e41c8289d640871c53b24fe99368ab8b))
|
|
7
|
+
|
|
1
8
|
## [3.85.2](https://github.com/widergy/energy-ui/compare/v3.85.1...v3.85.2) (2025-07-10)
|
|
2
9
|
|
|
3
10
|
|
|
@@ -34,3 +34,9 @@ Component used for displaying a side panel.
|
|
|
34
34
|
| subtitle | string | | Subtitle to show |
|
|
35
35
|
| title | string | | Title to show |
|
|
36
36
|
| titleProps | object | {} | UTLabel props for title. Default props: variant="title2" weight="medium" |
|
|
37
|
+
| collapsablePanel | bool | false | Indicates if panel can be collapsed when inline mode is enabled |
|
|
38
|
+
| inline | bool | false | Indicates if panel should be rendered inline instead of as a modal |
|
|
39
|
+
| paginationProps | object | {} | Object containing pagination configuration: nextButton (UTButton props), backButton (UTButton props), currentPage (number), totalPages (number) |
|
|
40
|
+
| showMainStatus | bool | false | Shows a status indicator next to the title |
|
|
41
|
+
| showPagination | bool | false | Shows pagination controls in the header |
|
|
42
|
+
| statusProps | object | {} | Props passed to UTStatus component when showMainStatus is true |
|
|
@@ -12,6 +12,7 @@ var _propTypes = require("prop-types");
|
|
|
12
12
|
var _isArray = _interopRequireDefault(require("lodash/isArray"));
|
|
13
13
|
var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
|
|
14
14
|
var _UTButton = _interopRequireDefault(require("../../../UTButton"));
|
|
15
|
+
var _UTStatus = _interopRequireDefault(require("../../../UTStatus"));
|
|
15
16
|
var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
|
|
16
17
|
var _UTMenu = _interopRequireDefault(require("../../../UTMenu"));
|
|
17
18
|
var _index = _interopRequireDefault(require("../../../UTProgressBar/index.js"));
|
|
@@ -55,11 +56,15 @@ const UTPanel = _ref => {
|
|
|
55
56
|
onEndReachedCallback,
|
|
56
57
|
onOpen = () => {},
|
|
57
58
|
open,
|
|
59
|
+
paginationProps = {},
|
|
58
60
|
panelSide,
|
|
59
61
|
perfectScrollbarOptions,
|
|
60
62
|
secondaryActionDataTestId = panel.secondaryAction,
|
|
63
|
+
showMainStatus = false,
|
|
64
|
+
showPagination = false,
|
|
61
65
|
singleHeaderItemsColumn = false,
|
|
62
66
|
size = 'M',
|
|
67
|
+
statusProps = {},
|
|
63
68
|
stepsCount,
|
|
64
69
|
subtitle = '',
|
|
65
70
|
title = '',
|
|
@@ -75,6 +80,12 @@ const UTPanel = _ref => {
|
|
|
75
80
|
const secondaryActionAsMenu = (0, _isArray.default)(headerSecondaryActionButton);
|
|
76
81
|
const panelIsCollapsible = collapsablePanel && inline;
|
|
77
82
|
const panelIsCollapsed = panelIsCollapsible && !open;
|
|
83
|
+
const {
|
|
84
|
+
nextButton = {},
|
|
85
|
+
backButton = {},
|
|
86
|
+
currentPage = 1,
|
|
87
|
+
totalPages = 1
|
|
88
|
+
} = paginationProps;
|
|
78
89
|
const {
|
|
79
90
|
closeButton: closeButtonClass,
|
|
80
91
|
headerContainer: headerContainerClass,
|
|
@@ -112,7 +123,17 @@ const UTPanel = _ref => {
|
|
|
112
123
|
className: _stylesModule.default.controlAreaContainer
|
|
113
124
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
114
125
|
className: _stylesModule.default.controlAreaBar
|
|
115
|
-
},
|
|
126
|
+
}, showPagination && /*#__PURE__*/_react.default.createElement("div", {
|
|
127
|
+
className: _stylesModule.default.paginationContainer
|
|
128
|
+
}, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
|
|
129
|
+
colorTheme: "gray"
|
|
130
|
+
}, "".concat(currentPage, " / ").concat(totalPages)), /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
|
|
131
|
+
Icon: "IconChevronLeft",
|
|
132
|
+
variant: "text"
|
|
133
|
+
}, backButton)), /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
|
|
134
|
+
Icon: "IconChevronRight",
|
|
135
|
+
variant: "text"
|
|
136
|
+
}, nextButton))), (panelIsCollapsible || !hideCloseButton) && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
|
|
116
137
|
classNames: {
|
|
117
138
|
icon: iconCloseClass,
|
|
118
139
|
root: closeButtonClass
|
|
@@ -141,7 +162,7 @@ const UTPanel = _ref => {
|
|
|
141
162
|
dataTestId: titleDataTestId,
|
|
142
163
|
variant: "title2",
|
|
143
164
|
weight: "medium"
|
|
144
|
-
}, titleProps), title), collapsableHeader && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
|
|
165
|
+
}, titleProps), title), showMainStatus && /*#__PURE__*/_react.default.createElement(_UTStatus.default, statusProps, statusProps.label), collapsableHeader && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
|
|
145
166
|
Icon: collapseHeader ? 'IconChevronUp' : 'IconChevronDown',
|
|
146
167
|
onClick: () => setCollapseHeader(!collapseHeader),
|
|
147
168
|
size: "small",
|
|
@@ -231,8 +252,14 @@ UTPanel.propTypes = {
|
|
|
231
252
|
secondaryActionDataTestId: _propTypes.string,
|
|
232
253
|
singleHeaderItemsColumn: _propTypes.bool,
|
|
233
254
|
size: (0, _propTypes.oneOf)(Object.keys(_constants.SIZES)),
|
|
255
|
+
showMainStatus: _propTypes.bool,
|
|
256
|
+
statusProps: _propTypes.object,
|
|
234
257
|
stepsCount: _propTypes.number,
|
|
258
|
+
showPagination: _propTypes.bool,
|
|
259
|
+
currentPage: _propTypes.number,
|
|
260
|
+
totalPages: _propTypes.number,
|
|
235
261
|
subtitle: _propTypes.string,
|
|
262
|
+
paginationProps: _propTypes.object,
|
|
236
263
|
title: _propTypes.string,
|
|
237
264
|
titleDataTestId: _propTypes.string,
|
|
238
265
|
titleProps: _propTypes.object
|