mui-nav-menu
Version:
Navigation menu component based on material ui
153 lines (152 loc) • 6.13 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = require("react");
const jsx_runtime_1 = require("react/jsx-runtime");
const icons_material_1 = require("@mui/icons-material");
const material_1 = require("@mui/material");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const react_2 = require("react");
const mui_1 = require("tss-react/mui");
const MenuContext_1 = require("./contexts/MenuContext");
const useStyle = (0, mui_1.makeStyles)()((theme) => ({
root: {
whiteSpace: "normal",
wordBreak: "break-all",
"&.Mui-selected": {
"&.isNested:not(.isMini)": {
color: theme.palette.primary.main,
fontWeight: "bold",
"&:not(:hover)": {
background: "none",
},
},
},
"&.isMini": {
"& .MuiListItemIcon-root": {
marginRight: 0,
},
},
},
noWrap: {
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
},
label: {
transition: "transform 300ms ease 0s, opacity 300ms ease 0s",
opacity: 1,
transform: "translate3d(0rem, 0, 0)",
},
icon: {
transition: "transform 300ms ease 0s, opacity 300ms ease 0s",
opacity: 1,
},
labelMini: {
opacity: 0,
overflow: "hidden",
transform: "translate3d(-1.5625rem, 0, 0)",
},
iconMini: {
opacity: 0,
},
tooltip: {
"& .MuiTooltip-tooltip": {
fontSize: 14,
"&.MuiTooltip-tooltipPlacementRight": {
margin: "0px 25px !important",
},
},
},
headerMini: {
textAlign: "center",
padding: 0,
},
focused: {
outline: "3px solid " + theme.palette.primary.main,
borderRadius: 4,
},
}));
const ListMenuItem = (0, react_2.forwardRef)((props, ref) => {
const { classes } = useStyle();
const { id, label, subIsOpen, onClick, inlineIndent, isSelected, collapsed, connectedIdPath, mode, disabled, hasChildren, link, Content, icon, linkComponent: linkComponentProp, className, isFocused, onMouseEnter, onMouseLeave, renderContent: renderContentProp, collapseIcon = (0, jsx_runtime_1.jsx)(icons_material_1.ExpandLess, {}), expandIcon = (0, jsx_runtime_1.jsx)(icons_material_1.ExpandMore, {}), popupRootIcon = ((0, jsx_runtime_1.jsx)(icons_material_1.ChevronRight, { style: { transform: "rotate(90deg)" } })), popupSubIcon = (0, jsx_runtime_1.jsx)(icons_material_1.ChevronRight, {}), } = props;
const { linkComponent } = (0, MenuContext_1.useMenuContext)();
const nestedLevel = (0, react_2.useMemo)(() => {
return connectedIdPath.length;
}, [connectedIdPath]);
const hasLink = link && !hasChildren;
const showLabel = !collapsed || nestedLevel > 1;
const linkProps = (0, react_2.useMemo)(() => {
if (typeof link == "object") {
return {
component: linkComponentProp ?? linkComponent,
href: link.url,
target: link.target ?? "_parent",
};
}
return {
component: linkComponentProp ?? linkComponent,
to: link,
};
}, [link]);
const inlineIndentPadding = (0, react_2.useMemo)(() => {
if (mode !== "inline") {
return undefined;
}
return nestedLevel > 1
? inlineIndent.step * (nestedLevel - 2) + inlineIndent.base
: undefined;
}, [nestedLevel, mode, inlineIndent]);
const renderArrow = () => {
if (!hasChildren) {
return null;
}
if (collapsed && nestedLevel == 1) {
return null;
}
if (mode == "inline") {
return subIsOpen ? collapseIcon : expandIcon;
}
if (nestedLevel == 1 && mode == "horizontal") {
return popupRootIcon;
}
return popupSubIcon;
};
const shouldUseTooltip = (0, react_2.useMemo)(() => {
return collapsed && nestedLevel == 1 && !hasChildren;
}, [collapsed, nestedLevel, hasChildren]);
const textClasses = (0, classnames_1.default)(classes.label, {
"Label-mini": !showLabel,
[classes.labelMini]: !showLabel,
});
const renderContent = () => {
if (Content) {
return ((0, jsx_runtime_1.jsx)(Content, { ...{
nodeId: id,
isSelected,
itemProps: { textClasses, label },
} }));
}
if (renderContentProp) {
return renderContentProp({
nodeId: id,
isSelected,
itemProps: { textClasses, label },
});
}
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && (0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: icon }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { className: textClasses, primary: label })] }));
};
const listItemNode = ((0, react_1.createElement)(material_1.ListItemButton, { disableRipple: true, ...(hasLink && linkProps), ref: ref, key: id, disableTouchRipple: true, tabIndex: -1, disabled: disabled, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, className: (0, classnames_1.default)(className, classes.root, classes.noWrap, {
isRoot: nestedLevel == 1,
isNested: hasChildren,
[classes.focused]: isFocused,
isFocused: isFocused,
isMini: collapsed && nestedLevel == 1,
}), selected: isSelected, style: {
paddingLeft: inlineIndentPadding,
}, onClick: onClick },
renderContent(),
hasChildren ? renderArrow() : null));
return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { disableHoverListener: !shouldUseTooltip, classes: { popper: classes.tooltip }, title: label, arrow: true, placement: "right", children: listItemNode }));
});
exports.default = (0, react_2.memo)(ListMenuItem);