@hitachivantara/uikit-react-lab
Version:
Contributed React components for the NEXT UI Kit.
97 lines (96 loc) • 3.25 kB
JavaScript
;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const react = require("react");
const uikitReactCore = require("@hitachivantara/uikit-react-core");
const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
const WizardTitle_styles = require("./WizardTitle.styles.cjs");
const WizardContext = require("../WizardContext/WizardContext.cjs");
const StepNavigation = require("../../StepNavigation/StepNavigation.cjs");
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 } = react.useContext(WizardContext.default);
const { classes, cx } = WizardTitle_styles.useClasses(classesProp);
const [steps, setSteps] = react.useState([]);
react.useEffect(() => {
return () => {
setSummary(false);
};
}, [setSummary]);
const toggleSummary = () => {
setSummary((prevValue) => !prevValue);
};
react.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__ */ jsxRuntime.jsxs(
uikitReactCore.HvDialogTitle,
{
className: cx(
classes.root,
classes.headerContainer,
classes.messageContainer,
classes.titleContainer
),
children: [
title && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { variant: "title3", component: "div", children: title }),
!!steps.length && /* @__PURE__ */ jsxRuntime.jsx(
StepNavigation.HvStepNavigation,
{
className: classes.stepContainer,
steps,
type: "Default",
stepSize: "xs",
width: {
xs: 200,
sm: 350,
md: 600,
lg: 800,
xl: 1e3
},
...customStep
}
),
hasSummary && /* @__PURE__ */ jsxRuntime.jsx(
uikitReactCore.HvButton,
{
variant: "secondarySubtle",
className: cx(
classes.summaryButton,
classes.buttonWidth,
classes.rootSummaryButton
),
onClick: toggleSummary,
startIcon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Report, {}),
children: `${labels.summary ?? "Summary"}`
}
)
]
}
);
};
exports.wizardTitleClasses = WizardTitle_styles.staticClasses;
exports.HvWizardTitle = HvWizardTitle;