@elacity-js/uikit/dist/components/Nav/MiniNavItem.js

React / Material UI Design kit for Elacity project

import { __rest } from '../../node_modules/tslib/tslib.es6.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useState } from 'react';
import { styled, useTheme, alpha } from '@mui/material/styles';
import { ListItemButton, ListItemIcon, Popover, List, Link, ListItemText } from '@mui/material';
import { NavLink } from '../Link.js';

// @ts-ignore
const ListItemMinimizedStyle = styled((props) => jsx(ListItemButton, Object.assign({}, props)))(({ theme, rounded }) => (Object.assign(Object.assign({ height: 48, position: 'relative', margin: theme.spacing(1, 1) }, (rounded && {
    borderRadius: theme.shape.borderRadius,
})), { paddingLeft: theme.spacing(0.75), paddingRight: theme.spacing(1), color: theme.palette.text.primary })));
// @ts-ignore
const SubListItemMinimizedStyle = styled((props) => jsx(ListItemButton, Object.assign({}, props)))(({ theme }) => ({
    height: 48,
    padding: theme.spacing(1, 1, 1, 3),
    margin: 0,
    color: theme.palette.text.primary,
    '& $selected': {
        color: theme.palette.primary.main,
    },
    '&:hover': {
        color: theme.palette.primary.main,
    },
    '& .MuiListItemText-root': {
        minWidth: 160,
    },
}));
const ListItemIconStyle = styled(ListItemIcon)({
    width: 22,
    height: 22,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
});
const SubmenuPopover = (_a) => {
    var { id, open, anchorEl, anchorOrigin, transformOrigin, onClose, sublistSx, sublistActiveSx, path, submenu, active } = _a, props = __rest(_a, ["id", "open", "anchorEl", "anchorOrigin", "transformOrigin", "onClose", "sublistSx", "sublistActiveSx", "path", "submenu", "active"]);
    return (jsx(Popover, Object.assign({ id: id, open: Boolean(open), anchorEl: anchorEl, anchorOrigin: anchorOrigin || {
            vertical: 'top',
            horizontal: 'right',
        }, transformOrigin: transformOrigin || {
            vertical: 'top',
            horizontal: 'left',
        }, onClose: onClose, disableRestoreFocus: true }, props, { children: jsx(List, Object.assign({ component: "div", disablePadding: true, sx: { minWidth: 100 } }, { children: submenu.map((i) => {
                const isActiveSub = (active === null || active === void 0 ? void 0 : active.call(null, path)) || false;
                return (jsx(SubListItemMinimizedStyle, Object.assign({ sx: Object.assign(Object.assign({}, sublistSx), (isActiveSub && sublistActiveSx)) }, (i.external
                    ? {
                        component: Link,
                        href: i.path,
                        target: '_blank',
                    }
                    : {
                        component: NavLink,
                        to: i.path,
                    }), { children: jsx(ListItemText, { disableTypography: true, primary: i.title, sx: { fontSize: '0.92rem' } }) }), i.title));
            }) })) })));
};
var ItemMini = ({ item, active, anchorOrigin, transformOrigin, style, id }) => {
    const theme = useTheme();
    const isActiveRoot = (active === null || active === void 0 ? void 0 : active.call(null, item.path)) || false;
    const { path, icon, children } = item;
    // only for minimized
    // handling popover
    // see https://stackoverflow.com/a/61486098/10477320 for additional
    // tweak on the Popover element which have rustical support of hover trigger
    const [anchorEl, setAnchorEl] = useState(null);
    const handlePopoverOpen = (event) => {
        setAnchorEl(event.currentTarget);
    };
    const handlePopoverClose = () => {
        setAnchorEl(null);
    };
    const activeRootStyle = {
        color: 'primary.main',
        fontWeight: 600,
        bgcolor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
        '&:before': { display: 'block' },
    };
    const activeSubStyle = {
        color: 'text.primary',
    };
    const activeIconStyle = {
        color: 'primary.main',
    };
    return (jsxs("div", Object.assign({ "aria-owns": anchorEl ? 'mouse-over-popover' : undefined, "aria-haspopup": "true", onMouseEnter: handlePopoverOpen, onMouseLeave: handlePopoverClose, style: style }, { children: [jsx(ListItemMinimizedStyle, Object.assign({ component: NavLink, to: path, sx: Object.assign({}, (isActiveRoot && activeRootStyle)) }, { children: icon && (jsx(ListItemIconStyle, Object.assign({ sx: Object.assign({}, (isActiveRoot && activeIconStyle)) }, { children: icon }))) })), jsx(SubmenuPopover, { id: id, sx: {
                    pointerEvents: 'none',
                    '& .MuiPopover-paper': {
                        pointerEvents: 'auto',
                    },
                }, open: Boolean(anchorEl), anchorEl: anchorEl, anchorOrigin: anchorOrigin || {
                    vertical: 'top',
                    horizontal: 'right',
                }, transformOrigin: transformOrigin || {
                    vertical: 'top',
                    horizontal: 'left',
                }, active: active, path: path, submenu: children, sublistActiveSx: activeSubStyle, onClose: handlePopoverClose, PaperProps: {
                // onMouseEnter: handlePopoverOpen,
                // onMouseLeave: handlePopoverClose,
                } })] })));
};

export { ListItemMinimizedStyle, SubListItemMinimizedStyle, SubmenuPopover, ItemMini as default };
//# sourceMappingURL=MiniNavItem.js.map