@hitachivantara/uikit-react-lab
Version:
Contributed React components to UI Kit by the community.
78 lines (77 loc) • 2.43 kB
JavaScript
import { HvStepNavigation } from "../../StepNavigation/StepNavigation.js";
import HvWizardContext from "../WizardContext/WizardContext.js";
import { useClasses } from "./WizardTitle.styles.js";
import { useContext, useEffect, useState } from "react";
import { HvButton, HvDialogTitle, HvTypography } from "@hitachivantara/uikit-react-core";
import { jsx, jsxs } from "react/jsx-runtime";
import { Report } from "@hitachivantara/uikit-react-icons";
//#region src/Wizard/WizardTitle/WizardTitle.tsx
var switchTabState = (state, currentTab, index) => {
if (state?.loading) return "Pending";
if (index === currentTab) return "Current";
if (state?.valid) return "Completed";
if (state?.disabled) return "Disabled";
if (state?.valid === null) return "Enabled";
if (state?.touched && state?.valid === false) return "Failed";
return "Enabled";
};
var HvWizardTitle = ({ title, hasSummary = false, labels = {}, classes: classesProp, customStep = {} }) => {
const { context, setSummary, tab, setTab } = useContext(HvWizardContext);
const { classes } = useClasses(classesProp);
const [steps, setSteps] = useState([]);
useEffect(() => {
return () => {
setSummary(false);
};
}, [setSummary]);
const toggleSummary = () => {
setSummary((prevValue) => !prevValue);
};
useEffect(() => {
const contextArray = Object.entries(context);
if (!contextArray.length) return;
setSteps(contextArray.map(([, childState], index) => ({
title: childState?.["data-title"] ?? childState?.name ?? `${index + 1}`,
state: switchTabState(childState, tab, index),
onClick: () => setTab(index)
})));
}, [
context,
tab,
setTab
]);
return /* @__PURE__ */ jsxs(HvDialogTitle, {
className: classes.root,
showIcon: false,
children: [
title && /* @__PURE__ */ jsx(HvTypography, {
variant: "title3",
component: "div",
children: title
}),
!!steps.length && /* @__PURE__ */ jsx(HvStepNavigation, {
className: classes.stepContainer,
steps,
type: "Default",
stepSize: "xs",
width: {
xs: 200,
sm: 350,
md: 600,
lg: 800,
xl: 1e3
},
...customStep
}),
hasSummary && /* @__PURE__ */ jsx(HvButton, {
variant: "secondarySubtle",
className: classes.summaryButton,
onClick: toggleSummary,
startIcon: /* @__PURE__ */ jsx(Report, {}),
children: `${labels.summary ?? "Summary"}`
})
]
});
};
//#endregion
export { HvWizardTitle };