@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
74 lines (73 loc) • 2.62 kB
JavaScript
import { HvTypography } from "../Typography/Typography.js";
import { HvListContainer } from "../ListContainer/ListContainer.js";
import { HvPanel } from "../Panel/Panel.js";
import { HvOverflowTooltip } from "../OverflowTooltip/OverflowTooltip.js";
import { HvAppSwitcherAction } from "./Action/Action.js";
import { useClasses } from "./AppSwitcher.styles.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { forwardRef, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/AppSwitcher/AppSwitcher.tsx
/**
* An app switcher lets users quickly navigate between different applications or modules within a platform.
*/
var HvAppSwitcher = forwardRef(function HvAppSwitcher(props, ref) {
const { className, classes: classesProp, layout = "single", title, applications, onActionClickedCallback = () => {}, isActionSelectedCallback = () => false, header, footer, isOpen, ...others } = useDefaultProps("HvAppSwitcher", props);
const { classes, cx } = useClasses(classesProp);
const panelActions = useMemo(() => applications?.map((application) => {
if (application.name) return /* @__PURE__ */ jsx(HvAppSwitcherAction, {
application,
onClickCallback: onActionClickedCallback,
isSelectedCallback: isActionSelectedCallback,
classes: {
root: classes.item,
selected: classes.itemSelected,
disabled: classes.itemDisabled,
typography: classes.itemTrigger,
icon: classes.itemIcon,
title: classes.itemTitle,
iconInfo: classes.itemInfoIcon
}
}, application.id || `${application.name}_${application.url}`);
}), [
applications,
classes,
isActionSelectedCallback,
onActionClickedCallback
]);
return /* @__PURE__ */ jsxs(HvPanel, {
ref,
className: cx(classes.root, classes[layout], {
[classes.open]: !!isOpen,
[classes.closed]: isOpen === false
}, className),
...others,
children: [
header && /* @__PURE__ */ jsx(HvTypography, {
component: "div",
variant: "label",
className: classes.title,
children: header
}) || title && /* @__PURE__ */ jsx(HvOverflowTooltip, {
className: classes.title,
data: title,
placement: "top-start",
classes: { tooltipAnchorParagraph: classes.titleAnchor }
}),
/* @__PURE__ */ jsx(HvListContainer, {
condensed: true,
disableGutters: true,
className: classes.actionsContainer,
children: panelActions
}),
footer && /* @__PURE__ */ jsx(HvTypography, {
component: "div",
variant: "label",
className: classes.footerContainer,
children: footer
})
]
});
});
//#endregion
export { HvAppSwitcher };