@churchapps/apphelper
Version:
Library of helper functions for React and NextJS ChurchApps
20 lines • 2.28 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Badge, Icon, IconButton, ListItemButton, ListItemIcon, ListItemText, Tooltip } from "@mui/material";
export const NavItem = (props) => {
const getIcon = () => {
if (props.badgeCount && props.badgeCount > 0)
return _jsx(Badge, { badgeContent: props.badgeCount, color: "error", children: _jsx(Icon, { children: props.icon }) });
else
return _jsx(Icon, { children: props.icon });
};
const getLinkContents = () => (_jsxs(ListItemButton, { "data-testid": `nav-item-${props.label?.toLowerCase()?.replace(/\s+/g, '-')}`, children: [_jsx(Tooltip, { title: props.label || "", arrow: true, placement: "right", children: _jsx(ListItemIcon, { sx: { minWidth: "40px" }, children: getIcon() }) }), _jsx(ListItemText, { primary: props.label }), props?.deleteIcon
? (_jsx(Tooltip, { title: props.deleteLabel || "", arrow: true, placement: "left", children: _jsx(IconButton, { onClick: props.deleteFunction ? (e) => { e.stopPropagation(); e.preventDefault(); props.deleteFunction(); } : null, sx: { color: "#f7a9a9" }, size: "small", "aria-label": props.deleteLabel || "Delete item", "data-testid": "nav-item-delete", children: _jsx(Icon, { sx: { fontSize: 19 }, children: "delete" }) }) }))
: ""] }));
if (props.external)
return (_jsx("a", { href: props.url, target: props.target, rel: "noreferrer", style: { textDecoration: "none" }, className: (props.selected) ? "selected" : "", onClick: (e) => { e.preventDefault(); props.onClick ? props.onClick() : window.location.href = props.url; }, children: getLinkContents() }));
else
return (_jsx("a", { href: "about:blank", style: { textDecoration: "none" }, className: (props.selected) ? "selected" : "", onClick: (e) => { e.preventDefault(); props.onClick ? props.onClick() : props.onNavigate(props.url); }, children: getLinkContents() }));
//else return (<StyledNavLink to={props.url || "about:blank"} target={props.target} className={(props.selected) ? "selected" : ""} onClick={(e) => { e.preventDefault(); (props.onClick) ? props.onClick() : props.onNavigate(props.url)}}>{getLinkContents()}</StyledNavLink>)
};
//# sourceMappingURL=NavItem.js.map