Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[TreeView] Add expansionTrigger prop #13533

Merged
merged 10 commits into from
Jun 25, 2024
Merged

[TreeView] Add expansionTrigger prop #13533

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
4aeca65
add expansionTrigger prop
noraleonte Jun 18, 2024
6d68dc6
add to treeItem2
noraleonte Jun 18, 2024
fcf6664
update docs
noraleonte Jun 18, 2024
35a2663
add to treeitem
noraleonte Jun 18, 2024
12fd9cc
move demos
noraleonte Jun 19, 2024
ebc2065
remove default value
noraleonte Jun 19, 2024
f860c91
Merge branch 'master' of github.com:noraleonte/mui-x into add-expansi…
noraleonte Jun 19, 2024
6585285
fix import
noraleonte Jun 19, 2024
5c33e26
Apply suggestions from code review - Flavien
noraleonte Jun 25, 2024
ba45319
Show demo by default
noraleonte Jun 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 5 additions & 30 deletions docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import * as React from 'react';
noraleonte marked this conversation as resolved.
Show resolved Hide resolved
import Box from '@mui/material/Box';
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
import { useTreeItem2Utils } from '@mui/x-tree-view/hooks';

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

const MUI_X_PRODUCTS = [
Expand Down Expand Up @@ -35,37 +33,14 @@ const MUI_X_PRODUCTS = [
},
];

const CustomTreeItem = React.forwardRef(function MyTreeItem(props, ref) {
const { interactions } = useTreeItem2Utils({
itemId: props.itemId,
children: props.children,
});

const handleContentClick = (event) => {
event.defaultMuiPrevented = true;
interactions.handleSelection(event);
};

const handleIconContainerClick = (event) => {
interactions.handleExpansion(event);
};

return (
<TreeItem2
{...props}
ref={ref}
slotProps={{
content: { onClick: handleContentClick },
iconContainer: { onClick: handleIconContainerClick },
}}
/>
);
});

export default function IconExpansionTreeView() {
return (
<Box sx={{ minHeight: 352, minWidth: 250 }}>
<RichTreeView items={MUI_X_PRODUCTS} slots={{ item: CustomTreeItem }} />
<RichTreeView
items={MUI_X_PRODUCTS}
slots={{ item: TreeItem2 }}
expansionTrigger="iconContainer"
/>
</Box>
);
}
40 changes: 6 additions & 34 deletions docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
import { useTreeItem2Utils } from '@mui/x-tree-view/hooks';
import { UseTreeItem2ContentSlotOwnProps } from '@mui/x-tree-view/useTreeItem2';
import { TreeItem2, TreeItem2Props } from '@mui/x-tree-view/TreeItem2';
import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';
import { TreeViewBaseItem } from '@mui/x-tree-view/models';

const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
Expand Down Expand Up @@ -36,40 +34,14 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
},
];

const CustomTreeItem = React.forwardRef(function MyTreeItem(
props: TreeItem2Props,
ref: React.Ref<HTMLLIElement>,
) {
const { interactions } = useTreeItem2Utils({
noraleonte marked this conversation as resolved.
Show resolved Hide resolved
itemId: props.itemId,
children: props.children,
});

const handleContentClick: UseTreeItem2ContentSlotOwnProps['onClick'] = (event) => {
event.defaultMuiPrevented = true;
interactions.handleSelection(event);
};

const handleIconContainerClick = (event: React.MouseEvent) => {
interactions.handleExpansion(event);
};

return (
<TreeItem2
{...props}
ref={ref}
slotProps={{
content: { onClick: handleContentClick },
iconContainer: { onClick: handleIconContainerClick },
}}
/>
);
});

export default function IconExpansionTreeView() {
return (
<Box sx={{ minHeight: 352, minWidth: 250 }}>
<RichTreeView items={MUI_X_PRODUCTS} slots={{ item: CustomTreeItem }} />
<RichTreeView
items={MUI_X_PRODUCTS}
slots={{ item: TreeItem2 }}
noraleonte marked this conversation as resolved.
Show resolved Hide resolved
expansionTrigger="iconContainer"
/>
</Box>
);
}
6 changes: 5 additions & 1 deletion docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,5 @@
<RichTreeView items={MUI_X_PRODUCTS} slots={{ item: CustomTreeItem }} />
<RichTreeView
items={MUI_X_PRODUCTS}
slots={{ item: TreeItem2 }}
expansionTrigger="iconContainer"
/>
61 changes: 16 additions & 45 deletions docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,27 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { useTreeItem2Utils } from '@mui/x-tree-view/hooks';

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

const CustomTreeItem = React.forwardRef(function MyTreeItem(props, ref) {
const { interactions } = useTreeItem2Utils({
itemId: props.itemId,
children: props.children,
});

const handleContentClick = (event) => {
event.defaultMuiPrevented = true;
interactions.handleSelection(event);
};

const handleIconContainerClick = (event) => {
interactions.handleExpansion(event);
};

return (
<TreeItem2
{...props}
ref={ref}
slotProps={{
content: { onClick: handleContentClick },
iconContainer: { onClick: handleIconContainerClick },
}}
/>
);
});

