diff --git a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md index 9f04e9d48e7c..337391ba7eba 100644 --- a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md +++ b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md @@ -73,3 +73,40 @@ If you were using the `treeViewClasses` object, you can replace it with the new - const rootClass = treeViewClasses.root; + const rootClass = simpleTreeViewClasses.root; ``` + +### Rename `onNodeToggle`, `expanded` and `defaultExpanded` + +The expansion props have been renamed to better describe their behaviors: + +| Old name | New name | +| :---------------- | :---------------------- | +| `onNodeToggle` | `onExpandedNodesChange` | +| `expanded` | `expandedNodes` | +| `defaultExpanded` | `defaultExpandedNodes` | + +```diff + +``` + +:::info +If you were using the `onNodeToggle` prop to react to the expansion or collapse of a specific node, +you can use the new `onNodeExpansionToggle` prop which is called whenever a node is expanded or collapsed with its id and expansion status + +```tsx + + console.log(nodeId, isExpanded) + } +/> +``` + +::: diff --git a/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.js b/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.js new file mode 100644 index 000000000000..f9f262020d0a --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.js @@ -0,0 +1,67 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; + +import Typography from '@mui/material/Typography'; + +const MUI_X_PRODUCTS = [ + { + id: 'grid', + label: 'Data Grid', + children: [ + { 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' }], + }, +]; + +export default function TrackNodeExpansionToggle() { + const [action, setAction] = React.useState(null); + + const handleNodeExpansionToggle = (event, nodeId, isExpanded) => { + setAction({ nodeId, isExpanded }); + }; + + return ( + + {action == null ? ( + No action recorded + ) : ( + + Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId} + + )} + + + } + defaultExpandIcon={} + /> + + + ); +} diff --git a/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx b/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx new file mode 100644 index 000000000000..c2ead67ee60d --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx @@ -0,0 +1,73 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; +import { TreeViewBaseItem } from '@mui/x-tree-view/models'; +import Typography from '@mui/material/Typography'; + +const MUI_X_PRODUCTS: TreeViewBaseItem[] = [ + { + id: 'grid', + label: 'Data Grid', + children: [ + { 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' }], + }, +]; + +export default function TrackNodeExpansionToggle() { + const [action, setAction] = React.useState<{ + nodeId: string; + isExpanded: boolean; + } | null>(null); + + const handleNodeExpansionToggle = ( + event: React.SyntheticEvent, + nodeId: string, + isExpanded: boolean, + ) => { + setAction({ nodeId, isExpanded }); + }; + + return ( + + {action == null ? ( + No action recorded + ) : ( + + Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId} + + )} + + } + defaultExpandIcon={} + /> + + + ); +} diff --git a/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx.preview b/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx.preview new file mode 100644 index 000000000000..f72ae69f0d3d --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx.preview @@ -0,0 +1,15 @@ +{action == null ? ( + No action recorded +) : ( + + Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId} + +)} + + } + defaultExpandIcon={} + /> + \ No newline at end of file diff --git a/docs/data/tree-view/rich-tree-view/expansion/expansion.md b/docs/data/tree-view/rich-tree-view/expansion/expansion.md index 98a3574501fa..a0c5d31feeb2 100644 --- a/docs/data/tree-view/rich-tree-view/expansion/expansion.md +++ b/docs/data/tree-view/rich-tree-view/expansion/expansion.md @@ -26,3 +26,9 @@ You can use the `onNodeToggle` prop to listen to changes in the expanded items a Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). ::: + +## Track node expansion change + +Use the `onNodeExpansionToggle` if you want to react to a node expansion toggling: + +{{"demo": "TrackNodeExpansionToggle.js"}} diff --git a/docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.js b/docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.js new file mode 100644 index 000000000000..89f288ac3617 --- /dev/null +++ b/docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.js @@ -0,0 +1,52 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; +import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; +import { TreeItem } from '@mui/x-tree-view/TreeItem'; +import Typography from '@mui/material/Typography'; + +export default function TrackNodeExpansionToggle() { + const [action, setAction] = React.useState(null); + + const handleNodeExpansionToggle = (event, nodeId, isExpanded) => { + setAction({ nodeId, isExpanded }); + }; + + return ( + + {action == null ? ( + No action recorded + ) : ( + + Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId} + + )} + + + } + defaultExpandIcon={} + > + + + + + + + + + + + + + + + + + + + ); +} diff --git a/docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.tsx b/docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.tsx new file mode 100644 index 000000000000..82add0a74e37 --- /dev/null +++ b/docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.tsx @@ -0,0 +1,58 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; +import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; +import { TreeItem } from '@mui/x-tree-view/TreeItem'; +import Typography from '@mui/material/Typography'; + +export default function TrackNodeExpansionToggle() { + const [action, setAction] = React.useState<{ + nodeId: string; + isExpanded: boolean; + } | null>(null); + + const handleNodeExpansionToggle = ( + event: React.SyntheticEvent, + nodeId: string, + isExpanded: boolean, + ) => { + setAction({ nodeId, isExpanded }); + }; + + return ( + + {action == null ? ( + No action recorded + ) : ( + + Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId} + + )} + + } + defaultExpandIcon={} + > + + + + + + + + + + + + + + + + + + + ); +} diff --git a/docs/data/tree-view/simple-tree-view/expansion/expansion.md b/docs/data/tree-view/simple-tree-view/expansion/expansion.md index fea4b42db244..a71aa5eefe39 100644 --- a/docs/data/tree-view/simple-tree-view/expansion/expansion.md +++ b/docs/data/tree-view/simple-tree-view/expansion/expansion.md @@ -26,3 +26,9 @@ You can use the `onNodeToggle` prop to listen to changes in the expanded items a Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). ::: + +## Track node expansion change + +Use the `onNodeExpansionToggle` if you want to react to a node expansion toggling: + +{{"demo": "TrackNodeExpansionToggle.js"}}