forked from mui/mui-x
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[TreeView] Add public API and expose focus method (mui#12143)
Signed-off-by: Nora <72460825+noraleonte@users.noreply.github.com> Co-authored-by: Flavien DELANGLE <flaviendelangle@gmail.com>
- Loading branch information
1 parent
fdfc2b6
commit 337f1e5
Showing
37 changed files
with
543 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
54 changes: 54 additions & 0 deletions
54
docs/data/tree-view/rich-tree-view/focus/FocusedRichTreeView.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import * as React from 'react'; | ||
| import Box from '@mui/material/Box'; | ||
| import Button from '@mui/material/Button'; | ||
| import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; | ||
|
|
||
| import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef'; | ||
|
|
||
| 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 FocusedRichTreeView() { | ||
| const apiRef = useTreeViewApiRef(); | ||
| const handleButtonClick = (event) => { | ||
| apiRef.current?.focusNode(event, 'pickers'); | ||
| }; | ||
|
|
||
| return ( | ||
| <Box sx={{ flexGrow: 1, maxWidth: 400 }}> | ||
| <Box sx={{ mb: 1 }}> | ||
| <Button onClick={handleButtonClick}>Focus pickers node</Button> | ||
| </Box> | ||
| <Box sx={{ height: 264, flexGrow: 1 }}> | ||
| <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} /> | ||
| </Box> | ||
| </Box> | ||
| ); | ||
| } |
54 changes: 54 additions & 0 deletions
54
docs/data/tree-view/rich-tree-view/focus/FocusedRichTreeView.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import * as React from 'react'; | ||
| import Box from '@mui/material/Box'; | ||
| import Button from '@mui/material/Button'; | ||
| import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; | ||
| import { TreeViewBaseItem } from '@mui/x-tree-view/models'; | ||
| import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef'; | ||
|
|
||
| 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 FocusedRichTreeView() { | ||
| const apiRef = useTreeViewApiRef(); | ||
| const handleButtonClick = (event: React.SyntheticEvent) => { | ||
| apiRef.current?.focusNode(event, 'pickers'); | ||
| }; | ||
|
|
||
| return ( | ||
| <Box sx={{ flexGrow: 1, maxWidth: 400 }}> | ||
| <Box sx={{ mb: 1 }}> | ||
| <Button onClick={handleButtonClick}>Focus pickers node</Button> | ||
| </Box> | ||
| <Box sx={{ height: 264, flexGrow: 1 }}> | ||
| <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} /> | ||
| </Box> | ||
| </Box> | ||
| ); | ||
| } |
6 changes: 6 additions & 0 deletions
6
docs/data/tree-view/rich-tree-view/focus/FocusedRichTreeView.tsx.preview
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| <Box sx={{ mb: 1 }}> | ||
| <Button onClick={handleButtonClick}>Focus pickers node</Button> | ||
| </Box> | ||
| <Box sx={{ height: 264, flexGrow: 1 }}> | ||
| <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} /> | ||
| </Box> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| --- | ||
| productId: x-tree-view | ||
| title: Rich Tree View - Focus | ||
| components: RichTreeView, TreeItem | ||
| packageName: '@mui/x-tree-view' | ||
| githubLabel: 'component: tree view' | ||
| waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/ | ||
| --- | ||
|
|
||
| # Rich Tree View - Focus | ||
|
|
||
| <p class="description">Learn how to focus Tree View items.</p> | ||
|
|
||
| ## Focus a specific node | ||
|
|
||
| You can use the the `apiRef.focusNode` method to focus a specific node. | ||
| This methods receives two parameters: `event` and `nodeId`. | ||
|
|
||
| :::success | ||
| To use the `apiRef` object, you need to initialize it using the `useTreeViewApiRef` hook as follows: | ||
|
|
||
| ```tsx | ||
| const apiRef = useTreeViewApiRef(); | ||
|
|
||
| return <RichTreeView apiRef={apiRef} items={ITEMS}>; | ||
| ``` | ||
|
|
||
| `apiRef` will be undefined during the first render and will then contain methods allowing you to imperatively interact with the Tree View. | ||
| ::: | ||
|
|
||
| :::info | ||
| This method only works with nodes that are currently visible. | ||
| Calling `apiRef.focusNode` on a node whose parent is collapsed will do nothing. | ||
| ::: | ||
|
|
||
| {{"demo": "FocusedRichTreeView.js"}} |
40 changes: 40 additions & 0 deletions
40
docs/data/tree-view/simple-tree-view/focus/FocusedSimpleTreeView.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import * as React from 'react'; | ||
| import Box from '@mui/material/Box'; | ||
| import Button from '@mui/material/Button'; | ||
| import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; | ||
| import { TreeItem } from '@mui/x-tree-view/TreeItem'; | ||
| import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef'; | ||
|
|
||
| export default function FocusedSimpleTreeView() { | ||
| const apiRef = useTreeViewApiRef(); | ||
| const handleButtonClick = (event) => { | ||
| apiRef.current?.focusNode(event, 'pickers'); | ||
| }; | ||
|
|
||
| return ( | ||
| <Box sx={{ flexGrow: 1, maxWidth: 400 }}> | ||
| <Box sx={{ mb: 1 }}> | ||
| <Button onClick={handleButtonClick}>Focus pickers node</Button> | ||
| </Box> | ||
| <Box sx={{ minHeight: 264, flexGrow: 1 }}> | ||
| <SimpleTreeView apiRef={apiRef}> | ||
| <TreeItem nodeId="grid" label="Data Grid"> | ||
| <TreeItem nodeId="grid-community" label="@mui/x-data-grid" /> | ||
| <TreeItem nodeId="grid-pro" label="@mui/x-data-grid-pro" /> | ||
| <TreeItem nodeId="grid-premium" label="@mui/x-data-grid-premium" /> | ||
| </TreeItem> | ||
| <TreeItem nodeId="pickers" label="Date and Time Pickers"> | ||
| <TreeItem nodeId="pickers-community" label="@mui/x-date-pickers" /> | ||
| <TreeItem nodeId="pickers-pro" label="@mui/x-date-pickers-pro" /> | ||
| </TreeItem> | ||
| <TreeItem nodeId="charts" label="Charts"> | ||
| <TreeItem nodeId="charts-community" label="@mui/x-charts" /> | ||
| </TreeItem> | ||
| <TreeItem nodeId="tree-view" label="Tree View"> | ||
| <TreeItem nodeId="tree-view-community" label="@mui/x-tree-view" /> | ||
| </TreeItem> | ||
| </SimpleTreeView> | ||
| </Box> | ||
| </Box> | ||
| ); | ||
| } |
40 changes: 40 additions & 0 deletions
40
docs/data/tree-view/simple-tree-view/focus/FocusedSimpleTreeView.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import * as React from 'react'; | ||
| import Box from '@mui/material/Box'; | ||
| import Button from '@mui/material/Button'; | ||
| import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; | ||
| import { TreeItem } from '@mui/x-tree-view/TreeItem'; | ||
| import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef'; | ||
|
|
||
| export default function FocusedSimpleTreeView() { | ||
| const apiRef = useTreeViewApiRef(); | ||
| const handleButtonClick = (event: React.SyntheticEvent) => { | ||
| apiRef.current?.focusNode(event, 'pickers'); | ||
| }; | ||
|
|
||
| return ( | ||
| <Box sx={{ flexGrow: 1, maxWidth: 400 }}> | ||
| <Box sx={{ mb: 1 }}> | ||
| <Button onClick={handleButtonClick}>Focus pickers node</Button> | ||
| </Box> | ||
| <Box sx={{ minHeight: 264, flexGrow: 1 }}> | ||
| <SimpleTreeView apiRef={apiRef}> | ||
| <TreeItem nodeId="grid" label="Data Grid"> | ||
| <TreeItem nodeId="grid-community" label="@mui/x-data-grid" /> | ||
| <TreeItem nodeId="grid-pro" label="@mui/x-data-grid-pro" /> | ||
| <TreeItem nodeId="grid-premium" label="@mui/x-data-grid-premium" /> | ||
| </TreeItem> | ||
| <TreeItem nodeId="pickers" label="Date and Time Pickers"> | ||
| <TreeItem nodeId="pickers-community" label="@mui/x-date-pickers" /> | ||
| <TreeItem nodeId="pickers-pro" label="@mui/x-date-pickers-pro" /> | ||
| </TreeItem> | ||
| <TreeItem nodeId="charts" label="Charts"> | ||
| <TreeItem nodeId="charts-community" label="@mui/x-charts" /> | ||
| </TreeItem> | ||
| <TreeItem nodeId="tree-view" label="Tree View"> | ||
| <TreeItem nodeId="tree-view-community" label="@mui/x-tree-view" /> | ||
| </TreeItem> | ||
| </SimpleTreeView> | ||
| </Box> | ||
| </Box> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| --- | ||
| productId: x-tree-view | ||
| title: Simple Tree View - Focus | ||
| components: SimpleTreeView, TreeItem | ||
| packageName: '@mui/x-tree-view' | ||
| githubLabel: 'component: tree view' | ||
| waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/ | ||
| --- | ||
|
|
||
| # Simple Tree View - Focus | ||
|
|
||
| <p class="description">Learn how to focus Tree View items.</p> | ||
|
|
||
| ## Focus a specific node | ||
|
|
||
| You can use the the `apiRef.focusNode` method to focus a specific node. | ||
| This methods receives two parameters: `event` and `nodeId`. | ||
|
|
||
| :::success | ||
| To use the `apiRef` object, you need to initialize it using the `useTreeViewApiRef` hook as follows: | ||
|
|
||
| ```tsx | ||
| const apiRef = useTreeViewApiRef(); | ||
|
|
||
| return <SimpleTreeView apiRef={apiRef}>{children}</SimpleTreeView>; | ||
| ``` | ||
|
|
||
| `apiRef` will be undefined during the first render and will then contain methods allowing you to imperatively interact with the Tree View. | ||
| ::: | ||
|
|
||
| :::info | ||
| This method only works with nodes that are currently visible. | ||
| Calling `apiRef.focusNode` on a node whose parent is collapsed will do nothing. | ||
| ::: | ||
|
|
||
| {{"demo": "FocusedSimpleTreeView.js"}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import * as React from 'react'; | ||
| import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; | ||
| import * as pageProps from 'docsx/data/tree-view/rich-tree-view/focus/focus.md?@mui/markdown'; | ||
|
|
||
| export default function Page() { | ||
| return <MarkdownDocs {...pageProps} />; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import * as React from 'react'; | ||
| import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; | ||
| import * as pageProps from 'docsx/data/tree-view/simple-tree-view/focus/focus.md?@mui/markdown'; | ||
|
|
||
| export default function Page() { | ||
| return <MarkdownDocs {...pageProps} />; | ||
| } |
3 changes: 3 additions & 0 deletions
3
docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 changes: 3 additions & 0 deletions
3
docs/translations/api-docs/tree-view/simple-tree-view/simple-tree-view.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 changes: 3 additions & 0 deletions
3
docs/translations/api-docs/tree-view/tree-view/tree-view.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.