Skip to content

Commit acfcb3b

Browse files
flaviendelangleflaviendelangle
authored
[TreeView] Add new prop onItemClick on the Tree View components (#14018)
1 parent b84c080 commit acfcb3b

File tree

29 files changed

+359
-43
lines changed

29 files changed

+359
-43
lines changed

‎docs/data/tree-view/rich-tree-view/items/OnItemClick.js

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import * as React from 'react';
2+
import Stack from '@mui/material/Stack';
3+
import Box from '@mui/material/Box';
4+
import Typography from '@mui/material/Typography';
5+
6+
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
7+
8+
const MUI_X_PRODUCTS = [
9+
{
10+
id: 'grid',
11+
label: 'Data Grid',
12+
children: [
13+
{ id: 'grid-community', label: '@mui/x-data-grid' },
14+
{ id: 'grid-pro', label: '@mui/x-data-grid-pro' },
15+
{ id: 'grid-premium', label: '@mui/x-data-grid-premium' },
16+
],
17+
},
18+
{
19+
id: 'pickers',
20+
label: 'Date and Time Pickers',
21+
children: [
22+
{ id: 'pickers-community', label: '@mui/x-date-pickers' },
23+
{ id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
24+
],
25+
},
26+
{
27+
id: 'charts',
28+
label: 'Charts',
29+
children: [{ id: 'charts-community', label: '@mui/x-charts' }],
30+
},
31+
{
32+
id: 'tree-view',
33+
label: 'Tree View',
34+
children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
35+
},
36+
];
37+
38+
export default function OnItemClick() {
39+
const [lastClickedItem, setLastClickedItem] = React.useState(null);
40+
41+
return (
42+
<Stack spacing={2}>
43+
<Typography>
44+
{lastClickedItem == null
45+
? 'No item click recorded'
46+
: `Last clicked item: ${lastClickedItem}`}
47+
</Typography>
48+
<Box sx={{ minHeight: 352, minWidth: 250 }}>
49+
<RichTreeView
50+
items={MUI_X_PRODUCTS}
51+
onItemClick={(event, itemId) => setLastClickedItem(itemId)}
52+
/>
53+
</Box>
54+
</Stack>
55+
);
56+
}

‎docs/data/tree-view/rich-tree-view/items/OnItemClick.tsx

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import * as React from 'react';
2+
import Stack from '@mui/material/Stack';
3+
import Box from '@mui/material/Box';
4+
import Typography from '@mui/material/Typography';
5+
import { TreeViewBaseItem } from '@mui/x-tree-view/models';
6+
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
7+
8+
const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
9+
{
10+
id: 'grid',
11+
label: 'Data Grid',
12+
children: [
13+
{ id: 'grid-community', label: '@mui/x-data-grid' },
14+
{ id: 'grid-pro', label: '@mui/x-data-grid-pro' },
15+
{ id: 'grid-premium', label: '@mui/x-data-grid-premium' },
16+
],
17+
},
18+
{
19+
id: 'pickers',
20+
label: 'Date and Time Pickers',
21+
children: [
22+
{ id: 'pickers-community', label: '@mui/x-date-pickers' },
23+
{ id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
24+
],
25+
},
26+
{
27+
id: 'charts',
28+
label: 'Charts',
29+
children: [{ id: 'charts-community', label: '@mui/x-charts' }],
30+
},
31+
{
32+
id: 'tree-view',
33+
label: 'Tree View',
34+
children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
35+
},
36+
];
37+
38+
export default function OnItemClick() {
39+
const [lastClickedItem, setLastClickedItem] = React.useState<string | null>(null);
40+
41+
return (
42+
<Stack spacing={2}>
43+
<Typography>
44+
{lastClickedItem == null
45+
? 'No item click recorded'
46+
: `Last clicked item: ${lastClickedItem}`}
47+
</Typography>
48+
<Box sx={{ minHeight: 352, minWidth: 250 }}>
49+
<RichTreeView
50+
items={MUI_X_PRODUCTS}
51+
onItemClick={(event, itemId) => setLastClickedItem(itemId)}
52+
/>
53+
</Box>
54+
</Stack>
55+
);
56+
}

‎docs/data/tree-view/rich-tree-view/items/OnItemClick.tsx.preview

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<Typography>
2+
{lastClickedItem == null
3+
? 'No item click recorded'
4+
: `Last clicked item: ${lastClickedItem}`}
5+
</Typography>
6+
<Box sx={{ minHeight: 352, minWidth: 250 }}>
7+
<RichTreeView
8+
items={MUI_X_PRODUCTS}
9+
onItemClick={(event, itemId) => setLastClickedItem(itemId)}
10+
/>
11+
</Box>

‎docs/data/tree-view/rich-tree-view/items/items.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,12 @@ When it's set to true:
143143

144144
{{"demo": "DisabledItemsFocusable.js", "defaultCodeOpen": false}}
145145

146+
## Track item clicks
147+
148+
Use the `onItemClick` prop to track the clicked item:
149+
150+
{{"demo": "OnItemClick.js"}}
151+
146152
## Imperative API
147153

148154
### Get an item by ID

‎docs/data/tree-view/rich-tree-view/selection/TrackItemSelectionToggle.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import * as React from 'react';
22
import Box from '@mui/material/Box';
33
import Stack from '@mui/material/Stack';
4-
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
5-
64
import Typography from '@mui/material/Typography';
5+
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
76

87
const MUI_X_PRODUCTS = [
98
{

‎docs/data/tree-view/rich-tree-view/selection/TrackItemSelectionToggle.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import * as React from 'react';
22
import Box from '@mui/material/Box';
33
import Stack from '@mui/material/Stack';
4+
import Typography from '@mui/material/Typography';
45
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
56
import { TreeViewBaseItem } from '@mui/x-tree-view/models';
6-
import Typography from '@mui/material/Typography';
77

88
const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
99
{

‎docs/data/tree-view/simple-tree-view/items/OnItemClick.js

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import * as React from 'react';
2+
import Box from '@mui/material/Box';
3+
import Stack from '@mui/material/Stack';
4+
import Typography from '@mui/material/Typography';
5+
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
6+
import { TreeItem } from '@mui/x-tree-view/TreeItem';
7+
8+
export default function OnItemClick() {
9+
const [lastClickedItem, setLastClickedItem] = React.useState(null);
10+
11+
return (
12+
<Stack spacing={2}>
13+
<Typography>
14+
{lastClickedItem == null
15+
? 'No item click recorded'
16+
: `Last clicked item: ${lastClickedItem}`}
17+
</Typography>
18+
<Box sx={{ minHeight: 352, minWidth: 300 }}>
19+
<SimpleTreeView onItemClick={(event, itemId) => setLastClickedItem(itemId)}>
20+
<TreeItem itemId="grid" label="Data Grid">
21+
<TreeItem itemId="grid-community" label="@mui/x-data-grid" />
22+
<TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
23+
<TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
24+
</TreeItem>
25+
<TreeItem itemId="pickers" label="Date and Time Pickers">
26+
<TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
27+
<TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
28+
</TreeItem>
29+
<TreeItem itemId="charts" label="Charts">
30+
<TreeItem itemId="charts-community" label="@mui/x-charts" />
31+
</TreeItem>
32+
<TreeItem itemId="tree-view" label="Tree View">
33+
<TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
34+
</TreeItem>
35+
</SimpleTreeView>
36+
</Box>
37+
</Stack>
38+
);
39+
}

‎docs/data/tree-view/simple-tree-view/items/OnItemClick.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import * as React from 'react';
2+
import Box from '@mui/material/Box';
3+
import Stack from '@mui/material/Stack';
4+
import Typography from '@mui/material/Typography';
5+
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
6+
import { TreeItem } from '@mui/x-tree-view/TreeItem';
7+
8+
export default function OnItemClick() {
9+
const [lastClickedItem, setLastClickedItem] = React.useState<string | null>(null);
10+
11+
return (
12+
<Stack spacing={2}>
13+
<Typography>
14+
{lastClickedItem == null
15+
? 'No item click recorded'
16+
: `Last clicked item: ${lastClickedItem}`}
17+
</Typography>
18+
<Box sx={{ minHeight: 352, minWidth: 300 }}>
19+
<SimpleTreeView onItemClick={(event, itemId) => setLastClickedItem(itemId)}>
20+
<TreeItem itemId="grid" label="Data Grid">
21+
<TreeItem itemId="grid-community" label="@mui/x-data-grid" />
22+
<TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
23+
<TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
24+
</TreeItem>
25+
<TreeItem itemId="pickers" label="Date and Time Pickers">
26+
<TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
27+
<TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
28+
</TreeItem>
29+
<TreeItem itemId="charts" label="Charts">
30+
<TreeItem itemId="charts-community" label="@mui/x-charts" />
31+
</TreeItem>
32+
<TreeItem itemId="tree-view" label="Tree View">
33+
<TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
34+
</TreeItem>
35+
</SimpleTreeView>
36+
</Box>
37+
</Stack>
38+
);
39+
}

‎docs/data/tree-view/simple-tree-view/items/items.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,12 @@ When it's set to true:
7474

7575
{{"demo": "DisabledItemsFocusable.js", "defaultCodeOpen": false}}
7676

77+
## Track item clicks
78+
79+
Use the `onItemClick` prop to track the clicked item:
80+
81+
{{"demo": "OnItemClick.js"}}
82+
7783
## Imperative API
7884

7985
### Get an item's DOM element by ID

‎docs/data/tree-view/simple-tree-view/selection/TrackItemSelectionToggle.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import * as React from 'react';
22
import Box from '@mui/material/Box';
33
import Stack from '@mui/material/Stack';
4+
import Typography from '@mui/material/Typography';
45
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
56
import { TreeItem } from '@mui/x-tree-view/TreeItem';
6-
import Typography from '@mui/material/Typography';
77

88
export default function TrackItemSelectionToggle() {
99
const [lastSelectedItem, setLastSelectedItem] = React.useState(null);

‎docs/data/tree-view/simple-tree-view/selection/TrackItemSelectionToggle.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import * as React from 'react';
22
import Box from '@mui/material/Box';
33
import Stack from '@mui/material/Stack';
4+
import Typography from '@mui/material/Typography';
45
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
56
import { TreeItem } from '@mui/x-tree-view/TreeItem';
6-
import Typography from '@mui/material/Typography';
77

88
export default function TrackItemSelectionToggle() {
99
const [lastSelectedItem, setLastSelectedItem] = React.useState<string | null>(

‎docs/pages/x/api/tree-view/rich-tree-view.json

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,13 @@
6262
"describedArgs": ["event", "itemIds"]
6363
}
6464
},
65+
"onItemClick": {
66+
"type": { "name": "func" },
67+
"signature": {
68+
"type": "function(event: React.MouseEvent, itemId: string) => void",
69+
"describedArgs": ["event", "itemId"]
70+
}
71+
},
6572
"onItemExpansionToggle": {
6673
"type": { "name": "func" },
6774
"signature": {
@@ -72,8 +79,8 @@
7279
"onItemFocus": {
7380
"type": { "name": "func" },
7481
"signature": {
75-
"type": "function(event: React.SyntheticEvent, itemId: string, value: string) => void",
76-
"describedArgs": ["event", "itemId", "value"]
82+
"type": "function(event: React.SyntheticEvent | null, itemId: string) => void",
83+
"describedArgs": ["event", "itemId"]
7784
}
7885
},
7986
"onItemSelectionToggle": {

‎docs/pages/x/api/tree-view/simple-tree-view.json

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,13 @@
3737
"describedArgs": ["event", "itemIds"]
3838
}
3939
},
40+
"onItemClick": {
41+
"type": { "name": "func" },
42+
"signature": {
43+
"type": "function(event: React.MouseEvent, itemId: string) => void",
44+
"describedArgs": ["event", "itemId"]
45+
}
46+
},
4047
"onItemExpansionToggle": {
4148
"type": { "name": "func" },
4249
"signature": {
@@ -47,8 +54,8 @@
4754
"onItemFocus": {
4855
"type": { "name": "func" },
4956
"signature": {
50-
"type": "function(event: React.SyntheticEvent, itemId: string, value: string) => void",
51-
"describedArgs": ["event", "itemId", "value"]
57+
"type": "function(event: React.SyntheticEvent | null, itemId: string) => void",
58+
"describedArgs": ["event", "itemId"]
5259
}
5360
},
5461
"onItemSelectionToggle": {

‎docs/pages/x/api/tree-view/tree-view.json

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,13 @@
3737
"describedArgs": ["event", "itemIds"]
3838
}
3939
},
40+
"onItemClick": {
41+
"type": { "name": "func" },
42+
"signature": {
43+
"type": "function(event: React.MouseEvent, itemId: string) => void",
44+
"describedArgs": ["event", "itemId"]
45+
}
46+
},
4047
"onItemExpansionToggle": {
4148
"type": { "name": "func" },
4249
"signature": {
@@ -47,8 +54,8 @@
4754
"onItemFocus": {
4855
"type": { "name": "func" },
4956
"signature": {
50-
"type": "function(event: React.SyntheticEvent, itemId: string, value: string) => void",
51-
"describedArgs": ["event", "itemId", "value"]
57+
"type": "function(event: React.SyntheticEvent | null, itemId: string) => void",
58+
"describedArgs": ["event", "itemId"]
5259
}
5360
},
5461
"onItemSelectionToggle": {

‎docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,13 @@
5858
"itemIds": "The ids of the expanded items."
5959
}
6060
},
61+
"onItemClick": {
62+
"description": "Callback fired when the <code>content</code> slot of a given tree item is clicked.",
63+
"typeDescriptions": {
64+
"event": "The DOM event that triggered the change.",
65+
"itemId": "The id of the focused item."
66+
}
67+
},
6168
"onItemExpansionToggle": {
6269
"description": "Callback fired when a tree item is expanded or collapsed.",
6370
"typeDescriptions": {
@@ -67,11 +74,10 @@
6774
}
6875
},
6976
"onItemFocus": {
70-
"description": "Callback fired when tree items are focused.",
77+
"description": "Callback fired when a given tree item is focused.",
7178
"typeDescriptions": {
7279
"event": "The DOM event that triggered the change. <strong>Warning</strong>: This is a generic event not a focus event.",
73-
"itemId": "The id of the focused item.",
74-
"value": "of the focused item."
80+
"itemId": "The id of the focused item."
7581
}
7682
},
7783
"onItemSelectionToggle": {

0 commit comments

Comments
 (0)