Skip to content

Commit

Permalink
[docs] Cleanup of the Tree View demos
Browse files Browse the repository at this point in the history
  • Loading branch information
@flaviendelangle
flaviendelangle committed May 24, 2024
1 parent 1a453ab commit 41825a9
Show file tree
Hide file tree
Showing 109 changed files with 910 additions and 791 deletions.
62 changes: 32 additions & 30 deletions docs/data/tree-view/rich-tree-view/customization/CustomAnimation.js
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,39 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import Collapse from '@mui/material/Collapse';

import { RichTreeView } from '@mui/x-tree-view/RichTreeView';

import { useSpring, animated } from '@react-spring/web';

const ITEMS = [
const MUI_X_PRODUCTS = [
{
id: '1',
label: 'Main',
id: 'grid',
label: 'Data Grid',
children: [
{ id: '2', label: 'Hello' },
{
id: '3',
label: 'Subtree with children',
children: [
{ id: '6', label: 'Hello' },
{
id: '7',
label: 'Sub-subtree with children',
children: [
{ id: '9', label: 'Child 1' },
{ id: '10', label: 'Child 2' },
{ id: '11', label: 'Child 3' },
],
},
{ id: '8', label: 'Hello' },
],
},
{ id: '4', label: 'World' },
{ id: '5', label: 'Something something' },
{ id: 'grid-community', label: '@mui/x-data-grid' },
{ id: 'grid-pro', label: '@mui/x-data-grid-pro' },
{ id: 'grid-premium', label: '@mui/x-data-grid-premium' },
],
},
{
id: 'pickers',
label: 'Date and Time Pickers',
children: [
{ id: 'pickers-community', label: '@mui/x-date-pickers' },
{ id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
],
},
{
id: 'charts',
label: 'Charts',
children: [{ id: 'charts-community', label: '@mui/x-charts' }],
},
{
id: 'tree-view',
label: 'Tree View',
children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
},
];

function TransitionComponent(props) {
Expand All @@ -51,12 +53,12 @@ function TransitionComponent(props) {

export default function CustomAnimation() {
return (
<RichTreeView
aria-label="customized"
defaultExpandedItems={['1']}
sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }}
slotProps={{ item: { slots: { groupTransition: TransitionComponent } } }}
items={ITEMS}
/>
<Box sx={{ minHeight: 352, minWidth: 250 }}>
<RichTreeView
defaultExpandedItems={['grid']}
slotProps={{ item: { slots: { groupTransition: TransitionComponent } } }}
items={MUI_X_PRODUCTS}
/>
</Box>
);
}
62 changes: 32 additions & 30 deletions docs/data/tree-view/rich-tree-view/customization/CustomAnimation.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,39 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import Collapse from '@mui/material/Collapse';
import { TransitionProps } from '@mui/material/transitions';
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
import { TreeViewBaseItem } from '@mui/x-tree-view/models';
import { useSpring, animated } from '@react-spring/web';

const ITEMS: TreeViewBaseItem[] = [
const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
{
id: '1',
label: 'Main',
id: 'grid',
label: 'Data Grid',
children: [
{ id: '2', label: 'Hello' },
{
id: '3',
label: 'Subtree with children',
children: [
{ id: '6', label: 'Hello' },
{
id: '7',
label: 'Sub-subtree with children',
children: [
{ id: '9', label: 'Child 1' },
{ id: '10', label: 'Child 2' },
{ id: '11', label: 'Child 3' },
],
},
{ id: '8', label: 'Hello' },
],
},
{ id: '4', label: 'World' },
{ id: '5', label: 'Something something' },
{ id: 'grid-community', label: '@mui/x-data-grid' },
{ id: 'grid-pro', label: '@mui/x-data-grid-pro' },
{ id: 'grid-premium', label: '@mui/x-data-grid-premium' },
],
},
{
id: 'pickers',
label: 'Date and Time Pickers',
children: [
{ id: 'pickers-community', label: '@mui/x-date-pickers' },
{ id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
],
},
{
id: 'charts',
label: 'Charts',
children: [{ id: 'charts-community', label: '@mui/x-charts' }],
},
{
id: 'tree-view',
label: 'Tree View',
children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
},
];

function TransitionComponent(props: TransitionProps) {
Expand All @@ -51,12 +53,12 @@ function TransitionComponent(props: TransitionProps) {

export default function CustomAnimation() {
return (
<RichTreeView
aria-label="customized"
defaultExpandedItems={['1']}
sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }}
slotProps={{ item: { slots: { groupTransition: TransitionComponent } } }}
items={ITEMS}
/>
<Box sx={{ minHeight: 352, minWidth: 250 }}>
<RichTreeView
defaultExpandedItems={['grid']}
slotProps={{ item: { slots: { groupTransition: TransitionComponent } } }}
items={MUI_X_PRODUCTS}
/>
</Box>
);
}
6 changes: 2 additions & 4 deletions docs/data/tree-view/rich-tree-view/customization/CustomAnimation.tsx.preview
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
<RichTreeView
aria-label="customized"
defaultExpandedItems={['1']}
sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }}
defaultExpandedItems={['grid']}
slotProps={{ item: { slots: { groupTransition: TransitionComponent } } }}
items={ITEMS}
items={MUI_X_PRODUCTS}
/>
72 changes: 37 additions & 35 deletions docs/data/tree-view/rich-tree-view/customization/CustomIcons.js
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,40 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import AddBoxIcon from '@mui/icons-material/AddBox';
import IndeterminateCheckBoxIcon from '@mui/icons-material/IndeterminateCheckBox';
import SvgIcon from '@mui/material/SvgIcon';
import { styled } from '@mui/material/styles';
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
import { TreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem';

const ITEMS = [
const MUI_X_PRODUCTS = [
{
id: '1',
label: 'Main',
id: 'grid',
label: 'Data Grid',
children: [
{ id: '2', label: 'Hello' },
{
id: '3',
label: 'Subtree with children',
children: [
{ id: '6', label: 'Hello' },
{
id: '7',
label: 'Sub-subtree with children',
children: [
{ id: '9', label: 'Child 1' },
{ id: '10', label: 'Child 2' },
{ id: '11', label: 'Child 3' },
],
},
{ id: '8', label: 'Hello' },
],
},
{ id: '4', label: 'World' },
{ id: '5', label: 'Something something' },
{ id: 'grid-community', label: '@mui/x-data-grid' },
{ id: 'grid-pro', label: '@mui/x-data-grid-pro' },
{ id: 'grid-premium', label: '@mui/x-data-grid-premium' },
],
},
{
id: 'pickers',
label: 'Date and Time Pickers',
children: [
{ id: 'pickers-community', label: '@mui/x-date-pickers' },
{ id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
],
},
{
id: 'charts',
label: 'Charts',
children: [{ id: 'charts-community', label: '@mui/x-charts' }],
},
{
id: 'tree-view',
label: 'Tree View',
children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
},
];

const CustomTreeItem = styled(TreeItem)({
Expand All @@ -59,17 +61,17 @@ function CloseSquare(props) {

export default function CustomIcons() {
return (
<RichTreeView
aria-label="customized"
defaultExpandedItems={['1']}
slots={{
expandIcon: AddBoxIcon,
collapseIcon: IndeterminateCheckBoxIcon,
endIcon: CloseSquare,
item: CustomTreeItem,
}}
sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }}
items={ITEMS}
/>
<Box sx={{ minHeight: 352, minWidth: 250 }}>
<RichTreeView
defaultExpandedItems={['grid']}
slots={{
expandIcon: AddBoxIcon,
collapseIcon: IndeterminateCheckBoxIcon,
endIcon: CloseSquare,
item: CustomTreeItem,
}}
items={MUI_X_PRODUCTS}
/>
</Box>
);
}
72 changes: 37 additions & 35 deletions docs/data/tree-view/rich-tree-view/customization/CustomIcons.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import AddBoxIcon from '@mui/icons-material/AddBox';
import IndeterminateCheckBoxIcon from '@mui/icons-material/IndeterminateCheckBox';
import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
Expand All @@ -7,33 +8,34 @@ import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
import { TreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem';
import { TreeViewBaseItem } from '@mui/x-tree-view/models';

const ITEMS: TreeViewBaseItem[] = [
const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
{
id: '1',
label: 'Main',
id: 'grid',
label: 'Data Grid',
children: [
{ id: '2', label: 'Hello' },
{
id: '3',
label: 'Subtree with children',
children: [
{ id: '6', label: 'Hello' },
{
id: '7',
label: 'Sub-subtree with children',
children: [
{ id: '9', label: 'Child 1' },
{ id: '10', label: 'Child 2' },
{ id: '11', label: 'Child 3' },
],
},
{ id: '8', label: 'Hello' },
],
},
{ id: '4', label: 'World' },
{ id: '5', label: 'Something something' },
{ id: 'grid-community', label: '@mui/x-data-grid' },
{ id: 'grid-pro', label: '@mui/x-data-grid-pro' },
{ id: 'grid-premium', label: '@mui/x-data-grid-premium' },
],
},
{
id: 'pickers',
label: 'Date and Time Pickers',
children: [
{ id: 'pickers-community', label: '@mui/x-date-pickers' },
{ id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
],
},
{
id: 'charts',
label: 'Charts',
children: [{ id: 'charts-community', label: '@mui/x-charts' }],
},
{
id: 'tree-view',
label: 'Tree View',
children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
},
];

const CustomTreeItem = styled(TreeItem)({
Expand All @@ -60,17 +62,17 @@ function CloseSquare(props: SvgIconProps) {

export default function CustomIcons() {
return (
<RichTreeView
aria-label="customized"
defaultExpandedItems={['1']}
slots={{
expandIcon: AddBoxIcon,
collapseIcon: IndeterminateCheckBoxIcon,
endIcon: CloseSquare,
item: CustomTreeItem,
}}
sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }}
items={ITEMS}
/>
<Box sx={{ minHeight: 352, minWidth: 250 }}>
<RichTreeView
defaultExpandedItems={['grid']}
slots={{
expandIcon: AddBoxIcon,
collapseIcon: IndeterminateCheckBoxIcon,
endIcon: CloseSquare,
item: CustomTreeItem,
}}
items={MUI_X_PRODUCTS}
/>
</Box>
);
}
6 changes: 2 additions & 4 deletions docs/data/tree-view/rich-tree-view/customization/CustomIcons.tsx.preview
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
<RichTreeView
aria-label="customized"
defaultExpandedItems={['1']}
defaultExpandedItems={['grid']}
slots={{
expandIcon: AddBoxIcon,
collapseIcon: IndeterminateCheckBoxIcon,
endIcon: CloseSquare,
item: CustomTreeItem,
}}
sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }}
items={ITEMS}
items={MUI_X_PRODUCTS}
/>
Loading

0 comments on commit 41825a9

Please sign in to comment.