@hitachivantara/uikit-react-lab
Version:
Contributed React components for the NEXT UI Kit.
99 lines (98 loc) • 3.05 kB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
import { useContext, useState, useEffect } from "react";
import { HvDialogTitle, HvTypography, HvButton } from "@hitachivantara/uikit-react-core";
import { Report } from "@hitachivantara/uikit-react-icons";
import { useClasses } from "./WizardTitle.styles.js";
import { staticClasses } from "./WizardTitle.styles.js";
import HvWizardContext from "../WizardContext/WizardContext.js";
import { HvStepNavigation } from "../../StepNavigation/StepNavigation.js";
const 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";
};
const HvWizardTitle = ({
title,
hasSummary = false,
labels = {},
classes: classesProp,
customStep = {}
}) => {
const { context, setSummary, tab, setTab } = useContext(HvWizardContext);
const { classes, cx } = 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;
const updatedSteps = contextArray.map(
([, childState], index) => ({
title: childState?.["data-title"] ?? childState?.name ?? `${index + 1}`,
state: switchTabState(childState, tab, index),
onClick: () => setTab(index)
})
);
setSteps(updatedSteps);
}, [context, tab, setTab]);
return /* @__PURE__ */ jsxs(
HvDialogTitle,
{
className: cx(
classes.root,
classes.headerContainer,
classes.messageContainer,
classes.titleContainer
),
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: cx(
classes.summaryButton,
classes.buttonWidth,
classes.rootSummaryButton
),
onClick: toggleSummary,
startIcon: /* @__PURE__ */ jsx(Report, {}),
children: `${labels.summary ?? "Summary"}`
}
)
]
}
);
};
export {
HvWizardTitle,
staticClasses as wizardTitleClasses
};