@hitachivantara/uikit-react-lab
Version:
Contributed React components for the NEXT UI Kit.
189 lines (188 loc) • 6.8 kB
JavaScript
;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const styled = require("@emotion/styled");
const uikitReactCore = require("@hitachivantara/uikit-react-core");
const uikitStyles = require("@hitachivantara/uikit-styles");
const StepNavigation_styles = require("./StepNavigation.styles.cjs");
const utils = require("./utils.cjs");
const SimpleNavigation = require("./SimpleNavigation/SimpleNavigation.cjs");
const DefaultNavigation = require("./DefaultNavigation/DefaultNavigation.cjs");
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
const styled__default = /* @__PURE__ */ _interopDefault(styled);
const HvStepNavigation = ({
className,
classes: classesProp,
width,
steps,
stepSize,
showTitles,
type = "Default",
"aria-label": ariaLabel,
...others
}) => {
const { classes, css, cx } = StepNavigation_styles.useClasses(classesProp);
const { activeTheme } = uikitReactCore.useTheme();
const breakpoint = uikitReactCore.useWidth();
const stepSizeKey = stepSize ?? (["xs", "sm"].includes(breakpoint) ? "sm" : "md");
const hasTitles = showTitles ?? !["xs", "sm"].includes(breakpoint);
const styledLi = (containerSize) => styled__default.default("li")({
width: containerSize,
height: containerSize
});
const styledDiv = (containerSize) => styled__default.default("div")({
width: containerSize,
height: containerSize
});
const styledSeparatorElement = (title, separatorClassName, separatorHeight, separatorWidth, backgroundColor) => {
const widthValue = separatorWidth - 2 * Number(
(activeTheme?.stepNavigation.separatorMargin || "0px").replace(
"px",
""
)
);
return /* @__PURE__ */ jsxRuntime.jsx(
"li",
{
"aria-hidden": true,
className: cx(
css({
height: separatorHeight,
width: widthValue,
backgroundColor,
margin: `0 ${uikitStyles.theme.stepNavigation.separatorMargin}`
}),
classes.separator
),
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: separatorClassName })
},
`separator-${title}`
);
};
const drawItems = ({
separatorValues: { minWidth, maxWidth, getColor, height },
stepValues: { minSize, maxSize, StepComponent }
}) => {
const items = steps.reduce(
(acc, { state, title, separatorClassName, ...props }, index) => {
const containerSize = state === "Current" ? maxSize : minSize;
const StepContainer = styledLi(containerSize);
const Step = styledDiv(Math.max(containerSize, 30));
const stepProps = {
size: stepSizeKey,
state,
title,
number: index + 1,
...props
};
const stepElement = /* @__PURE__ */ jsxRuntime.jsx(StepContainer, { className: classes.li, children: hasTitles ? /* @__PURE__ */ jsxRuntime.jsx(
StepComponent,
{
"aria-label": `${title}`,
...stepProps
},
`step-${title}`
) : /* @__PURE__ */ jsxRuntime.jsx(
uikitReactCore.HvTooltip,
{
placement: "bottom",
title: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: `${index + 1}. ${title}` }),
children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Step, { className: classes.li, children: /* @__PURE__ */ jsxRuntime.jsx(StepComponent, { "aria-label": `${title}`, ...stepProps }) }) })
}
) }, `step-${title}`);
if (index < steps.length - 1) {
const separatorElement = styledSeparatorElement(
title,
separatorClassName,
height,
[steps[index + 1].state, state].includes("Current") ? minWidth : maxWidth,
getColor(
steps[index + 1].state === "Disabled" ? "Disabled" : state,
uikitStyles.theme
)
);
acc.push(stepElement, separatorElement);
return acc;
}
acc.push(stepElement);
return acc;
},
[]
);
return /* @__PURE__ */ jsxRuntime.jsx("ol", { className: classes.ol, children: items });
};
const getDynamicValues = (stepsWidth) => {
const themeBreakpoints = activeTheme?.breakpoints.values || {};
const maxWidth = width?.[breakpoint] ?? Math.max(
Number(hasTitles) * (utils.TITLE_WIDTH + utils.TITLE_MARGIN) * steps.length - utils.TITLE_MARGIN,
utils.SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth
);
const next = Object.keys(themeBreakpoints).find(
(_, index, self) => index - 1 >= 0 ? self[index - 1] === breakpoint : false
);
const navWidth = Math.min(
maxWidth,
next ? themeBreakpoints[next] : maxWidth
);
const titleWidth = Number(hasTitles) * Math.ceil((navWidth + utils.TITLE_MARGIN) / steps.length);
const separatorWidth = Number(!hasTitles) * Math.ceil((navWidth - stepsWidth) / (steps.length - 1));
return { width: navWidth, titleWidth, separatorWidth };
};
const getTitles = (getTitleProps) => hasTitles ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.titles, children: steps.map(({ title: rawTitle, state, titleClassName }, index) => {
const {
variant = "label",
title = rawTitle,
titleWidth = 0,
titleDisabled = false
} = getTitleProps?.({
state,
rawTitle,
number: index + 1
}) ?? {};
return /* @__PURE__ */ jsxRuntime.jsx(
uikitReactCore.HvTypography,
{
variant,
className: cx(
css({
textAlign: "center",
width: titleWidth - utils.TITLE_MARGIN,
marginRight: utils.TITLE_MARGIN
}),
titleClassName
),
disabled: titleDisabled,
children: title
},
title
);
}) }) : null;
const StepNavigation = {
Default: DefaultNavigation.HvDefaultNavigation,
Simple: SimpleNavigation.HvSimpleNavigation
}[type];
return /* @__PURE__ */ jsxRuntime.jsx(
StepNavigation,
{
numSteps: steps.length,
stepSize: stepSizeKey,
getTitles,
getDynamicValues,
className: cx(classes.root, className),
...others,
children: ({ stepsWidth, navWidth, ...itemsProps }) => /* @__PURE__ */ jsxRuntime.jsx(
"nav",
{
style: {
width: `${navWidth}px`,
margin: 0
},
"aria-label": ariaLabel,
children: drawItems(itemsProps)
}
)
}
);
};
exports.stepNavigationClasses = StepNavigation_styles.staticClasses;
exports.HvStepNavigation = HvStepNavigation;