export default function IconExpansionTreeView() {
return (
<Box sx={{ minHeight: 352, minWidth: 250 }}>
<SimpleTreeView aria-label="icon expansion">
<CustomTreeItem itemId="grid" label="Data Grid">
<CustomTreeItem itemId="grid-community" label="@mui/x-data-grid" />
<CustomTreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
<CustomTreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
</CustomTreeItem>
<CustomTreeItem itemId="pickers" label="Date and Time Pickers">
<CustomTreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
<CustomTreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
</CustomTreeItem>
<CustomTreeItem itemId="charts" label="Charts">
<CustomTreeItem itemId="charts-community" label="@mui/x-charts" />
</CustomTreeItem>
<CustomTreeItem itemId="tree-view" label="Tree View">
<CustomTreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
</CustomTreeItem>
<SimpleTreeView aria-label="icon expansion" expansionTrigger="iconContainer">
<TreeItem2 itemId="grid" label="Data Grid">
noraleonte marked this conversation as resolved.
Show resolved Hide resolved
<TreeItem2 itemId="grid-community" label="@mui/x-data-grid" />
<TreeItem2 itemId="grid-pro" label="@mui/x-data-grid-pro" />
<TreeItem2 itemId="grid-premium" label="@mui/x-data-grid-premium" />
</TreeItem2>
<TreeItem2 itemId="pickers" label="Date and Time Pickers">
<TreeItem2 itemId="pickers-community" label="@mui/x-date-pickers" />
<TreeItem2 itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
</TreeItem2>
<TreeItem2 itemId="charts" label="Charts">
<TreeItem2 itemId="charts-community" label="@mui/x-charts" />
</TreeItem2>
<TreeItem2 itemId="tree-view" label="Tree View">
<TreeItem2 itemId="tree-view-community" label="@mui/x-tree-view" />
</TreeItem2>
</SimpleTreeView>
</Box>
);
Expand Down
66 changes: 17 additions & 49 deletions docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +1,27 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { useTreeItem2Utils } from '@mui/x-tree-view/hooks';
import { UseTreeItem2ContentSlotOwnProps } from '@mui/x-tree-view/useTreeItem2';
import { TreeItem2, TreeItem2Props } from '@mui/x-tree-view/TreeItem2';

const CustomTreeItem = React.forwardRef(function MyTreeItem(
props: TreeItem2Props,
ref: React.Ref<HTMLLIElement>,
) {
const { interactions } = useTreeItem2Utils({
itemId: props.itemId,
children: props.children,
});

const handleContentClick: UseTreeItem2ContentSlotOwnProps['onClick'] = (event) => {
event.defaultMuiPrevented = true;
interactions.handleSelection(event);
};

const handleIconContainerClick = (event: React.MouseEvent) => {
interactions.handleExpansion(event);
};

return (
<TreeItem2
{...props}
ref={ref}
slotProps={{
content: { onClick: handleContentClick },
iconContainer: { onClick: handleIconContainerClick },
}}
/>
);
});
import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';

export default function IconExpansionTreeView() {
return (
<Box sx={{ minHeight: 352, minWidth: 250 }}>
<SimpleTreeView aria-label="icon expansion">
<CustomTreeItem itemId="grid" label="Data Grid">
<CustomTreeItem itemId="grid-community" label="@mui/x-data-grid" />
<CustomTreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
<CustomTreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
</CustomTreeItem>
<CustomTreeItem itemId="pickers" label="Date and Time Pickers">
<CustomTreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
<CustomTreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
</CustomTreeItem>
<CustomTreeItem itemId="charts" label="Charts">
<CustomTreeItem itemId="charts-community" label="@mui/x-charts" />
</CustomTreeItem>
<CustomTreeItem itemId="tree-view" label="Tree View">
<CustomTreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
</CustomTreeItem>
<SimpleTreeView aria-label="icon expansion" expansionTrigger="iconContainer">
<TreeItem2 itemId="grid" label="Data Grid">
<TreeItem2 itemId="grid-community" label="@mui/x-data-grid" />
<TreeItem2 itemId="grid-pro" label="@mui/x-data-grid-pro" />
<TreeItem2 itemId="grid-premium" label="@mui/x-data-grid-premium" />
</TreeItem2>
<TreeItem2 itemId="pickers" label="Date and Time Pickers">
<TreeItem2 itemId="pickers-community" label="@mui/x-date-pickers" />
<TreeItem2 itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
</TreeItem2>
<TreeItem2 itemId="charts" label="Charts">
<TreeItem2 itemId="charts-community" label="@mui/x-charts" />
</TreeItem2>
<TreeItem2 itemId="tree-view" label="Tree View">
<TreeItem2 itemId="tree-view-community" label="@mui/x-tree-view" />
</TreeItem2>
</SimpleTreeView>
</Box>
);
Expand Down
4 changes: 4 additions & 0 deletions docs/pages/x/api/tree-view/rich-tree-view.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@
"disabledItemsFocusable": { "type": { "name": "bool" }, "default": "false" },
"disableSelection": { "type": { "name": "bool" }, "default": "false" },
"expandedItems": { "type": { "name": "arrayOf", "description": "Array&lt;string&gt;" } },
"expansionTrigger": {
"type": { "name": "enum", "description": "'content'<br>&#124;&nbsp;'iconContainer'" },
"default": "'content'"
},
"experimentalFeatures": {
"type": { "name": "shape", "description": "{ indentationAtItemLevel?: bool }" }
},
Expand Down
4 changes: 4 additions & 0 deletions docs/pages/x/api/tree-view/simple-tree-view.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@
"disabledItemsFocusable": { "type": { "name": "bool" }, "default": "false" },
"disableSelection": { "type": { "name": "bool" }, "default": "false" },
"expandedItems": { "type": { "name": "arrayOf", "description": "Array&lt;string&gt;" } },
"expansionTrigger": {
"type": { "name": "enum", "description": "'content'<br>&#124;&nbsp;'iconContainer'" },
"default": "'content'"
},
"experimentalFeatures": {
"type": { "name": "shape", "description": "{ indentationAtItemLevel?: bool }" }
},
Expand Down
4 changes: 4 additions & 0 deletions docs/pages/x/api/tree-view/tree-view.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@
"disabledItemsFocusable": { "type": { "name": "bool" }, "default": "false" },
"disableSelection": { "type": { "name": "bool" }, "default": "false" },
"expandedItems": { "type": { "name": "arrayOf", "description": "Array&lt;string&gt;" } },
"expansionTrigger": {
"type": { "name": "enum", "description": "'content'<br>&#124;&nbsp;'iconContainer'" },
"default": "'content'"
},
"experimentalFeatures": {
"type": { "name": "shape", "description": "{ indentationAtItemLevel?: bool }" }
},
Expand Down
3 changes: 3 additions & 0 deletions docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
"expandedItems": {
"description": "Expanded item ids. Used when the item&#39;s expansion is controlled."
},
"expansionTrigger": {
"description": "The slot that triggers the item&#39;s expansion when clicked."
},
"experimentalFeatures": {
"description": "Unstable features, breaking changes might be introduced. For each feature, if the flag is not explicitly set to <code>true</code>, the feature will be fully disabled and any property / method call will not have any effect."
},
Expand Down
3 changes: 3 additions & 0 deletions docs/translations/api-docs/tree-view/simple-tree-view/simple-tree-view.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@
"expandedItems": {
"description": "Expanded item ids. Used when the item&#39;s expansion is controlled."
},
"expansionTrigger": {
"description": "The slot that triggers the item&#39;s expansion when clicked."
},
"experimentalFeatures": {
"description": "Unstable features, breaking changes might be introduced. For each feature, if the flag is not explicitly set to <code>true</code>, the feature will be fully disabled and any property / method call will not have any effect."
},
Expand Down
3 changes: 3 additions & 0 deletions docs/translations/api-docs/tree-view/tree-view/tree-view.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@
"expandedItems": {
"description": "Expanded item ids. Used when the item&#39;s expansion is controlled."
},
"expansionTrigger": {
"description": "The slot that triggers the item&#39;s expansion when clicked."
},
"experimentalFeatures": {
"description": "Unstable features, breaking changes might be introduced. For each feature, if the flag is not explicitly set to <code>true</code>, the feature will be fully disabled and any property / method call will not have any effect."
},
Expand Down
5 changes: 5 additions & 0 deletions packages/x-tree-view/src/RichTreeView/RichTreeView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,6 +191,11 @@ RichTreeView.propTypes = {
* Used when the item's expansion is controlled.
*/
expandedItems: PropTypes.arrayOf(PropTypes.string),
/**
* The slot that triggers the item's expansion when clicked.
* @default 'content'
*/
expansionTrigger: PropTypes.oneOf(['content', 'iconContainer']),
/**
* Unstable features, breaking changes might be introduced.
* For each feature, if the flag is not explicitly set to `true`,
Expand Down
5 changes: 5 additions & 0 deletions packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,11 @@ SimpleTreeView.propTypes = {
* Used when the item's expansion is controlled.
*/
expandedItems: PropTypes.arrayOf(PropTypes.string),
/**
* The slot that triggers the item's expansion when clicked.
* @default 'content'
*/
expansionTrigger: PropTypes.oneOf(['content', 'iconContainer']),
/**
* Unstable features, breaking changes might be introduced.
* For each feature, if the flag is not explicitly set to `true`,
Expand Down
Loading
Loading