How to use @mui-treasury/utils - 10 common examples
To help you get started, we’ve selected a few @mui-treasury/utils examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
siriwatknp / mui-treasury / website / src / containers / Demo / DemoPage.js View on Github 
getOpenKeys={({ menus, lastPath }) => {
const keyMap = mapNestedPath(menus);
return menus
.filter(({ key }) => keyMap[key].includes(lastPath))
.map(({ key }) => key);
}}
> const keyMap = React.useMemo(() => mapNestedPath(menus), [menus]);
const [iSelectedKey, setSelectedKey] = useStateBinding(selectedKey, '');getOpenKeys: ({ menus, lastPath }) => {
const keyMap = mapNestedPath(menus);
return menus
.filter(({ key }) => keyMap[key].includes(lastPath))
.map(({ key }) => key);
},
}; const keyMap = useMemo(() => mapNestedPath(menus), [menus]);
const {item: ({ colWidth = { xs: 12, sm: 6, md: 4 }, borderColor }) => {
const color = getThemeColor(palette, borderColor, defaultColor);
const screens = Object.keys(colWidth);
return {
boxShadow: `0 1px 0 0 ${color}`,
borderLeft: `1px solid ${color}`,
'&:last-of-type': {
boxShadow: `1px 1px 0 0 ${color}`,
},
...screens.reduce((result, key, index) => {
const media = {};
const width = colWidth[key];
const { up, only } = breakpoints;
const creator = index !== screens.length - 1 ? only : up;
media[creator(key)] = {
[`&:nth-of-type(${12 / width}n+1)`]: {
borderLeft: 'none',
},container: ({ borderColor }) => {
const color = getThemeColor(palette, borderColor, defaultColor);
return {
border: `1px solid ${color}`,
};
},
item: ({ borderColor }) => {menus,
selectedKey,
openKeys,
menuComponent,
ListProps,
CollapseProps,
getItemProps,
getConfig,
onClick,
} = props;
const keyMap = useMemo(() => mapNestedPath(menus), [menus]);
const {
injectParentProps,
injectItemProps,
injectListProps,
} = useNestedMenuList(selectedKey, openKeys);
const renderMenus = (level, keyPath) => item => {
const { key, label, subMenus, ...itemProps } = item;
const params = {
...getConfig(level),
...item,
onClick,
classes: css,
level,
keyMap,
keyPath,
};
const calculatedProps = injectItemProps(params);
const nextLevel = level + 1;
const menu = (const BoxTabs = ({ children, tabs, tabItemProps, initialTabIndex }) => {
const { selectedKey, setSelectedKey } = useSelectItem(initialTabIndex);
const tabsStyles = useTabsStyles();
const tabItemStyles = useTabItemStyles();
const wrapContent = (content, wrapperProps) => (
{content}
);
return (
<>const NestedMenuList = ({
classes,
menus,
selectedKey,
initialOpenKeys,
renderParent,
getParentProps,
renderChild,
getChildProps,
}) => {
const keyMap = React.useMemo(() => mapNestedPath(menus), [menus]);
const [iSelectedKey, setSelectedKey] = useStateBinding(selectedKey, '');
const getState = key => {
const selected = iSelectedKey === key;
const active = keyMap[key].includes(iSelectedKey) || selected;
return { selected, active };
};
const renderNestedList = level => (menu, idx, array) => {
const { subMenus } = menu;
const key = getKey(menu, idx);
const { active, selected } = getState(key);
const nextLevel = level + 1;
if (subMenus) {
return (root: ({ bgColor = 'primary.main', offset = '-40px', ...styles }) => ({
backgroundColor: getThemeColor(palette, bgColor),
borderRadius: spacing(2),
margin: `${offset} auto 0`,
width: '88%',
...styles,
}),
title: {
