@hitachivantara/uikit-react-lab 4.0.4 → 4.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/StepNavigation/StepNavigation.d.ts +12 -10
- package/dist/Wizard/Wizard.d.ts +4 -0
- package/dist/Wizard/Wizard.js +18 -6
- package/dist/Wizard/Wizard.js.map +1 -1
- package/dist/Wizard/WizardContent/WizardContent.d.ts +4 -0
- package/dist/Wizard/WizardContent/WizardContent.js +76 -8
- package/dist/Wizard/WizardContent/WizardContent.js.map +1 -1
- package/dist/Wizard/WizardContent/styles.js +16 -2
- package/dist/Wizard/WizardContent/styles.js.map +1 -1
- package/dist/Wizard/WizardContext/WizardContext.d.ts +4 -6
- package/dist/Wizard/WizardTitle/WizardTitle.js +15 -1
- package/dist/Wizard/WizardTitle/WizardTitle.js.map +1 -1
- package/dist/legacy/StepNavigation/StepNavigation.d.ts +12 -10
- package/dist/legacy/Wizard/Wizard.d.ts +4 -0
- package/dist/legacy/Wizard/Wizard.js +18 -6
- package/dist/legacy/Wizard/Wizard.js.map +1 -1
- package/dist/legacy/Wizard/WizardContent/WizardContent.d.ts +4 -0
- package/dist/legacy/Wizard/WizardContent/WizardContent.js +77 -8
- package/dist/legacy/Wizard/WizardContent/WizardContent.js.map +1 -1
- package/dist/legacy/Wizard/WizardContent/styles.js +16 -2
- package/dist/legacy/Wizard/WizardContent/styles.js.map +1 -1
- package/dist/legacy/Wizard/WizardContext/WizardContext.d.ts +4 -6
- package/dist/legacy/Wizard/WizardTitle/WizardTitle.js +15 -1
- package/dist/legacy/Wizard/WizardTitle/WizardTitle.js.map +1 -1
- package/dist/modern/StepNavigation/StepNavigation.d.ts +12 -10
- package/dist/modern/Wizard/Wizard.d.ts +4 -0
- package/dist/modern/Wizard/Wizard.js +12 -3
- package/dist/modern/Wizard/Wizard.js.map +1 -1
- package/dist/modern/Wizard/WizardContent/WizardContent.d.ts +4 -0
- package/dist/modern/Wizard/WizardContent/WizardContent.js +65 -8
- package/dist/modern/Wizard/WizardContent/WizardContent.js.map +1 -1
- package/dist/modern/Wizard/WizardContent/styles.js +16 -2
- package/dist/modern/Wizard/WizardContent/styles.js.map +1 -1
- package/dist/modern/Wizard/WizardContext/WizardContext.d.ts +4 -6
- package/dist/modern/Wizard/WizardTitle/WizardTitle.js +13 -1
- package/dist/modern/Wizard/WizardTitle/WizardTitle.js.map +1 -1
- package/package.json +5 -4
|
@@ -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","labels","cancel","next","previous","skip","submit","summary","fixedHeight","customStep","others","useState","context","setContext","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 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 [tab, setTab] = React.useState(0);\n\n const contextValue = React.useMemo(\n () => ({\n context,\n setContext,\n }),\n [context,
|
|
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 setTab(0);\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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"}
|
|
@@ -23,6 +23,10 @@ export type HvWizardContentProps = StandardProps<
|
|
|
23
23
|
* Whether the loading animation is shown.
|
|
24
24
|
*/
|
|
25
25
|
loading?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* The content of the summary.
|
|
28
|
+
*/
|
|
29
|
+
summaryContent?: React.ReactNode;
|
|
26
30
|
};
|
|
27
31
|
|
|
28
32
|
export default function HvWizardContent(props: HvWizardContentProps): JSX.Element | null;
|
|
@@ -15,12 +15,17 @@ 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 useResizeAware from "react-resize-aware";
|
|
18
19
|
import clsx from "clsx";
|
|
19
20
|
import { HvDialogContent } from "@hitachivantara/uikit-react-core";
|
|
20
21
|
import HvWizardContext from "../WizardContext";
|
|
21
22
|
import LoadingContainer from "./LoadingContainer";
|
|
22
23
|
import styles from "./styles";
|
|
23
24
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
25
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
26
|
+
var DRAWER_PERCENTAGE = 0.3;
|
|
27
|
+
var MODAL_MARGIN = 20;
|
|
28
|
+
var DRAWER_MIN_WIDTH = 280;
|
|
24
29
|
var HvWizardContent = function HvWizardContent(_ref) {
|
|
25
30
|
var classes = _ref.classes,
|
|
26
31
|
_ref$fixedHeight = _ref.fixedHeight,
|
|
@@ -28,7 +33,8 @@ var HvWizardContent = function HvWizardContent(_ref) {
|
|
|
28
33
|
_ref$loading = _ref.loading,
|
|
29
34
|
loading = _ref$loading === void 0 ? false : _ref$loading,
|
|
30
35
|
children = _ref.children,
|
|
31
|
-
tab = _ref.tab
|
|
36
|
+
tab = _ref.tab,
|
|
37
|
+
summaryContent = _ref.summaryContent;
|
|
32
38
|
var arrayChildren = React.Children.toArray(children);
|
|
33
39
|
var initialContext = arrayChildren.reduce(function (acc, child, index) {
|
|
34
40
|
var invalid = child.props.mustValidate === true ? false : null;
|
|
@@ -41,7 +47,44 @@ var HvWizardContent = function HvWizardContent(_ref) {
|
|
|
41
47
|
}, {});
|
|
42
48
|
var _React$useContext = React.useContext(HvWizardContext),
|
|
43
49
|
context = _React$useContext.context,
|
|
44
|
-
setContext = _React$useContext.setContext
|
|
50
|
+
setContext = _React$useContext.setContext,
|
|
51
|
+
summary = _React$useContext.summary;
|
|
52
|
+
var resizedRef = React.useRef({
|
|
53
|
+
width: 0,
|
|
54
|
+
height: 0
|
|
55
|
+
});
|
|
56
|
+
var _useResizeAware = useResizeAware(),
|
|
57
|
+
_useResizeAware2 = _slicedToArray(_useResizeAware, 2),
|
|
58
|
+
resizeListener = _useResizeAware2[0],
|
|
59
|
+
sizes = _useResizeAware2[1];
|
|
60
|
+
var _React$useState = React.useState(0),
|
|
61
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
62
|
+
summaryHeight = _React$useState2[0],
|
|
63
|
+
setSummaryHeight = _React$useState2[1];
|
|
64
|
+
var _React$useState3 = React.useState(0),
|
|
65
|
+
_React$useState4 = _slicedToArray(_React$useState3, 2),
|
|
66
|
+
summaryWidth = _React$useState4[0],
|
|
67
|
+
setSummaryWidth = _React$useState4[1];
|
|
68
|
+
var _React$useState5 = React.useState(0),
|
|
69
|
+
_React$useState6 = _slicedToArray(_React$useState5, 2),
|
|
70
|
+
summaryLeft = _React$useState6[0],
|
|
71
|
+
setSummaryLeft = _React$useState6[1];
|
|
72
|
+
var updateSummaryMeasures = React.useCallback(function (newSizes) {
|
|
73
|
+
var modalWidth = newSizes.width;
|
|
74
|
+
var drawerWidth = modalWidth * DRAWER_PERCENTAGE;
|
|
75
|
+
setSummaryHeight(newSizes.height);
|
|
76
|
+
setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));
|
|
77
|
+
setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH) - MODAL_MARGIN);
|
|
78
|
+
}, []);
|
|
79
|
+
React.useEffect(function () {
|
|
80
|
+
if (summary && sizes.height !== resizedRef.current.height || sizes.width !== resizedRef.current.width) {
|
|
81
|
+
updateSummaryMeasures(sizes);
|
|
82
|
+
resizedRef.current = {
|
|
83
|
+
height: sizes.height,
|
|
84
|
+
width: sizes.width
|
|
85
|
+
};
|
|
86
|
+
}
|
|
87
|
+
}, [sizes, summary, updateSummaryMeasures]);
|
|
45
88
|
React.useEffect(function () {
|
|
46
89
|
setContext(initialContext);
|
|
47
90
|
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
|
@@ -61,12 +104,26 @@ var HvWizardContent = function HvWizardContent(_ref) {
|
|
|
61
104
|
}, {});
|
|
62
105
|
setContext(updatedContext);
|
|
63
106
|
}
|
|
107
|
+
updateSummaryMeasures(sizes);
|
|
64
108
|
}, [tab]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
65
109
|
|
|
66
|
-
|
|
110
|
+
var translateX = summaryWidth ? summaryWidth + 10 : 450;
|
|
111
|
+
return /*#__PURE__*/_jsxs(HvDialogContent, {
|
|
67
112
|
className: clsx(classes.contentContainer, fixedHeight && classes.fixedHeight),
|
|
68
113
|
indentContent: true,
|
|
69
|
-
children: /*#__PURE__*/_jsx(
|
|
114
|
+
children: [resizeListener, /*#__PURE__*/_jsx("div", {
|
|
115
|
+
className: classes.summarySticky,
|
|
116
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
117
|
+
className: classes.summaryContainer,
|
|
118
|
+
style: {
|
|
119
|
+
left: summaryLeft,
|
|
120
|
+
width: summaryWidth,
|
|
121
|
+
height: summaryHeight,
|
|
122
|
+
transform: "translate(".concat(summary ? 0 : translateX, "px, 0)")
|
|
123
|
+
},
|
|
124
|
+
children: summaryContent
|
|
125
|
+
})
|
|
126
|
+
}), /*#__PURE__*/_jsx(LoadingContainer, {
|
|
70
127
|
hidden: !loading,
|
|
71
128
|
children: React.Children.map(arrayChildren, function (child, index) {
|
|
72
129
|
if (index === tab) {
|
|
@@ -76,7 +133,7 @@ var HvWizardContent = function HvWizardContent(_ref) {
|
|
|
76
133
|
}
|
|
77
134
|
return null;
|
|
78
135
|
})
|
|
79
|
-
})
|
|
136
|
+
})]
|
|
80
137
|
});
|
|
81
138
|
};
|
|
82
139
|
process.env.NODE_ENV !== "production" ? HvWizardContent.propTypes = {
|
|
@@ -93,13 +150,21 @@ process.env.NODE_ENV !== "production" ? HvWizardContent.propTypes = {
|
|
|
93
150
|
*/
|
|
94
151
|
classes: PropTypes.shape({
|
|
95
152
|
/**
|
|
96
|
-
* Style applied to the Wizard content container
|
|
153
|
+
* Style applied to the Wizard content container.
|
|
97
154
|
*/
|
|
98
155
|
contentContainer: PropTypes.string,
|
|
99
156
|
/**
|
|
100
157
|
* Style applied to the Wizard to fix its height.
|
|
101
158
|
*/
|
|
102
|
-
fixedHeight: PropTypes.string
|
|
159
|
+
fixedHeight: PropTypes.string,
|
|
160
|
+
/**
|
|
161
|
+
* Style applied to the Summary container to stick it to the top.
|
|
162
|
+
*/
|
|
163
|
+
summarySticky: PropTypes.string,
|
|
164
|
+
/**
|
|
165
|
+
* Style applied to the Summary container to position it on the right.
|
|
166
|
+
*/
|
|
167
|
+
summaryContainer: PropTypes.string
|
|
103
168
|
}).isRequired,
|
|
104
169
|
/**
|
|
105
170
|
* Forces minimum height to the component.
|
|
@@ -108,7 +173,11 @@ process.env.NODE_ENV !== "production" ? HvWizardContent.propTypes = {
|
|
|
108
173
|
/**
|
|
109
174
|
* Whether the loading animation is shown.
|
|
110
175
|
*/
|
|
111
|
-
loading: PropTypes.bool
|
|
176
|
+
loading: PropTypes.bool,
|
|
177
|
+
/**
|
|
178
|
+
* The content of the summary.
|
|
179
|
+
*/
|
|
180
|
+
summaryContent: PropTypes.node
|
|
112
181
|
} : void 0;
|
|
113
182
|
export default withStyles(styles, {
|
|
114
183
|
name: "HvWizardContent"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardContent.js","names":["React","PropTypes","withStyles","clsx","HvDialogContent","HvWizardContext","LoadingContainer","styles","HvWizardContent","classes","fixedHeight","loading","children","tab","arrayChildren","Children","toArray","initialContext","reduce","acc","child","index","invalid","props","mustValidate","valid","form","touched","useContext","context","setContext","useEffect","updatedContext","Object","entries","key","childState","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 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 HvWizardContent = ({ classes, fixedHeight = false, loading = false, children, tab }) => {\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 } = React.useContext(HvWizardContext);\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 return (\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 );\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 }).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\nexport default withStyles(styles, { name: \"HvWizardContent\" })(HvWizardContent);\n"],"mappings":"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"}
|
|
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,13 +1,27 @@
|
|
|
1
|
-
var styles = function styles() {
|
|
1
|
+
var styles = function styles(theme) {
|
|
2
2
|
return {
|
|
3
3
|
contentContainer: {
|
|
4
4
|
position: "relative",
|
|
5
5
|
padding: 20,
|
|
6
6
|
marginLeft: 0,
|
|
7
|
-
minHeight: 400
|
|
7
|
+
minHeight: 400,
|
|
8
|
+
overflowX: "hidden"
|
|
8
9
|
},
|
|
9
10
|
fixedHeight: {
|
|
10
11
|
minHeight: "calc(100vh - 387px)"
|
|
12
|
+
},
|
|
13
|
+
summarySticky: {
|
|
14
|
+
position: "sticky",
|
|
15
|
+
top: 0
|
|
16
|
+
},
|
|
17
|
+
summaryContainer: {
|
|
18
|
+
position: "absolute",
|
|
19
|
+
minWidth: 280,
|
|
20
|
+
boxShadow: theme.hv.shadows[1],
|
|
21
|
+
backgroundColor: theme.hv.palette.atmosphere.atmo1,
|
|
22
|
+
transition: "transform 0.3s",
|
|
23
|
+
transitionTimingFunction: "ease-in-out",
|
|
24
|
+
overflowY: "scroll"
|
|
11
25
|
}
|
|
12
26
|
};
|
|
13
27
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","names":["styles","contentContainer","position","padding","marginLeft","minHeight","fixedHeight"],"sources":["../../../../src/Wizard/WizardContent/styles.js"],"sourcesContent":["const styles = () => ({\n contentContainer: {\n position: \"relative\",\n padding: 20,\n marginLeft: 0,\n minHeight: 400,\n },\n fixedHeight: {\n minHeight: \"calc(100vh - 387px)\",\n },\n});\n\nexport default styles;\n"],"mappings":"AAAA,IAAMA,MAAM,GAAG,SAATA,MAAM;EAAA,
|
|
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","overflowY"],"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 summarySticky: {\n position: \"sticky\",\n top: 0,\n },\n summaryContainer: {\n position: \"absolute\",\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,aAAa,EAAE;MACbN,QAAQ,EAAE,QAAQ;MAClBO,GAAG,EAAE;IACP,CAAC;IACDC,gBAAgB,EAAE;MAChBR,QAAQ,EAAE,UAAU;MACpBS,QAAQ,EAAE,GAAG;MACbC,SAAS,EAAEZ,KAAK,CAACa,EAAE,CAACC,OAAO,CAAC,CAAC,CAAC;MAC9BC,eAAe,EAAEf,KAAK,CAACa,EAAE,CAACG,OAAO,CAACC,UAAU,CAACC,KAAK;MAClDC,UAAU,EAAE,gBAAgB;MAC5BC,wBAAwB,EAAE,aAAa;MACvCC,SAAS,EAAE;IACb;EACF,CAAC;AAAA,CAAC;AAEF,eAAetB,MAAM"}
|
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
|
|
3
|
-
export type HvWizardContextClassKey = "root";
|
|
4
|
-
|
|
5
3
|
export type HvWizardContextProps = {
|
|
6
4
|
context: any;
|
|
7
|
-
setContext: () => void;
|
|
5
|
+
setContext: (values: any) => void;
|
|
8
6
|
};
|
|
9
7
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
declare const HvWizardContext: React.Context<HvWizardContextProps>;
|
|
9
|
+
|
|
10
|
+
export default HvWizardContext;
|
|
@@ -35,11 +35,19 @@ var HvWizardTitle = function HvWizardTitle(_ref) {
|
|
|
35
35
|
_ref$customStep = _ref.customStep,
|
|
36
36
|
customStep = _ref$customStep === void 0 ? {} : _ref$customStep;
|
|
37
37
|
var _React$useContext = React.useContext(HvWizardContext),
|
|
38
|
-
context = _React$useContext.context
|
|
38
|
+
context = _React$useContext.context,
|
|
39
|
+
summary = _React$useContext.summary,
|
|
40
|
+
setSummary = _React$useContext.setSummary;
|
|
39
41
|
var _React$useState = React.useState([]),
|
|
40
42
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
41
43
|
steps = _React$useState2[0],
|
|
42
44
|
setSteps = _React$useState2[1];
|
|
45
|
+
React.useEffect(function () {
|
|
46
|
+
if (summary === null && hasSummary) {
|
|
47
|
+
setSummary(false);
|
|
48
|
+
}
|
|
49
|
+
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
|
50
|
+
|
|
43
51
|
React.useEffect(function () {
|
|
44
52
|
var contextArray = Object.entries(context);
|
|
45
53
|
if (contextArray.length) {
|
|
@@ -58,6 +66,11 @@ var HvWizardTitle = function HvWizardTitle(_ref) {
|
|
|
58
66
|
setSteps(updatedSteps);
|
|
59
67
|
}
|
|
60
68
|
}, [context, tab, changeTab]);
|
|
69
|
+
var toggleSummary = function toggleSummary() {
|
|
70
|
+
setSummary(function (oldSummary) {
|
|
71
|
+
return !oldSummary;
|
|
72
|
+
});
|
|
73
|
+
};
|
|
61
74
|
return /*#__PURE__*/_jsx(HvDialogTitle, {
|
|
62
75
|
className: classes.headerContainer,
|
|
63
76
|
classes: {
|
|
@@ -89,6 +102,7 @@ var HvWizardTitle = function HvWizardTitle(_ref) {
|
|
|
89
102
|
classes: {
|
|
90
103
|
root: classes.rootSummaryButton
|
|
91
104
|
},
|
|
105
|
+
onClick: toggleSummary,
|
|
92
106
|
children: [_Report || (_Report = /*#__PURE__*/_jsx(Report, {})), " ", "".concat((_labels$summary = labels.summary) !== null && _labels$summary !== void 0 ? _labels$summary : "Summary")]
|
|
93
107
|
})]
|
|
94
108
|
})
|
|
@@ -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","useState","steps","setSteps","useEffect","contextArray","Object","entries","length","updatedSteps","map","childState","name","onClick","headerContainer","messageContainer","titleContainer","stepContainer","type","stepSize","width","xs","sm","md","lg","buttonWidth","root","rootSummaryButton","summary","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 } = React.useContext(HvWizardContext);\n const [steps, setSteps] = React.useState([]);\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 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 >\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 }, []); // 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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"}
|
|
@@ -16,16 +16,18 @@ export type HvStepNavigationProps = StandardProps<
|
|
|
16
16
|
/**
|
|
17
17
|
* Steps to show on the component.
|
|
18
18
|
*/
|
|
19
|
-
steps: Array<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
19
|
+
steps: Array<
|
|
20
|
+
Pick<HvStepProps, "state" | "title" | "onClick" | "className" | "disabled"> & {
|
|
21
|
+
/**
|
|
22
|
+
* Class names to override styles on the separator component after the step.
|
|
23
|
+
*/
|
|
24
|
+
separatorClassName?: string;
|
|
25
|
+
/**
|
|
26
|
+
* Class names to override styles on the title component above the step.
|
|
27
|
+
*/
|
|
28
|
+
titleClassName?: string;
|
|
29
|
+
}
|
|
30
|
+
>;
|
|
29
31
|
/**
|
|
30
32
|
* Sets one of the standard sizes of the steps.
|
|
31
33
|
*/
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
|
-
const _excluded = ["className", "children", "onClose", "handleSubmit", "title", "open", "skippable", "loading", "hasSummary", "labels", "fixedHeight", "customStep"];
|
|
3
|
+
const _excluded = ["className", "children", "onClose", "handleSubmit", "title", "open", "skippable", "loading", "hasSummary", "summaryContent", "labels", "fixedHeight", "customStep"];
|
|
4
4
|
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; }
|
|
5
5
|
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) { _defineProperty(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; }
|
|
6
6
|
import React from "react";
|
|
@@ -25,6 +25,7 @@ const HvWizard = _ref => {
|
|
|
25
25
|
skippable = true,
|
|
26
26
|
loading = false,
|
|
27
27
|
hasSummary = false,
|
|
28
|
+
summaryContent,
|
|
28
29
|
labels = {
|
|
29
30
|
cancel: "Cancel",
|
|
30
31
|
next: "Next",
|
|
@@ -38,11 +39,14 @@ const HvWizard = _ref => {
|
|
|
38
39
|
} = _ref,
|
|
39
40
|
others = _objectWithoutProperties(_ref, _excluded);
|
|
40
41
|
const [context, setContext] = React.useState({});
|
|
42
|
+
const [summary, setSummary] = React.useState(null);
|
|
41
43
|
const [tab, setTab] = React.useState(0);
|
|
42
44
|
const contextValue = React.useMemo(() => ({
|
|
43
45
|
context,
|
|
44
|
-
setContext
|
|
45
|
-
|
|
46
|
+
setContext,
|
|
47
|
+
summary,
|
|
48
|
+
setSummary
|
|
49
|
+
}), [context, summary]);
|
|
46
50
|
React.useEffect(() => {
|
|
47
51
|
if (!open) {
|
|
48
52
|
setTab(0);
|
|
@@ -71,6 +75,7 @@ const HvWizard = _ref => {
|
|
|
71
75
|
loading: loading,
|
|
72
76
|
fixedHeight: fixedHeight,
|
|
73
77
|
tab: tab,
|
|
78
|
+
summaryContent: summaryContent,
|
|
74
79
|
children: children
|
|
75
80
|
}), /*#__PURE__*/_jsx(WizardActions, {
|
|
76
81
|
loading: loading,
|
|
@@ -113,6 +118,10 @@ process.env.NODE_ENV !== "production" ? HvWizard.propTypes = {
|
|
|
113
118
|
* Shows the summary button.
|
|
114
119
|
*/
|
|
115
120
|
hasSummary: PropTypes.bool,
|
|
121
|
+
/**
|
|
122
|
+
* The content of the summary.
|
|
123
|
+
*/
|
|
124
|
+
summaryContent: PropTypes.node,
|
|
116
125
|
/**
|
|
117
126
|
* The content of the component.
|
|
118
127
|
*/
|
|
@@ -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","labels","cancel","next","previous","skip","submit","summary","fixedHeight","customStep","others","context","setContext","useState","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 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 [tab, setTab] = React.useState(0);\n\n const contextValue = React.useMemo(\n () => ({\n context,\n setContext,\n }),\n [context,
|
|
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 setTab(0);\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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"}
|
|
@@ -23,6 +23,10 @@ export type HvWizardContentProps = StandardProps<
|
|
|
23
23
|
* Whether the loading animation is shown.
|
|
24
24
|
*/
|
|
25
25
|
loading?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* The content of the summary.
|
|
28
|
+
*/
|
|
29
|
+
summaryContent?: React.ReactNode;
|
|
26
30
|
};
|
|
27
31
|
|
|
28
32
|
export default function HvWizardContent(props: HvWizardContentProps): JSX.Element | null;
|