@widergy/energy-ui 3.6.0 → 3.6.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/UTDatePicker/index.js +10 -2
- package/dist/components/UTDatePicker/utils.js +14 -2
- package/dist/components/UTHeader/styles.module.scss +2 -2
- package/dist/components/UTWorkflowContainer/versions/V1/constants.js +21 -0
- package/dist/components/UTWorkflowContainer/versions/V1/index.js +7 -2
- package/dist/components/UTWorkflowContainer/versions/V1/styles.module.scss +30 -2
- package/dist/components/UTWorkflowContainer/versions/V1/theme.js +4 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
## [3.6.2](https://github.com/widergy/energy-ui/compare/v3.6.1...v3.6.2) (2024-04-19)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* workflow body variants ([#444](https://github.com/widergy/energy-ui/issues/444)) ([3fcfaa8](https://github.com/widergy/energy-ui/commit/3fcfaa86b517afd8030316d6b271b7ff2d1aea85))
|
|
7
|
+
|
|
8
|
+
## [3.6.1](https://github.com/widergy/energy-ui/compare/v3.6.0...v3.6.1) (2024-04-19)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
* fix date picker to only past month ([8aa6ded](https://github.com/widergy/energy-ui/commit/8aa6dedacfe75d33079621b4934435a1b86f848f))
|
|
14
|
+
|
|
1
15
|
# [3.6.0](https://github.com/widergy/energy-ui/compare/v3.5.5...v3.6.0) (2024-04-15)
|
|
2
16
|
|
|
3
17
|
|
|
@@ -54,7 +54,7 @@ class CustomUtils extends _dayjs.default {
|
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
const UTDatePicker = _ref => {
|
|
57
|
-
var _field$configuration;
|
|
57
|
+
var _field$configuration, _field$configuration2;
|
|
58
58
|
let {
|
|
59
59
|
classes: themeClasses,
|
|
60
60
|
classNames,
|
|
@@ -79,6 +79,12 @@ const UTDatePicker = _ref => {
|
|
|
79
79
|
} = _ref;
|
|
80
80
|
const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
|
|
81
81
|
const configMask = (field === null || field === void 0 || (_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.date_mask) || _constants.OUTPUT_LABEL_MASK;
|
|
82
|
+
const onlyPastMonth = (field === null || field === void 0 || (_field$configuration2 = field.configuration) === null || _field$configuration2 === void 0 ? void 0 : _field$configuration2.only_past_month) || false;
|
|
83
|
+
const pastMonthDates = (0, _utils.getPastMonthDates)(onlyPastMonth);
|
|
84
|
+
const {
|
|
85
|
+
minDate,
|
|
86
|
+
maxDate
|
|
87
|
+
} = pastMonthDates;
|
|
82
88
|
const [pickedDate, setPickedDate] = (0, _react.useState)(null);
|
|
83
89
|
const [internalError, setInternalError] = (0, _react.useState)(null);
|
|
84
90
|
const handleChange = date => {
|
|
@@ -147,7 +153,9 @@ const UTDatePicker = _ref => {
|
|
|
147
153
|
PopoverProps: {
|
|
148
154
|
...(iconAnchor ? (0, _constants.iconAnchorProps)(operenerIconReference) : {}),
|
|
149
155
|
...popoverProps
|
|
150
|
-
}
|
|
156
|
+
},
|
|
157
|
+
minDate: minDate,
|
|
158
|
+
maxDate: maxDate
|
|
151
159
|
}, pickerProps))));
|
|
152
160
|
};
|
|
153
161
|
UTDatePicker.propTypes = {
|
|
@@ -3,10 +3,22 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.isSelected = exports.dateMatchesFormat = void 0;
|
|
6
|
+
exports.isSelected = exports.getPastMonthDates = exports.dateMatchesFormat = void 0;
|
|
7
7
|
var _dayjs = _interopRequireDefault(require("dayjs"));
|
|
8
8
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
9
9
|
const isSelected = (date, selectedDate) => selectedDate && date.isSame(selectedDate, 'day');
|
|
10
10
|
exports.isSelected = isSelected;
|
|
11
11
|
const dateMatchesFormat = (date, targetFormat) => (0, _dayjs.default)(date, targetFormat).format(targetFormat) === date;
|
|
12
|
-
exports.dateMatchesFormat = dateMatchesFormat;
|
|
12
|
+
exports.dateMatchesFormat = dateMatchesFormat;
|
|
13
|
+
const getPastMonthDates = function () {
|
|
14
|
+
let onlyPastMonth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
|
15
|
+
if (!onlyPastMonth) return {};
|
|
16
|
+
const date = new Date();
|
|
17
|
+
const currentYear = date.getFullYear();
|
|
18
|
+
const currentMonth = date.getMonth();
|
|
19
|
+
return {
|
|
20
|
+
minDate: new Date(currentYear, currentMonth - 1, 1),
|
|
21
|
+
maxDate: new Date(currentYear, currentMonth, 0)
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
exports.getPastMonthDates = getPastMonthDates;
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
flex-direction: column;
|
|
12
12
|
justify-content: space-between;
|
|
13
13
|
margin: 0 auto;
|
|
14
|
-
max-width:
|
|
14
|
+
max-width: 1200px;
|
|
15
15
|
padding: 24px 32px 32px;
|
|
16
16
|
|
|
17
17
|
@media #{$tablet-mobile} {
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
.bannerContainer {
|
|
39
39
|
border-radius: 8px;
|
|
40
40
|
margin-bottom: 0;
|
|
41
|
-
max-width:
|
|
41
|
+
max-width: calc(800px - 32px);
|
|
42
42
|
width: 100%;
|
|
43
43
|
}
|
|
44
44
|
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.childrenContentStyle = exports.VARIANTS = void 0;
|
|
7
|
+
var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
|
|
8
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
9
|
+
const CENTERED = 'centered';
|
|
10
|
+
const FULL_WIDTH = 'fullWidth';
|
|
11
|
+
const DEFAULT = 'default';
|
|
12
|
+
const VARIANTS = exports.VARIANTS = {
|
|
13
|
+
CENTERED,
|
|
14
|
+
FULL_WIDTH,
|
|
15
|
+
DEFAULT
|
|
16
|
+
};
|
|
17
|
+
const childrenContentStyle = exports.childrenContentStyle = {
|
|
18
|
+
[VARIANTS.CENTERED]: _stylesModule.default.childrenContentCentered,
|
|
19
|
+
[VARIANTS.FULL_WIDTH]: _stylesModule.default.childrenContentFullWidth,
|
|
20
|
+
[VARIANTS.DEFAULT]: _stylesModule.default.childrenContent
|
|
21
|
+
};
|
|
@@ -17,6 +17,7 @@ var _NavActions = _interopRequireDefault(require("./components/NavActions"));
|
|
|
17
17
|
var _types = require("./types");
|
|
18
18
|
var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
|
|
19
19
|
var _theme = require("./theme");
|
|
20
|
+
var _constants = require("./constants");
|
|
20
21
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
22
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
22
23
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -43,6 +44,7 @@ const UTWorkflowContainer = _ref => {
|
|
|
43
44
|
subtitle,
|
|
44
45
|
tagline,
|
|
45
46
|
title,
|
|
47
|
+
variant = _constants.VARIANTS.DEFAULT,
|
|
46
48
|
withIcon = false,
|
|
47
49
|
withStepperPadding = true
|
|
48
50
|
} = _ref;
|
|
@@ -77,8 +79,10 @@ const UTWorkflowContainer = _ref => {
|
|
|
77
79
|
tagline: title && tagline,
|
|
78
80
|
title
|
|
79
81
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
80
|
-
className: "".concat(_stylesModule.default.childrenContainer, " ").concat(classes.childrenContainer)
|
|
81
|
-
},
|
|
82
|
+
className: "".concat(_stylesModule.default.childrenContainer, " ").concat(classes.childrenContainer, " ").concat(variant === _constants.VARIANTS.FULL_WIDTH && "".concat(_stylesModule.default.childrenContainerFullWidth, " ").concat(classes.childrenContainerFullWidth))
|
|
83
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
84
|
+
className: "".concat(_constants.childrenContentStyle[variant] || _stylesModule.default.childrenContent, " ").concat(classes.childrenContent)
|
|
85
|
+
}, children))), !isNavHidden && /*#__PURE__*/_react.default.createElement("div", {
|
|
82
86
|
className: "".concat(classes.bottomNav, " ").concat(_stylesModule.default.bottomNav)
|
|
83
87
|
}, checkbox && isMobileOrTablet && /*#__PURE__*/_react.default.createElement("div", {
|
|
84
88
|
className: _stylesModule.default.mobileCheckboxContainer
|
|
@@ -128,6 +132,7 @@ UTWorkflowContainer.propTypes = {
|
|
|
128
132
|
subtitle: _propTypes.string,
|
|
129
133
|
tagline: _propTypes.string,
|
|
130
134
|
title: _propTypes.string,
|
|
135
|
+
variant: _propTypes.string,
|
|
131
136
|
withIcon: _propTypes.bool,
|
|
132
137
|
withStepperPadding: _propTypes.bool
|
|
133
138
|
};
|
|
@@ -18,8 +18,8 @@
|
|
|
18
18
|
display: flex;
|
|
19
19
|
flex-direction: column;
|
|
20
20
|
height: 100%;
|
|
21
|
+
overflow-y: auto;
|
|
21
22
|
width: 100%;
|
|
22
|
-
overflow-y: scroll;
|
|
23
23
|
|
|
24
24
|
@media #{$tablet-mobile} {
|
|
25
25
|
align-self: center;
|
|
@@ -39,8 +39,9 @@
|
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
.childrenContainer {
|
|
42
|
+
flex: 1;
|
|
42
43
|
margin: 0 auto;
|
|
43
|
-
max-width:
|
|
44
|
+
max-width: 1200px;
|
|
44
45
|
padding: 0 32px 16px;
|
|
45
46
|
width: calc(100% - 64px);
|
|
46
47
|
|
|
@@ -50,6 +51,33 @@
|
|
|
50
51
|
}
|
|
51
52
|
}
|
|
52
53
|
|
|
54
|
+
.childrenContent {
|
|
55
|
+
max-width: 800px;
|
|
56
|
+
|
|
57
|
+
@media #{$tablet-mobile} {
|
|
58
|
+
margin: 0 auto;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.childrenContentCentered {
|
|
63
|
+
align-items: center;
|
|
64
|
+
display: flex;
|
|
65
|
+
height: 100%;
|
|
66
|
+
justify-content: center;
|
|
67
|
+
margin: 0 auto;
|
|
68
|
+
max-width: 500px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.childrenContainerFullWidth {
|
|
72
|
+
max-width: none;
|
|
73
|
+
padding: 24px 32px 16px;
|
|
74
|
+
width: calc(100% - 64px);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.childrenContentFullWidth {
|
|
78
|
+
max-width: none;
|
|
79
|
+
}
|
|
80
|
+
|
|
53
81
|
.progress {
|
|
54
82
|
height: 8px;
|
|
55
83
|
}
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.retrieveStyle = void 0;
|
|
7
7
|
var _shadowUtils = require("../../../../utils/shadowUtils");
|
|
8
8
|
const retrieveStyle = _ref => {
|
|
9
|
-
var _theme$UTWorkflowCont, _theme$Palette$shadow, _theme$Palette, _theme$UTWorkflowCont2, _theme$UTWorkflowCont3, _theme$Palette2;
|
|
9
|
+
var _theme$UTWorkflowCont, _theme$Palette$shadow, _theme$Palette, _theme$UTWorkflowCont2, _theme$UTWorkflowCont3, _theme$Palette2, _theme$Palette3;
|
|
10
10
|
let {
|
|
11
11
|
theme
|
|
12
12
|
} = _ref;
|
|
@@ -26,6 +26,9 @@ const retrieveStyle = _ref => {
|
|
|
26
26
|
},
|
|
27
27
|
colorPrimary: {
|
|
28
28
|
backgroundColor: "".concat(((_theme$UTWorkflowCont3 = theme.UTWorkflowContainer) === null || _theme$UTWorkflowCont3 === void 0 || (_theme$UTWorkflowCont3 = _theme$UTWorkflowCont3.progress) === null || _theme$UTWorkflowCont3 === void 0 ? void 0 : _theme$UTWorkflowCont3.color) || ((_theme$Palette2 = theme.Palette) === null || _theme$Palette2 === void 0 ? void 0 : _theme$Palette2.light['04']), " !important")
|
|
29
|
+
},
|
|
30
|
+
childrenContainerFullWidth: {
|
|
31
|
+
borderTop: "1px solid ".concat((_theme$Palette3 = theme.Palette) === null || _theme$Palette3 === void 0 ? void 0 : _theme$Palette3.light['04'])
|
|
29
32
|
}
|
|
30
33
|
};
|
|
31
34
|
};
|