@trellixio/roaster-coffee
Version:
Beans' product component library
110 lines (109 loc) • 6.72 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import * as React from 'react';
import { Section } from './components/Section';
import { classNames } from '@/utils';
import { Button } from '../Button';
import { Menu } from './components/Menu';
export const Sidebar = React.forwardRef((props, ref) => {
const [visible, setVisible] = React.useState(false);
const { mobileHeader, header, footer, activePath, onMenuItemClick, items, className } = props;
const [activeSubMenu, setActiveSubMenu] = React.useState({
expanded: true,
pathname: activePath,
});
React.useEffect(() => {
setActiveSubMenu((currentSubMenu) => ({
expanded: currentSubMenu.expanded,
pathname: activePath,
}));
}, [activePath]);
function handleClick(itemId) {
onMenuItemClick === null || onMenuItemClick === void 0 ? void 0 : onMenuItemClick({ itemId });
}
function handleSubMenuExpand(item) {
if (activeSubMenu.expanded) {
const currentItemOrSubMenuItemIsOpen =
// either the parent item is expanded already
item.pathname === activeSubMenu.pathname ||
// or one of its expandable children is selected
(item.subMenu && item.subMenu.some((subMenuItem) => subMenuItem.pathname === activeSubMenu.pathname)) ||
false;
setActiveSubMenu({
expanded: item.subMenu && item.subMenu.length > 0 ? !currentItemOrSubMenuItemIsOpen : false,
pathname: item.pathname,
});
}
else {
setActiveSubMenu({
expanded: !!(item.subMenu && item.subMenu.length > 0),
pathname: item.pathname,
});
}
}
function getMenuItemsProps(item) {
const { pathname, subMenu, icon, label } = item, rest = __rest(item, ["pathname", "subMenu", "icon", "label"]);
const isItemSelected = pathname === activeSubMenu.pathname;
const isExpanded =
// item is expanded and
activeSubMenu.expanded &&
// either the current expandable section is selected
(isItemSelected ||
// or some item in the expandable section of the current item is selected or active
(subMenu && subMenu.some((subMenuItem) => subMenuItem.pathname === activeSubMenu.pathname)) ||
false);
return { isExpanded, pathname, subMenu, icon, label, otherProps: rest };
}
return (React.createElement(React.Fragment, null,
React.createElement("section", { className: "appnav-opener-mobile" },
React.createElement(Button, { variant: "", isIconButton: true, onClick: () => setVisible(!visible) },
React.createElement("i", { className: "fa-regular fa-bars" })),
mobileHeader),
React.createElement("aside", { className: classNames('appnav-container', className, { visible }), ref: ref },
React.createElement("div", { className: "background-overlay", onClick: () => setVisible(!visible) }),
React.createElement("nav", { className: "appnav" },
React.createElement(Section, { className: "header" }, header),
React.createElement(Section, null, items.map((item) => {
if (Array.isArray(item)) {
return (React.createElement(Menu, null, item.map((menuItem) => {
const { isExpanded, pathname, subMenu, icon, label, otherProps } = getMenuItemsProps(menuItem);
return (React.createElement(React.Fragment, null,
React.createElement(Menu.Item, Object.assign({ key: label, icon: icon, active: isExpanded, onClick: () => {
handleClick(pathname);
handleSubMenuExpand(menuItem);
} }, otherProps), label),
subMenu && subMenu.length > 0 && isExpanded && (React.createElement(Menu.Item, { component: React.Fragment },
React.createElement(Menu.SubMenu, { expanded: isExpanded }, subMenu.map((subMenuItem) => {
const { icon: subMenuIcon, pathname: subMenuItemPathname, label: subMenuItemLabel } = subMenuItem, subMenuItemRest = __rest(subMenuItem, ["icon", "pathname", "label"]);
return (React.createElement(Menu.Item, Object.assign({ icon: subMenuIcon, key: subMenuItemPathname, onClick: () => handleClick(subMenuItemPathname) }, subMenuItemRest), subMenuItemLabel));
}))))));
})));
}
const { isExpanded, pathname, subMenu, icon, label, otherProps } = getMenuItemsProps(item);
return (React.createElement(Menu, null,
React.createElement(Menu.Item, Object.assign({ key: label, icon: icon, active: isExpanded, onClick: () => {
handleClick(pathname);
handleSubMenuExpand(item);
} }, otherProps), label),
subMenu && subMenu.length > 0 && isExpanded && (React.createElement(Menu.Item, { component: React.Fragment },
React.createElement(Menu.SubMenu, { expanded: isExpanded }, subMenu.map((subMenuItem) => {
const { icon: subMenuIcon, pathname: subMenuItemPathname, label: subMenuItemLabel } = subMenuItem, subMenuItemRest = __rest(subMenuItem, ["icon", "pathname", "label"]);
return (React.createElement(Menu.Item, Object.assign({ icon: subMenuIcon, key: subMenuItemPathname, onClick: () => handleClick(subMenuItemPathname) }, subMenuItemRest), subMenuItemLabel));
}))))));
})),
React.createElement(Section, { className: "footer" }, footer)))));
});
Sidebar.Section = Section;
Sidebar.Menu = Menu;
Sidebar.displayName = 'Sidebar';