@octopusdeploy/design-system-components
Version:
The design systems component library.
83 lines (82 loc) • 4.19 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SideNavBar = SideNavBar;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const type_utils_1 = require("@octopusdeploy/type-utils");
const SideNavBarIconButtonTab_1 = require("./SideNavBarIconButtonTab");
const SideNavBarLinkTab_1 = require("./SideNavBarLinkTab");
function SideNavBar({ topItems, bottomItems, onLinkClicked, onHoveredLinkChanged }) {
return ((0, jsx_runtime_1.jsxs)("div", { "data-amplitude-unmask": true, className: sideNavBarStyles.container, children: [(0, jsx_runtime_1.jsx)("div", { className: sideNavBarStyles.topItems, children: topItems.filter(isItemVisible).map((x) => ((0, jsx_runtime_1.jsx)(SideNavBarItemComponent, { item: x, onLinkClicked: onLinkClicked, onHoveredLinkChanged: onHoveredLinkChanged }, x.label))) }), (0, jsx_runtime_1.jsx)("div", { className: sideNavBarStyles.bottomItems, children: bottomItems.filter(isItemVisible).map((x) => ((0, jsx_runtime_1.jsx)(SideNavBarItemComponent, { item: x, onLinkClicked: onLinkClicked, onHoveredLinkChanged: onHoveredLinkChanged }, getSideNavBarItemReactKey(x)))) })] }));
}
const sideNavBarStyles = {
container: (0, css_1.css)({
display: "flex",
height: "100%",
flexDirection: "column",
alignItems: "stretch",
width: "4.25rem",
paddingTop: design_system_tokens_1.space[16],
paddingBottom: design_system_tokens_1.space[16],
}),
topItems: (0, css_1.css)({
display: "flex",
flex: "1",
flexDirection: "column",
justifyItems: "stretch",
rowGap: design_system_tokens_1.space[6],
}),
bottomItems: (0, css_1.css)({
display: "flex",
justifyItems: "stretch",
flexDirection: "column",
rowGap: design_system_tokens_1.space[4],
}),
};
function getSideNavBarItemReactKey(item) {
if (item.type === "custom") {
return item.key;
}
if (isSideBarIconButton(item)) {
return item.accessibleName;
}
return isSideBarItemTabWithLabel(item) ? item.label : item.accessibleName;
}
function isSideBarIconButton(item) {
return item.type === "icon-button";
}
function isSideBarItemTabWithLabel(item) {
return "label" in item && Boolean(item.label);
}
function SideNavBarItemComponent({ item, onLinkClicked, onHoveredLinkChanged }) {
const { type } = item;
switch (type) {
case "link":
const onClick = (event) => {
onLinkClicked?.(event, item);
};
const handleIsHoveredChanged = (isHovered) => {
onHoveredLinkChanged?.(isHovered ? item : undefined);
};
return isSideBarItemTabWithLabel(item) ? ((0, jsx_runtime_1.jsx)(SideNavBarLinkTab_1.SideNavBarLinkTab, { icon: item.icon, href: item.href, accessibleName: item.accessibleName, showLinkAsActive: item.showLinkAsActive, label: item.label, onClick: onClick, onIsHoveredChanged: handleIsHoveredChanged })) : ((0, jsx_runtime_1.jsx)(SideNavBarLinkTab_1.SideNavBarLinkTab, { icon: item.icon, href: item.href, accessibleName: item.accessibleName, showLinkAsActive: item.showLinkAsActive, onClick: onClick, onIsHoveredChanged: handleIsHoveredChanged }));
case "custom":
return (0, jsx_runtime_1.jsx)(CustomContent, { children: item.content });
case "icon-button":
return (0, jsx_runtime_1.jsx)(SideNavBarIconButtonTab_1.SideNavBarIconButtonTab, { accessibleName: item.accessibleName, icon: item.icon, onClick: item.onClick, ...item.menuAttributes });
default:
(0, type_utils_1.exhaustiveCheck)(type, `Unsupported SideNavBar item type "${type}"`);
}
}
function isItemVisible(item) {
return item.type !== "link" || item.isVisible !== false;
}
function CustomContent({ children }) {
return (0, jsx_runtime_1.jsx)("div", { className: customContentStyles, children: children });
}
const customContentStyles = (0, css_1.css)({
display: "flex",
flex: 1,
justifyContent: "center",
alignItems: "center",
});