@judo/components 0.3.0 → 0.4.0

package/src/MenuTree.tsx

@@ -0,0 +1,112 @@
+import type { JudoTreeItemProps, MenuProps, StyledTreeItemProps } from '@judo/components-api';
+import { ArrowDropDown, ArrowRight } from '@mui/icons-material';
+import { Box, styled, Typography } from '@mui/material';
+import { TreeItem, treeItemClasses } from '@mui/lab';
+import { useIntl } from 'react-intl';
+import { TreeView } from '@mui/lab';
+import { useJudoNavigation } from './CustomBreadcrumb';
+
+declare module 'react' {
+  interface CSSProperties {
+    '--tree-view-color'?: string;
+    '--tree-view-bg-color'?: string;
+  }
+}
+
+const StyledTreeItemRoot = styled(TreeItem)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  [`& .${treeItemClasses.content}`]: {
+    color: theme.palette.text.secondary,
+    // borderTopRightRadius: theme.spacing(2),
+    // borderBottomRightRadius: theme.spacing(2),
+    // paddingRight: theme.spacing(1),
+    padding: 0,
+    marginBottom: '1rem',
+    width: 'auto',
+    fontWeight: theme.typography.fontWeightMedium,
+    '&.Mui-expanded': {
+      fontWeight: theme.typography.fontWeightRegular,
+    },
+    '&:hover': {
+      // backgroundColor: theme.palette.action.hover,
+      backgroundColor: 'inherit',
+    },
+    '&.Mui-focused, &.Mui-selected, &.Mui-selected.Mui-focused': {
+      // backgroundColor: `var(--tree-view-bg-color, ${theme.palette.action.selected})`,
+      backgroundColor: 'inherit',
+      color: 'var(--tree-view-color)',
+    },
+    [`& .${treeItemClasses.label}`]: {
+      fontWeight: 'inherit',
+      color: 'inherit',
+    },
+  },
+  [`& .${treeItemClasses.group}`]: {
+    marginLeft: 0,
+    [`& .${treeItemClasses.content}`]: {
+      paddingLeft: theme.spacing(2),
+    },
+  },
+}));
+
+function StyledTreeItem(props: StyledTreeItemProps) {
+  const { bgColor, color, labelIcon: LabelIcon, labelInfo, labelText, ...other } = props;
+
+  return (
+    <StyledTreeItemRoot
+      label={
+        <Box sx={{ display: 'flex', alignItems: 'center', p: 0.5, pr: 0 }}>
+          <Box component={LabelIcon} color="inherit" sx={{ mr: 1 }} />
+          <Typography variant="body2" sx={{ fontWeight: 'inherit', flexGrow: 1 }}>
+            {labelText}
+          </Typography>
+          <Typography variant="caption" color="inherit">
+            {labelInfo}
+          </Typography>
+        </Box>
+      }
+      style={{
+        '--tree-view-color': color,
+        '--tree-view-bg-color': bgColor,
+      }}
+      {...other}
+    />
+  );
+}
+
+export const MenuTree = ({ items, height, maxWidth, defaultExpanded }: MenuProps) => {
+  const { clearNavigate } = useJudoNavigation();
+  const intl = useIntl();
+
+  return (
+    <TreeView
+      aria-label="MenuTree"
+      defaultExpanded={defaultExpanded}
+      defaultCollapseIcon={<ArrowDropDown />}
+      defaultExpandIcon={<ArrowRight />}
+      defaultEndIcon={<div style={{ width: 24 }} />}
+      sx={{ height, flexGrow: 1, maxWidth, overflowY: 'auto' }}
+    >
+      {items.map(({ labelText, to, items, ...iRest }: JudoTreeItemProps) => (
+        <StyledTreeItem
+          nodeId={labelText}
+          labelText={intl.formatMessage({ id: `menuTree.${labelText}`, defaultMessage: labelText })}
+          onClick={() => to && clearNavigate(to)}
+          to={to}
+          {...iRest}
+        >
+          {items &&
+            items.map(({ labelText: jLabelText, to: jTo, ...jRest }: JudoTreeItemProps) => (
+              <StyledTreeItem
+                nodeId={jLabelText}
+                labelText={intl.formatMessage({ id: `menuTree.${jLabelText}`, defaultMessage: jLabelText })}
+                onClick={() => clearNavigate(jTo)}
+                to={jTo}
+                {...jRest}
+              />
+            ))}
+        </StyledTreeItem>
+      ))}
+    </TreeView>
+  );
+};

package/src/index.tsx

@@ -2,10 +2,10 @@ export * from './dialog';
 export * from './table';
 export * from './AggregationInput';
 export * from './CustomBreadcrumb';
-export * from './CustomLink';
 export * from './CustomTablePagination';
 export * from './DropdownButton';
 export * from './Hero';
 export * from './Logo';
+export * from './MenuTree';
 export * from './PageHeader';
 export * from './TrinaryLogicCombobox';

package/src/CustomLink.tsx

@@ -1,35 +0,0 @@
-import { useMatch, useResolvedPath } from 'react-router-dom';
-import type { LinkProps } from 'react-router-dom';
-import { theme } from '@judo/theme';
-import { ListItem, ListItemButton } from '@mui/material';
-import { useJudoNavigation } from './CustomBreadcrumb';
-
-const customLinkItemStyle = {
-  py: '2px',
-  px: 3,
-  color: theme.palette.text.secondary,
-  '&:hover, &:focus': {
-    color: theme.palette.secondary.main,
-  },
-  '&.Mui-selected': {
-    color: theme.palette.secondary.main,
-  },
-};
-
-export function CustomLink({ children, to, ...props }: LinkProps) {
-  const resolved = useResolvedPath(to);
-  const match = useMatch({ path: resolved.pathname, end: true });
-  const { clearNavigate } = useJudoNavigation();
-
-  const onClickHandler = () => {
-    clearNavigate(to);
-  };
-
-  return (
-    <ListItem disablePadding style={{ textDecoration: 'none' }}>
-      <ListItemButton selected={!!match} sx={customLinkItemStyle} onClick={onClickHandler}>
-        {children}
-      </ListItemButton>
-    </ListItem>
-  );
-}