[docs] Add file explorer example to rich tree view customization docs

docs/data/tree-view/rich-tree-view/customization/FileExplorer.js

@@ -0,0 +1,227 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import { animated, useSpring } from '@react-spring/web';
+import { styled, alpha } from '@mui/material/styles';
+
+import Box from '@mui/material/Box';
+import Collapse from '@mui/material/Collapse';
+import Label from '@mui/icons-material/Label';
+import Typography from '@mui/material/Typography';
+import AirplanemodeActiveIcon from '@mui/icons-material/AirplanemodeActive';
+import DeleteIcon from '@mui/icons-material/Delete';
+import FolderRounded from '@mui/icons-material/FolderRounded';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import { treeItemClasses } from '@mui/x-tree-view/TreeItem';
+import { unstable_useTreeItem2 as useTreeItem2 } from '@mui/x-tree-view/useTreeItem2';
+import {
+  TreeItem2Content,
+  TreeItem2IconContainer,
+  TreeItem2Label,
+  TreeItem2Root,
+} from '@mui/x-tree-view/TreeItem2';
+import { TreeItem2Icon } from '@mui/x-tree-view/TreeItem2Icon';
+import { TreeItem2Provider } from '@mui/x-tree-view/TreeItem2Provider';
+
+const ITEMS = [
+  {
+    id: '1',
+    label: 'All Documents',
+    children: [
+      {
+        id: '1.1',
+        label: 'Company',
+        children: [
+          { id: '1.1.1', label: 'Payments' },
+          { id: '1.1.2', label: 'Meeting notes' },
+          { id: '1.1.3', label: 'Tasks list' },
+          { id: '1.1.4', label: 'Equipment' },
+        ],
+        icon: FolderRounded,
+      },
+      { id: '1.2', label: 'Personal' },
+      { id: '1.3', label: 'Images' },
+    ],
+    icon: FolderRounded,
+  },
+  {
+    id: '2',
+    label: 'Bookmarked',
+    icon: Label,
+    children: [
+      { id: '2.1', label: 'Learning materials' },
+      { id: '2.2', label: 'News' },
+      { id: '2.3', label: 'Forums' },
+      { id: '2.4', label: 'Travel documents', icon: AirplanemodeActiveIcon },
+    ],
+  },
+  { id: '3', label: 'History', icon: FolderRounded },
+  { id: '4', label: 'Trash', icon: DeleteIcon },
+];
+
+function DotIcon() {
+  return (
+    <Box
+      sx={{
+        width: 6,
+        height: 6,
+        borderRadius: '70%',
+        bgcolor: 'warning.main',
+        display: 'inline-block',
+        verticalAlign: 'middle',
+        zIndex: 1,
+        mr: 1,
+      }}
+    />
+  );
+}
+
+const StyledTreeItemRoot = styled(TreeItem2Root)(({ theme }) => ({
+  color:
+    theme.palette.mode === 'light'
+      ? theme.palette.grey[800]
+      : theme.palette.grey[400],
+  position: 'relative',
+  [`& .${treeItemClasses.groupTransition}`]: {
+    marginLeft: theme.spacing(3.5),
+  },
+}));
+
+const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
+  flexDirection: 'row-reverse',
+  borderRadius: theme.spacing(0.7),
+  marginBottom: theme.spacing(0.5),
+  marginTop: theme.spacing(0.5),
+  padding: theme.spacing(0.5),
+  paddingRight: theme.spacing(1),
+  fontWeight: 500,
+  [`& .${treeItemClasses.iconContainer}`]: {
+    marginRight: theme.spacing(2),
+  },
+  [`&.Mui-expanded `]: {
+    '&:not(.Mui-focused, .Mui-selected, .Mui-selected.Mui-focused) .labelIcon': {
+      color:
+        theme.palette.mode === 'light'
+          ? theme.palette.primary.main
+          : theme.palette.secondary.dark,
+    },
+    '&::before': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      left: '16px',
+      top: '44px',
+      height: 'calc(100% - 48px)',
+      width: '1.5px',
+      backgroundColor:
+        theme.palette.mode === 'light'
+          ? theme.palette.grey[300]
+          : theme.palette.grey[700],
+    },
+  },
+  '&:hover': {
+    backgroundColor: alpha(theme.palette.primary.main, 0.1),
+    color: theme.palette.mode === 'light' ? theme.palette.primary.main : 'white',
+  },
+  [`&.Mui-focused, &.Mui-selected, &.Mui-selected.Mui-focused`]: {
+    backgroundColor:
+      theme.palette.mode === 'light'
+        ? theme.palette.primary.main
+        : theme.palette.secondary.dark,
+    color: 'white',
+  },
+}));
+
+const AnimatedCollapse = animated(Collapse);
+
+function TransitionComponent(props) {
+  const style = useSpring({
+    to: {
+      opacity: props.in ? 1 : 0,
+      transform: `translate3d(0,${props.in ? 0 : 20}px,0)`,
+    },
+  });
+
+  return <AnimatedCollapse style={style} {...props} />;
+}
+
+const StyledTreeItemLabelText = styled(Typography)({
+  color: 'inherit',
+  fontFamily: 'General Sans',
+  fontWeight: 500,
+  flexGrow: 1,
+});
+
+function CustomLabel({ icon: Icon = DotIcon, children, ...other }) {
+  return (
+    <TreeItem2Label
+      {...other}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
+      <Box
+        component={Icon}
+        className="labelIcon"
+        color="inherit"
+        sx={{ mr: 1, fontSize: '1.2rem' }}
+      />
+      <StyledTreeItemLabelText variant="body2">{children}</StyledTreeItemLabelText>
+    </TreeItem2Label>
+  );
+}
+
+const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
+  const { id, itemId, label, disabled, children, ...other } = props;
+
+  const {
+    getRootProps,
+    getContentProps,
+    getIconContainerProps,
+    getLabelProps,
+    getGroupTransitionProps,
+    status,
+    publicAPI,
+  } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
+
+  const item = publicAPI.getItem(itemId);
+
+  const icon = item?.icon || DotIcon;
+
+  return (
+    <TreeItem2Provider itemId={itemId}>
+      <StyledTreeItemRoot {...getRootProps(other)}>
+        <CustomTreeItemContent
+          {...getContentProps({
+            className: clsx('content', {
+              'Mui-expanded': status.expanded,
+              'Mui-selected': status.selected,
+              'Mui-focused': status.focused,
+              'Mui-disabled': status.disabled,
+            }),
+          })}
+        >
+          <TreeItem2IconContainer {...getIconContainerProps()}>
+            <TreeItem2Icon status={status} />
+          </TreeItem2IconContainer>
+
+          <CustomLabel {...getLabelProps()} icon={icon} />
+        </CustomTreeItemContent>
+        {children && <TransitionComponent {...getGroupTransitionProps()} />}
+      </StyledTreeItemRoot>
+    </TreeItem2Provider>
+  );
+});
+
+export default function FileExplorer() {
+  return (
+    <RichTreeView
+      items={ITEMS}
+      aria-label="file explorer"
+      defaultExpandedItems={['2']}
+      defaultSelectedItems="2"
+      sx={{ height: 'fit-content', flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
+      slots={{ item: CustomTreeItem }}
+    />
+  );
+}