@hitachivantara/uikit-react-lab 4.1.1 → 4.1.3
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/Wizard/Wizard.js +5 -3
- package/dist/Wizard/Wizard.js.map +1 -1
- package/dist/Wizard/WizardContent/WizardContent.js +46 -28
- package/dist/Wizard/WizardContent/WizardContent.js.map +1 -1
- package/dist/Wizard/WizardContent/styles.js +8 -1
- package/dist/Wizard/WizardContent/styles.js.map +1 -1
- package/dist/Wizard/WizardTitle/WizardTitle.js +3 -0
- package/dist/Wizard/WizardTitle/WizardTitle.js.map +1 -1
- package/dist/legacy/Wizard/Wizard.js +5 -3
- package/dist/legacy/Wizard/Wizard.js.map +1 -1
- package/dist/legacy/Wizard/WizardContent/WizardContent.js +46 -28
- package/dist/legacy/Wizard/WizardContent/WizardContent.js.map +1 -1
- package/dist/legacy/Wizard/WizardContent/styles.js +8 -1
- package/dist/legacy/Wizard/WizardContent/styles.js.map +1 -1
- package/dist/legacy/Wizard/WizardTitle/WizardTitle.js +3 -0
- package/dist/legacy/Wizard/WizardTitle/WizardTitle.js.map +1 -1
- package/dist/modern/Wizard/Wizard.js +5 -3
- package/dist/modern/Wizard/Wizard.js.map +1 -1
- package/dist/modern/Wizard/WizardContent/WizardContent.js +43 -25
- package/dist/modern/Wizard/WizardContent/WizardContent.js.map +1 -1
- package/dist/modern/Wizard/WizardContent/styles.js +8 -1
- package/dist/modern/Wizard/WizardContent/styles.js.map +1 -1
- package/dist/modern/Wizard/WizardTitle/WizardTitle.js +3 -0
- package/dist/modern/Wizard/WizardTitle/WizardTitle.js.map +1 -1
- package/package.json +3 -3
package/dist/Wizard/Wizard.js
CHANGED
|
@@ -76,9 +76,11 @@ var HvWizard = function HvWizard(_ref) {
|
|
|
76
76
|
};
|
|
77
77
|
}, [context, summary]);
|
|
78
78
|
_react.default.useEffect(function () {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
79
|
+
return function () {
|
|
80
|
+
if (!open) {
|
|
81
|
+
setTab(0);
|
|
82
|
+
}
|
|
83
|
+
};
|
|
82
84
|
}, [open]);
|
|
83
85
|
var handleClose = _react.default.useCallback(function (evt, reason) {
|
|
84
86
|
if (reason !== "backdropClick") {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Wizard.js","names":["HvWizard","className","children","onClose","handleSubmit","title","open","skippable","loading","hasSummary","summaryContent","labels","cancel","next","previous","skip","submit","summary","fixedHeight","customStep","others","React","useState","context","setContext","setSummary","tab","setTab","contextValue","useMemo","useEffect","handleClose","useCallback","evt","reason","propTypes","PropTypes","string","bool","isRequired","func","node","shape","type","oneOf","stepSize","width","xs","number","sm","md","lg","xl","withStyles","styles","name"],"sources":["../../src/Wizard/Wizard.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport WizardContext from \"./WizardContext\";\nimport WizardContainer from \"./WizardContainer\";\nimport WizardTitle from \"./WizardTitle\";\nimport WizardContent from \"./WizardContent\";\nimport WizardActions from \"./WizardActions\";\n\nimport styles from \"./styles\";\n\nconst HvWizard = ({\n className,\n children,\n onClose,\n handleSubmit,\n title,\n open,\n skippable = true,\n loading = false,\n hasSummary = false,\n summaryContent,\n labels = {\n cancel: \"Cancel\",\n next: \"Next\",\n previous: \"Previous\",\n skip: \"Skip\",\n submit: \"Submit\",\n summary: \"Summary\",\n },\n fixedHeight = false,\n customStep,\n ...others\n}) => {\n const [context, setContext] = React.useState({});\n const [summary, setSummary] = React.useState(null);\n const [tab, setTab] = React.useState(0);\n\n const contextValue = React.useMemo(\n () => ({\n context,\n setContext,\n summary,\n setSummary,\n }),\n [context, summary]\n );\n\n React.useEffect(() => {\n if (!open) {\n
|
|
1
|
+
{"version":3,"file":"Wizard.js","names":["HvWizard","className","children","onClose","handleSubmit","title","open","skippable","loading","hasSummary","summaryContent","labels","cancel","next","previous","skip","submit","summary","fixedHeight","customStep","others","React","useState","context","setContext","setSummary","tab","setTab","contextValue","useMemo","useEffect","handleClose","useCallback","evt","reason","propTypes","PropTypes","string","bool","isRequired","func","node","shape","type","oneOf","stepSize","width","xs","number","sm","md","lg","xl","withStyles","styles","name"],"sources":["../../src/Wizard/Wizard.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport WizardContext from \"./WizardContext\";\nimport WizardContainer from \"./WizardContainer\";\nimport WizardTitle from \"./WizardTitle\";\nimport WizardContent from \"./WizardContent\";\nimport WizardActions from \"./WizardActions\";\n\nimport styles from \"./styles\";\n\nconst HvWizard = ({\n className,\n children,\n onClose,\n handleSubmit,\n title,\n open,\n skippable = true,\n loading = false,\n hasSummary = false,\n summaryContent,\n labels = {\n cancel: \"Cancel\",\n next: \"Next\",\n previous: \"Previous\",\n skip: \"Skip\",\n submit: \"Submit\",\n summary: \"Summary\",\n },\n fixedHeight = false,\n customStep,\n ...others\n}) => {\n const [context, setContext] = React.useState({});\n const [summary, setSummary] = React.useState(null);\n const [tab, setTab] = React.useState(0);\n\n const contextValue = React.useMemo(\n () => ({\n context,\n setContext,\n summary,\n setSummary,\n }),\n [context, summary]\n );\n\n React.useEffect(() => {\n return () => {\n if (!open) {\n setTab(0);\n }\n };\n }, [open]);\n\n const handleClose = React.useCallback(\n (evt, reason) => {\n if (reason !== \"backdropClick\") {\n onClose(evt, reason);\n }\n },\n [onClose]\n );\n\n return (\n <WizardContext.Provider value={contextValue}>\n <WizardContainer className={className} handleClose={handleClose} open={open} {...others}>\n <WizardTitle\n title={title}\n hasSummary={hasSummary}\n labels={labels}\n tab={tab}\n changeTab={setTab}\n customStep={customStep}\n />\n <WizardContent\n loading={loading}\n fixedHeight={fixedHeight}\n tab={tab}\n summaryContent={summaryContent}\n >\n {children}\n </WizardContent>\n <WizardActions\n loading={loading}\n skippable={skippable}\n labels={labels}\n tab={tab}\n changeTab={setTab}\n handleClose={handleClose}\n handleSubmit={handleSubmit}\n />\n </WizardContainer>\n </WizardContext.Provider>\n );\n};\n\nHvWizard.propTypes = {\n /**\n * Class names to be applied.\n */\n className: PropTypes.string,\n /**\n * Current state of the Wizard.\n */\n open: PropTypes.bool.isRequired,\n /**\n * Function executed on close.\n */\n onClose: PropTypes.func.isRequired,\n /**\n * Function executed on submit.\n */\n handleSubmit: PropTypes.func.isRequired,\n /**\n * Enables the skip button.\n */\n skippable: PropTypes.bool,\n /**\n * Title for the wizard.\n */\n title: PropTypes.string,\n /**\n * Shows the summary button.\n */\n hasSummary: PropTypes.bool,\n /**\n * The content of the summary.\n */\n summaryContent: PropTypes.node,\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n /**\n * An object containing all the labels for the wizard.\n */\n labels: PropTypes.shape({\n /**\n * Cancel button label.\n */\n cancel: PropTypes.string,\n /**\n * Skip button label.\n */\n skip: PropTypes.string,\n /**\n * Previous button label.\n */\n previous: PropTypes.string,\n /**\n * Next button label.\n */\n next: PropTypes.string,\n /**\n * Submit button label.\n */\n submit: PropTypes.string,\n /**\n * Summary button label.\n */\n summary: PropTypes.string,\n }),\n /**\n * Forces minimum height to the component.\n */\n fixedHeight: PropTypes.bool,\n /**\n * Whether the loading animation is shown.\n */\n loading: PropTypes.bool,\n /**\n * Custom object to define type, size and width of the StepNavigation component\n */\n customStep: PropTypes.shape({\n /**\n * Type of step navigation. Values = {\"Simple\", \"Default\"}.\n */\n type: PropTypes.oneOf([\"Simple\", \"Default\"]),\n /**\n * Sets one of the standard sizes of the steps. Values = {\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"}\n */\n stepSize: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n /**\n * Width of the component element on each breakpoint screen resolution.\n */\n width: PropTypes.shape({\n xs: PropTypes.number,\n sm: PropTypes.number,\n md: PropTypes.number,\n lg: PropTypes.number,\n xl: PropTypes.number,\n }),\n }),\n};\n\nexport default withStyles(styles, { name: \"HvWizard\" })(HvWizard);\n"],"mappings":"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"}
|
|
@@ -20,7 +20,7 @@ require("core-js/modules/es.array.map.js");
|
|
|
20
20
|
var _react = _interopRequireDefault(require("react"));
|
|
21
21
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
22
22
|
var _styles = require("@mui/styles");
|
|
23
|
-
var
|
|
23
|
+
var _usehooksTs = require("usehooks-ts");
|
|
24
24
|
var _clsx = _interopRequireDefault(require("clsx"));
|
|
25
25
|
var _uikitReactCore = require("@hitachivantara/uikit-react-core");
|
|
26
26
|
var _WizardContext = _interopRequireDefault(require("../WizardContext"));
|
|
@@ -30,7 +30,6 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
30
30
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
31
31
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
32
32
|
var DRAWER_PERCENTAGE = 0.3;
|
|
33
|
-
var MODAL_MARGIN = 20;
|
|
34
33
|
var DRAWER_MIN_WIDTH = 280;
|
|
35
34
|
var HvWizardContent = function HvWizardContent(_ref) {
|
|
36
35
|
var classes = _ref.classes,
|
|
@@ -55,14 +54,15 @@ var HvWizardContent = function HvWizardContent(_ref) {
|
|
|
55
54
|
context = _React$useContext.context,
|
|
56
55
|
setContext = _React$useContext.setContext,
|
|
57
56
|
summary = _React$useContext.summary;
|
|
57
|
+
var summaryRef = _react.default.useRef(null);
|
|
58
58
|
var resizedRef = _react.default.useRef({
|
|
59
|
-
|
|
60
|
-
|
|
59
|
+
height: 0,
|
|
60
|
+
width: 0
|
|
61
61
|
});
|
|
62
|
-
var
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
sizes =
|
|
62
|
+
var _useElementSize = (0, _usehooksTs.useElementSize)(),
|
|
63
|
+
_useElementSize2 = (0, _slicedToArray2.default)(_useElementSize, 2),
|
|
64
|
+
containerRef = _useElementSize2[0],
|
|
65
|
+
sizes = _useElementSize2[1];
|
|
66
66
|
var _React$useState = _react.default.useState(0),
|
|
67
67
|
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
|
68
68
|
summaryHeight = _React$useState2[0],
|
|
@@ -80,17 +80,25 @@ var HvWizardContent = function HvWizardContent(_ref) {
|
|
|
80
80
|
var drawerWidth = modalWidth * DRAWER_PERCENTAGE;
|
|
81
81
|
setSummaryHeight(newSizes.height);
|
|
82
82
|
setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));
|
|
83
|
-
setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH)
|
|
83
|
+
setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH));
|
|
84
|
+
resizedRef.current = {
|
|
85
|
+
height: newSizes.height,
|
|
86
|
+
width: newSizes.width
|
|
87
|
+
};
|
|
84
88
|
}, []);
|
|
85
89
|
_react.default.useEffect(function () {
|
|
90
|
+
var _summaryRef$current, _summaryRef$current$g, _summaryRef$current$g2;
|
|
91
|
+
var pageHeight = (_summaryRef$current = summaryRef.current) === null || _summaryRef$current === void 0 ? void 0 : (_summaryRef$current$g = _summaryRef$current.getBoundingClientRect) === null || _summaryRef$current$g === void 0 ? void 0 : (_summaryRef$current$g2 = _summaryRef$current$g.call(_summaryRef$current)) === null || _summaryRef$current$g2 === void 0 ? void 0 : _summaryRef$current$g2.height;
|
|
86
92
|
if (summary && sizes.height !== resizedRef.current.height || sizes.width !== resizedRef.current.width) {
|
|
87
93
|
updateSummaryMeasures(sizes);
|
|
88
|
-
resizedRef.current = {
|
|
89
|
-
height: sizes.height,
|
|
90
|
-
width: sizes.width
|
|
91
|
-
};
|
|
92
94
|
}
|
|
93
|
-
|
|
95
|
+
if (pageHeight && sizes.height !== pageHeight) {
|
|
96
|
+
updateSummaryMeasures({
|
|
97
|
+
width: sizes.width,
|
|
98
|
+
height: pageHeight
|
|
99
|
+
});
|
|
100
|
+
}
|
|
101
|
+
}, [tab, sizes, summary, updateSummaryMeasures]);
|
|
94
102
|
_react.default.useEffect(function () {
|
|
95
103
|
setContext(initialContext);
|
|
96
104
|
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
|
@@ -110,14 +118,16 @@ var HvWizardContent = function HvWizardContent(_ref) {
|
|
|
110
118
|
}, {});
|
|
111
119
|
setContext(updatedContext);
|
|
112
120
|
}
|
|
113
|
-
updateSummaryMeasures(sizes);
|
|
114
121
|
}, [tab]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
115
122
|
|
|
116
123
|
var translateX = summaryWidth ? summaryWidth + 10 : 450;
|
|
117
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
118
|
-
className:
|
|
119
|
-
|
|
120
|
-
|
|
124
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
125
|
+
className: classes.summaryRef,
|
|
126
|
+
ref: function ref(el) {
|
|
127
|
+
containerRef(el);
|
|
128
|
+
summaryRef.current = el;
|
|
129
|
+
},
|
|
130
|
+
children: [summary !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
121
131
|
className: classes.summarySticky,
|
|
122
132
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
123
133
|
className: classes.summaryContainer,
|
|
@@ -129,15 +139,19 @@ var HvWizardContent = function HvWizardContent(_ref) {
|
|
|
129
139
|
},
|
|
130
140
|
children: summaryContent
|
|
131
141
|
})
|
|
132
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
142
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactCore.HvDialogContent, {
|
|
143
|
+
className: (0, _clsx.default)(classes.contentContainer, fixedHeight && classes.fixedHeight),
|
|
144
|
+
indentContent: true,
|
|
145
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingContainer.default, {
|
|
146
|
+
hidden: !loading,
|
|
147
|
+
children: _react.default.Children.map(arrayChildren, function (child, index) {
|
|
148
|
+
if (index === tab) {
|
|
149
|
+
return /*#__PURE__*/_react.default.cloneElement(child, {
|
|
150
|
+
tab: tab
|
|
151
|
+
});
|
|
152
|
+
}
|
|
153
|
+
return null;
|
|
154
|
+
})
|
|
141
155
|
})
|
|
142
156
|
})]
|
|
143
157
|
});
|
|
@@ -163,6 +177,10 @@ process.env.NODE_ENV !== "production" ? HvWizardContent.propTypes = {
|
|
|
163
177
|
* Style applied to the Wizard to fix its height.
|
|
164
178
|
*/
|
|
165
179
|
fixedHeight: _propTypes.default.string,
|
|
180
|
+
/**
|
|
181
|
+
* Style applied to the summary container around the page content container.
|
|
182
|
+
*/
|
|
183
|
+
summaryRef: _propTypes.default.string,
|
|
166
184
|
/**
|
|
167
185
|
* Style applied to the Summary container to stick it to the top.
|
|
168
186
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardContent.js","names":["DRAWER_PERCENTAGE","MODAL_MARGIN","DRAWER_MIN_WIDTH","HvWizardContent","classes","fixedHeight","loading","children","tab","summaryContent","arrayChildren","React","Children","toArray","initialContext","reduce","acc","child","index","invalid","props","mustValidate","valid","form","touched","useContext","HvWizardContext","context","setContext","summary","resizedRef","useRef","width","height","useResizeAware","resizeListener","sizes","useState","summaryHeight","setSummaryHeight","summaryWidth","setSummaryWidth","summaryLeft","setSummaryLeft","updateSummaryMeasures","useCallback","newSizes","modalWidth","drawerWidth","Math","max","useEffect","current","updatedContext","Object","entries","key","childState","translateX","clsx","contentContainer","summarySticky","summaryContainer","left","transform","map","cloneElement","propTypes","PropTypes","number","isRequired","node","shape","string","bool","withStyles","styles","name"],"sources":["../../../src/Wizard/WizardContent/WizardContent.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport useResizeAware from \"react-resize-aware\";\nimport clsx from \"clsx\";\nimport { HvDialogContent } from \"@hitachivantara/uikit-react-core\";\nimport HvWizardContext from \"../WizardContext\";\nimport LoadingContainer from \"./LoadingContainer\";\n\nimport styles from \"./styles\";\n\nconst DRAWER_PERCENTAGE = 0.3;\nconst MODAL_MARGIN = 20;\nconst DRAWER_MIN_WIDTH = 280;\n\nconst HvWizardContent = ({\n classes,\n fixedHeight = false,\n loading = false,\n children,\n tab,\n summaryContent,\n}) => {\n const arrayChildren = React.Children.toArray(children);\n const initialContext = arrayChildren.reduce((acc, child, index) => {\n const invalid = child.props.mustValidate === true ? false : null;\n const valid = invalid ?? (index === 0 || null);\n return {\n ...acc,\n [index]: { ...child.props, form: {}, valid, touched: index === 0 },\n };\n }, {});\n\n const { context, setContext, summary } = React.useContext(HvWizardContext);\n\n const resizedRef = React.useRef({ width: 0, height: 0 });\n const [resizeListener, sizes] = useResizeAware();\n\n const [summaryHeight, setSummaryHeight] = React.useState(0);\n const [summaryWidth, setSummaryWidth] = React.useState(0);\n const [summaryLeft, setSummaryLeft] = React.useState(0);\n const updateSummaryMeasures = React.useCallback((newSizes) => {\n const modalWidth = newSizes.width;\n const drawerWidth = modalWidth * DRAWER_PERCENTAGE;\n setSummaryHeight(newSizes.height);\n setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH) - MODAL_MARGIN);\n }, []);\n\n React.useEffect(() => {\n if (\n (summary && sizes.height !== resizedRef.current.height) ||\n sizes.width !== resizedRef.current.width\n ) {\n updateSummaryMeasures(sizes);\n resizedRef.current = {\n height: sizes.height,\n width: sizes.width,\n };\n }\n }, [sizes, summary, updateSummaryMeasures]);\n\n React.useEffect(() => {\n setContext(initialContext);\n }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n React.useEffect(() => {\n if (tab && !context[tab]?.touched) {\n const updatedContext = Object.entries(context).reduce(\n (acc, [key, childState]) => ({\n ...acc,\n ...(+key <= tab\n ? { [key]: { ...childState, touched: true, valid: childState.valid ?? true } }\n : { [key]: childState }),\n }),\n {}\n );\n\n setContext(updatedContext);\n }\n updateSummaryMeasures(sizes);\n }, [tab]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n return (\n <HvDialogContent\n className={clsx(classes.contentContainer, {\n [classes.fixedHeight]: fixedHeight,\n })}\n indentContent\n >\n {resizeListener}\n <div className={classes.summarySticky}>\n <div\n className={classes.summaryContainer}\n style={{\n left: summaryLeft,\n width: summaryWidth,\n height: summaryHeight,\n transform: `translate(${summary ? 0 : translateX}px, 0)`,\n }}\n >\n {summaryContent}\n </div>\n </div>\n <LoadingContainer hidden={!loading}>\n {React.Children.map(arrayChildren, (child, index) => {\n if (index === tab) {\n return React.cloneElement(child, { tab });\n }\n return null;\n })}\n </LoadingContainer>\n </HvDialogContent>\n );\n};\n\nHvWizardContent.propTypes = {\n /**\n * Current tab to show.\n */\n tab: PropTypes.number.isRequired,\n /**\n * Tabs to show on the Wizard.\n */\n children: PropTypes.node.isRequired,\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * Style applied to the Wizard content container.\n */\n contentContainer: PropTypes.string,\n /**\n * Style applied to the Wizard to fix its height.\n */\n fixedHeight: PropTypes.string,\n /**\n * Style applied to the Summary container to stick it to the top.\n */\n summarySticky: PropTypes.string,\n /**\n * Style applied to the Summary container to position it on the right.\n */\n summaryContainer: PropTypes.string,\n }).isRequired,\n /**\n * Forces minimum height to the component.\n */\n fixedHeight: PropTypes.bool,\n /**\n * Whether the loading animation is shown.\n */\n loading: PropTypes.bool,\n /**\n * The content of the summary.\n */\n summaryContent: PropTypes.node,\n};\n\nexport default withStyles(styles, { name: \"HvWizardContent\" })(HvWizardContent);\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"WizardContent.js","names":["DRAWER_PERCENTAGE","DRAWER_MIN_WIDTH","HvWizardContent","classes","fixedHeight","loading","children","tab","summaryContent","arrayChildren","React","Children","toArray","initialContext","reduce","acc","child","index","invalid","props","mustValidate","valid","form","touched","useContext","HvWizardContext","context","setContext","summary","summaryRef","useRef","resizedRef","height","width","useElementSize","containerRef","sizes","useState","summaryHeight","setSummaryHeight","summaryWidth","setSummaryWidth","summaryLeft","setSummaryLeft","updateSummaryMeasures","useCallback","newSizes","modalWidth","drawerWidth","Math","max","current","useEffect","pageHeight","getBoundingClientRect","updatedContext","Object","entries","key","childState","translateX","el","summarySticky","summaryContainer","left","transform","clsx","contentContainer","map","cloneElement","propTypes","PropTypes","number","isRequired","node","shape","string","bool","withStyles","styles","name"],"sources":["../../../src/Wizard/WizardContent/WizardContent.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport { useElementSize } from \"usehooks-ts\";\nimport clsx from \"clsx\";\nimport { HvDialogContent } from \"@hitachivantara/uikit-react-core\";\nimport HvWizardContext from \"../WizardContext\";\nimport LoadingContainer from \"./LoadingContainer\";\n\nimport styles from \"./styles\";\n\nconst DRAWER_PERCENTAGE = 0.3;\nconst DRAWER_MIN_WIDTH = 280;\n\nconst HvWizardContent = ({\n classes,\n fixedHeight = false,\n loading = false,\n children,\n tab,\n summaryContent,\n}) => {\n const arrayChildren = React.Children.toArray(children);\n const initialContext = arrayChildren.reduce((acc, child, index) => {\n const invalid = child.props.mustValidate === true ? false : null;\n const valid = invalid ?? (index === 0 || null);\n return {\n ...acc,\n [index]: { ...child.props, form: {}, valid, touched: index === 0 },\n };\n }, {});\n\n const { context, setContext, summary } = React.useContext(HvWizardContext);\n\n const summaryRef = React.useRef(null);\n const resizedRef = React.useRef({ height: 0, width: 0 });\n const [containerRef, sizes] = useElementSize();\n\n const [summaryHeight, setSummaryHeight] = React.useState(0);\n const [summaryWidth, setSummaryWidth] = React.useState(0);\n const [summaryLeft, setSummaryLeft] = React.useState(0);\n const updateSummaryMeasures = React.useCallback((newSizes) => {\n const modalWidth = newSizes.width;\n const drawerWidth = modalWidth * DRAWER_PERCENTAGE;\n setSummaryHeight(newSizes.height);\n setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n\n resizedRef.current = {\n height: newSizes.height,\n width: newSizes.width,\n };\n }, []);\n\n React.useEffect(() => {\n const pageHeight = summaryRef.current?.getBoundingClientRect?.()?.height;\n if (\n (summary && sizes.height !== resizedRef.current.height) ||\n sizes.width !== resizedRef.current.width\n ) {\n updateSummaryMeasures(sizes);\n }\n\n if (pageHeight && sizes.height !== pageHeight) {\n updateSummaryMeasures({\n width: sizes.width,\n height: pageHeight,\n });\n }\n }, [tab, sizes, summary, updateSummaryMeasures]);\n\n React.useEffect(() => {\n setContext(initialContext);\n }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n React.useEffect(() => {\n if (tab && !context[tab]?.touched) {\n const updatedContext = Object.entries(context).reduce(\n (acc, [key, childState]) => ({\n ...acc,\n ...(+key <= tab\n ? { [key]: { ...childState, touched: true, valid: childState.valid ?? true } }\n : { [key]: childState }),\n }),\n {}\n );\n\n setContext(updatedContext);\n }\n }, [tab]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n return (\n <div\n className={classes.summaryRef}\n ref={(el) => {\n containerRef(el);\n summaryRef.current = el;\n }}\n >\n {summary !== null && (\n <div className={classes.summarySticky}>\n <div\n className={classes.summaryContainer}\n style={{\n left: summaryLeft,\n width: summaryWidth,\n height: summaryHeight,\n transform: `translate(${summary ? 0 : translateX}px, 0)`,\n }}\n >\n {summaryContent}\n </div>\n </div>\n )}\n <HvDialogContent\n className={clsx(classes.contentContainer, {\n [classes.fixedHeight]: fixedHeight,\n })}\n indentContent\n >\n <LoadingContainer hidden={!loading}>\n {React.Children.map(arrayChildren, (child, index) => {\n if (index === tab) {\n return React.cloneElement(child, { tab });\n }\n return null;\n })}\n </LoadingContainer>\n </HvDialogContent>\n </div>\n );\n};\n\nHvWizardContent.propTypes = {\n /**\n * Current tab to show.\n */\n tab: PropTypes.number.isRequired,\n /**\n * Tabs to show on the Wizard.\n */\n children: PropTypes.node.isRequired,\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * Style applied to the Wizard content container.\n */\n contentContainer: PropTypes.string,\n /**\n * Style applied to the Wizard to fix its height.\n */\n fixedHeight: PropTypes.string,\n /**\n * Style applied to the summary container around the page content container.\n */\n summaryRef: PropTypes.string,\n /**\n * Style applied to the Summary container to stick it to the top.\n */\n summarySticky: PropTypes.string,\n /**\n * Style applied to the Summary container to position it on the right.\n */\n summaryContainer: PropTypes.string,\n }).isRequired,\n /**\n * Forces minimum height to the component.\n */\n fixedHeight: PropTypes.bool,\n /**\n * Whether the loading animation is shown.\n */\n loading: PropTypes.bool,\n /**\n * The content of the summary.\n */\n summaryContent: PropTypes.node,\n};\n\nexport default withStyles(styles, { name: \"HvWizardContent\" })(HvWizardContent);\n"],"mappings":"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"}
|
|
@@ -16,12 +16,19 @@ var styles = function styles(theme) {
|
|
|
16
16
|
fixedHeight: {
|
|
17
17
|
minHeight: "calc(100vh - 387px)"
|
|
18
18
|
},
|
|
19
|
+
summaryRef: {
|
|
20
|
+
flex: 1,
|
|
21
|
+
overflowY: "auto",
|
|
22
|
+
overflowX: "hidden"
|
|
23
|
+
},
|
|
19
24
|
summarySticky: {
|
|
20
25
|
position: "sticky",
|
|
21
|
-
top: 0
|
|
26
|
+
top: 0,
|
|
27
|
+
zIndex: 1
|
|
22
28
|
},
|
|
23
29
|
summaryContainer: {
|
|
24
30
|
position: "absolute",
|
|
31
|
+
top: 0,
|
|
25
32
|
minWidth: 280,
|
|
26
33
|
boxShadow: theme.hv.shadows[1],
|
|
27
34
|
backgroundColor: theme.hv.palette.atmosphere.atmo1,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","names":["styles","theme","contentContainer","position","padding","marginLeft","minHeight","overflowX","fixedHeight","summarySticky","top","summaryContainer","minWidth","boxShadow","hv","shadows","backgroundColor","palette","atmosphere","atmo1","transition","transitionTimingFunction"
|
|
1
|
+
{"version":3,"file":"styles.js","names":["styles","theme","contentContainer","position","padding","marginLeft","minHeight","overflowX","fixedHeight","summaryRef","flex","overflowY","summarySticky","top","zIndex","summaryContainer","minWidth","boxShadow","hv","shadows","backgroundColor","palette","atmosphere","atmo1","transition","transitionTimingFunction"],"sources":["../../../src/Wizard/WizardContent/styles.js"],"sourcesContent":["const styles = (theme) => ({\n contentContainer: {\n position: \"relative\",\n padding: 20,\n marginLeft: 0,\n minHeight: 400,\n overflowX: \"hidden\",\n },\n fixedHeight: {\n minHeight: \"calc(100vh - 387px)\",\n },\n summaryRef: {\n flex: 1,\n overflowY: \"auto\",\n overflowX: \"hidden\",\n },\n summarySticky: {\n position: \"sticky\",\n top: 0,\n zIndex: 1,\n },\n summaryContainer: {\n position: \"absolute\",\n top: 0,\n minWidth: 280,\n boxShadow: theme.hv.shadows[1],\n backgroundColor: theme.hv.palette.atmosphere.atmo1,\n transition: \"transform 0.3s\",\n transitionTimingFunction: \"ease-in-out\",\n overflowY: \"scroll\",\n },\n});\n\nexport default styles;\n"],"mappings":";;;;;;AAAA,IAAMA,MAAM,GAAG,SAATA,MAAM,CAAIC,KAAK;EAAA,OAAM;IACzBC,gBAAgB,EAAE;MAChBC,QAAQ,EAAE,UAAU;MACpBC,OAAO,EAAE,EAAE;MACXC,UAAU,EAAE,CAAC;MACbC,SAAS,EAAE,GAAG;MACdC,SAAS,EAAE;IACb,CAAC;IACDC,WAAW,EAAE;MACXF,SAAS,EAAE;IACb,CAAC;IACDG,UAAU,EAAE;MACVC,IAAI,EAAE,CAAC;MACPC,SAAS,EAAE,MAAM;MACjBJ,SAAS,EAAE;IACb,CAAC;IACDK,aAAa,EAAE;MACbT,QAAQ,EAAE,QAAQ;MAClBU,GAAG,EAAE,CAAC;MACNC,MAAM,EAAE;IACV,CAAC;IACDC,gBAAgB,EAAE;MAChBZ,QAAQ,EAAE,UAAU;MACpBU,GAAG,EAAE,CAAC;MACNG,QAAQ,EAAE,GAAG;MACbC,SAAS,EAAEhB,KAAK,CAACiB,EAAE,CAACC,OAAO,CAAC,CAAC,CAAC;MAC9BC,eAAe,EAAEnB,KAAK,CAACiB,EAAE,CAACG,OAAO,CAACC,UAAU,CAACC,KAAK;MAClDC,UAAU,EAAE,gBAAgB;MAC5BC,wBAAwB,EAAE,aAAa;MACvCd,SAAS,EAAE;IACb;EACF,CAAC;AAAA,CAAC;AAAC,eAEYX,MAAM;AAAA"}
|
|
@@ -52,6 +52,9 @@ var HvWizardTitle = function HvWizardTitle(_ref) {
|
|
|
52
52
|
if (summary === null && hasSummary) {
|
|
53
53
|
setSummary(false);
|
|
54
54
|
}
|
|
55
|
+
return function () {
|
|
56
|
+
setSummary(false);
|
|
57
|
+
};
|
|
55
58
|
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
|
56
59
|
|
|
57
60
|
_react.default.useEffect(function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardTitle.js","names":["switchTabState","state","currentTab","index","valid","touched","HvWizardTitle","title","hasSummary","labels","tab","classes","changeTab","customStep","React","useContext","HvWizardContext","context","summary","setSummary","useState","steps","setSteps","useEffect","contextArray","Object","entries","length","updatedSteps","map","childState","name","onClick","toggleSummary","oldSummary","headerContainer","messageContainer","titleContainer","stepContainer","type","stepSize","width","xs","sm","md","lg","buttonWidth","root","rootSummaryButton","propTypes","PropTypes","shape","string","bool","number","isRequired","func","oneOf","xl","withStyles","styles"],"sources":["../../../src/Wizard/WizardTitle/WizardTitle.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport { HvButton, HvDialogTitle, HvGrid, HvTypography } from \"@hitachivantara/uikit-react-core\";\nimport { Report } from \"@hitachivantara/uikit-react-icons\";\nimport { HvStepNavigation } from \"@hitachivantara/uikit-react-lab\";\nimport HvWizardContext from \"../WizardContext\";\n\nimport styles from \"./styles\";\n\nconst switchTabState = (state, currentTab, index) => {\n if (index === currentTab) return \"Current\";\n if (state.valid) return \"Completed\";\n if (state.valid === null) return \"Enabled\";\n if (state.touched && state.valid === false) return \"Failed\";\n // \"Disabled\"\n // \"Pending\"\n return \"Enabled\";\n};\n\nconst HvWizardTitle = ({\n title,\n hasSummary = false,\n labels = {},\n tab,\n classes,\n changeTab,\n customStep = {},\n}) => {\n const { context, summary, setSummary } = React.useContext(HvWizardContext);\n const [steps, setSteps] = React.useState([]);\n\n React.useEffect(() => {\n if (summary === null && hasSummary) {\n setSummary(false);\n }\n }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n React.useEffect(() => {\n const contextArray = Object.entries(context);\n if (contextArray.length) {\n const updatedSteps = contextArray.map(([, childState], index) => ({\n title: childState.name ?? `${index + 1}`,\n state: switchTabState(childState, tab, index),\n onClick: () => changeTab(index),\n }));\n\n setSteps(updatedSteps);\n }\n }, [context, tab, changeTab]);\n\n const toggleSummary = () => {\n setSummary((oldSummary) => !oldSummary);\n };\n\n return (\n <HvDialogTitle\n className={classes.headerContainer}\n classes={{ messageContainer: classes.messageContainer }}\n >\n <HvGrid\n container\n justifyContent=\"space-between\"\n alignItems=\"center\"\n className={classes.titleContainer}\n >\n {title && (\n <HvTypography variant=\"xsTitle\" component=\"h3\">\n {title}\n </HvTypography>\n )}\n {!!steps.length && (\n <HvStepNavigation\n className={classes.stepContainer}\n steps={steps}\n type={customStep?.type ?? \"Default\"}\n stepSize={customStep?.stepSize ?? \"XS\"}\n width={customStep?.width ?? { xs: 200, sm: 350, md: 600, lg: 800 }}\n />\n )}\n {hasSummary && (\n <HvButton\n category=\"secondary\"\n className={classes.buttonWidth}\n classes={{ root: classes.rootSummaryButton }}\n onClick={toggleSummary}\n >\n <Report /> {`${labels.summary ?? \"Summary\"}`}\n </HvButton>\n )}\n </HvGrid>\n </HvDialogTitle>\n );\n};\n\nHvWizardTitle.propTypes = {\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the header container.\n */\n headerContainer: PropTypes.string,\n /**\n * Styles applied to override the Dialog Title styles.\n */\n messageContainer: PropTypes.string,\n /**\n * Styles applied to the header content container.\n */\n titleContainer: PropTypes.string,\n /**\n * Styles applied to the Button component to override its width.\n */\n buttonWidth: PropTypes.string,\n /**\n * Styles applied to the Button component to override its right padding.\n */\n rootSummaryButton: PropTypes.string,\n /**\n *\n */\n stepContainer: PropTypes.string,\n }),\n /**\n * Title for the wizard.\n */\n title: PropTypes.string,\n /**\n * Shows the summary button.\n */\n hasSummary: PropTypes.bool,\n /**\n * An object containing all the labels for the wizard header.\n */\n labels: PropTypes.shape({\n /**\n * Summary button label.\n */\n summary: PropTypes.string,\n }),\n /**\n * Current tab to check if it's last page or first to disable previous button and swap between next and submit button.\n */\n tab: PropTypes.number.isRequired,\n /**\n * Function to change the tab when pressing previous and next buttons.\n */\n changeTab: PropTypes.func.isRequired,\n /**\n * Custom object to define type, size and width of the StepNavigation component\n */\n customStep: PropTypes.shape({\n /**\n * Type of step navigation. Values = {\"Simple\", \"Default\"}.\n */\n type: PropTypes.oneOf([\"Simple\", \"Default\"]),\n /**\n * Sets one of the standard sizes of the steps. Values = {\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"}\n */\n stepSize: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n /**\n * Width of the component element on each breakpoint screen resolution.\n */\n width: PropTypes.shape({\n xs: PropTypes.number,\n sm: PropTypes.number,\n md: PropTypes.number,\n lg: PropTypes.number,\n xl: PropTypes.number,\n }),\n }),\n};\n\nexport default withStyles(styles, { name: \"HvWizardTitle\" })(HvWizardTitle);\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"WizardTitle.js","names":["switchTabState","state","currentTab","index","valid","touched","HvWizardTitle","title","hasSummary","labels","tab","classes","changeTab","customStep","React","useContext","HvWizardContext","context","summary","setSummary","useState","steps","setSteps","useEffect","contextArray","Object","entries","length","updatedSteps","map","childState","name","onClick","toggleSummary","oldSummary","headerContainer","messageContainer","titleContainer","stepContainer","type","stepSize","width","xs","sm","md","lg","buttonWidth","root","rootSummaryButton","propTypes","PropTypes","shape","string","bool","number","isRequired","func","oneOf","xl","withStyles","styles"],"sources":["../../../src/Wizard/WizardTitle/WizardTitle.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport { HvButton, HvDialogTitle, HvGrid, HvTypography } from \"@hitachivantara/uikit-react-core\";\nimport { Report } from \"@hitachivantara/uikit-react-icons\";\nimport { HvStepNavigation } from \"@hitachivantara/uikit-react-lab\";\nimport HvWizardContext from \"../WizardContext\";\n\nimport styles from \"./styles\";\n\nconst switchTabState = (state, currentTab, index) => {\n if (index === currentTab) return \"Current\";\n if (state.valid) return \"Completed\";\n if (state.valid === null) return \"Enabled\";\n if (state.touched && state.valid === false) return \"Failed\";\n // \"Disabled\"\n // \"Pending\"\n return \"Enabled\";\n};\n\nconst HvWizardTitle = ({\n title,\n hasSummary = false,\n labels = {},\n tab,\n classes,\n changeTab,\n customStep = {},\n}) => {\n const { context, summary, setSummary } = React.useContext(HvWizardContext);\n const [steps, setSteps] = React.useState([]);\n\n React.useEffect(() => {\n if (summary === null && hasSummary) {\n setSummary(false);\n }\n\n return () => {\n setSummary(false);\n };\n }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n React.useEffect(() => {\n const contextArray = Object.entries(context);\n if (contextArray.length) {\n const updatedSteps = contextArray.map(([, childState], index) => ({\n title: childState.name ?? `${index + 1}`,\n state: switchTabState(childState, tab, index),\n onClick: () => changeTab(index),\n }));\n\n setSteps(updatedSteps);\n }\n }, [context, tab, changeTab]);\n\n const toggleSummary = () => {\n setSummary((oldSummary) => !oldSummary);\n };\n\n return (\n <HvDialogTitle\n className={classes.headerContainer}\n classes={{ messageContainer: classes.messageContainer }}\n >\n <HvGrid\n container\n justifyContent=\"space-between\"\n alignItems=\"center\"\n className={classes.titleContainer}\n >\n {title && (\n <HvTypography variant=\"xsTitle\" component=\"h3\">\n {title}\n </HvTypography>\n )}\n {!!steps.length && (\n <HvStepNavigation\n className={classes.stepContainer}\n steps={steps}\n type={customStep?.type ?? \"Default\"}\n stepSize={customStep?.stepSize ?? \"XS\"}\n width={customStep?.width ?? { xs: 200, sm: 350, md: 600, lg: 800 }}\n />\n )}\n {hasSummary && (\n <HvButton\n category=\"secondary\"\n className={classes.buttonWidth}\n classes={{ root: classes.rootSummaryButton }}\n onClick={toggleSummary}\n >\n <Report /> {`${labels.summary ?? \"Summary\"}`}\n </HvButton>\n )}\n </HvGrid>\n </HvDialogTitle>\n );\n};\n\nHvWizardTitle.propTypes = {\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the header container.\n */\n headerContainer: PropTypes.string,\n /**\n * Styles applied to override the Dialog Title styles.\n */\n messageContainer: PropTypes.string,\n /**\n * Styles applied to the header content container.\n */\n titleContainer: PropTypes.string,\n /**\n * Styles applied to the Button component to override its width.\n */\n buttonWidth: PropTypes.string,\n /**\n * Styles applied to the Button component to override its right padding.\n */\n rootSummaryButton: PropTypes.string,\n /**\n *\n */\n stepContainer: PropTypes.string,\n }),\n /**\n * Title for the wizard.\n */\n title: PropTypes.string,\n /**\n * Shows the summary button.\n */\n hasSummary: PropTypes.bool,\n /**\n * An object containing all the labels for the wizard header.\n */\n labels: PropTypes.shape({\n /**\n * Summary button label.\n */\n summary: PropTypes.string,\n }),\n /**\n * Current tab to check if it's last page or first to disable previous button and swap between next and submit button.\n */\n tab: PropTypes.number.isRequired,\n /**\n * Function to change the tab when pressing previous and next buttons.\n */\n changeTab: PropTypes.func.isRequired,\n /**\n * Custom object to define type, size and width of the StepNavigation component\n */\n customStep: PropTypes.shape({\n /**\n * Type of step navigation. Values = {\"Simple\", \"Default\"}.\n */\n type: PropTypes.oneOf([\"Simple\", \"Default\"]),\n /**\n * Sets one of the standard sizes of the steps. Values = {\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"}\n */\n stepSize: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n /**\n * Width of the component element on each breakpoint screen resolution.\n */\n width: PropTypes.shape({\n xs: PropTypes.number,\n sm: PropTypes.number,\n md: PropTypes.number,\n lg: PropTypes.number,\n xl: PropTypes.number,\n }),\n }),\n};\n\nexport default withStyles(styles, { name: \"HvWizardTitle\" })(HvWizardTitle);\n"],"mappings":"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"}
|
|
@@ -70,9 +70,11 @@ var HvWizard = function HvWizard(_ref) {
|
|
|
70
70
|
};
|
|
71
71
|
}, [context, summary]);
|
|
72
72
|
React.useEffect(function () {
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
73
|
+
return function () {
|
|
74
|
+
if (!open) {
|
|
75
|
+
setTab(0);
|
|
76
|
+
}
|
|
77
|
+
};
|
|
76
78
|
}, [open]);
|
|
77
79
|
var handleClose = React.useCallback(function (evt, reason) {
|
|
78
80
|
if (reason !== "backdropClick") {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Wizard.js","names":["React","PropTypes","withStyles","WizardContext","WizardContainer","WizardTitle","WizardContent","WizardActions","styles","HvWizard","className","children","onClose","handleSubmit","title","open","skippable","loading","hasSummary","summaryContent","labels","cancel","next","previous","skip","submit","summary","fixedHeight","customStep","others","useState","context","setContext","setSummary","tab","setTab","contextValue","useMemo","useEffect","handleClose","useCallback","evt","reason","propTypes","string","bool","isRequired","func","node","shape","type","oneOf","stepSize","width","xs","number","sm","md","lg","xl","name"],"sources":["../../../src/Wizard/Wizard.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport WizardContext from \"./WizardContext\";\nimport WizardContainer from \"./WizardContainer\";\nimport WizardTitle from \"./WizardTitle\";\nimport WizardContent from \"./WizardContent\";\nimport WizardActions from \"./WizardActions\";\n\nimport styles from \"./styles\";\n\nconst HvWizard = ({\n className,\n children,\n onClose,\n handleSubmit,\n title,\n open,\n skippable = true,\n loading = false,\n hasSummary = false,\n summaryContent,\n labels = {\n cancel: \"Cancel\",\n next: \"Next\",\n previous: \"Previous\",\n skip: \"Skip\",\n submit: \"Submit\",\n summary: \"Summary\",\n },\n fixedHeight = false,\n customStep,\n ...others\n}) => {\n const [context, setContext] = React.useState({});\n const [summary, setSummary] = React.useState(null);\n const [tab, setTab] = React.useState(0);\n\n const contextValue = React.useMemo(\n () => ({\n context,\n setContext,\n summary,\n setSummary,\n }),\n [context, summary]\n );\n\n React.useEffect(() => {\n if (!open) {\n
|
|
1
|
+
{"version":3,"file":"Wizard.js","names":["React","PropTypes","withStyles","WizardContext","WizardContainer","WizardTitle","WizardContent","WizardActions","styles","HvWizard","className","children","onClose","handleSubmit","title","open","skippable","loading","hasSummary","summaryContent","labels","cancel","next","previous","skip","submit","summary","fixedHeight","customStep","others","useState","context","setContext","setSummary","tab","setTab","contextValue","useMemo","useEffect","handleClose","useCallback","evt","reason","propTypes","string","bool","isRequired","func","node","shape","type","oneOf","stepSize","width","xs","number","sm","md","lg","xl","name"],"sources":["../../../src/Wizard/Wizard.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport WizardContext from \"./WizardContext\";\nimport WizardContainer from \"./WizardContainer\";\nimport WizardTitle from \"./WizardTitle\";\nimport WizardContent from \"./WizardContent\";\nimport WizardActions from \"./WizardActions\";\n\nimport styles from \"./styles\";\n\nconst HvWizard = ({\n className,\n children,\n onClose,\n handleSubmit,\n title,\n open,\n skippable = true,\n loading = false,\n hasSummary = false,\n summaryContent,\n labels = {\n cancel: \"Cancel\",\n next: \"Next\",\n previous: \"Previous\",\n skip: \"Skip\",\n submit: \"Submit\",\n summary: \"Summary\",\n },\n fixedHeight = false,\n customStep,\n ...others\n}) => {\n const [context, setContext] = React.useState({});\n const [summary, setSummary] = React.useState(null);\n const [tab, setTab] = React.useState(0);\n\n const contextValue = React.useMemo(\n () => ({\n context,\n setContext,\n summary,\n setSummary,\n }),\n [context, summary]\n );\n\n React.useEffect(() => {\n return () => {\n if (!open) {\n setTab(0);\n }\n };\n }, [open]);\n\n const handleClose = React.useCallback(\n (evt, reason) => {\n if (reason !== \"backdropClick\") {\n onClose(evt, reason);\n }\n },\n [onClose]\n );\n\n return (\n <WizardContext.Provider value={contextValue}>\n <WizardContainer className={className} handleClose={handleClose} open={open} {...others}>\n <WizardTitle\n title={title}\n hasSummary={hasSummary}\n labels={labels}\n tab={tab}\n changeTab={setTab}\n customStep={customStep}\n />\n <WizardContent\n loading={loading}\n fixedHeight={fixedHeight}\n tab={tab}\n summaryContent={summaryContent}\n >\n {children}\n </WizardContent>\n <WizardActions\n loading={loading}\n skippable={skippable}\n labels={labels}\n tab={tab}\n changeTab={setTab}\n handleClose={handleClose}\n handleSubmit={handleSubmit}\n />\n </WizardContainer>\n </WizardContext.Provider>\n );\n};\n\nHvWizard.propTypes = {\n /**\n * Class names to be applied.\n */\n className: PropTypes.string,\n /**\n * Current state of the Wizard.\n */\n open: PropTypes.bool.isRequired,\n /**\n * Function executed on close.\n */\n onClose: PropTypes.func.isRequired,\n /**\n * Function executed on submit.\n */\n handleSubmit: PropTypes.func.isRequired,\n /**\n * Enables the skip button.\n */\n skippable: PropTypes.bool,\n /**\n * Title for the wizard.\n */\n title: PropTypes.string,\n /**\n * Shows the summary button.\n */\n hasSummary: PropTypes.bool,\n /**\n * The content of the summary.\n */\n summaryContent: PropTypes.node,\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n /**\n * An object containing all the labels for the wizard.\n */\n labels: PropTypes.shape({\n /**\n * Cancel button label.\n */\n cancel: PropTypes.string,\n /**\n * Skip button label.\n */\n skip: PropTypes.string,\n /**\n * Previous button label.\n */\n previous: PropTypes.string,\n /**\n * Next button label.\n */\n next: PropTypes.string,\n /**\n * Submit button label.\n */\n submit: PropTypes.string,\n /**\n * Summary button label.\n */\n summary: PropTypes.string,\n }),\n /**\n * Forces minimum height to the component.\n */\n fixedHeight: PropTypes.bool,\n /**\n * Whether the loading animation is shown.\n */\n loading: PropTypes.bool,\n /**\n * Custom object to define type, size and width of the StepNavigation component\n */\n customStep: PropTypes.shape({\n /**\n * Type of step navigation. Values = {\"Simple\", \"Default\"}.\n */\n type: PropTypes.oneOf([\"Simple\", \"Default\"]),\n /**\n * Sets one of the standard sizes of the steps. Values = {\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"}\n */\n stepSize: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n /**\n * Width of the component element on each breakpoint screen resolution.\n */\n width: PropTypes.shape({\n xs: PropTypes.number,\n sm: PropTypes.number,\n md: PropTypes.number,\n lg: PropTypes.number,\n xl: PropTypes.number,\n }),\n }),\n};\n\nexport default withStyles(styles, { name: \"HvWizard\" })(HvWizard);\n"],"mappings":"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"}
|
|
@@ -15,7 +15,7 @@ import "core-js/modules/es.array.map.js";
|
|
|
15
15
|
import React from "react";
|
|
16
16
|
import PropTypes from "prop-types";
|
|
17
17
|
import { withStyles } from "@mui/styles";
|
|
18
|
-
import
|
|
18
|
+
import { useElementSize } from "usehooks-ts";
|
|
19
19
|
import clsx from "clsx";
|
|
20
20
|
import { HvDialogContent } from "@hitachivantara/uikit-react-core";
|
|
21
21
|
import HvWizardContext from "../WizardContext";
|
|
@@ -24,7 +24,6 @@ import styles from "./styles";
|
|
|
24
24
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
25
25
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
26
26
|
var DRAWER_PERCENTAGE = 0.3;
|
|
27
|
-
var MODAL_MARGIN = 20;
|
|
28
27
|
var DRAWER_MIN_WIDTH = 280;
|
|
29
28
|
var HvWizardContent = function HvWizardContent(_ref) {
|
|
30
29
|
var classes = _ref.classes,
|
|
@@ -49,14 +48,15 @@ var HvWizardContent = function HvWizardContent(_ref) {
|
|
|
49
48
|
context = _React$useContext.context,
|
|
50
49
|
setContext = _React$useContext.setContext,
|
|
51
50
|
summary = _React$useContext.summary;
|
|
51
|
+
var summaryRef = React.useRef(null);
|
|
52
52
|
var resizedRef = React.useRef({
|
|
53
|
-
|
|
54
|
-
|
|
53
|
+
height: 0,
|
|
54
|
+
width: 0
|
|
55
55
|
});
|
|
56
|
-
var
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
sizes =
|
|
56
|
+
var _useElementSize = useElementSize(),
|
|
57
|
+
_useElementSize2 = _slicedToArray(_useElementSize, 2),
|
|
58
|
+
containerRef = _useElementSize2[0],
|
|
59
|
+
sizes = _useElementSize2[1];
|
|
60
60
|
var _React$useState = React.useState(0),
|
|
61
61
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
62
62
|
summaryHeight = _React$useState2[0],
|
|
@@ -74,17 +74,25 @@ var HvWizardContent = function HvWizardContent(_ref) {
|
|
|
74
74
|
var drawerWidth = modalWidth * DRAWER_PERCENTAGE;
|
|
75
75
|
setSummaryHeight(newSizes.height);
|
|
76
76
|
setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));
|
|
77
|
-
setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH)
|
|
77
|
+
setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH));
|
|
78
|
+
resizedRef.current = {
|
|
79
|
+
height: newSizes.height,
|
|
80
|
+
width: newSizes.width
|
|
81
|
+
};
|
|
78
82
|
}, []);
|
|
79
83
|
React.useEffect(function () {
|
|
84
|
+
var _summaryRef$current, _summaryRef$current$g, _summaryRef$current$g2;
|
|
85
|
+
var pageHeight = (_summaryRef$current = summaryRef.current) === null || _summaryRef$current === void 0 ? void 0 : (_summaryRef$current$g = _summaryRef$current.getBoundingClientRect) === null || _summaryRef$current$g === void 0 ? void 0 : (_summaryRef$current$g2 = _summaryRef$current$g.call(_summaryRef$current)) === null || _summaryRef$current$g2 === void 0 ? void 0 : _summaryRef$current$g2.height;
|
|
80
86
|
if (summary && sizes.height !== resizedRef.current.height || sizes.width !== resizedRef.current.width) {
|
|
81
87
|
updateSummaryMeasures(sizes);
|
|
82
|
-
resizedRef.current = {
|
|
83
|
-
height: sizes.height,
|
|
84
|
-
width: sizes.width
|
|
85
|
-
};
|
|
86
88
|
}
|
|
87
|
-
|
|
89
|
+
if (pageHeight && sizes.height !== pageHeight) {
|
|
90
|
+
updateSummaryMeasures({
|
|
91
|
+
width: sizes.width,
|
|
92
|
+
height: pageHeight
|
|
93
|
+
});
|
|
94
|
+
}
|
|
95
|
+
}, [tab, sizes, summary, updateSummaryMeasures]);
|
|
88
96
|
React.useEffect(function () {
|
|
89
97
|
setContext(initialContext);
|
|
90
98
|
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
|
@@ -104,14 +112,16 @@ var HvWizardContent = function HvWizardContent(_ref) {
|
|
|
104
112
|
}, {});
|
|
105
113
|
setContext(updatedContext);
|
|
106
114
|
}
|
|
107
|
-
updateSummaryMeasures(sizes);
|
|
108
115
|
}, [tab]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
109
116
|
|
|
110
117
|
var translateX = summaryWidth ? summaryWidth + 10 : 450;
|
|
111
|
-
return /*#__PURE__*/_jsxs(
|
|
112
|
-
className:
|
|
113
|
-
|
|
114
|
-
|
|
118
|
+
return /*#__PURE__*/_jsxs("div", {
|
|
119
|
+
className: classes.summaryRef,
|
|
120
|
+
ref: function ref(el) {
|
|
121
|
+
containerRef(el);
|
|
122
|
+
summaryRef.current = el;
|
|
123
|
+
},
|
|
124
|
+
children: [summary !== null && /*#__PURE__*/_jsx("div", {
|
|
115
125
|
className: classes.summarySticky,
|
|
116
126
|
children: /*#__PURE__*/_jsx("div", {
|
|
117
127
|
className: classes.summaryContainer,
|
|
@@ -123,15 +133,19 @@ var HvWizardContent = function HvWizardContent(_ref) {
|
|
|
123
133
|
},
|
|
124
134
|
children: summaryContent
|
|
125
135
|
})
|
|
126
|
-
}), /*#__PURE__*/_jsx(
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
136
|
+
}), /*#__PURE__*/_jsx(HvDialogContent, {
|
|
137
|
+
className: clsx(classes.contentContainer, fixedHeight && classes.fixedHeight),
|
|
138
|
+
indentContent: true,
|
|
139
|
+
children: /*#__PURE__*/_jsx(LoadingContainer, {
|
|
140
|
+
hidden: !loading,
|
|
141
|
+
children: React.Children.map(arrayChildren, function (child, index) {
|
|
142
|
+
if (index === tab) {
|
|
143
|
+
return /*#__PURE__*/React.cloneElement(child, {
|
|
144
|
+
tab: tab
|
|
145
|
+
});
|
|
146
|
+
}
|
|
147
|
+
return null;
|
|
148
|
+
})
|
|
135
149
|
})
|
|
136
150
|
})]
|
|
137
151
|
});
|
|
@@ -157,6 +171,10 @@ process.env.NODE_ENV !== "production" ? HvWizardContent.propTypes = {
|
|
|
157
171
|
* Style applied to the Wizard to fix its height.
|
|
158
172
|
*/
|
|
159
173
|
fixedHeight: PropTypes.string,
|
|
174
|
+
/**
|
|
175
|
+
* Style applied to the summary container around the page content container.
|
|
176
|
+
*/
|
|
177
|
+
summaryRef: PropTypes.string,
|
|
160
178
|
/**
|
|
161
179
|
* Style applied to the Summary container to stick it to the top.
|
|
162
180
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardContent.js","names":["React","PropTypes","withStyles","useResizeAware","clsx","HvDialogContent","HvWizardContext","LoadingContainer","styles","DRAWER_PERCENTAGE","MODAL_MARGIN","DRAWER_MIN_WIDTH","HvWizardContent","classes","fixedHeight","loading","children","tab","summaryContent","arrayChildren","Children","toArray","initialContext","reduce","acc","child","index","invalid","props","mustValidate","valid","form","touched","useContext","context","setContext","summary","resizedRef","useRef","width","height","resizeListener","sizes","useState","summaryHeight","setSummaryHeight","summaryWidth","setSummaryWidth","summaryLeft","setSummaryLeft","updateSummaryMeasures","useCallback","newSizes","modalWidth","drawerWidth","Math","max","useEffect","current","updatedContext","Object","entries","key","childState","translateX","contentContainer","summarySticky","summaryContainer","left","transform","map","cloneElement","propTypes","number","isRequired","node","shape","string","bool","name"],"sources":["../../../../src/Wizard/WizardContent/WizardContent.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport useResizeAware from \"react-resize-aware\";\nimport clsx from \"clsx\";\nimport { HvDialogContent } from \"@hitachivantara/uikit-react-core\";\nimport HvWizardContext from \"../WizardContext\";\nimport LoadingContainer from \"./LoadingContainer\";\n\nimport styles from \"./styles\";\n\nconst DRAWER_PERCENTAGE = 0.3;\nconst MODAL_MARGIN = 20;\nconst DRAWER_MIN_WIDTH = 280;\n\nconst HvWizardContent = ({\n classes,\n fixedHeight = false,\n loading = false,\n children,\n tab,\n summaryContent,\n}) => {\n const arrayChildren = React.Children.toArray(children);\n const initialContext = arrayChildren.reduce((acc, child, index) => {\n const invalid = child.props.mustValidate === true ? false : null;\n const valid = invalid ?? (index === 0 || null);\n return {\n ...acc,\n [index]: { ...child.props, form: {}, valid, touched: index === 0 },\n };\n }, {});\n\n const { context, setContext, summary } = React.useContext(HvWizardContext);\n\n const resizedRef = React.useRef({ width: 0, height: 0 });\n const [resizeListener, sizes] = useResizeAware();\n\n const [summaryHeight, setSummaryHeight] = React.useState(0);\n const [summaryWidth, setSummaryWidth] = React.useState(0);\n const [summaryLeft, setSummaryLeft] = React.useState(0);\n const updateSummaryMeasures = React.useCallback((newSizes) => {\n const modalWidth = newSizes.width;\n const drawerWidth = modalWidth * DRAWER_PERCENTAGE;\n setSummaryHeight(newSizes.height);\n setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH) - MODAL_MARGIN);\n }, []);\n\n React.useEffect(() => {\n if (\n (summary && sizes.height !== resizedRef.current.height) ||\n sizes.width !== resizedRef.current.width\n ) {\n updateSummaryMeasures(sizes);\n resizedRef.current = {\n height: sizes.height,\n width: sizes.width,\n };\n }\n }, [sizes, summary, updateSummaryMeasures]);\n\n React.useEffect(() => {\n setContext(initialContext);\n }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n React.useEffect(() => {\n if (tab && !context[tab]?.touched) {\n const updatedContext = Object.entries(context).reduce(\n (acc, [key, childState]) => ({\n ...acc,\n ...(+key <= tab\n ? { [key]: { ...childState, touched: true, valid: childState.valid ?? true } }\n : { [key]: childState }),\n }),\n {}\n );\n\n setContext(updatedContext);\n }\n updateSummaryMeasures(sizes);\n }, [tab]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n return (\n <HvDialogContent\n className={clsx(classes.contentContainer, {\n [classes.fixedHeight]: fixedHeight,\n })}\n indentContent\n >\n {resizeListener}\n <div className={classes.summarySticky}>\n <div\n className={classes.summaryContainer}\n style={{\n left: summaryLeft,\n width: summaryWidth,\n height: summaryHeight,\n transform: `translate(${summary ? 0 : translateX}px, 0)`,\n }}\n >\n {summaryContent}\n </div>\n </div>\n <LoadingContainer hidden={!loading}>\n {React.Children.map(arrayChildren, (child, index) => {\n if (index === tab) {\n return React.cloneElement(child, { tab });\n }\n return null;\n })}\n </LoadingContainer>\n </HvDialogContent>\n );\n};\n\nHvWizardContent.propTypes = {\n /**\n * Current tab to show.\n */\n tab: PropTypes.number.isRequired,\n /**\n * Tabs to show on the Wizard.\n */\n children: PropTypes.node.isRequired,\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * Style applied to the Wizard content container.\n */\n contentContainer: PropTypes.string,\n /**\n * Style applied to the Wizard to fix its height.\n */\n fixedHeight: PropTypes.string,\n /**\n * Style applied to the Summary container to stick it to the top.\n */\n summarySticky: PropTypes.string,\n /**\n * Style applied to the Summary container to position it on the right.\n */\n summaryContainer: PropTypes.string,\n }).isRequired,\n /**\n * Forces minimum height to the component.\n */\n fixedHeight: PropTypes.bool,\n /**\n * Whether the loading animation is shown.\n */\n loading: PropTypes.bool,\n /**\n * The content of the summary.\n */\n summaryContent: PropTypes.node,\n};\n\nexport default withStyles(styles, { name: \"HvWizardContent\" })(HvWizardContent);\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"WizardContent.js","names":["React","PropTypes","withStyles","useElementSize","clsx","HvDialogContent","HvWizardContext","LoadingContainer","styles","DRAWER_PERCENTAGE","DRAWER_MIN_WIDTH","HvWizardContent","classes","fixedHeight","loading","children","tab","summaryContent","arrayChildren","Children","toArray","initialContext","reduce","acc","child","index","invalid","props","mustValidate","valid","form","touched","useContext","context","setContext","summary","summaryRef","useRef","resizedRef","height","width","containerRef","sizes","useState","summaryHeight","setSummaryHeight","summaryWidth","setSummaryWidth","summaryLeft","setSummaryLeft","updateSummaryMeasures","useCallback","newSizes","modalWidth","drawerWidth","Math","max","current","useEffect","pageHeight","getBoundingClientRect","updatedContext","Object","entries","key","childState","translateX","el","summarySticky","summaryContainer","left","transform","contentContainer","map","cloneElement","propTypes","number","isRequired","node","shape","string","bool","name"],"sources":["../../../../src/Wizard/WizardContent/WizardContent.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport { useElementSize } from \"usehooks-ts\";\nimport clsx from \"clsx\";\nimport { HvDialogContent } from \"@hitachivantara/uikit-react-core\";\nimport HvWizardContext from \"../WizardContext\";\nimport LoadingContainer from \"./LoadingContainer\";\n\nimport styles from \"./styles\";\n\nconst DRAWER_PERCENTAGE = 0.3;\nconst DRAWER_MIN_WIDTH = 280;\n\nconst HvWizardContent = ({\n classes,\n fixedHeight = false,\n loading = false,\n children,\n tab,\n summaryContent,\n}) => {\n const arrayChildren = React.Children.toArray(children);\n const initialContext = arrayChildren.reduce((acc, child, index) => {\n const invalid = child.props.mustValidate === true ? false : null;\n const valid = invalid ?? (index === 0 || null);\n return {\n ...acc,\n [index]: { ...child.props, form: {}, valid, touched: index === 0 },\n };\n }, {});\n\n const { context, setContext, summary } = React.useContext(HvWizardContext);\n\n const summaryRef = React.useRef(null);\n const resizedRef = React.useRef({ height: 0, width: 0 });\n const [containerRef, sizes] = useElementSize();\n\n const [summaryHeight, setSummaryHeight] = React.useState(0);\n const [summaryWidth, setSummaryWidth] = React.useState(0);\n const [summaryLeft, setSummaryLeft] = React.useState(0);\n const updateSummaryMeasures = React.useCallback((newSizes) => {\n const modalWidth = newSizes.width;\n const drawerWidth = modalWidth * DRAWER_PERCENTAGE;\n setSummaryHeight(newSizes.height);\n setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n\n resizedRef.current = {\n height: newSizes.height,\n width: newSizes.width,\n };\n }, []);\n\n React.useEffect(() => {\n const pageHeight = summaryRef.current?.getBoundingClientRect?.()?.height;\n if (\n (summary && sizes.height !== resizedRef.current.height) ||\n sizes.width !== resizedRef.current.width\n ) {\n updateSummaryMeasures(sizes);\n }\n\n if (pageHeight && sizes.height !== pageHeight) {\n updateSummaryMeasures({\n width: sizes.width,\n height: pageHeight,\n });\n }\n }, [tab, sizes, summary, updateSummaryMeasures]);\n\n React.useEffect(() => {\n setContext(initialContext);\n }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n React.useEffect(() => {\n if (tab && !context[tab]?.touched) {\n const updatedContext = Object.entries(context).reduce(\n (acc, [key, childState]) => ({\n ...acc,\n ...(+key <= tab\n ? { [key]: { ...childState, touched: true, valid: childState.valid ?? true } }\n : { [key]: childState }),\n }),\n {}\n );\n\n setContext(updatedContext);\n }\n }, [tab]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n return (\n <div\n className={classes.summaryRef}\n ref={(el) => {\n containerRef(el);\n summaryRef.current = el;\n }}\n >\n {summary !== null && (\n <div className={classes.summarySticky}>\n <div\n className={classes.summaryContainer}\n style={{\n left: summaryLeft,\n width: summaryWidth,\n height: summaryHeight,\n transform: `translate(${summary ? 0 : translateX}px, 0)`,\n }}\n >\n {summaryContent}\n </div>\n </div>\n )}\n <HvDialogContent\n className={clsx(classes.contentContainer, {\n [classes.fixedHeight]: fixedHeight,\n })}\n indentContent\n >\n <LoadingContainer hidden={!loading}>\n {React.Children.map(arrayChildren, (child, index) => {\n if (index === tab) {\n return React.cloneElement(child, { tab });\n }\n return null;\n })}\n </LoadingContainer>\n </HvDialogContent>\n </div>\n );\n};\n\nHvWizardContent.propTypes = {\n /**\n * Current tab to show.\n */\n tab: PropTypes.number.isRequired,\n /**\n * Tabs to show on the Wizard.\n */\n children: PropTypes.node.isRequired,\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * Style applied to the Wizard content container.\n */\n contentContainer: PropTypes.string,\n /**\n * Style applied to the Wizard to fix its height.\n */\n fixedHeight: PropTypes.string,\n /**\n * Style applied to the summary container around the page content container.\n */\n summaryRef: PropTypes.string,\n /**\n * Style applied to the Summary container to stick it to the top.\n */\n summarySticky: PropTypes.string,\n /**\n * Style applied to the Summary container to position it on the right.\n */\n summaryContainer: PropTypes.string,\n }).isRequired,\n /**\n * Forces minimum height to the component.\n */\n fixedHeight: PropTypes.bool,\n /**\n * Whether the loading animation is shown.\n */\n loading: PropTypes.bool,\n /**\n * The content of the summary.\n */\n summaryContent: PropTypes.node,\n};\n\nexport default withStyles(styles, { name: \"HvWizardContent\" })(HvWizardContent);\n"],"mappings":"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"}
|
|
@@ -10,12 +10,19 @@ var styles = function styles(theme) {
|
|
|
10
10
|
fixedHeight: {
|
|
11
11
|
minHeight: "calc(100vh - 387px)"
|
|
12
12
|
},
|
|
13
|
+
summaryRef: {
|
|
14
|
+
flex: 1,
|
|
15
|
+
overflowY: "auto",
|
|
16
|
+
overflowX: "hidden"
|
|
17
|
+
},
|
|
13
18
|
summarySticky: {
|
|
14
19
|
position: "sticky",
|
|
15
|
-
top: 0
|
|
20
|
+
top: 0,
|
|
21
|
+
zIndex: 1
|
|
16
22
|
},
|
|
17
23
|
summaryContainer: {
|
|
18
24
|
position: "absolute",
|
|
25
|
+
top: 0,
|
|
19
26
|
minWidth: 280,
|
|
20
27
|
boxShadow: theme.hv.shadows[1],
|
|
21
28
|
backgroundColor: theme.hv.palette.atmosphere.atmo1,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","names":["styles","theme","contentContainer","position","padding","marginLeft","minHeight","overflowX","fixedHeight","summarySticky","top","summaryContainer","minWidth","boxShadow","hv","shadows","backgroundColor","palette","atmosphere","atmo1","transition","transitionTimingFunction"
|
|
1
|
+
{"version":3,"file":"styles.js","names":["styles","theme","contentContainer","position","padding","marginLeft","minHeight","overflowX","fixedHeight","summaryRef","flex","overflowY","summarySticky","top","zIndex","summaryContainer","minWidth","boxShadow","hv","shadows","backgroundColor","palette","atmosphere","atmo1","transition","transitionTimingFunction"],"sources":["../../../../src/Wizard/WizardContent/styles.js"],"sourcesContent":["const styles = (theme) => ({\n contentContainer: {\n position: \"relative\",\n padding: 20,\n marginLeft: 0,\n minHeight: 400,\n overflowX: \"hidden\",\n },\n fixedHeight: {\n minHeight: \"calc(100vh - 387px)\",\n },\n summaryRef: {\n flex: 1,\n overflowY: \"auto\",\n overflowX: \"hidden\",\n },\n summarySticky: {\n position: \"sticky\",\n top: 0,\n zIndex: 1,\n },\n summaryContainer: {\n position: \"absolute\",\n top: 0,\n minWidth: 280,\n boxShadow: theme.hv.shadows[1],\n backgroundColor: theme.hv.palette.atmosphere.atmo1,\n transition: \"transform 0.3s\",\n transitionTimingFunction: \"ease-in-out\",\n overflowY: \"scroll\",\n },\n});\n\nexport default styles;\n"],"mappings":"AAAA,IAAMA,MAAM,GAAG,SAATA,MAAM,CAAIC,KAAK;EAAA,OAAM;IACzBC,gBAAgB,EAAE;MAChBC,QAAQ,EAAE,UAAU;MACpBC,OAAO,EAAE,EAAE;MACXC,UAAU,EAAE,CAAC;MACbC,SAAS,EAAE,GAAG;MACdC,SAAS,EAAE;IACb,CAAC;IACDC,WAAW,EAAE;MACXF,SAAS,EAAE;IACb,CAAC;IACDG,UAAU,EAAE;MACVC,IAAI,EAAE,CAAC;MACPC,SAAS,EAAE,MAAM;MACjBJ,SAAS,EAAE;IACb,CAAC;IACDK,aAAa,EAAE;MACbT,QAAQ,EAAE,QAAQ;MAClBU,GAAG,EAAE,CAAC;MACNC,MAAM,EAAE;IACV,CAAC;IACDC,gBAAgB,EAAE;MAChBZ,QAAQ,EAAE,UAAU;MACpBU,GAAG,EAAE,CAAC;MACNG,QAAQ,EAAE,GAAG;MACbC,SAAS,EAAEhB,KAAK,CAACiB,EAAE,CAACC,OAAO,CAAC,CAAC,CAAC;MAC9BC,eAAe,EAAEnB,KAAK,CAACiB,EAAE,CAACG,OAAO,CAACC,UAAU,CAACC,KAAK;MAClDC,UAAU,EAAE,gBAAgB;MAC5BC,wBAAwB,EAAE,aAAa;MACvCd,SAAS,EAAE;IACb;EACF,CAAC;AAAA,CAAC;AAEF,eAAeX,MAAM"}
|
|
@@ -46,6 +46,9 @@ var HvWizardTitle = function HvWizardTitle(_ref) {
|
|
|
46
46
|
if (summary === null && hasSummary) {
|
|
47
47
|
setSummary(false);
|
|
48
48
|
}
|
|
49
|
+
return function () {
|
|
50
|
+
setSummary(false);
|
|
51
|
+
};
|
|
49
52
|
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
|
50
53
|
|
|
51
54
|
React.useEffect(function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardTitle.js","names":["React","PropTypes","withStyles","HvButton","HvDialogTitle","HvGrid","HvTypography","Report","HvStepNavigation","HvWizardContext","styles","switchTabState","state","currentTab","index","valid","touched","HvWizardTitle","title","hasSummary","labels","tab","classes","changeTab","customStep","useContext","context","summary","setSummary","useState","steps","setSteps","useEffect","contextArray","Object","entries","length","updatedSteps","map","childState","name","onClick","toggleSummary","oldSummary","headerContainer","messageContainer","titleContainer","stepContainer","type","stepSize","width","xs","sm","md","lg","buttonWidth","root","rootSummaryButton","propTypes","shape","string","bool","number","isRequired","func","oneOf","xl"],"sources":["../../../../src/Wizard/WizardTitle/WizardTitle.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport { HvButton, HvDialogTitle, HvGrid, HvTypography } from \"@hitachivantara/uikit-react-core\";\nimport { Report } from \"@hitachivantara/uikit-react-icons\";\nimport { HvStepNavigation } from \"@hitachivantara/uikit-react-lab\";\nimport HvWizardContext from \"../WizardContext\";\n\nimport styles from \"./styles\";\n\nconst switchTabState = (state, currentTab, index) => {\n if (index === currentTab) return \"Current\";\n if (state.valid) return \"Completed\";\n if (state.valid === null) return \"Enabled\";\n if (state.touched && state.valid === false) return \"Failed\";\n // \"Disabled\"\n // \"Pending\"\n return \"Enabled\";\n};\n\nconst HvWizardTitle = ({\n title,\n hasSummary = false,\n labels = {},\n tab,\n classes,\n changeTab,\n customStep = {},\n}) => {\n const { context, summary, setSummary } = React.useContext(HvWizardContext);\n const [steps, setSteps] = React.useState([]);\n\n React.useEffect(() => {\n if (summary === null && hasSummary) {\n setSummary(false);\n }\n }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n React.useEffect(() => {\n const contextArray = Object.entries(context);\n if (contextArray.length) {\n const updatedSteps = contextArray.map(([, childState], index) => ({\n title: childState.name ?? `${index + 1}`,\n state: switchTabState(childState, tab, index),\n onClick: () => changeTab(index),\n }));\n\n setSteps(updatedSteps);\n }\n }, [context, tab, changeTab]);\n\n const toggleSummary = () => {\n setSummary((oldSummary) => !oldSummary);\n };\n\n return (\n <HvDialogTitle\n className={classes.headerContainer}\n classes={{ messageContainer: classes.messageContainer }}\n >\n <HvGrid\n container\n justifyContent=\"space-between\"\n alignItems=\"center\"\n className={classes.titleContainer}\n >\n {title && (\n <HvTypography variant=\"xsTitle\" component=\"h3\">\n {title}\n </HvTypography>\n )}\n {!!steps.length && (\n <HvStepNavigation\n className={classes.stepContainer}\n steps={steps}\n type={customStep?.type ?? \"Default\"}\n stepSize={customStep?.stepSize ?? \"XS\"}\n width={customStep?.width ?? { xs: 200, sm: 350, md: 600, lg: 800 }}\n />\n )}\n {hasSummary && (\n <HvButton\n category=\"secondary\"\n className={classes.buttonWidth}\n classes={{ root: classes.rootSummaryButton }}\n onClick={toggleSummary}\n >\n <Report /> {`${labels.summary ?? \"Summary\"}`}\n </HvButton>\n )}\n </HvGrid>\n </HvDialogTitle>\n );\n};\n\nHvWizardTitle.propTypes = {\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the header container.\n */\n headerContainer: PropTypes.string,\n /**\n * Styles applied to override the Dialog Title styles.\n */\n messageContainer: PropTypes.string,\n /**\n * Styles applied to the header content container.\n */\n titleContainer: PropTypes.string,\n /**\n * Styles applied to the Button component to override its width.\n */\n buttonWidth: PropTypes.string,\n /**\n * Styles applied to the Button component to override its right padding.\n */\n rootSummaryButton: PropTypes.string,\n /**\n *\n */\n stepContainer: PropTypes.string,\n }),\n /**\n * Title for the wizard.\n */\n title: PropTypes.string,\n /**\n * Shows the summary button.\n */\n hasSummary: PropTypes.bool,\n /**\n * An object containing all the labels for the wizard header.\n */\n labels: PropTypes.shape({\n /**\n * Summary button label.\n */\n summary: PropTypes.string,\n }),\n /**\n * Current tab to check if it's last page or first to disable previous button and swap between next and submit button.\n */\n tab: PropTypes.number.isRequired,\n /**\n * Function to change the tab when pressing previous and next buttons.\n */\n changeTab: PropTypes.func.isRequired,\n /**\n * Custom object to define type, size and width of the StepNavigation component\n */\n customStep: PropTypes.shape({\n /**\n * Type of step navigation. Values = {\"Simple\", \"Default\"}.\n */\n type: PropTypes.oneOf([\"Simple\", \"Default\"]),\n /**\n * Sets one of the standard sizes of the steps. Values = {\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"}\n */\n stepSize: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n /**\n * Width of the component element on each breakpoint screen resolution.\n */\n width: PropTypes.shape({\n xs: PropTypes.number,\n sm: PropTypes.number,\n md: PropTypes.number,\n lg: PropTypes.number,\n xl: PropTypes.number,\n }),\n }),\n};\n\nexport default withStyles(styles, { name: \"HvWizardTitle\" })(HvWizardTitle);\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"WizardTitle.js","names":["React","PropTypes","withStyles","HvButton","HvDialogTitle","HvGrid","HvTypography","Report","HvStepNavigation","HvWizardContext","styles","switchTabState","state","currentTab","index","valid","touched","HvWizardTitle","title","hasSummary","labels","tab","classes","changeTab","customStep","useContext","context","summary","setSummary","useState","steps","setSteps","useEffect","contextArray","Object","entries","length","updatedSteps","map","childState","name","onClick","toggleSummary","oldSummary","headerContainer","messageContainer","titleContainer","stepContainer","type","stepSize","width","xs","sm","md","lg","buttonWidth","root","rootSummaryButton","propTypes","shape","string","bool","number","isRequired","func","oneOf","xl"],"sources":["../../../../src/Wizard/WizardTitle/WizardTitle.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport { HvButton, HvDialogTitle, HvGrid, HvTypography } from \"@hitachivantara/uikit-react-core\";\nimport { Report } from \"@hitachivantara/uikit-react-icons\";\nimport { HvStepNavigation } from \"@hitachivantara/uikit-react-lab\";\nimport HvWizardContext from \"../WizardContext\";\n\nimport styles from \"./styles\";\n\nconst switchTabState = (state, currentTab, index) => {\n if (index === currentTab) return \"Current\";\n if (state.valid) return \"Completed\";\n if (state.valid === null) return \"Enabled\";\n if (state.touched && state.valid === false) return \"Failed\";\n // \"Disabled\"\n // \"Pending\"\n return \"Enabled\";\n};\n\nconst HvWizardTitle = ({\n title,\n hasSummary = false,\n labels = {},\n tab,\n classes,\n changeTab,\n customStep = {},\n}) => {\n const { context, summary, setSummary } = React.useContext(HvWizardContext);\n const [steps, setSteps] = React.useState([]);\n\n React.useEffect(() => {\n if (summary === null && hasSummary) {\n setSummary(false);\n }\n\n return () => {\n setSummary(false);\n };\n }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n React.useEffect(() => {\n const contextArray = Object.entries(context);\n if (contextArray.length) {\n const updatedSteps = contextArray.map(([, childState], index) => ({\n title: childState.name ?? `${index + 1}`,\n state: switchTabState(childState, tab, index),\n onClick: () => changeTab(index),\n }));\n\n setSteps(updatedSteps);\n }\n }, [context, tab, changeTab]);\n\n const toggleSummary = () => {\n setSummary((oldSummary) => !oldSummary);\n };\n\n return (\n <HvDialogTitle\n className={classes.headerContainer}\n classes={{ messageContainer: classes.messageContainer }}\n >\n <HvGrid\n container\n justifyContent=\"space-between\"\n alignItems=\"center\"\n className={classes.titleContainer}\n >\n {title && (\n <HvTypography variant=\"xsTitle\" component=\"h3\">\n {title}\n </HvTypography>\n )}\n {!!steps.length && (\n <HvStepNavigation\n className={classes.stepContainer}\n steps={steps}\n type={customStep?.type ?? \"Default\"}\n stepSize={customStep?.stepSize ?? \"XS\"}\n width={customStep?.width ?? { xs: 200, sm: 350, md: 600, lg: 800 }}\n />\n )}\n {hasSummary && (\n <HvButton\n category=\"secondary\"\n className={classes.buttonWidth}\n classes={{ root: classes.rootSummaryButton }}\n onClick={toggleSummary}\n >\n <Report /> {`${labels.summary ?? \"Summary\"}`}\n </HvButton>\n )}\n </HvGrid>\n </HvDialogTitle>\n );\n};\n\nHvWizardTitle.propTypes = {\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the header container.\n */\n headerContainer: PropTypes.string,\n /**\n * Styles applied to override the Dialog Title styles.\n */\n messageContainer: PropTypes.string,\n /**\n * Styles applied to the header content container.\n */\n titleContainer: PropTypes.string,\n /**\n * Styles applied to the Button component to override its width.\n */\n buttonWidth: PropTypes.string,\n /**\n * Styles applied to the Button component to override its right padding.\n */\n rootSummaryButton: PropTypes.string,\n /**\n *\n */\n stepContainer: PropTypes.string,\n }),\n /**\n * Title for the wizard.\n */\n title: PropTypes.string,\n /**\n * Shows the summary button.\n */\n hasSummary: PropTypes.bool,\n /**\n * An object containing all the labels for the wizard header.\n */\n labels: PropTypes.shape({\n /**\n * Summary button label.\n */\n summary: PropTypes.string,\n }),\n /**\n * Current tab to check if it's last page or first to disable previous button and swap between next and submit button.\n */\n tab: PropTypes.number.isRequired,\n /**\n * Function to change the tab when pressing previous and next buttons.\n */\n changeTab: PropTypes.func.isRequired,\n /**\n * Custom object to define type, size and width of the StepNavigation component\n */\n customStep: PropTypes.shape({\n /**\n * Type of step navigation. Values = {\"Simple\", \"Default\"}.\n */\n type: PropTypes.oneOf([\"Simple\", \"Default\"]),\n /**\n * Sets one of the standard sizes of the steps. Values = {\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"}\n */\n stepSize: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n /**\n * Width of the component element on each breakpoint screen resolution.\n */\n width: PropTypes.shape({\n xs: PropTypes.number,\n sm: PropTypes.number,\n md: PropTypes.number,\n lg: PropTypes.number,\n xl: PropTypes.number,\n }),\n }),\n};\n\nexport default withStyles(styles, { name: \"HvWizardTitle\" })(HvWizardTitle);\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,UAAU,QAAQ,aAAa;AACxC,SAASC,QAAQ,EAAEC,aAAa,EAAEC,MAAM,EAAEC,YAAY,QAAQ,kCAAkC;AAChG,SAASC,MAAM,QAAQ,mCAAmC;AAC1D,SAASC,gBAAgB,QAAQ,iCAAiC;AAClE,OAAOC,eAAe,MAAM,kBAAkB;AAE9C,OAAOC,MAAM,MAAM,UAAU;AAAC;AAAA;AAE9B,IAAMC,cAAc,GAAG,SAAjBA,cAAc,CAAIC,KAAK,EAAEC,UAAU,EAAEC,KAAK,EAAK;EACnD,IAAIA,KAAK,KAAKD,UAAU,EAAE,OAAO,SAAS;EAC1C,IAAID,KAAK,CAACG,KAAK,EAAE,OAAO,WAAW;EACnC,IAAIH,KAAK,CAACG,KAAK,KAAK,IAAI,EAAE,OAAO,SAAS;EAC1C,IAAIH,KAAK,CAACI,OAAO,IAAIJ,KAAK,CAACG,KAAK,KAAK,KAAK,EAAE,OAAO,QAAQ;EAC3D;EACA;EACA,OAAO,SAAS;AAClB,CAAC;AAED,IAAME,aAAa,GAAG,SAAhBA,aAAa,OAQb;EAAA;EAAA,IAPJC,KAAK,QAALA,KAAK;IAAA,uBACLC,UAAU;IAAVA,UAAU,gCAAG,KAAK;IAAA,mBAClBC,MAAM;IAANA,MAAM,4BAAG,CAAC,CAAC;IACXC,GAAG,QAAHA,GAAG;IACHC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IAAA,uBACTC,UAAU;IAAVA,UAAU,gCAAG,CAAC,CAAC;EAEf,wBAAyCxB,KAAK,CAACyB,UAAU,CAAChB,eAAe,CAAC;IAAlEiB,OAAO,qBAAPA,OAAO;IAAEC,OAAO,qBAAPA,OAAO;IAAEC,UAAU,qBAAVA,UAAU;EACpC,sBAA0B5B,KAAK,CAAC6B,QAAQ,CAAC,EAAE,CAAC;IAAA;IAArCC,KAAK;IAAEC,QAAQ;EAEtB/B,KAAK,CAACgC,SAAS,CAAC,YAAM;IACpB,IAAIL,OAAO,KAAK,IAAI,IAAIR,UAAU,EAAE;MAClCS,UAAU,CAAC,KAAK,CAAC;IACnB;IAEA,OAAO,YAAM;MACXA,UAAU,CAAC,KAAK,CAAC;IACnB,CAAC;EACH,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;;EAER5B,KAAK,CAACgC,SAAS,CAAC,YAAM;IACpB,IAAMC,YAAY,GAAGC,MAAM,CAACC,OAAO,CAACT,OAAO,CAAC;IAC5C,IAAIO,YAAY,CAACG,MAAM,EAAE;MACvB,IAAMC,YAAY,GAAGJ,YAAY,CAACK,GAAG,CAAC,iBAAiBxB,KAAK;QAAA;QAAA;UAAlByB,UAAU;QAAA,OAAc;UAChErB,KAAK,sBAAEqB,UAAU,CAACC,IAAI,yEAAO1B,KAAK,GAAG,CAAC,CAAE;UACxCF,KAAK,EAAED,cAAc,CAAC4B,UAAU,EAAElB,GAAG,EAAEP,KAAK,CAAC;UAC7C2B,OAAO,EAAE;YAAA,OAAMlB,SAAS,CAACT,KAAK,CAAC;UAAA;QACjC,CAAC;MAAA,CAAC,CAAC;MAEHiB,QAAQ,CAACM,YAAY,CAAC;IACxB;EACF,CAAC,EAAE,CAACX,OAAO,EAAEL,GAAG,EAAEE,SAAS,CAAC,CAAC;EAE7B,IAAMmB,aAAa,GAAG,SAAhBA,aAAa,GAAS;IAC1Bd,UAAU,CAAC,UAACe,UAAU;MAAA,OAAK,CAACA,UAAU;IAAA,EAAC;EACzC,CAAC;EAED,oBACE,KAAC,aAAa;IACZ,SAAS,EAAErB,OAAO,CAACsB,eAAgB;IACnC,OAAO,EAAE;MAAEC,gBAAgB,EAAEvB,OAAO,CAACuB;IAAiB,CAAE;IAAA,uBAExD,MAAC,MAAM;MACL,SAAS;MACT,cAAc,EAAC,eAAe;MAC9B,UAAU,EAAC,QAAQ;MACnB,SAAS,EAAEvB,OAAO,CAACwB,cAAe;MAAA,WAEjC5B,KAAK,iBACJ,KAAC,YAAY;QAAC,OAAO,EAAC,SAAS;QAAC,SAAS,EAAC,IAAI;QAAA,UAC3CA;MAAK,EAET,EACA,CAAC,CAACY,KAAK,CAACM,MAAM,iBACb,KAAC,gBAAgB;QACf,SAAS,EAAEd,OAAO,CAACyB,aAAc;QACjC,KAAK,EAAEjB,KAAM;QACb,IAAI,sBAAEN,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEwB,IAAI,+DAAI,SAAU;QACpC,QAAQ,0BAAExB,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEyB,QAAQ,uEAAI,IAAK;QACvC,KAAK,uBAAEzB,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAE0B,KAAK,iEAAI;UAAEC,EAAE,EAAE,GAAG;UAAEC,EAAE,EAAE,GAAG;UAAEC,EAAE,EAAE,GAAG;UAAEC,EAAE,EAAE;QAAI;MAAE,EAEtE,EACAnC,UAAU,iBACT,MAAC,QAAQ;QACP,QAAQ,EAAC,WAAW;QACpB,SAAS,EAAEG,OAAO,CAACiC,WAAY;QAC/B,OAAO,EAAE;UAAEC,IAAI,EAAElC,OAAO,CAACmC;QAAkB,CAAE;QAC7C,OAAO,EAAEf,aAAc;QAAA,8CAEvB,KAAC,MAAM,KAAG,qCAAKtB,MAAM,CAACO,OAAO,6DAAI,SAAS;MAAA,EAE7C;IAAA;EACM,EACK;AAEpB,CAAC;AAED,wCAAAV,aAAa,CAACyC,SAAS,GAAG;EACxB;AACF;AACA;EACEpC,OAAO,EAAErB,SAAS,CAAC0D,KAAK,CAAC;IACvB;AACJ;AACA;IACIf,eAAe,EAAE3C,SAAS,CAAC2D,MAAM;IACjC;AACJ;AACA;IACIf,gBAAgB,EAAE5C,SAAS,CAAC2D,MAAM;IAClC;AACJ;AACA;IACId,cAAc,EAAE7C,SAAS,CAAC2D,MAAM;IAChC;AACJ;AACA;IACIL,WAAW,EAAEtD,SAAS,CAAC2D,MAAM;IAC7B;AACJ;AACA;IACIH,iBAAiB,EAAExD,SAAS,CAAC2D,MAAM;IACnC;AACJ;AACA;IACIb,aAAa,EAAE9C,SAAS,CAAC2D;EAC3B,CAAC,CAAC;EACF;AACF;AACA;EACE1C,KAAK,EAAEjB,SAAS,CAAC2D,MAAM;EACvB;AACF;AACA;EACEzC,UAAU,EAAElB,SAAS,CAAC4D,IAAI;EAC1B;AACF;AACA;EACEzC,MAAM,EAAEnB,SAAS,CAAC0D,KAAK,CAAC;IACtB;AACJ;AACA;IACIhC,OAAO,EAAE1B,SAAS,CAAC2D;EACrB,CAAC,CAAC;EACF;AACF;AACA;EACEvC,GAAG,EAAEpB,SAAS,CAAC6D,MAAM,CAACC,UAAU;EAChC;AACF;AACA;EACExC,SAAS,EAAEtB,SAAS,CAAC+D,IAAI,CAACD,UAAU;EACpC;AACF;AACA;EACEvC,UAAU,EAAEvB,SAAS,CAAC0D,KAAK,CAAC;IAC1B;AACJ;AACA;IACIX,IAAI,EAAE/C,SAAS,CAACgE,KAAK,CAAC,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAC5C;AACJ;AACA;IACIhB,QAAQ,EAAEhD,SAAS,CAACgE,KAAK,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IACzD;AACJ;AACA;IACIf,KAAK,EAAEjD,SAAS,CAAC0D,KAAK,CAAC;MACrBR,EAAE,EAAElD,SAAS,CAAC6D,MAAM;MACpBV,EAAE,EAAEnD,SAAS,CAAC6D,MAAM;MACpBT,EAAE,EAAEpD,SAAS,CAAC6D,MAAM;MACpBR,EAAE,EAAErD,SAAS,CAAC6D,MAAM;MACpBI,EAAE,EAAEjE,SAAS,CAAC6D;IAChB,CAAC;EACH,CAAC;AACH,CAAC;AAED,eAAe5D,UAAU,CAACQ,MAAM,EAAE;EAAE8B,IAAI,EAAE;AAAgB,CAAC,CAAC,CAACvB,aAAa,CAAC"}
|
|
@@ -48,9 +48,11 @@ const HvWizard = _ref => {
|
|
|
48
48
|
setSummary
|
|
49
49
|
}), [context, summary]);
|
|
50
50
|
React.useEffect(() => {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
51
|
+
return () => {
|
|
52
|
+
if (!open) {
|
|
53
|
+
setTab(0);
|
|
54
|
+
}
|
|
55
|
+
};
|
|
54
56
|
}, [open]);
|
|
55
57
|
const handleClose = React.useCallback((evt, reason) => {
|
|
56
58
|
if (reason !== "backdropClick") {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Wizard.js","names":["React","PropTypes","withStyles","WizardContext","WizardContainer","WizardTitle","WizardContent","WizardActions","styles","HvWizard","className","children","onClose","handleSubmit","title","open","skippable","loading","hasSummary","summaryContent","labels","cancel","next","previous","skip","submit","summary","fixedHeight","customStep","others","context","setContext","useState","setSummary","tab","setTab","contextValue","useMemo","useEffect","handleClose","useCallback","evt","reason","propTypes","string","bool","isRequired","func","node","shape","type","oneOf","stepSize","width","xs","number","sm","md","lg","xl","name"],"sources":["../../../src/Wizard/Wizard.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport WizardContext from \"./WizardContext\";\nimport WizardContainer from \"./WizardContainer\";\nimport WizardTitle from \"./WizardTitle\";\nimport WizardContent from \"./WizardContent\";\nimport WizardActions from \"./WizardActions\";\n\nimport styles from \"./styles\";\n\nconst HvWizard = ({\n className,\n children,\n onClose,\n handleSubmit,\n title,\n open,\n skippable = true,\n loading = false,\n hasSummary = false,\n summaryContent,\n labels = {\n cancel: \"Cancel\",\n next: \"Next\",\n previous: \"Previous\",\n skip: \"Skip\",\n submit: \"Submit\",\n summary: \"Summary\",\n },\n fixedHeight = false,\n customStep,\n ...others\n}) => {\n const [context, setContext] = React.useState({});\n const [summary, setSummary] = React.useState(null);\n const [tab, setTab] = React.useState(0);\n\n const contextValue = React.useMemo(\n () => ({\n context,\n setContext,\n summary,\n setSummary,\n }),\n [context, summary]\n );\n\n React.useEffect(() => {\n if (!open) {\n
|
|
1
|
+
{"version":3,"file":"Wizard.js","names":["React","PropTypes","withStyles","WizardContext","WizardContainer","WizardTitle","WizardContent","WizardActions","styles","HvWizard","className","children","onClose","handleSubmit","title","open","skippable","loading","hasSummary","summaryContent","labels","cancel","next","previous","skip","submit","summary","fixedHeight","customStep","others","context","setContext","useState","setSummary","tab","setTab","contextValue","useMemo","useEffect","handleClose","useCallback","evt","reason","propTypes","string","bool","isRequired","func","node","shape","type","oneOf","stepSize","width","xs","number","sm","md","lg","xl","name"],"sources":["../../../src/Wizard/Wizard.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport WizardContext from \"./WizardContext\";\nimport WizardContainer from \"./WizardContainer\";\nimport WizardTitle from \"./WizardTitle\";\nimport WizardContent from \"./WizardContent\";\nimport WizardActions from \"./WizardActions\";\n\nimport styles from \"./styles\";\n\nconst HvWizard = ({\n className,\n children,\n onClose,\n handleSubmit,\n title,\n open,\n skippable = true,\n loading = false,\n hasSummary = false,\n summaryContent,\n labels = {\n cancel: \"Cancel\",\n next: \"Next\",\n previous: \"Previous\",\n skip: \"Skip\",\n submit: \"Submit\",\n summary: \"Summary\",\n },\n fixedHeight = false,\n customStep,\n ...others\n}) => {\n const [context, setContext] = React.useState({});\n const [summary, setSummary] = React.useState(null);\n const [tab, setTab] = React.useState(0);\n\n const contextValue = React.useMemo(\n () => ({\n context,\n setContext,\n summary,\n setSummary,\n }),\n [context, summary]\n );\n\n React.useEffect(() => {\n return () => {\n if (!open) {\n setTab(0);\n }\n };\n }, [open]);\n\n const handleClose = React.useCallback(\n (evt, reason) => {\n if (reason !== \"backdropClick\") {\n onClose(evt, reason);\n }\n },\n [onClose]\n );\n\n return (\n <WizardContext.Provider value={contextValue}>\n <WizardContainer className={className} handleClose={handleClose} open={open} {...others}>\n <WizardTitle\n title={title}\n hasSummary={hasSummary}\n labels={labels}\n tab={tab}\n changeTab={setTab}\n customStep={customStep}\n />\n <WizardContent\n loading={loading}\n fixedHeight={fixedHeight}\n tab={tab}\n summaryContent={summaryContent}\n >\n {children}\n </WizardContent>\n <WizardActions\n loading={loading}\n skippable={skippable}\n labels={labels}\n tab={tab}\n changeTab={setTab}\n handleClose={handleClose}\n handleSubmit={handleSubmit}\n />\n </WizardContainer>\n </WizardContext.Provider>\n );\n};\n\nHvWizard.propTypes = {\n /**\n * Class names to be applied.\n */\n className: PropTypes.string,\n /**\n * Current state of the Wizard.\n */\n open: PropTypes.bool.isRequired,\n /**\n * Function executed on close.\n */\n onClose: PropTypes.func.isRequired,\n /**\n * Function executed on submit.\n */\n handleSubmit: PropTypes.func.isRequired,\n /**\n * Enables the skip button.\n */\n skippable: PropTypes.bool,\n /**\n * Title for the wizard.\n */\n title: PropTypes.string,\n /**\n * Shows the summary button.\n */\n hasSummary: PropTypes.bool,\n /**\n * The content of the summary.\n */\n summaryContent: PropTypes.node,\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n /**\n * An object containing all the labels for the wizard.\n */\n labels: PropTypes.shape({\n /**\n * Cancel button label.\n */\n cancel: PropTypes.string,\n /**\n * Skip button label.\n */\n skip: PropTypes.string,\n /**\n * Previous button label.\n */\n previous: PropTypes.string,\n /**\n * Next button label.\n */\n next: PropTypes.string,\n /**\n * Submit button label.\n */\n submit: PropTypes.string,\n /**\n * Summary button label.\n */\n summary: PropTypes.string,\n }),\n /**\n * Forces minimum height to the component.\n */\n fixedHeight: PropTypes.bool,\n /**\n * Whether the loading animation is shown.\n */\n loading: PropTypes.bool,\n /**\n * Custom object to define type, size and width of the StepNavigation component\n */\n customStep: PropTypes.shape({\n /**\n * Type of step navigation. Values = {\"Simple\", \"Default\"}.\n */\n type: PropTypes.oneOf([\"Simple\", \"Default\"]),\n /**\n * Sets one of the standard sizes of the steps. Values = {\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"}\n */\n stepSize: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n /**\n * Width of the component element on each breakpoint screen resolution.\n */\n width: PropTypes.shape({\n xs: PropTypes.number,\n sm: PropTypes.number,\n md: PropTypes.number,\n lg: PropTypes.number,\n xl: PropTypes.number,\n }),\n }),\n};\n\nexport default withStyles(styles, { name: \"HvWizard\" })(HvWizard);\n"],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
4
4
|
import React from "react";
|
|
5
5
|
import PropTypes from "prop-types";
|
|
6
6
|
import { withStyles } from "@mui/styles";
|
|
7
|
-
import
|
|
7
|
+
import { useElementSize } from "usehooks-ts";
|
|
8
8
|
import clsx from "clsx";
|
|
9
9
|
import { HvDialogContent } from "@hitachivantara/uikit-react-core";
|
|
10
10
|
import HvWizardContext from "../WizardContext";
|
|
@@ -13,7 +13,6 @@ import styles from "./styles";
|
|
|
13
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
14
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
15
15
|
const DRAWER_PERCENTAGE = 0.3;
|
|
16
|
-
const MODAL_MARGIN = 20;
|
|
17
16
|
const DRAWER_MIN_WIDTH = 280;
|
|
18
17
|
const HvWizardContent = ({
|
|
19
18
|
classes,
|
|
@@ -40,11 +39,12 @@ const HvWizardContent = ({
|
|
|
40
39
|
setContext,
|
|
41
40
|
summary
|
|
42
41
|
} = React.useContext(HvWizardContext);
|
|
42
|
+
const summaryRef = React.useRef(null);
|
|
43
43
|
const resizedRef = React.useRef({
|
|
44
|
-
|
|
45
|
-
|
|
44
|
+
height: 0,
|
|
45
|
+
width: 0
|
|
46
46
|
});
|
|
47
|
-
const [
|
|
47
|
+
const [containerRef, sizes] = useElementSize();
|
|
48
48
|
const [summaryHeight, setSummaryHeight] = React.useState(0);
|
|
49
49
|
const [summaryWidth, setSummaryWidth] = React.useState(0);
|
|
50
50
|
const [summaryLeft, setSummaryLeft] = React.useState(0);
|
|
@@ -53,17 +53,25 @@ const HvWizardContent = ({
|
|
|
53
53
|
const drawerWidth = modalWidth * DRAWER_PERCENTAGE;
|
|
54
54
|
setSummaryHeight(newSizes.height);
|
|
55
55
|
setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));
|
|
56
|
-
setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH)
|
|
56
|
+
setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH));
|
|
57
|
+
resizedRef.current = {
|
|
58
|
+
height: newSizes.height,
|
|
59
|
+
width: newSizes.width
|
|
60
|
+
};
|
|
57
61
|
}, []);
|
|
58
62
|
React.useEffect(() => {
|
|
63
|
+
var _summaryRef$current, _summaryRef$current$g, _summaryRef$current$g2;
|
|
64
|
+
const pageHeight = (_summaryRef$current = summaryRef.current) === null || _summaryRef$current === void 0 ? void 0 : (_summaryRef$current$g = _summaryRef$current.getBoundingClientRect) === null || _summaryRef$current$g === void 0 ? void 0 : (_summaryRef$current$g2 = _summaryRef$current$g.call(_summaryRef$current)) === null || _summaryRef$current$g2 === void 0 ? void 0 : _summaryRef$current$g2.height;
|
|
59
65
|
if (summary && sizes.height !== resizedRef.current.height || sizes.width !== resizedRef.current.width) {
|
|
60
66
|
updateSummaryMeasures(sizes);
|
|
61
|
-
resizedRef.current = {
|
|
62
|
-
height: sizes.height,
|
|
63
|
-
width: sizes.width
|
|
64
|
-
};
|
|
65
67
|
}
|
|
66
|
-
|
|
68
|
+
if (pageHeight && sizes.height !== pageHeight) {
|
|
69
|
+
updateSummaryMeasures({
|
|
70
|
+
width: sizes.width,
|
|
71
|
+
height: pageHeight
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
}, [tab, sizes, summary, updateSummaryMeasures]);
|
|
67
75
|
React.useEffect(() => {
|
|
68
76
|
setContext(initialContext);
|
|
69
77
|
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
|
@@ -84,14 +92,16 @@ const HvWizardContent = ({
|
|
|
84
92
|
}, {});
|
|
85
93
|
setContext(updatedContext);
|
|
86
94
|
}
|
|
87
|
-
updateSummaryMeasures(sizes);
|
|
88
95
|
}, [tab]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
89
96
|
|
|
90
97
|
const translateX = summaryWidth ? summaryWidth + 10 : 450;
|
|
91
|
-
return /*#__PURE__*/_jsxs(
|
|
92
|
-
className:
|
|
93
|
-
|
|
94
|
-
|
|
98
|
+
return /*#__PURE__*/_jsxs("div", {
|
|
99
|
+
className: classes.summaryRef,
|
|
100
|
+
ref: el => {
|
|
101
|
+
containerRef(el);
|
|
102
|
+
summaryRef.current = el;
|
|
103
|
+
},
|
|
104
|
+
children: [summary !== null && /*#__PURE__*/_jsx("div", {
|
|
95
105
|
className: classes.summarySticky,
|
|
96
106
|
children: /*#__PURE__*/_jsx("div", {
|
|
97
107
|
className: classes.summaryContainer,
|
|
@@ -103,15 +113,19 @@ const HvWizardContent = ({
|
|
|
103
113
|
},
|
|
104
114
|
children: summaryContent
|
|
105
115
|
})
|
|
106
|
-
}), /*#__PURE__*/_jsx(
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
116
|
+
}), /*#__PURE__*/_jsx(HvDialogContent, {
|
|
117
|
+
className: clsx(classes.contentContainer, fixedHeight && classes.fixedHeight),
|
|
118
|
+
indentContent: true,
|
|
119
|
+
children: /*#__PURE__*/_jsx(LoadingContainer, {
|
|
120
|
+
hidden: !loading,
|
|
121
|
+
children: React.Children.map(arrayChildren, (child, index) => {
|
|
122
|
+
if (index === tab) {
|
|
123
|
+
return /*#__PURE__*/React.cloneElement(child, {
|
|
124
|
+
tab
|
|
125
|
+
});
|
|
126
|
+
}
|
|
127
|
+
return null;
|
|
128
|
+
})
|
|
115
129
|
})
|
|
116
130
|
})]
|
|
117
131
|
});
|
|
@@ -137,6 +151,10 @@ process.env.NODE_ENV !== "production" ? HvWizardContent.propTypes = {
|
|
|
137
151
|
* Style applied to the Wizard to fix its height.
|
|
138
152
|
*/
|
|
139
153
|
fixedHeight: PropTypes.string,
|
|
154
|
+
/**
|
|
155
|
+
* Style applied to the summary container around the page content container.
|
|
156
|
+
*/
|
|
157
|
+
summaryRef: PropTypes.string,
|
|
140
158
|
/**
|
|
141
159
|
* Style applied to the Summary container to stick it to the top.
|
|
142
160
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardContent.js","names":["React","PropTypes","withStyles","useResizeAware","clsx","HvDialogContent","HvWizardContext","LoadingContainer","styles","DRAWER_PERCENTAGE","MODAL_MARGIN","DRAWER_MIN_WIDTH","HvWizardContent","classes","fixedHeight","loading","children","tab","summaryContent","arrayChildren","Children","toArray","initialContext","reduce","acc","child","index","invalid","props","mustValidate","valid","form","touched","context","setContext","summary","useContext","resizedRef","useRef","width","height","resizeListener","sizes","summaryHeight","setSummaryHeight","useState","summaryWidth","setSummaryWidth","summaryLeft","setSummaryLeft","updateSummaryMeasures","useCallback","newSizes","modalWidth","drawerWidth","Math","max","useEffect","current","updatedContext","Object","entries","key","childState","translateX","contentContainer","summarySticky","summaryContainer","left","transform","map","cloneElement","propTypes","number","isRequired","node","shape","string","bool","name"],"sources":["../../../../src/Wizard/WizardContent/WizardContent.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport useResizeAware from \"react-resize-aware\";\nimport clsx from \"clsx\";\nimport { HvDialogContent } from \"@hitachivantara/uikit-react-core\";\nimport HvWizardContext from \"../WizardContext\";\nimport LoadingContainer from \"./LoadingContainer\";\n\nimport styles from \"./styles\";\n\nconst DRAWER_PERCENTAGE = 0.3;\nconst MODAL_MARGIN = 20;\nconst DRAWER_MIN_WIDTH = 280;\n\nconst HvWizardContent = ({\n classes,\n fixedHeight = false,\n loading = false,\n children,\n tab,\n summaryContent,\n}) => {\n const arrayChildren = React.Children.toArray(children);\n const initialContext = arrayChildren.reduce((acc, child, index) => {\n const invalid = child.props.mustValidate === true ? false : null;\n const valid = invalid ?? (index === 0 || null);\n return {\n ...acc,\n [index]: { ...child.props, form: {}, valid, touched: index === 0 },\n };\n }, {});\n\n const { context, setContext, summary } = React.useContext(HvWizardContext);\n\n const resizedRef = React.useRef({ width: 0, height: 0 });\n const [resizeListener, sizes] = useResizeAware();\n\n const [summaryHeight, setSummaryHeight] = React.useState(0);\n const [summaryWidth, setSummaryWidth] = React.useState(0);\n const [summaryLeft, setSummaryLeft] = React.useState(0);\n const updateSummaryMeasures = React.useCallback((newSizes) => {\n const modalWidth = newSizes.width;\n const drawerWidth = modalWidth * DRAWER_PERCENTAGE;\n setSummaryHeight(newSizes.height);\n setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH) - MODAL_MARGIN);\n }, []);\n\n React.useEffect(() => {\n if (\n (summary && sizes.height !== resizedRef.current.height) ||\n sizes.width !== resizedRef.current.width\n ) {\n updateSummaryMeasures(sizes);\n resizedRef.current = {\n height: sizes.height,\n width: sizes.width,\n };\n }\n }, [sizes, summary, updateSummaryMeasures]);\n\n React.useEffect(() => {\n setContext(initialContext);\n }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n React.useEffect(() => {\n if (tab && !context[tab]?.touched) {\n const updatedContext = Object.entries(context).reduce(\n (acc, [key, childState]) => ({\n ...acc,\n ...(+key <= tab\n ? { [key]: { ...childState, touched: true, valid: childState.valid ?? true } }\n : { [key]: childState }),\n }),\n {}\n );\n\n setContext(updatedContext);\n }\n updateSummaryMeasures(sizes);\n }, [tab]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n return (\n <HvDialogContent\n className={clsx(classes.contentContainer, {\n [classes.fixedHeight]: fixedHeight,\n })}\n indentContent\n >\n {resizeListener}\n <div className={classes.summarySticky}>\n <div\n className={classes.summaryContainer}\n style={{\n left: summaryLeft,\n width: summaryWidth,\n height: summaryHeight,\n transform: `translate(${summary ? 0 : translateX}px, 0)`,\n }}\n >\n {summaryContent}\n </div>\n </div>\n <LoadingContainer hidden={!loading}>\n {React.Children.map(arrayChildren, (child, index) => {\n if (index === tab) {\n return React.cloneElement(child, { tab });\n }\n return null;\n })}\n </LoadingContainer>\n </HvDialogContent>\n );\n};\n\nHvWizardContent.propTypes = {\n /**\n * Current tab to show.\n */\n tab: PropTypes.number.isRequired,\n /**\n * Tabs to show on the Wizard.\n */\n children: PropTypes.node.isRequired,\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * Style applied to the Wizard content container.\n */\n contentContainer: PropTypes.string,\n /**\n * Style applied to the Wizard to fix its height.\n */\n fixedHeight: PropTypes.string,\n /**\n * Style applied to the Summary container to stick it to the top.\n */\n summarySticky: PropTypes.string,\n /**\n * Style applied to the Summary container to position it on the right.\n */\n summaryContainer: PropTypes.string,\n }).isRequired,\n /**\n * Forces minimum height to the component.\n */\n fixedHeight: PropTypes.bool,\n /**\n * Whether the loading animation is shown.\n */\n loading: PropTypes.bool,\n /**\n * The content of the summary.\n */\n summaryContent: PropTypes.node,\n};\n\nexport default withStyles(styles, { name: \"HvWizardContent\" })(HvWizardContent);\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"WizardContent.js","names":["React","PropTypes","withStyles","useElementSize","clsx","HvDialogContent","HvWizardContext","LoadingContainer","styles","DRAWER_PERCENTAGE","DRAWER_MIN_WIDTH","HvWizardContent","classes","fixedHeight","loading","children","tab","summaryContent","arrayChildren","Children","toArray","initialContext","reduce","acc","child","index","invalid","props","mustValidate","valid","form","touched","context","setContext","summary","useContext","summaryRef","useRef","resizedRef","height","width","containerRef","sizes","summaryHeight","setSummaryHeight","useState","summaryWidth","setSummaryWidth","summaryLeft","setSummaryLeft","updateSummaryMeasures","useCallback","newSizes","modalWidth","drawerWidth","Math","max","current","useEffect","pageHeight","getBoundingClientRect","updatedContext","Object","entries","key","childState","translateX","el","summarySticky","summaryContainer","left","transform","contentContainer","map","cloneElement","propTypes","number","isRequired","node","shape","string","bool","name"],"sources":["../../../../src/Wizard/WizardContent/WizardContent.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport { useElementSize } from \"usehooks-ts\";\nimport clsx from \"clsx\";\nimport { HvDialogContent } from \"@hitachivantara/uikit-react-core\";\nimport HvWizardContext from \"../WizardContext\";\nimport LoadingContainer from \"./LoadingContainer\";\n\nimport styles from \"./styles\";\n\nconst DRAWER_PERCENTAGE = 0.3;\nconst DRAWER_MIN_WIDTH = 280;\n\nconst HvWizardContent = ({\n classes,\n fixedHeight = false,\n loading = false,\n children,\n tab,\n summaryContent,\n}) => {\n const arrayChildren = React.Children.toArray(children);\n const initialContext = arrayChildren.reduce((acc, child, index) => {\n const invalid = child.props.mustValidate === true ? false : null;\n const valid = invalid ?? (index === 0 || null);\n return {\n ...acc,\n [index]: { ...child.props, form: {}, valid, touched: index === 0 },\n };\n }, {});\n\n const { context, setContext, summary } = React.useContext(HvWizardContext);\n\n const summaryRef = React.useRef(null);\n const resizedRef = React.useRef({ height: 0, width: 0 });\n const [containerRef, sizes] = useElementSize();\n\n const [summaryHeight, setSummaryHeight] = React.useState(0);\n const [summaryWidth, setSummaryWidth] = React.useState(0);\n const [summaryLeft, setSummaryLeft] = React.useState(0);\n const updateSummaryMeasures = React.useCallback((newSizes) => {\n const modalWidth = newSizes.width;\n const drawerWidth = modalWidth * DRAWER_PERCENTAGE;\n setSummaryHeight(newSizes.height);\n setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n\n resizedRef.current = {\n height: newSizes.height,\n width: newSizes.width,\n };\n }, []);\n\n React.useEffect(() => {\n const pageHeight = summaryRef.current?.getBoundingClientRect?.()?.height;\n if (\n (summary && sizes.height !== resizedRef.current.height) ||\n sizes.width !== resizedRef.current.width\n ) {\n updateSummaryMeasures(sizes);\n }\n\n if (pageHeight && sizes.height !== pageHeight) {\n updateSummaryMeasures({\n width: sizes.width,\n height: pageHeight,\n });\n }\n }, [tab, sizes, summary, updateSummaryMeasures]);\n\n React.useEffect(() => {\n setContext(initialContext);\n }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n React.useEffect(() => {\n if (tab && !context[tab]?.touched) {\n const updatedContext = Object.entries(context).reduce(\n (acc, [key, childState]) => ({\n ...acc,\n ...(+key <= tab\n ? { [key]: { ...childState, touched: true, valid: childState.valid ?? true } }\n : { [key]: childState }),\n }),\n {}\n );\n\n setContext(updatedContext);\n }\n }, [tab]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n return (\n <div\n className={classes.summaryRef}\n ref={(el) => {\n containerRef(el);\n summaryRef.current = el;\n }}\n >\n {summary !== null && (\n <div className={classes.summarySticky}>\n <div\n className={classes.summaryContainer}\n style={{\n left: summaryLeft,\n width: summaryWidth,\n height: summaryHeight,\n transform: `translate(${summary ? 0 : translateX}px, 0)`,\n }}\n >\n {summaryContent}\n </div>\n </div>\n )}\n <HvDialogContent\n className={clsx(classes.contentContainer, {\n [classes.fixedHeight]: fixedHeight,\n })}\n indentContent\n >\n <LoadingContainer hidden={!loading}>\n {React.Children.map(arrayChildren, (child, index) => {\n if (index === tab) {\n return React.cloneElement(child, { tab });\n }\n return null;\n })}\n </LoadingContainer>\n </HvDialogContent>\n </div>\n );\n};\n\nHvWizardContent.propTypes = {\n /**\n * Current tab to show.\n */\n tab: PropTypes.number.isRequired,\n /**\n * Tabs to show on the Wizard.\n */\n children: PropTypes.node.isRequired,\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * Style applied to the Wizard content container.\n */\n contentContainer: PropTypes.string,\n /**\n * Style applied to the Wizard to fix its height.\n */\n fixedHeight: PropTypes.string,\n /**\n * Style applied to the summary container around the page content container.\n */\n summaryRef: PropTypes.string,\n /**\n * Style applied to the Summary container to stick it to the top.\n */\n summarySticky: PropTypes.string,\n /**\n * Style applied to the Summary container to position it on the right.\n */\n summaryContainer: PropTypes.string,\n }).isRequired,\n /**\n * Forces minimum height to the component.\n */\n fixedHeight: PropTypes.bool,\n /**\n * Whether the loading animation is shown.\n */\n loading: PropTypes.bool,\n /**\n * The content of the summary.\n */\n summaryContent: PropTypes.node,\n};\n\nexport default withStyles(styles, { name: \"HvWizardContent\" })(HvWizardContent);\n"],"mappings":"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"}
|
|
@@ -9,12 +9,19 @@ const styles = theme => ({
|
|
|
9
9
|
fixedHeight: {
|
|
10
10
|
minHeight: "calc(100vh - 387px)"
|
|
11
11
|
},
|
|
12
|
+
summaryRef: {
|
|
13
|
+
flex: 1,
|
|
14
|
+
overflowY: "auto",
|
|
15
|
+
overflowX: "hidden"
|
|
16
|
+
},
|
|
12
17
|
summarySticky: {
|
|
13
18
|
position: "sticky",
|
|
14
|
-
top: 0
|
|
19
|
+
top: 0,
|
|
20
|
+
zIndex: 1
|
|
15
21
|
},
|
|
16
22
|
summaryContainer: {
|
|
17
23
|
position: "absolute",
|
|
24
|
+
top: 0,
|
|
18
25
|
minWidth: 280,
|
|
19
26
|
boxShadow: theme.hv.shadows[1],
|
|
20
27
|
backgroundColor: theme.hv.palette.atmosphere.atmo1,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","names":["styles","theme","contentContainer","position","padding","marginLeft","minHeight","overflowX","fixedHeight","summarySticky","top","summaryContainer","minWidth","boxShadow","hv","shadows","backgroundColor","palette","atmosphere","atmo1","transition","transitionTimingFunction"
|
|
1
|
+
{"version":3,"file":"styles.js","names":["styles","theme","contentContainer","position","padding","marginLeft","minHeight","overflowX","fixedHeight","summaryRef","flex","overflowY","summarySticky","top","zIndex","summaryContainer","minWidth","boxShadow","hv","shadows","backgroundColor","palette","atmosphere","atmo1","transition","transitionTimingFunction"],"sources":["../../../../src/Wizard/WizardContent/styles.js"],"sourcesContent":["const styles = (theme) => ({\n contentContainer: {\n position: \"relative\",\n padding: 20,\n marginLeft: 0,\n minHeight: 400,\n overflowX: \"hidden\",\n },\n fixedHeight: {\n minHeight: \"calc(100vh - 387px)\",\n },\n summaryRef: {\n flex: 1,\n overflowY: \"auto\",\n overflowX: \"hidden\",\n },\n summarySticky: {\n position: \"sticky\",\n top: 0,\n zIndex: 1,\n },\n summaryContainer: {\n position: \"absolute\",\n top: 0,\n minWidth: 280,\n boxShadow: theme.hv.shadows[1],\n backgroundColor: theme.hv.palette.atmosphere.atmo1,\n transition: \"transform 0.3s\",\n transitionTimingFunction: \"ease-in-out\",\n overflowY: \"scroll\",\n },\n});\n\nexport default styles;\n"],"mappings":"AAAA,MAAMA,MAAM,GAAIC,KAAK,KAAM;EACzBC,gBAAgB,EAAE;IAChBC,QAAQ,EAAE,UAAU;IACpBC,OAAO,EAAE,EAAE;IACXC,UAAU,EAAE,CAAC;IACbC,SAAS,EAAE,GAAG;IACdC,SAAS,EAAE;EACb,CAAC;EACDC,WAAW,EAAE;IACXF,SAAS,EAAE;EACb,CAAC;EACDG,UAAU,EAAE;IACVC,IAAI,EAAE,CAAC;IACPC,SAAS,EAAE,MAAM;IACjBJ,SAAS,EAAE;EACb,CAAC;EACDK,aAAa,EAAE;IACbT,QAAQ,EAAE,QAAQ;IAClBU,GAAG,EAAE,CAAC;IACNC,MAAM,EAAE;EACV,CAAC;EACDC,gBAAgB,EAAE;IAChBZ,QAAQ,EAAE,UAAU;IACpBU,GAAG,EAAE,CAAC;IACNG,QAAQ,EAAE,GAAG;IACbC,SAAS,EAAEhB,KAAK,CAACiB,EAAE,CAACC,OAAO,CAAC,CAAC,CAAC;IAC9BC,eAAe,EAAEnB,KAAK,CAACiB,EAAE,CAACG,OAAO,CAACC,UAAU,CAACC,KAAK;IAClDC,UAAU,EAAE,gBAAgB;IAC5BC,wBAAwB,EAAE,aAAa;IACvCd,SAAS,EAAE;EACb;AACF,CAAC,CAAC;AAEF,eAAeX,MAAM"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardTitle.js","names":["React","PropTypes","withStyles","HvButton","HvDialogTitle","HvGrid","HvTypography","Report","HvStepNavigation","HvWizardContext","styles","switchTabState","state","currentTab","index","valid","touched","HvWizardTitle","title","hasSummary","labels","tab","classes","changeTab","customStep","context","summary","setSummary","useContext","steps","setSteps","useState","useEffect","contextArray","Object","entries","length","updatedSteps","map","childState","name","onClick","toggleSummary","oldSummary","headerContainer","messageContainer","titleContainer","stepContainer","type","stepSize","width","xs","sm","md","lg","buttonWidth","root","rootSummaryButton","propTypes","shape","string","bool","number","isRequired","func","oneOf","xl"],"sources":["../../../../src/Wizard/WizardTitle/WizardTitle.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport { HvButton, HvDialogTitle, HvGrid, HvTypography } from \"@hitachivantara/uikit-react-core\";\nimport { Report } from \"@hitachivantara/uikit-react-icons\";\nimport { HvStepNavigation } from \"@hitachivantara/uikit-react-lab\";\nimport HvWizardContext from \"../WizardContext\";\n\nimport styles from \"./styles\";\n\nconst switchTabState = (state, currentTab, index) => {\n if (index === currentTab) return \"Current\";\n if (state.valid) return \"Completed\";\n if (state.valid === null) return \"Enabled\";\n if (state.touched && state.valid === false) return \"Failed\";\n // \"Disabled\"\n // \"Pending\"\n return \"Enabled\";\n};\n\nconst HvWizardTitle = ({\n title,\n hasSummary = false,\n labels = {},\n tab,\n classes,\n changeTab,\n customStep = {},\n}) => {\n const { context, summary, setSummary } = React.useContext(HvWizardContext);\n const [steps, setSteps] = React.useState([]);\n\n React.useEffect(() => {\n if (summary === null && hasSummary) {\n setSummary(false);\n }\n }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n React.useEffect(() => {\n const contextArray = Object.entries(context);\n if (contextArray.length) {\n const updatedSteps = contextArray.map(([, childState], index) => ({\n title: childState.name ?? `${index + 1}`,\n state: switchTabState(childState, tab, index),\n onClick: () => changeTab(index),\n }));\n\n setSteps(updatedSteps);\n }\n }, [context, tab, changeTab]);\n\n const toggleSummary = () => {\n setSummary((oldSummary) => !oldSummary);\n };\n\n return (\n <HvDialogTitle\n className={classes.headerContainer}\n classes={{ messageContainer: classes.messageContainer }}\n >\n <HvGrid\n container\n justifyContent=\"space-between\"\n alignItems=\"center\"\n className={classes.titleContainer}\n >\n {title && (\n <HvTypography variant=\"xsTitle\" component=\"h3\">\n {title}\n </HvTypography>\n )}\n {!!steps.length && (\n <HvStepNavigation\n className={classes.stepContainer}\n steps={steps}\n type={customStep?.type ?? \"Default\"}\n stepSize={customStep?.stepSize ?? \"XS\"}\n width={customStep?.width ?? { xs: 200, sm: 350, md: 600, lg: 800 }}\n />\n )}\n {hasSummary && (\n <HvButton\n category=\"secondary\"\n className={classes.buttonWidth}\n classes={{ root: classes.rootSummaryButton }}\n onClick={toggleSummary}\n >\n <Report /> {`${labels.summary ?? \"Summary\"}`}\n </HvButton>\n )}\n </HvGrid>\n </HvDialogTitle>\n );\n};\n\nHvWizardTitle.propTypes = {\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the header container.\n */\n headerContainer: PropTypes.string,\n /**\n * Styles applied to override the Dialog Title styles.\n */\n messageContainer: PropTypes.string,\n /**\n * Styles applied to the header content container.\n */\n titleContainer: PropTypes.string,\n /**\n * Styles applied to the Button component to override its width.\n */\n buttonWidth: PropTypes.string,\n /**\n * Styles applied to the Button component to override its right padding.\n */\n rootSummaryButton: PropTypes.string,\n /**\n *\n */\n stepContainer: PropTypes.string,\n }),\n /**\n * Title for the wizard.\n */\n title: PropTypes.string,\n /**\n * Shows the summary button.\n */\n hasSummary: PropTypes.bool,\n /**\n * An object containing all the labels for the wizard header.\n */\n labels: PropTypes.shape({\n /**\n * Summary button label.\n */\n summary: PropTypes.string,\n }),\n /**\n * Current tab to check if it's last page or first to disable previous button and swap between next and submit button.\n */\n tab: PropTypes.number.isRequired,\n /**\n * Function to change the tab when pressing previous and next buttons.\n */\n changeTab: PropTypes.func.isRequired,\n /**\n * Custom object to define type, size and width of the StepNavigation component\n */\n customStep: PropTypes.shape({\n /**\n * Type of step navigation. Values = {\"Simple\", \"Default\"}.\n */\n type: PropTypes.oneOf([\"Simple\", \"Default\"]),\n /**\n * Sets one of the standard sizes of the steps. Values = {\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"}\n */\n stepSize: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n /**\n * Width of the component element on each breakpoint screen resolution.\n */\n width: PropTypes.shape({\n xs: PropTypes.number,\n sm: PropTypes.number,\n md: PropTypes.number,\n lg: PropTypes.number,\n xl: PropTypes.number,\n }),\n }),\n};\n\nexport default withStyles(styles, { name: \"HvWizardTitle\" })(HvWizardTitle);\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"WizardTitle.js","names":["React","PropTypes","withStyles","HvButton","HvDialogTitle","HvGrid","HvTypography","Report","HvStepNavigation","HvWizardContext","styles","switchTabState","state","currentTab","index","valid","touched","HvWizardTitle","title","hasSummary","labels","tab","classes","changeTab","customStep","context","summary","setSummary","useContext","steps","setSteps","useState","useEffect","contextArray","Object","entries","length","updatedSteps","map","childState","name","onClick","toggleSummary","oldSummary","headerContainer","messageContainer","titleContainer","stepContainer","type","stepSize","width","xs","sm","md","lg","buttonWidth","root","rootSummaryButton","propTypes","shape","string","bool","number","isRequired","func","oneOf","xl"],"sources":["../../../../src/Wizard/WizardTitle/WizardTitle.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport { HvButton, HvDialogTitle, HvGrid, HvTypography } from \"@hitachivantara/uikit-react-core\";\nimport { Report } from \"@hitachivantara/uikit-react-icons\";\nimport { HvStepNavigation } from \"@hitachivantara/uikit-react-lab\";\nimport HvWizardContext from \"../WizardContext\";\n\nimport styles from \"./styles\";\n\nconst switchTabState = (state, currentTab, index) => {\n if (index === currentTab) return \"Current\";\n if (state.valid) return \"Completed\";\n if (state.valid === null) return \"Enabled\";\n if (state.touched && state.valid === false) return \"Failed\";\n // \"Disabled\"\n // \"Pending\"\n return \"Enabled\";\n};\n\nconst HvWizardTitle = ({\n title,\n hasSummary = false,\n labels = {},\n tab,\n classes,\n changeTab,\n customStep = {},\n}) => {\n const { context, summary, setSummary } = React.useContext(HvWizardContext);\n const [steps, setSteps] = React.useState([]);\n\n React.useEffect(() => {\n if (summary === null && hasSummary) {\n setSummary(false);\n }\n\n return () => {\n setSummary(false);\n };\n }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n React.useEffect(() => {\n const contextArray = Object.entries(context);\n if (contextArray.length) {\n const updatedSteps = contextArray.map(([, childState], index) => ({\n title: childState.name ?? `${index + 1}`,\n state: switchTabState(childState, tab, index),\n onClick: () => changeTab(index),\n }));\n\n setSteps(updatedSteps);\n }\n }, [context, tab, changeTab]);\n\n const toggleSummary = () => {\n setSummary((oldSummary) => !oldSummary);\n };\n\n return (\n <HvDialogTitle\n className={classes.headerContainer}\n classes={{ messageContainer: classes.messageContainer }}\n >\n <HvGrid\n container\n justifyContent=\"space-between\"\n alignItems=\"center\"\n className={classes.titleContainer}\n >\n {title && (\n <HvTypography variant=\"xsTitle\" component=\"h3\">\n {title}\n </HvTypography>\n )}\n {!!steps.length && (\n <HvStepNavigation\n className={classes.stepContainer}\n steps={steps}\n type={customStep?.type ?? \"Default\"}\n stepSize={customStep?.stepSize ?? \"XS\"}\n width={customStep?.width ?? { xs: 200, sm: 350, md: 600, lg: 800 }}\n />\n )}\n {hasSummary && (\n <HvButton\n category=\"secondary\"\n className={classes.buttonWidth}\n classes={{ root: classes.rootSummaryButton }}\n onClick={toggleSummary}\n >\n <Report /> {`${labels.summary ?? \"Summary\"}`}\n </HvButton>\n )}\n </HvGrid>\n </HvDialogTitle>\n );\n};\n\nHvWizardTitle.propTypes = {\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the header container.\n */\n headerContainer: PropTypes.string,\n /**\n * Styles applied to override the Dialog Title styles.\n */\n messageContainer: PropTypes.string,\n /**\n * Styles applied to the header content container.\n */\n titleContainer: PropTypes.string,\n /**\n * Styles applied to the Button component to override its width.\n */\n buttonWidth: PropTypes.string,\n /**\n * Styles applied to the Button component to override its right padding.\n */\n rootSummaryButton: PropTypes.string,\n /**\n *\n */\n stepContainer: PropTypes.string,\n }),\n /**\n * Title for the wizard.\n */\n title: PropTypes.string,\n /**\n * Shows the summary button.\n */\n hasSummary: PropTypes.bool,\n /**\n * An object containing all the labels for the wizard header.\n */\n labels: PropTypes.shape({\n /**\n * Summary button label.\n */\n summary: PropTypes.string,\n }),\n /**\n * Current tab to check if it's last page or first to disable previous button and swap between next and submit button.\n */\n tab: PropTypes.number.isRequired,\n /**\n * Function to change the tab when pressing previous and next buttons.\n */\n changeTab: PropTypes.func.isRequired,\n /**\n * Custom object to define type, size and width of the StepNavigation component\n */\n customStep: PropTypes.shape({\n /**\n * Type of step navigation. Values = {\"Simple\", \"Default\"}.\n */\n type: PropTypes.oneOf([\"Simple\", \"Default\"]),\n /**\n * Sets one of the standard sizes of the steps. Values = {\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"}\n */\n stepSize: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n /**\n * Width of the component element on each breakpoint screen resolution.\n */\n width: PropTypes.shape({\n xs: PropTypes.number,\n sm: PropTypes.number,\n md: PropTypes.number,\n lg: PropTypes.number,\n xl: PropTypes.number,\n }),\n }),\n};\n\nexport default withStyles(styles, { name: \"HvWizardTitle\" })(HvWizardTitle);\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-lab",
|
|
3
|
-
"version": "4.1.
|
|
3
|
+
"version": "4.1.3",
|
|
4
4
|
"description": "A collection of contributed React components for the Hitachi Vantara's Design System.",
|
|
5
5
|
"homepage": "https://github.com/lumada-design/hv-uikit-react",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"prop-types": "^15.8.1",
|
|
53
53
|
"rc-tooltip": "^5.2.2",
|
|
54
54
|
"react-color": "^2.19.3",
|
|
55
|
-
"
|
|
55
|
+
"usehooks-ts": "^2.9.1"
|
|
56
56
|
},
|
|
57
57
|
"devDependencies": {
|
|
58
58
|
"@types/react": "^17.0.47"
|
|
@@ -63,5 +63,5 @@
|
|
|
63
63
|
"publishConfig": {
|
|
64
64
|
"access": "public"
|
|
65
65
|
},
|
|
66
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "c5516d4272d8dc5237861c1fe11088e1de3dcd48"
|
|
67
67
|
}
|