@hitachivantara/uikit-react-lab 5.2.0 → 5.2.1
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/cjs/packages/lab/src/components/Wizard/Wizard.cjs +65 -0
- package/dist/cjs/packages/lab/src/components/Wizard/Wizard.cjs.map +1 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardActions/WizardActions.cjs +113 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardActions/WizardActions.cjs.map +1 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardActions/WizardActions.styles.cjs +28 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardActions/WizardActions.styles.cjs.map +1 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardActions/wizardActionsClasses.cjs +8 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardActions/wizardActionsClasses.cjs.map +1 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardContainer/WizardContainer.cjs +34 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardContainer/WizardContainer.cjs.map +1 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardContainer/WizardContainer.styles.cjs +15 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardContainer/WizardContainer.styles.cjs.map +1 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardContainer/wizardContainerClasses.cjs +8 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardContainer/wizardContainerClasses.cjs.map +1 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardContent/LoadingContainer.cjs +38 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardContent/LoadingContainer.cjs.map +1 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardContent/LoadingContainer.styles.cjs +21 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardContent/LoadingContainer.styles.cjs.map +1 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardContent/WizardContent.cjs +141 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardContent/WizardContent.cjs.map +1 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardContent/WizardContent.styles.cjs +37 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardContent/WizardContent.styles.cjs.map +1 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardContent/wizardContentClasses.cjs +8 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardContent/wizardContentClasses.cjs.map +1 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardContext/WizardContext.cjs +42 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardContext/WizardContext.cjs.map +1 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardTitle/WizardTitle.cjs +106 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardTitle/WizardTitle.cjs.map +1 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardTitle/WizardTitle.styles.cjs +33 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardTitle/WizardTitle.styles.cjs.map +1 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardTitle/wizardTitleClasses.cjs +8 -0
- package/dist/cjs/packages/lab/src/components/Wizard/WizardTitle/wizardTitleClasses.cjs.map +1 -0
- package/dist/cjs/packages/lab/src/components/Wizard/wizardClasses.cjs +8 -0
- package/dist/cjs/packages/lab/src/components/Wizard/wizardClasses.cjs.map +1 -0
- package/dist/cjs/packages/lab/src/index.cjs +14 -0
- package/dist/cjs/packages/lab/src/index.cjs.map +1 -1
- package/dist/esm/packages/lab/src/components/Wizard/Wizard.js +65 -0
- package/dist/esm/packages/lab/src/components/Wizard/Wizard.js.map +1 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardActions/WizardActions.js +113 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardActions/WizardActions.js.map +1 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardActions/WizardActions.styles.js +28 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardActions/WizardActions.styles.js.map +1 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardActions/wizardActionsClasses.js +8 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardActions/wizardActionsClasses.js.map +1 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardContainer/WizardContainer.js +34 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardContainer/WizardContainer.js.map +1 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardContainer/WizardContainer.styles.js +15 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardContainer/WizardContainer.styles.js.map +1 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardContainer/wizardContainerClasses.js +8 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardContainer/wizardContainerClasses.js.map +1 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardContent/LoadingContainer.js +38 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardContent/LoadingContainer.js.map +1 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardContent/LoadingContainer.styles.js +21 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardContent/LoadingContainer.styles.js.map +1 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardContent/WizardContent.js +139 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardContent/WizardContent.js.map +1 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardContent/WizardContent.styles.js +37 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardContent/WizardContent.styles.js.map +1 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardContent/wizardContentClasses.js +8 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardContent/wizardContentClasses.js.map +1 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardContext/WizardContext.js +42 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardContext/WizardContext.js.map +1 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardTitle/WizardTitle.js +106 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardTitle/WizardTitle.js.map +1 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardTitle/WizardTitle.styles.js +33 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardTitle/WizardTitle.styles.js.map +1 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardTitle/wizardTitleClasses.js +8 -0
- package/dist/esm/packages/lab/src/components/Wizard/WizardTitle/wizardTitleClasses.js.map +1 -0
- package/dist/esm/packages/lab/src/components/Wizard/wizardClasses.js +8 -0
- package/dist/esm/packages/lab/src/components/Wizard/wizardClasses.js.map +1 -0
- package/dist/esm/packages/lab/src/index.js +15 -1
- package/dist/esm/packages/lab/src/index.js.map +1 -1
- package/dist/types/index.d.ts +172 -1
- package/package.json +3 -3
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { getClasses } from "@hitachivantara/uikit-react-core";
|
|
2
|
+
const classKeys = ["root", "paper", "closeButton"];
|
|
3
|
+
const wizardContainerClasses = getClasses(classKeys, "HvWizardContainer");
|
|
4
|
+
const wizardContainerClasses$1 = wizardContainerClasses;
|
|
5
|
+
export {
|
|
6
|
+
wizardContainerClasses$1 as default
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=wizardContainerClasses.js.map
|
package/dist/esm/packages/lab/src/components/Wizard/WizardContainer/wizardContainerClasses.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"wizardContainerClasses.js","sources":["../../../../../../../../src/components/Wizard/WizardContainer/wizardContainerClasses.ts"],"sourcesContent":["import { getClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport type HvWizardContainerClasses = {\n /** Styles applied to the component root class. */\n root?: string;\n /** Style applied to the component (root). */\n paper?: string;\n /** Style applied to the close button. */\n closeButton?: string;\n};\n\nconst classKeys: string[] = [\"root\", \"paper\", \"closeButton\"];\n\nconst wizardContainerClasses = getClasses<HvWizardContainerClasses>(\n classKeys,\n \"HvWizardContainer\"\n);\n\nexport default wizardContainerClasses;\n"],"names":["classKeys","wizardContainerClasses","getClasses"],"mappings":";AAWA,MAAMA,YAAsB,CAAC,QAAQ,SAAS,aAAa;AAE3D,MAAMC,yBAAyBC,WAC7BF,WACA,mBAAmB;AAGrB,MAAA,2BAAeC;"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { clsx } from "../../../../../../node_modules/clsx/dist/clsx.m.js";
|
|
2
|
+
import { HvLoading } from "@hitachivantara/uikit-react-core";
|
|
3
|
+
import { styles } from "./LoadingContainer.styles.js";
|
|
4
|
+
import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
|
|
5
|
+
const LoadingContainer = ({
|
|
6
|
+
children,
|
|
7
|
+
hidden,
|
|
8
|
+
...others
|
|
9
|
+
}) => {
|
|
10
|
+
var _a, _b, _c;
|
|
11
|
+
return /* @__PURE__ */ jsxs(Fragment, {
|
|
12
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
13
|
+
style: {
|
|
14
|
+
top: 0,
|
|
15
|
+
left: 0,
|
|
16
|
+
height: "100%",
|
|
17
|
+
width: "100%"
|
|
18
|
+
},
|
|
19
|
+
className: clsx((_a = styles) == null ? void 0 : _a.overlay, !hidden && ((_b = styles) == null ? void 0 : _b.blur)),
|
|
20
|
+
children: /* @__PURE__ */ jsx(HvLoading, {
|
|
21
|
+
classes: {
|
|
22
|
+
root: clsx((_c = styles) == null ? void 0 : _c.loading)
|
|
23
|
+
},
|
|
24
|
+
hidden,
|
|
25
|
+
...others
|
|
26
|
+
})
|
|
27
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
28
|
+
style: {
|
|
29
|
+
display: "flow-root"
|
|
30
|
+
},
|
|
31
|
+
children
|
|
32
|
+
})]
|
|
33
|
+
});
|
|
34
|
+
};
|
|
35
|
+
export {
|
|
36
|
+
LoadingContainer
|
|
37
|
+
};
|
|
38
|
+
//# sourceMappingURL=LoadingContainer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LoadingContainer.js","sources":["../../../../../../../../src/components/Wizard/WizardContent/LoadingContainer.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { HvLoading } from \"@hitachivantara/uikit-react-core\";\nimport { styles } from \"./LoadingContainer.styles\";\n\nexport const LoadingContainer = ({ children, hidden, ...others }) => {\n return (\n <>\n <div\n style={{\n top: 0,\n left: 0,\n height: \"100%\",\n width: \"100%\",\n }}\n className={clsx(styles?.overlay, !hidden && styles?.blur)}\n >\n <HvLoading\n classes={{ root: clsx(styles?.loading) }}\n hidden={hidden}\n {...others}\n />\n </div>\n <div style={{ display: \"flow-root\" }}>{children}</div>\n </>\n );\n};\n"],"names":["LoadingContainer","children","hidden","others","_Fragment","_jsx","style","top","left","height","width","className","clsx","styles","overlay","blur","HvLoading","classes","root","loading","display"],"mappings":";;;;AAIO,MAAMA,mBAAmBA,CAAC;AAAA,EAAEC;AAAAA,EAAUC;AAAAA,EAAQ,GAAGC;AAAO,MAAM;;AACnE,8BACEC,UAAA;AAAA,IAAAH,WACEI,oBAAA,OAAA;AAAA,MACEC,OAAO;AAAA,QACLC,KAAK;AAAA,QACLC,MAAM;AAAA,QACNC,QAAQ;AAAA,QACRC,OAAO;AAAA,MACT;AAAA,MACAC,WAAWC,MAAKC,mCAAQC,SAAS,CAACZ,YAAUW,mCAAQE,KAAI;AAAA,MAAEd,8BAEzDe,WAAS;AAAA,QACRC,SAAS;AAAA,UAAEC,MAAMN,MAAKC,mCAAQM,OAAO;AAAA,QAAE;AAAA,QACvCjB;AAAAA,QAAe,GACXC;AAAAA,MAAAA,CAAM;AAAA,IAAA,CACV,GAEJE,oBAAA,OAAA;AAAA,MAAKC,OAAO;AAAA,QAAEc,SAAS;AAAA,MAAY;AAAA,MAAEnB;AAAAA,IAAAA,CAAiB,CAAA;AAAA,EAAA,CACrD;AAEP;"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { hexToRgbA, theme } from "@hitachivantara/uikit-react-core";
|
|
2
|
+
import { alpha } from "@mui/material";
|
|
3
|
+
const styles = {
|
|
4
|
+
loading: {
|
|
5
|
+
width: "100%",
|
|
6
|
+
height: "100%"
|
|
7
|
+
},
|
|
8
|
+
overlay: {
|
|
9
|
+
position: "absolute",
|
|
10
|
+
transition: "background-Color .2s ease",
|
|
11
|
+
zIndex: -1
|
|
12
|
+
},
|
|
13
|
+
blur: {
|
|
14
|
+
backgroundColor: alpha(hexToRgbA(theme.colors.atmo2), 0.8),
|
|
15
|
+
zIndex: theme.zIndices.modal
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
export {
|
|
19
|
+
styles
|
|
20
|
+
};
|
|
21
|
+
//# sourceMappingURL=LoadingContainer.styles.js.map
|
package/dist/esm/packages/lab/src/components/Wizard/WizardContent/LoadingContainer.styles.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LoadingContainer.styles.js","sources":["../../../../../../../../src/components/Wizard/WizardContent/LoadingContainer.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { hexToRgbA, theme } from \"@hitachivantara/uikit-react-core\";\nimport { alpha } from \"@mui/material\";\n\nexport const styles: { [key: string]: CSSInterpolation } = {\n loading: {\n width: \"100%\",\n height: \"100%\",\n },\n overlay: {\n position: \"absolute\",\n transition: \"background-Color .2s ease\",\n zIndex: -1,\n },\n blur: {\n backgroundColor: alpha(hexToRgbA(theme.colors.atmo2), 0.8),\n zIndex: theme.zIndices.modal,\n },\n};\n"],"names":["styles","loading","width","height","overlay","position","transition","zIndex","blur","backgroundColor","alpha","hexToRgbA","theme","colors","atmo2","zIndices","modal"],"mappings":";;AAIO,MAAMA,SAA8C;AAAA,EACzDC,SAAS;AAAA,IACPC,OAAO;AAAA,IACPC,QAAQ;AAAA,EACV;AAAA,EACAC,SAAS;AAAA,IACPC,UAAU;AAAA,IACVC,YAAY;AAAA,IACZC,QAAQ;AAAA,EACV;AAAA,EACAC,MAAM;AAAA,IACJC,iBAAiBC,MAAMC,UAAUC,MAAMC,OAAOC,KAAK,GAAG,GAAG;AAAA,IACzDP,QAAQK,MAAMG,SAASC;AAAAA,EACzB;AACF;"}
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import { ClassNames } from "@emotion/react";
|
|
2
|
+
import { HvDialogContent } from "@hitachivantara/uikit-react-core";
|
|
3
|
+
import { clsx } from "../../../../../../node_modules/clsx/dist/clsx.m.js";
|
|
4
|
+
import wizardContentClasses from "./wizardContentClasses.js";
|
|
5
|
+
import { useElementSize } from "usehooks-ts";
|
|
6
|
+
import { styles } from "./WizardContent.styles.js";
|
|
7
|
+
import React, { useContext, useRef, useState, useCallback, useEffect } from "react";
|
|
8
|
+
import { HvWizardContext } from "../WizardContext/WizardContext.js";
|
|
9
|
+
import { LoadingContainer } from "./LoadingContainer.js";
|
|
10
|
+
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
|
|
11
|
+
const DRAWER_PERCENTAGE = 0.3;
|
|
12
|
+
const DRAWER_MIN_WIDTH = 280;
|
|
13
|
+
const HvWizardContent = ({
|
|
14
|
+
classes,
|
|
15
|
+
fixedHeight = false,
|
|
16
|
+
loading = false,
|
|
17
|
+
children,
|
|
18
|
+
summaryContent
|
|
19
|
+
}) => {
|
|
20
|
+
const {
|
|
21
|
+
context,
|
|
22
|
+
updateContext,
|
|
23
|
+
summary,
|
|
24
|
+
tab
|
|
25
|
+
} = useContext(HvWizardContext);
|
|
26
|
+
const arrayChildren = React.Children.toArray(children);
|
|
27
|
+
const initialContext = arrayChildren.reduce((acc, child, index) => {
|
|
28
|
+
const invalid = "mustValidate" in child.props && child.props.mustValidate === true ? false : null;
|
|
29
|
+
const valid = invalid ?? (index === 0 || null);
|
|
30
|
+
return {
|
|
31
|
+
...acc,
|
|
32
|
+
[index]: {
|
|
33
|
+
...child.props,
|
|
34
|
+
form: {},
|
|
35
|
+
valid,
|
|
36
|
+
touched: index === 0
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
}, {});
|
|
40
|
+
const summaryRef = useRef();
|
|
41
|
+
const resizedRef = useRef({
|
|
42
|
+
height: 0,
|
|
43
|
+
width: 0
|
|
44
|
+
});
|
|
45
|
+
const [containerRef, sizes] = useElementSize();
|
|
46
|
+
const [summaryHeight, setSummaryHeight] = useState(0);
|
|
47
|
+
const [summaryWidth, setSummaryWidth] = useState(0);
|
|
48
|
+
const [summaryLeft, setSummaryLeft] = useState(0);
|
|
49
|
+
const updateSummaryMeasures = useCallback((newSizes) => {
|
|
50
|
+
const modalWidth = newSizes.width;
|
|
51
|
+
const drawerWidth = modalWidth * DRAWER_PERCENTAGE;
|
|
52
|
+
setSummaryHeight(newSizes.height);
|
|
53
|
+
setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));
|
|
54
|
+
setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH));
|
|
55
|
+
resizedRef.current = {
|
|
56
|
+
height: newSizes.height,
|
|
57
|
+
width: newSizes.width
|
|
58
|
+
};
|
|
59
|
+
}, []);
|
|
60
|
+
useEffect(() => {
|
|
61
|
+
var _a, _b, _c;
|
|
62
|
+
const pageHeight = (_c = (_b = (_a = summaryRef.current) == null ? void 0 : _a.getBoundingClientRect) == null ? void 0 : _b.call(_a)) == null ? void 0 : _c.height;
|
|
63
|
+
if (summary && sizes.height !== resizedRef.current.height || sizes.width !== resizedRef.current.width) {
|
|
64
|
+
updateSummaryMeasures(sizes);
|
|
65
|
+
}
|
|
66
|
+
if (pageHeight && sizes.height !== pageHeight) {
|
|
67
|
+
updateSummaryMeasures({
|
|
68
|
+
width: sizes.width,
|
|
69
|
+
height: pageHeight
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
}, [tab, sizes, summary, updateSummaryMeasures]);
|
|
73
|
+
useEffect(() => {
|
|
74
|
+
updateContext(initialContext);
|
|
75
|
+
}, []);
|
|
76
|
+
useEffect(() => {
|
|
77
|
+
var _a;
|
|
78
|
+
if (tab && !((_a = context[tab]) == null ? void 0 : _a.touched)) {
|
|
79
|
+
const updatedContext = Object.entries(context).reduce((acc, [key, childState]) => ({
|
|
80
|
+
...acc,
|
|
81
|
+
...+key <= tab ? {
|
|
82
|
+
[key]: {
|
|
83
|
+
...childState,
|
|
84
|
+
touched: true,
|
|
85
|
+
valid: (childState == null ? void 0 : childState.valid) ?? true
|
|
86
|
+
}
|
|
87
|
+
} : {
|
|
88
|
+
[key]: childState
|
|
89
|
+
}
|
|
90
|
+
}), {});
|
|
91
|
+
updateContext(updatedContext);
|
|
92
|
+
}
|
|
93
|
+
}, [tab]);
|
|
94
|
+
const translateX = summaryWidth ? summaryWidth + 10 : 450;
|
|
95
|
+
return /* @__PURE__ */ jsx(ClassNames, {
|
|
96
|
+
children: ({
|
|
97
|
+
css
|
|
98
|
+
}) => /* @__PURE__ */ jsxs("div", {
|
|
99
|
+
className: clsx(classes == null ? void 0 : classes.summaryRef, wizardContentClasses.summaryRef, css(styles.summaryRef)),
|
|
100
|
+
ref: (el) => {
|
|
101
|
+
containerRef(el);
|
|
102
|
+
if (el) {
|
|
103
|
+
summaryRef.current = el;
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
children: [summary !== null && /* @__PURE__ */ jsx("div", {
|
|
107
|
+
className: clsx(classes == null ? void 0 : classes.summarySticky, wizardContentClasses.summarySticky, css(styles.summarySticky)),
|
|
108
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
109
|
+
className: clsx(classes == null ? void 0 : classes.summaryContainer, wizardContentClasses.summaryContainer, css(styles.summaryContainer)),
|
|
110
|
+
style: {
|
|
111
|
+
left: summaryLeft,
|
|
112
|
+
width: summaryWidth,
|
|
113
|
+
height: summaryHeight,
|
|
114
|
+
transform: `translate(${summary ? 0 : translateX}px, 0)`
|
|
115
|
+
},
|
|
116
|
+
children: summaryContent
|
|
117
|
+
})
|
|
118
|
+
}), /* @__PURE__ */ jsx(HvDialogContent, {
|
|
119
|
+
className: clsx(classes == null ? void 0 : classes.contentContainer, wizardContentClasses.contentContainer, css(styles.contentContainer), fixedHeight && clsx(classes == null ? void 0 : classes.fixedHeight, wizardContentClasses.fixedHeight, css(styles.fixedHeight))),
|
|
120
|
+
indentContent: true,
|
|
121
|
+
children: /* @__PURE__ */ jsx(LoadingContainer, {
|
|
122
|
+
hidden: !loading,
|
|
123
|
+
children: React.Children.map(arrayChildren, (child, index) => {
|
|
124
|
+
if (index === tab) {
|
|
125
|
+
return React.cloneElement(child, {
|
|
126
|
+
tab
|
|
127
|
+
});
|
|
128
|
+
}
|
|
129
|
+
return null;
|
|
130
|
+
})
|
|
131
|
+
})
|
|
132
|
+
})]
|
|
133
|
+
})
|
|
134
|
+
});
|
|
135
|
+
};
|
|
136
|
+
export {
|
|
137
|
+
HvWizardContent
|
|
138
|
+
};
|
|
139
|
+
//# sourceMappingURL=WizardContent.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WizardContent.js","sources":["../../../../../../../../src/components/Wizard/WizardContent/WizardContent.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { HvBaseProps, HvDialogContent } from \"@hitachivantara/uikit-react-core\";\nimport { clsx } from \"clsx\";\nimport wizardContentClasses, {\n HvWizardContentClasses,\n} from \"./wizardContentClasses\";\nimport { useElementSize } from \"usehooks-ts\";\nimport { styles } from \"./WizardContent.styles\";\nimport React, {\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n HvWizardTabs,\n HvWizardTab,\n HvWizardContext,\n} from \"../WizardContext/WizardContext\";\nimport { LoadingContainer } from \"./LoadingContainer\";\n\nexport interface HvWizardContentProps extends HvBaseProps {\n /** Forces minimum height to the component. */\n fixedHeight?: boolean;\n /** Whether the loading animation is shown. */\n loading?: boolean;\n /** The content of the summary. */\n summaryContent?: React.ReactNode;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardContentClasses;\n}\n\ntype ChildElement = React.ReactElement<HvWizardTabs<HvWizardTab>>;\n\nconst DRAWER_PERCENTAGE = 0.3;\nconst DRAWER_MIN_WIDTH = 280;\n\nexport const HvWizardContent = ({\n classes,\n fixedHeight = false,\n loading = false,\n children,\n summaryContent,\n}: HvWizardContentProps) => {\n const { context, updateContext, summary, tab } = useContext(HvWizardContext);\n\n const arrayChildren = React.Children.toArray(children) as ChildElement[];\n\n const initialContext = arrayChildren.reduce(\n (acc, child: ChildElement, index) => {\n const invalid =\n \"mustValidate\" in child.props && child.props.mustValidate === true\n ? false\n : 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 );\n\n const summaryRef = useRef<HTMLElement>();\n const resizedRef = useRef({ height: 0, width: 0 });\n const [containerRef, sizes] = useElementSize();\n\n const [summaryHeight, setSummaryHeight] = useState(0);\n const [summaryWidth, setSummaryWidth] = useState(0);\n const [summaryLeft, setSummaryLeft] = useState(0);\n\n const updateSummaryMeasures = 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 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 useEffect(() => {\n updateContext(initialContext);\n }, []);\n\n useEffect(() => {\n if (tab && !context[tab]?.touched) {\n const updatedContext = Object.entries(context).reduce(\n (acc, [key, childState]) => ({\n ...acc,\n ...(+key <= tab\n ? {\n [key]: {\n ...childState,\n touched: true,\n valid: childState?.valid ?? true,\n },\n }\n : { [key]: childState }),\n }),\n {}\n );\n\n updateContext(updatedContext);\n }\n }, [tab]);\n\n const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n return (\n <ClassNames>\n {({ css }) => (\n <div\n className={clsx(\n classes?.summaryRef,\n wizardContentClasses.summaryRef,\n css(styles.summaryRef)\n )}\n ref={(el) => {\n containerRef(el);\n if (el) {\n summaryRef.current = el;\n }\n }}\n >\n {summary !== null && (\n <div\n className={clsx(\n classes?.summarySticky,\n wizardContentClasses.summarySticky,\n css(styles.summarySticky)\n )}\n >\n <div\n className={clsx(\n classes?.summaryContainer,\n wizardContentClasses.summaryContainer,\n css(styles.summaryContainer)\n )}\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(\n classes?.contentContainer,\n wizardContentClasses.contentContainer,\n css(styles.contentContainer),\n fixedHeight &&\n clsx(\n classes?.fixedHeight,\n wizardContentClasses.fixedHeight,\n css(styles.fixedHeight)\n )\n )}\n indentContent\n >\n <LoadingContainer hidden={!loading}>\n {React.Children.map(arrayChildren, (child, index) => {\n if (index === tab) {\n return React.cloneElement(child as React.ReactElement, {\n tab,\n });\n }\n return null;\n })}\n </LoadingContainer>\n </HvDialogContent>\n </div>\n )}\n </ClassNames>\n );\n};\n"],"names":["DRAWER_PERCENTAGE","DRAWER_MIN_WIDTH","HvWizardContent","classes","fixedHeight","loading","children","summaryContent","context","updateContext","summary","tab","useContext","HvWizardContext","arrayChildren","React","Children","toArray","initialContext","reduce","acc","child","index","invalid","props","mustValidate","valid","form","touched","summaryRef","useRef","resizedRef","height","width","containerRef","sizes","useElementSize","summaryHeight","setSummaryHeight","useState","summaryWidth","setSummaryWidth","summaryLeft","setSummaryLeft","updateSummaryMeasures","useCallback","newSizes","modalWidth","drawerWidth","Math","max","current","useEffect","pageHeight","getBoundingClientRect","updatedContext","Object","entries","key","childState","translateX","ClassNames","css","className","clsx","wizardContentClasses","styles","ref","el","summarySticky","summaryContainer","style","left","transform","_jsx","HvDialogContent","contentContainer","indentContent","LoadingContainer","hidden","map","cloneElement"],"mappings":"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"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { theme } from "@hitachivantara/uikit-react-core";
|
|
2
|
+
const styles = {
|
|
3
|
+
contentContainer: {
|
|
4
|
+
position: "relative",
|
|
5
|
+
padding: 20,
|
|
6
|
+
marginLeft: 0,
|
|
7
|
+
minHeight: 400,
|
|
8
|
+
overflowX: "hidden"
|
|
9
|
+
},
|
|
10
|
+
fixedHeight: {
|
|
11
|
+
minHeight: "calc(100vh - 387px)"
|
|
12
|
+
},
|
|
13
|
+
summaryRef: {
|
|
14
|
+
flex: 1,
|
|
15
|
+
overflowY: "auto",
|
|
16
|
+
overflowX: "hidden"
|
|
17
|
+
},
|
|
18
|
+
summarySticky: {
|
|
19
|
+
position: "sticky",
|
|
20
|
+
top: 0,
|
|
21
|
+
zIndex: 1
|
|
22
|
+
},
|
|
23
|
+
summaryContainer: {
|
|
24
|
+
position: "absolute",
|
|
25
|
+
top: 0,
|
|
26
|
+
minWidth: 280,
|
|
27
|
+
boxShadow: theme.colors.shadow,
|
|
28
|
+
backgroundColor: theme.colors.atmo1,
|
|
29
|
+
transition: "transform 0.3s",
|
|
30
|
+
transitionTimingFunction: "ease-in-out",
|
|
31
|
+
overflowY: "scroll"
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
export {
|
|
35
|
+
styles
|
|
36
|
+
};
|
|
37
|
+
//# sourceMappingURL=WizardContent.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WizardContent.styles.js","sources":["../../../../../../../../src/components/Wizard/WizardContent/WizardContent.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const styles: { [key: string]: CSSInterpolation } = {\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.colors.shadow,\n backgroundColor: theme.colors.atmo1,\n transition: \"transform 0.3s\",\n transitionTimingFunction: \"ease-in-out\",\n overflowY: \"scroll\",\n },\n};\n"],"names":["styles","contentContainer","position","padding","marginLeft","minHeight","overflowX","fixedHeight","summaryRef","flex","overflowY","summarySticky","top","zIndex","summaryContainer","minWidth","boxShadow","theme","colors","shadow","backgroundColor","atmo1","transition","transitionTimingFunction"],"mappings":";AAGO,MAAMA,SAA8C;AAAA,EACzDC,kBAAkB;AAAA,IAChBC,UAAU;AAAA,IACVC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,WAAW;AAAA,IACXC,WAAW;AAAA,EACb;AAAA,EACAC,aAAa;AAAA,IACXF,WAAW;AAAA,EACb;AAAA,EACAG,YAAY;AAAA,IACVC,MAAM;AAAA,IACNC,WAAW;AAAA,IACXJ,WAAW;AAAA,EACb;AAAA,EACAK,eAAe;AAAA,IACbT,UAAU;AAAA,IACVU,KAAK;AAAA,IACLC,QAAQ;AAAA,EACV;AAAA,EACAC,kBAAkB;AAAA,IAChBZ,UAAU;AAAA,IACVU,KAAK;AAAA,IACLG,UAAU;AAAA,IACVC,WAAWC,MAAMC,OAAOC;AAAAA,IACxBC,iBAAiBH,MAAMC,OAAOG;AAAAA,IAC9BC,YAAY;AAAA,IACZC,0BAA0B;AAAA,IAC1Bb,WAAW;AAAA,EACb;AACF;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { getClasses } from "@hitachivantara/uikit-react-core";
|
|
2
|
+
const classKeys = ["contentContainer", "fixedHeight", "summaryRef", "summarySticky", "summaryContainer"];
|
|
3
|
+
const wizardContentClasses = getClasses(classKeys, "HvWizardContent");
|
|
4
|
+
const wizardContentClasses$1 = wizardContentClasses;
|
|
5
|
+
export {
|
|
6
|
+
wizardContentClasses$1 as default
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=wizardContentClasses.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"wizardContentClasses.js","sources":["../../../../../../../../src/components/Wizard/WizardContent/wizardContentClasses.ts"],"sourcesContent":["import { getClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport type HvWizardContentClasses = {\n /** Style applied to the Wizard content container. */\n contentContainer?: string;\n /** Style applied to the Wizard to fix its height. */\n fixedHeight?: string;\n /** Style applied to the summary container around the page content container. */\n summaryRef?: string;\n /** Style applied to the Summary container to stick it to the top. */\n summarySticky?: string;\n /** Style applied to the Summary container to position it on the right. */\n summaryContainer?: string;\n};\n\nconst classKeys: string[] = [\n \"contentContainer\",\n \"fixedHeight\",\n \"summaryRef\",\n \"summarySticky\",\n \"summaryContainer\",\n];\n\nconst wizardContentClasses = getClasses<HvWizardContentClasses>(\n classKeys,\n \"HvWizardContent\"\n);\n\nexport default wizardContentClasses;\n"],"names":["classKeys","wizardContentClasses","getClasses"],"mappings":";AAeA,MAAMA,YAAsB,CAC1B,oBACA,eACA,cACA,iBACA,kBAAkB;AAGpB,MAAMC,uBAAuBC,WAC3BF,WACA,iBAAiB;AAGnB,MAAA,yBAAeC;"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { createContext, useState, useCallback } from "react";
|
|
2
|
+
import { jsx } from "@emotion/react/jsx-runtime";
|
|
3
|
+
const HvWizardContext = createContext({
|
|
4
|
+
context: {},
|
|
5
|
+
updateContext: () => {
|
|
6
|
+
},
|
|
7
|
+
summary: void 0,
|
|
8
|
+
setSummary: ({}) => {
|
|
9
|
+
},
|
|
10
|
+
tab: 0,
|
|
11
|
+
setTab: () => {
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
const HvWizardProvider = ({
|
|
15
|
+
children
|
|
16
|
+
}) => {
|
|
17
|
+
const [context, setContext] = useState({});
|
|
18
|
+
const [summary, setSummary] = useState(void 0);
|
|
19
|
+
const [tab, setTab] = useState(0);
|
|
20
|
+
const updateContext = useCallback((newContext) => {
|
|
21
|
+
if (Object.entries(newContext).length > 0) {
|
|
22
|
+
setContext(newContext);
|
|
23
|
+
}
|
|
24
|
+
}, [setContext]);
|
|
25
|
+
return /* @__PURE__ */ jsx(HvWizardContext.Provider, {
|
|
26
|
+
value: {
|
|
27
|
+
context,
|
|
28
|
+
updateContext,
|
|
29
|
+
summary,
|
|
30
|
+
setSummary,
|
|
31
|
+
tab,
|
|
32
|
+
setTab
|
|
33
|
+
},
|
|
34
|
+
children
|
|
35
|
+
});
|
|
36
|
+
};
|
|
37
|
+
const WizardProvider = HvWizardProvider;
|
|
38
|
+
export {
|
|
39
|
+
HvWizardContext,
|
|
40
|
+
WizardProvider as default
|
|
41
|
+
};
|
|
42
|
+
//# sourceMappingURL=WizardContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WizardContext.js","sources":["../../../../../../../../src/components/Wizard/WizardContext/WizardContext.tsx"],"sourcesContent":["import React, {\n createContext,\n useState,\n Dispatch,\n SetStateAction,\n useCallback,\n} from \"react\";\n\nexport type HvWizardTab = {\n name?: string;\n valid?: boolean;\n mustValidate?: boolean;\n touched?: boolean;\n form?: any;\n children?: React.ReactNode;\n};\n\nexport type HvWizardTabs<T extends HvWizardTab> = {\n [tab in number]?: T;\n};\n\ntype HvWizardContextProp = {\n context: HvWizardTabs<HvWizardTab>;\n updateContext: (values?: HvWizardTabs<HvWizardTab>) => void;\n summary: any;\n setSummary: (oldSummary?: any) => void;\n tab: any;\n setTab: Dispatch<SetStateAction<number>>;\n};\n\nexport const HvWizardContext = createContext<HvWizardContextProp>({\n context: {},\n updateContext: () => {},\n summary: undefined,\n setSummary: ({}) => {},\n tab: 0,\n setTab: () => {},\n});\n\nconst HvWizardProvider = ({ children }) => {\n const [context, setContext] = useState({});\n const [summary, setSummary] = useState(undefined);\n const [tab, setTab] = useState(0);\n\n const updateContext = useCallback(\n (newContext) => {\n if (Object.entries(newContext).length > 0) {\n setContext(newContext);\n }\n },\n [setContext]\n );\n\n return (\n <HvWizardContext.Provider\n value={{\n context,\n updateContext,\n summary,\n setSummary,\n tab,\n setTab,\n }}\n >\n {children}\n </HvWizardContext.Provider>\n );\n};\n\nexport default HvWizardProvider;\n"],"names":["HvWizardContext","createContext","context","updateContext","summary","undefined","setSummary","tab","setTab","HvWizardProvider","children","setContext","useState","useCallback","newContext","Object","entries","length","_jsx","Provider","value"],"mappings":";;AA8BO,MAAMA,kBAAkBC,cAAmC;AAAA,EAChEC,SAAS,CAAC;AAAA,EACVC,eAAeA,MAAM;AAAA,EAAC;AAAA,EACtBC,SAASC;AAAAA,EACTC,YAAYA,CAAC,CAAA,MAAO;AAAA,EAAC;AAAA,EACrBC,KAAK;AAAA,EACLC,QAAQA,MAAM;AAAA,EAAC;AACjB,CAAC;AAED,MAAMC,mBAAmBA,CAAC;AAAA,EAAEC;AAAS,MAAM;AACzC,QAAM,CAACR,SAASS,UAAU,IAAIC,SAAS,CAAE,CAAA;AACzC,QAAM,CAACR,SAASE,UAAU,IAAIM,SAASP,MAAS;AAChD,QAAM,CAACE,KAAKC,MAAM,IAAII,SAAS,CAAC;AAE1BT,QAAAA,gBAAgBU,YACnBC,CAAe,eAAA;AACd,QAAIC,OAAOC,QAAQF,UAAU,EAAEG,SAAS,GAAG;AACzCN,iBAAWG,UAAU;AAAA,IACvB;AAAA,EAAA,GAEF,CAACH,UAAU,CAAC;AAIZO,SAAAA,oBAAClB,gBAAgBmB,UAAQ;AAAA,IACvBC,OAAO;AAAA,MACLlB;AAAAA,MACAC;AAAAA,MACAC;AAAAA,MACAE;AAAAA,MACAC;AAAAA,MACAC;AAAAA,IACF;AAAA,IAAEE;AAAAA,EAAAA,CAGuB;AAE/B;AAEA,MAAA,iBAAeD;"}
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import { ClassNames } from "@emotion/react";
|
|
2
|
+
import { HvDialogTitle, HvGrid, HvTypography, HvButton } from "@hitachivantara/uikit-react-core";
|
|
3
|
+
import { Report } from "@hitachivantara/uikit-react-icons";
|
|
4
|
+
import { clsx } from "../../../../../../node_modules/clsx/dist/clsx.m.js";
|
|
5
|
+
import wizardTitleClasses from "./wizardTitleClasses.js";
|
|
6
|
+
import { styles } from "./WizardTitle.styles.js";
|
|
7
|
+
import { useContext, useState, useEffect } from "react";
|
|
8
|
+
import { HvWizardContext } from "../WizardContext/WizardContext.js";
|
|
9
|
+
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
|
|
10
|
+
import { HvStepNavigation } from "../../StepNavigation/StepNavigation.js";
|
|
11
|
+
const switchTabState = (state, currentTab, index) => {
|
|
12
|
+
if (index === currentTab)
|
|
13
|
+
return "Current";
|
|
14
|
+
if (state.valid)
|
|
15
|
+
return "Completed";
|
|
16
|
+
if (state.valid === null)
|
|
17
|
+
return "Enabled";
|
|
18
|
+
if (state.touched && state.valid === false)
|
|
19
|
+
return "Failed";
|
|
20
|
+
return "Enabled";
|
|
21
|
+
};
|
|
22
|
+
const HvWizardTitle = ({
|
|
23
|
+
title,
|
|
24
|
+
hasSummary = false,
|
|
25
|
+
labels = {},
|
|
26
|
+
classes,
|
|
27
|
+
customStep = {}
|
|
28
|
+
}) => {
|
|
29
|
+
const {
|
|
30
|
+
context,
|
|
31
|
+
summary,
|
|
32
|
+
setSummary,
|
|
33
|
+
tab,
|
|
34
|
+
setTab
|
|
35
|
+
} = useContext(HvWizardContext);
|
|
36
|
+
const [steps, setSteps] = useState([]);
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
if (summary === null && hasSummary) {
|
|
39
|
+
setSummary(false);
|
|
40
|
+
}
|
|
41
|
+
return () => {
|
|
42
|
+
setSummary(false);
|
|
43
|
+
};
|
|
44
|
+
}, []);
|
|
45
|
+
useEffect(() => {
|
|
46
|
+
const contextArray = Object.entries(context);
|
|
47
|
+
if (contextArray.length) {
|
|
48
|
+
const updatedSteps = contextArray.map(([, childState], index) => {
|
|
49
|
+
return {
|
|
50
|
+
title: (childState == null ? void 0 : childState.name) ?? `${index + 1}`,
|
|
51
|
+
state: switchTabState(childState, tab, index),
|
|
52
|
+
onClick: () => setTab(index)
|
|
53
|
+
};
|
|
54
|
+
});
|
|
55
|
+
setSteps(updatedSteps);
|
|
56
|
+
}
|
|
57
|
+
}, [context, tab, setTab]);
|
|
58
|
+
const toggleSummary = () => {
|
|
59
|
+
setSummary((oldSummary) => !oldSummary);
|
|
60
|
+
};
|
|
61
|
+
return /* @__PURE__ */ jsx(ClassNames, {
|
|
62
|
+
children: ({
|
|
63
|
+
css
|
|
64
|
+
}) => /* @__PURE__ */ jsx(HvDialogTitle, {
|
|
65
|
+
className: clsx(classes == null ? void 0 : classes.headerContainer, wizardTitleClasses.headerContainer, css(styles.headerContainer)),
|
|
66
|
+
classes: {
|
|
67
|
+
messageContainer: clsx(classes == null ? void 0 : classes.messageContainer, wizardTitleClasses.messageContainer, css(styles.messageContainer))
|
|
68
|
+
},
|
|
69
|
+
children: /* @__PURE__ */ jsxs(HvGrid, {
|
|
70
|
+
container: true,
|
|
71
|
+
justifyContent: "space-between",
|
|
72
|
+
alignItems: "center",
|
|
73
|
+
className: clsx(classes == null ? void 0 : classes.titleContainer, wizardTitleClasses.titleContainer, css(styles.titleContainer)),
|
|
74
|
+
children: [title && /* @__PURE__ */ jsx(HvTypography, {
|
|
75
|
+
variant: "title3",
|
|
76
|
+
component: "h3",
|
|
77
|
+
children: title
|
|
78
|
+
}), !!steps.length && /* @__PURE__ */ jsx(HvStepNavigation, {
|
|
79
|
+
className: clsx(classes == null ? void 0 : classes.stepContainer, wizardTitleClasses.stepContainer, css(styles.stepContainer)),
|
|
80
|
+
steps,
|
|
81
|
+
type: (customStep == null ? void 0 : customStep.type) ?? "Default",
|
|
82
|
+
stepSize: (customStep == null ? void 0 : customStep.stepSize) ?? "xs",
|
|
83
|
+
width: (customStep == null ? void 0 : customStep.width) ?? {
|
|
84
|
+
xs: 200,
|
|
85
|
+
sm: 350,
|
|
86
|
+
md: 600,
|
|
87
|
+
lg: 800
|
|
88
|
+
}
|
|
89
|
+
}), hasSummary && /* @__PURE__ */ jsx(HvButton, {
|
|
90
|
+
variant: "secondarySubtle",
|
|
91
|
+
className: clsx(classes == null ? void 0 : classes.buttonWidth, wizardTitleClasses.buttonWidth, css(styles.buttonWidth)),
|
|
92
|
+
classes: {
|
|
93
|
+
root: clsx(classes == null ? void 0 : classes.rootSummaryButton, wizardTitleClasses.rootSummaryButton, css(styles.rootSummaryButton))
|
|
94
|
+
},
|
|
95
|
+
onClick: toggleSummary,
|
|
96
|
+
startIcon: /* @__PURE__ */ jsx(Report, {}),
|
|
97
|
+
children: `${labels.summary ?? "Summary"}`
|
|
98
|
+
})]
|
|
99
|
+
})
|
|
100
|
+
})
|
|
101
|
+
});
|
|
102
|
+
};
|
|
103
|
+
export {
|
|
104
|
+
HvWizardTitle
|
|
105
|
+
};
|
|
106
|
+
//# sourceMappingURL=WizardTitle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WizardTitle.js","sources":["../../../../../../../../src/components/Wizard/WizardTitle/WizardTitle.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport {\n HvBaseProps,\n HvButton,\n HvDialogTitle,\n HvGrid,\n HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Report } from \"@hitachivantara/uikit-react-icons\";\nimport { clsx } from \"clsx\";\nimport wizardTitleClasses, { HvWizardTitleClasses } from \"./wizardTitleClasses\";\nimport { styles } from \"./WizardTitle.styles\";\nimport { HvStepNavigation, HvStepNavigationProps } from \"../..\";\nimport { useContext, useEffect, useState } from \"react\";\nimport { HvWizardContext } from \"../WizardContext/WizardContext\";\nimport { HvStepProps } from \"components/StepNavigation/DefaultNavigation/Step/Step\";\n\nexport interface HvWizardTitleProps extends HvBaseProps {\n /** Title for the wizard. */\n title?: string;\n /** Shows the summary button. */\n hasSummary?: boolean;\n /** An object containing all the labels for the wizard header. */\n labels?: {\n /** Summary button label. */\n summary?: string;\n };\n /** Custom object to define type, size and width of the StepNavigation component */\n customStep?: Pick<HvStepNavigationProps, \"type\" | \"stepSize\" | \"width\">;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardTitleClasses;\n}\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\nexport const HvWizardTitle = ({\n title,\n hasSummary = false,\n labels = {},\n classes,\n customStep = {},\n}: HvWizardTitleProps) => {\n const { context, summary, setSummary, tab, setTab } =\n useContext(HvWizardContext);\n\n const [steps, setSteps] = useState<HvStepProps[]>([]);\n\n useEffect(() => {\n if (summary === null && hasSummary) {\n setSummary(false);\n }\n\n return () => {\n setSummary(false);\n };\n }, []);\n\n useEffect(() => {\n const contextArray = Object.entries(context);\n\n if (contextArray.length) {\n const updatedSteps: HvStepProps[] = contextArray.map(\n ([, childState], index) => {\n return {\n title: childState?.name ?? `${index + 1}`,\n state: switchTabState(childState, tab, index),\n onClick: () => setTab(index),\n };\n }\n );\n\n setSteps(updatedSteps);\n }\n }, [context, tab, setTab]);\n\n const toggleSummary = () => {\n setSummary((oldSummary) => !oldSummary);\n };\n\n return (\n <ClassNames>\n {({ css }) => (\n <HvDialogTitle\n className={clsx(\n classes?.headerContainer,\n wizardTitleClasses.headerContainer,\n css(styles.headerContainer)\n )}\n classes={{\n messageContainer: clsx(\n classes?.messageContainer,\n wizardTitleClasses.messageContainer,\n css(styles.messageContainer)\n ),\n }}\n >\n <HvGrid\n container\n justifyContent=\"space-between\"\n alignItems=\"center\"\n className={clsx(\n classes?.titleContainer,\n wizardTitleClasses.titleContainer,\n css(styles.titleContainer)\n )}\n >\n {title && (\n <HvTypography variant=\"title3\" component=\"h3\">\n {title}\n </HvTypography>\n )}\n {!!steps.length && (\n <HvStepNavigation\n className={clsx(\n classes?.stepContainer,\n wizardTitleClasses.stepContainer,\n css(styles.stepContainer)\n )}\n steps={steps}\n type={customStep?.type ?? \"Default\"}\n stepSize={customStep?.stepSize ?? \"xs\"}\n width={\n customStep?.width ?? { xs: 200, sm: 350, md: 600, lg: 800 }\n }\n />\n )}\n {hasSummary && (\n <HvButton\n variant=\"secondarySubtle\"\n className={clsx(\n classes?.buttonWidth,\n wizardTitleClasses.buttonWidth,\n css(styles.buttonWidth)\n )}\n classes={{\n root: clsx(\n classes?.rootSummaryButton,\n wizardTitleClasses.rootSummaryButton,\n css(styles.rootSummaryButton)\n ),\n }}\n onClick={toggleSummary}\n startIcon={<Report />}\n >\n {`${labels.summary ?? \"Summary\"}`}\n </HvButton>\n )}\n </HvGrid>\n </HvDialogTitle>\n )}\n </ClassNames>\n );\n};\n"],"names":["switchTabState","state","currentTab","index","valid","touched","HvWizardTitle","title","hasSummary","labels","classes","customStep","context","summary","setSummary","tab","setTab","useContext","HvWizardContext","steps","setSteps","useState","useEffect","contextArray","Object","entries","length","updatedSteps","map","childState","name","onClick","toggleSummary","oldSummary","ClassNames","children","css","HvDialogTitle","className","clsx","headerContainer","wizardTitleClasses","styles","messageContainer","HvGrid","container","justifyContent","alignItems","titleContainer","_jsx","HvTypography","variant","component","HvStepNavigation","stepContainer","type","stepSize","width","xs","sm","md","lg","HvButton","buttonWidth","root","rootSummaryButton","startIcon","Report"],"mappings":";;;;;;;;;;AAiCA,MAAMA,iBAAiBA,CAACC,OAAOC,YAAYC,UAAU;AACnD,MAAIA,UAAUD;AAAmB,WAAA;AACjC,MAAID,MAAMG;AAAc,WAAA;AACxB,MAAIH,MAAMG,UAAU;AAAa,WAAA;AAC7BH,MAAAA,MAAMI,WAAWJ,MAAMG,UAAU;AAAc,WAAA;AAG5C,SAAA;AACT;AAEO,MAAME,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC,aAAa;AAAA,EACbC,SAAS,CAAC;AAAA,EACVC;AAAAA,EACAC,aAAa,CAAC;AACI,MAAM;AAClB,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,IAASC;AAAAA,IAAYC;AAAAA,IAAKC;AAAAA,EAAAA,IACzCC,WAAWC,eAAe;AAE5B,QAAM,CAACC,OAAOC,QAAQ,IAAIC,SAAwB,CAAE,CAAA;AAEpDC,YAAU,MAAM;AACVT,QAAAA,YAAY,QAAQL,YAAY;AAClCM,iBAAW,KAAK;AAAA,IAClB;AAEA,WAAO,MAAM;AACXA,iBAAW,KAAK;AAAA,IAAA;AAAA,EAEpB,GAAG,CAAE,CAAA;AAELQ,YAAU,MAAM;AACRC,UAAAA,eAAeC,OAAOC,QAAQb,OAAO;AAE3C,QAAIW,aAAaG,QAAQ;AACjBC,YAAAA,eAA8BJ,aAAaK,IAC/C,CAAC,CAAGC,EAAAA,UAAU,GAAG1B,UAAU;AAClB,eAAA;AAAA,UACLI,QAAOsB,yCAAYC,SAAS,GAAE3B,QAAQ;AAAA,UACtCF,OAAOD,eAAe6B,YAAYd,KAAKZ,KAAK;AAAA,UAC5C4B,SAASA,MAAMf,OAAOb,KAAK;AAAA,QAAA;AAAA,MAC7B,CACD;AAGHiB,eAASO,YAAY;AAAA,IACvB;AAAA,EACC,GAAA,CAACf,SAASG,KAAKC,MAAM,CAAC;AAEzB,QAAMgB,gBAAgBA,MAAM;AACdC,eAAAA,CAAAA,eAAe,CAACA,UAAU;AAAA,EAAA;AAGxC,6BACGC,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,IAAAA,0BACDC,eAAa;AAAA,MACZC,WAAWC,KACT7B,mCAAS8B,iBACTC,mBAAmBD,iBACnBJ,IAAIM,OAAOF,eAAe,CAAC;AAAA,MAE7B9B,SAAS;AAAA,QACPiC,kBAAkBJ,KAChB7B,mCAASiC,kBACTF,mBAAmBE,kBACnBP,IAAIM,OAAOC,gBAAgB,CAAC;AAAA,MAEhC;AAAA,MAAER,+BAEDS,QAAM;AAAA,QACLC,WAAS;AAAA,QACTC,gBAAe;AAAA,QACfC,YAAW;AAAA,QACXT,WAAWC,KACT7B,mCAASsC,gBACTP,mBAAmBO,gBACnBZ,IAAIM,OAAOM,cAAc,CAAC;AAAA,QAC1Bb,UAED5B,CAAAA,SACC0C,oBAACC,cAAY;AAAA,UAACC,SAAQ;AAAA,UAASC,WAAU;AAAA,UAAIjB,UAC1C5B;AAAAA,QAEJ,CAAA,GACA,CAAC,CAACY,MAAMO,8BACN2B,kBAAgB;AAAA,UACff,WAAWC,KACT7B,mCAAS4C,eACTb,mBAAmBa,eACnBlB,IAAIM,OAAOY,aAAa,CAAC;AAAA,UAE3BnC;AAAAA,UACAoC,OAAM5C,yCAAY4C,SAAQ;AAAA,UAC1BC,WAAU7C,yCAAY6C,aAAY;AAAA,UAClCC,QACE9C,yCAAY8C,UAAS;AAAA,YAAEC,IAAI;AAAA,YAAKC,IAAI;AAAA,YAAKC,IAAI;AAAA,YAAKC,IAAI;AAAA,UAAI;AAAA,QAAA,CAC3D,GAGJrD,cACCyC,oBAACa,UAAQ;AAAA,UACPX,SAAQ;AAAA,UACRb,WAAWC,KACT7B,mCAASqD,aACTtB,mBAAmBsB,aACnB3B,IAAIM,OAAOqB,WAAW,CAAC;AAAA,UAEzBrD,SAAS;AAAA,YACPsD,MAAMzB,KACJ7B,mCAASuD,mBACTxB,mBAAmBwB,mBACnB7B,IAAIM,OAAOuB,iBAAiB,CAAC;AAAA,UAEjC;AAAA,UACAlC,SAASC;AAAAA,UACTkC,WAAWjB,oBAACkB,QAAU,EAAA;AAAA,UAAAhC,UAEpB,GAAE1B,OAAOI,WAAW;AAAA,QAAA,CAEzB,CAAA;AAAA,MAAA,CAAA;AAAA,IAAA,CACM;AAAA,EAAA,CAGF;AAEjB;"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { theme } from "@hitachivantara/uikit-react-core";
|
|
2
|
+
const styles = {
|
|
3
|
+
messageContainer: {
|
|
4
|
+
"& > div": {
|
|
5
|
+
width: "100%"
|
|
6
|
+
}
|
|
7
|
+
},
|
|
8
|
+
titleContainer: {
|
|
9
|
+
margin: 0,
|
|
10
|
+
width: "100%"
|
|
11
|
+
},
|
|
12
|
+
buttonWidth: {
|
|
13
|
+
width: 120
|
|
14
|
+
},
|
|
15
|
+
rootSummaryButton: {
|
|
16
|
+
paddingRight: 18
|
|
17
|
+
},
|
|
18
|
+
headerContainer: {
|
|
19
|
+
backgroundColor: theme.colors.atmo2,
|
|
20
|
+
"& h6": {
|
|
21
|
+
fontSize: "16px",
|
|
22
|
+
fontWeight: "bold",
|
|
23
|
+
letterSpacing: 0
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
stepContainer: {
|
|
27
|
+
margin: "auto"
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
export {
|
|
31
|
+
styles
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=WizardTitle.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WizardTitle.styles.js","sources":["../../../../../../../../src/components/Wizard/WizardTitle/WizardTitle.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const styles: { [key: string]: CSSInterpolation } = {\n messageContainer: {\n \"& > div\": {\n width: \"100%\",\n },\n },\n titleContainer: {\n margin: 0,\n width: \"100%\",\n },\n buttonWidth: {\n width: 120,\n },\n rootSummaryButton: {\n paddingRight: 18,\n },\n headerContainer: {\n backgroundColor: theme.colors.atmo2,\n \"& h6\": {\n fontSize: \"16px\",\n fontWeight: \"bold\",\n letterSpacing: 0,\n },\n },\n stepContainer: {\n margin: \"auto\",\n },\n};\n"],"names":["styles","messageContainer","width","titleContainer","margin","buttonWidth","rootSummaryButton","paddingRight","headerContainer","backgroundColor","theme","colors","atmo2","fontSize","fontWeight","letterSpacing","stepContainer"],"mappings":";AAGO,MAAMA,SAA8C;AAAA,EACzDC,kBAAkB;AAAA,IAChB,WAAW;AAAA,MACTC,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACAC,gBAAgB;AAAA,IACdC,QAAQ;AAAA,IACRF,OAAO;AAAA,EACT;AAAA,EACAG,aAAa;AAAA,IACXH,OAAO;AAAA,EACT;AAAA,EACAI,mBAAmB;AAAA,IACjBC,cAAc;AAAA,EAChB;AAAA,EACAC,iBAAiB;AAAA,IACfC,iBAAiBC,MAAMC,OAAOC;AAAAA,IAC9B,QAAQ;AAAA,MACNC,UAAU;AAAA,MACVC,YAAY;AAAA,MACZC,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACAC,eAAe;AAAA,IACbZ,QAAQ;AAAA,EACV;AACF;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { getClasses } from "@hitachivantara/uikit-react-core";
|
|
2
|
+
const classKeys = ["headerContainer", "messageContainer", "titleContainer", "buttonWidth", "rootSummaryButton", "stepContainer"];
|
|
3
|
+
const wizardTitleClasses = getClasses(classKeys, "HvWizardTitle");
|
|
4
|
+
const wizardTitleClasses$1 = wizardTitleClasses;
|
|
5
|
+
export {
|
|
6
|
+
wizardTitleClasses$1 as default
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=wizardTitleClasses.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"wizardTitleClasses.js","sources":["../../../../../../../../src/components/Wizard/WizardTitle/wizardTitleClasses.ts"],"sourcesContent":["import { getClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport type HvWizardTitleClasses = {\n /** Styles applied to the header container. */\n headerContainer?: string;\n /** Styles applied to override the Dialog Title styles. */\n messageContainer?: string;\n /** Styles applied to the header content container. */\n titleContainer?: string;\n /** Styles applied to the Button component to override its width. */\n buttonWidth?: string;\n /** Styles applied to the Button component to override its right padding. */\n rootSummaryButton?: string;\n /** Styles applies to the step container. */\n stepContainer?: string;\n};\n\nconst classKeys: string[] = [\n \"headerContainer\",\n \"messageContainer\",\n \"titleContainer\",\n \"buttonWidth\",\n \"rootSummaryButton\",\n \"stepContainer\",\n];\n\nconst wizardTitleClasses = getClasses<HvWizardTitleClasses>(\n classKeys,\n \"HvWizardTitle\"\n);\n\nexport default wizardTitleClasses;\n"],"names":["classKeys","wizardTitleClasses","getClasses"],"mappings":";AAiBA,MAAMA,YAAsB,CAC1B,mBACA,oBACA,kBACA,eACA,qBACA,eAAe;AAGjB,MAAMC,qBAAqBC,WACzBF,WACA,eAAe;AAGjB,MAAA,uBAAeC;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { getClasses } from "@hitachivantara/uikit-react-core";
|
|
2
|
+
const classKeys = ["root"];
|
|
3
|
+
const wizardClasses = getClasses(classKeys, "HvWizard");
|
|
4
|
+
const wizardClasses$1 = wizardClasses;
|
|
5
|
+
export {
|
|
6
|
+
wizardClasses$1 as default
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=wizardClasses.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"wizardClasses.js","sources":["../../../../../../../src/components/Wizard/wizardClasses.ts"],"sourcesContent":["import { getClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport type HvWizardClasses = {\n /** Styles applied to the component root class. */\n root?: string;\n};\n\nconst classKeys: string[] = [\"root\"];\n\nconst wizardClasses = getClasses<HvWizardClasses>(classKeys, \"HvWizard\");\n\nexport default wizardClasses;\n"],"names":["classKeys","wizardClasses","getClasses"],"mappings":";AAOA,MAAMA,YAAsB,CAAC,MAAM;AAEnC,MAAMC,gBAAgBC,WAA4BF,WAAW,UAAU;AAEvE,MAAA,kBAAeC;"}
|
|
@@ -1,5 +1,19 @@
|
|
|
1
|
+
import { default as default2 } from "./components/StepNavigation/stepNavigationClasses.js";
|
|
1
2
|
import { HvStepNavigation } from "./components/StepNavigation/StepNavigation.js";
|
|
3
|
+
import { default as default3 } from "./components/Wizard/wizardClasses.js";
|
|
4
|
+
import { HvWizardContainer } from "./components/Wizard/WizardContainer/WizardContainer.js";
|
|
5
|
+
import { HvWizardTitle } from "./components/Wizard/WizardTitle/WizardTitle.js";
|
|
6
|
+
import { HvWizardContent } from "./components/Wizard/WizardContent/WizardContent.js";
|
|
7
|
+
import { HvWizardActions } from "./components/Wizard/WizardActions/WizardActions.js";
|
|
8
|
+
import { HvWizard } from "./components/Wizard/Wizard.js";
|
|
2
9
|
export {
|
|
3
|
-
HvStepNavigation
|
|
10
|
+
HvStepNavigation,
|
|
11
|
+
HvWizard,
|
|
12
|
+
HvWizardActions,
|
|
13
|
+
HvWizardContainer,
|
|
14
|
+
HvWizardContent,
|
|
15
|
+
HvWizardTitle,
|
|
16
|
+
default2 as stepNavigationClasses,
|
|
17
|
+
default3 as wizardClasses
|
|
4
18
|
};
|
|
5
19
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|