@etsoo/toolpad
Version:
Dashboard framework extention based on Toolpad Core
196 lines (195 loc) • 11.1 kB
JavaScript
"use client";
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DashboardSidebarSubNavigation = DashboardSidebarSubNavigation;
const jsx_runtime_1 = require("react/jsx-runtime");
const React = __importStar(require("react"));
const Avatar_1 = __importDefault(require("@mui/material/Avatar"));
const Collapse_1 = __importDefault(require("@mui/material/Collapse"));
const Divider_1 = __importDefault(require("@mui/material/Divider"));
const List_1 = __importDefault(require("@mui/material/List"));
const ListItem_1 = __importDefault(require("@mui/material/ListItem"));
const ListItemButton_1 = __importDefault(require("@mui/material/ListItemButton"));
const ListItemIcon_1 = __importDefault(require("@mui/material/ListItemIcon"));
const ListItemText_1 = __importDefault(require("@mui/material/ListItemText"));
const ListSubheader_1 = __importDefault(require("@mui/material/ListSubheader"));
const Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
const ExpandLess_1 = __importDefault(require("@mui/icons-material/ExpandLess"));
const ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
const Link_1 = require("../shared/Link");
const navigation_1 = require("../shared/navigation");
const utils_1 = require("./utils");
const styles_1 = require("@mui/material/styles");
const useActivePage_1 = require("../useActivePage/useActivePage");
const NavigationListItemButton = (0, styles_1.styled)(ListItemButton_1.default)(({ theme }) => ({
borderRadius: 8,
"&.Mui-selected": {
"& .MuiListItemIcon-root": {
color: (theme.vars ?? theme).palette.primary.dark
},
"& .MuiTypography-root": {
color: (theme.vars ?? theme).palette.primary.dark
},
"& .MuiSvgIcon-root": {
color: (theme.vars ?? theme).palette.primary.dark
},
"& .MuiAvatar-root": {
backgroundColor: (theme.vars ?? theme).palette.primary.dark
},
"& .MuiTouchRipple-child": {
backgroundColor: (theme.vars ?? theme).palette.primary.dark
}
},
"& .MuiSvgIcon-root": {
color: (theme.vars ?? theme).palette.action.active
},
"& .MuiAvatar-root": {
backgroundColor: (theme.vars ?? theme).palette.action.active
}
}));
/**
* @ignore - internal component.
*/
function DashboardSidebarSubNavigation({ subNavigation, basePath = "", depth = 0, onLinkClick, isMini = false, isFullyExpanded = true, hasDrawerTransitions = false, selectedItemId }) {
const activePage = (0, useActivePage_1.useActivePage)();
const pathname = activePage?.sourcePath ?? "/";
const initialExpandedSidebarItemIds = React.useMemo(() => subNavigation
.map((navigationItem, navigationItemIndex) => ({
navigationItem,
originalIndex: navigationItemIndex
}))
.filter(({ navigationItem }) => (0, navigation_1.hasSelectedNavigationChildren)(navigationItem, basePath, pathname))
.map(({ originalIndex }) => `${depth}-${originalIndex}`), [basePath, depth, pathname, subNavigation]);
const [expandedSidebarItemIds, setExpandedSidebarItemIds] = React.useState(initialExpandedSidebarItemIds);
const handleOpenFolderClick = React.useCallback((itemId) => () => {
setExpandedSidebarItemIds((previousValue) => previousValue.includes(itemId)
? previousValue.filter((previousValueItemId) => previousValueItemId !== itemId)
: [...previousValue, itemId]);
}, []);
return ((0, jsx_runtime_1.jsx)(List_1.default, { sx: { padding: 0, mb: depth === 0 ? 4 : 1, pl: 2 * depth }, children: subNavigation.map((navigationItem, navigationItemIndex) => {
if (navigationItem.kind === "header") {
return ((0, jsx_runtime_1.jsx)(ListSubheader_1.default, { component: "div", sx: {
fontSize: 12,
fontWeight: "700",
height: isMini ? 0 : 40,
...(hasDrawerTransitions
? (0, utils_1.getDrawerSxTransitionMixin)(isFullyExpanded, "height")
: {}),
px: 2,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
zIndex: 2
}, children: (0, navigation_1.getItemTitle)(navigationItem) }, `subheader-${depth}-${navigationItemIndex}`));
}
if (navigationItem.kind === "divider") {
const nextItem = subNavigation[navigationItemIndex + 1];
return ((0, jsx_runtime_1.jsx)(Divider_1.default, { sx: {
borderBottomWidth: 2,
mx: 1,
mt: 1,
mb: nextItem?.kind === "header" && !isMini ? 0 : 1,
...(hasDrawerTransitions
? (0, utils_1.getDrawerSxTransitionMixin)(isFullyExpanded, "margin")
: {})
} }, `divider-${depth}-${navigationItemIndex}`));
}
if (navigationItem.hidden) {
return null;
}
let children = navigationItem.children?.filter((child) => child.kind === "divider" || child.kind === "header" || !child.hidden);
if (children && children.length === 0) {
children = undefined;
}
const navigationItemFullPath = (0, navigation_1.getPageItemFullPath)(basePath, navigationItem);
const navigationItemId = `${depth}-${navigationItemIndex}`;
const navigationItemTitle = (0, navigation_1.getItemTitle)(navigationItem);
const isNestedNavigationExpanded = expandedSidebarItemIds.includes(navigationItemId);
const nestedNavigationCollapseIcon = isNestedNavigationExpanded ? ((0, jsx_runtime_1.jsx)(ExpandLess_1.default, {})) : ((0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}));
const listItemIconSize = 34;
// If the item is selected, we don't want to select more
const isSelected = selectedItemId
? false
: (0, navigation_1.isPageItemSelected)(navigationItem, basePath, pathname) ||
navigationItem.children?.some((child) => (child.kind === "page" || child.kind == null) &&
child.hidden &&
(0, navigation_1.isPageItemSelected)(child, navigationItemFullPath, pathname));
if (isSelected && !selectedItemId) {
selectedItemId = navigationItemId;
}
const listItem = ((0, jsx_runtime_1.jsx)(ListItem_1.default, { sx: {
py: 0,
px: 1,
overflowX: "hidden"
}, children: (0, jsx_runtime_1.jsxs)(NavigationListItemButton, { selected: isSelected && (!children || isMini), sx: {
px: 1.4,
height: 48
}, ...(children && !isMini
? {
onClick: handleOpenFolderClick(navigationItemId)
}
: {
LinkComponent: Link_1.Link,
href: navigationItemFullPath,
onClick: onLinkClick
}), children: [navigationItem.icon || isMini ? ((0, jsx_runtime_1.jsxs)(ListItemIcon_1.default, { sx: {
minWidth: listItemIconSize,
mr: 1.2
}, children: [navigationItem.icon ?? null, !navigationItem.icon && isMini ? ((0, jsx_runtime_1.jsx)(Avatar_1.default, { sx: {
width: listItemIconSize - 7,
height: listItemIconSize - 7,
fontSize: 12,
ml: "-2px"
}, children: navigationItemTitle
.split(" ")
.slice(0, 2)
.map((itemTitleWord) => itemTitleWord.charAt(0).toUpperCase()) })) : null] })) : null, (0, jsx_runtime_1.jsx)(ListItemText_1.default, { primary: navigationItemTitle, sx: {
whiteSpace: "nowrap",
zIndex: 1,
"& .MuiTypography-root": {
fontWeight: "500"
}
} }), navigationItem.action && !isMini && isFullyExpanded
? navigationItem.action
: null, children && !isMini && isFullyExpanded
? nestedNavigationCollapseIcon
: null] }) }));
return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [isMini ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { title: navigationItemTitle, placement: "right", children: listItem })) : (listItem), children && !isMini ? ((0, jsx_runtime_1.jsx)(Collapse_1.default, { in: isNestedNavigationExpanded, timeout: "auto", unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(DashboardSidebarSubNavigation, { subNavigation: children, basePath: navigationItemFullPath, depth: depth + 1, onLinkClick: onLinkClick, selectedItemId: selectedItemId }) })) : null] }, navigationItemId));
}) }));
}