@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
95 lines (94 loc) • 3.51 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const icons = require("../../icons.cjs");
const VerticalNavigationContext = require("../VerticalNavigationContext.cjs");
const Header_styles = require("./Header.styles.cjs");
const Button = require("../../Button/Button.cjs");
const Typography = require("../../Typography/Typography.cjs");
const HvVerticalNavigationHeader = (props) => {
const {
title,
openIcon: openIconProp,
closeIcon: closeIconProp,
collapseButtonProps = {},
backButtonProps = {},
className,
classes: classesProp,
onCollapseButtonClick,
...others
} = uikitReactUtils.useDefaultProps("HvVerticalNavigationHeader", props);
const {
isOpen,
useIcons,
headerTitle,
slider,
navigateToParentHandler,
parentItem
} = React.useContext(VerticalNavigationContext.VerticalNavigationContext);
const { classes, cx } = Header_styles.useClasses(classesProp);
const shouldShowTitle = React.useMemo(
() => !slider || slider && !Array.isArray(parentItem),
[parentItem, slider]
);
if (!shouldShowTitle) return null;
const openIcon = openIconProp ?? /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: useIcons ? "Forwards" : "Menu" });
const closeIcon = closeIconProp ?? /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Backwards" });
const handleClickBack = () => navigateToParentHandler?.();
const { className: backButtonClassName, ...otherBackButtonProps } = backButtonProps;
const {
className: collapseButtonClassName,
classes: collapseButtonClasses,
...otherCollapseButtonProps
} = collapseButtonProps;
return /* @__PURE__ */ jsxRuntime.jsxs(
"div",
{
className: cx(classes.root, { [classes.minimized]: !isOpen }, className),
...others,
children: [
isOpen && headerTitle && slider && /* @__PURE__ */ jsxRuntime.jsx(
Button.HvButton,
{
icon: true,
onClick: handleClickBack,
className: cx(classes.backButton, backButtonClassName),
"aria-label": "Back",
...otherBackButtonProps,
children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Backwards", size: "xs" })
}
),
isOpen && /* @__PURE__ */ jsxRuntime.jsx(
Typography.HvTypography,
{
variant: slider ? "label" : "title3",
className: classes.title,
children: headerTitle && slider ? headerTitle : title
}
),
onCollapseButtonClick && /* @__PURE__ */ jsxRuntime.jsx(
Button.HvButton,
{
icon: true,
onClick: onCollapseButtonClick,
className: cx(classes.collapseButton, collapseButtonClassName),
classes: {
...collapseButtonClasses,
root: cx(
{ [classes.minimized]: !isOpen },
// TODO - v6 don't use minimized classes in two different places
collapseButtonClasses?.root
)
},
...otherCollapseButtonProps,
children: isOpen ? closeIcon : openIcon
}
)
]
}
);
};
exports.verticalNavigationHeaderClasses = Header_styles.staticClasses;
exports.HvVerticalNavigationHeader = HvVerticalNavigationHeader;