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.

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 selectItem and getItemDOMElement methods to the public API #13485

Merged
merged 17 commits into from
Jul 2, 2024

Conversation

flaviendelangle
Copy link
Member

@flaviendelangle flaviendelangle commented Jun 14, 2024

Closes #10113

selectItem doc preview
getItemDOMElement doc preview

@bharatkashyap I propose to expose a method that allow you to easily retrieve the DOM element rather than a method that allow you to scroll.
I first tried to implement something like apiRef.current.scrollToItem(itemId), but I was basically copy-pasting the entire API of the scrollIntoView method.

Your use case can be achieved as follow:

apiRef.current!.selectItem({ event, itemId, isSelected: true });
apiRef.current!.getItemDOMElement(itemId)?.scrollIntoView({ block: 'center' });

And if you are using multi selection you might prefer:

apiRef.current!.selectItem({ event, itemId, isSelected: true, keepExistingSelection: true });
apiRef.current!.getItemDOMElement(itemId)?.scrollIntoView({ block: 'center' });

I'll add some tests once we agree on the DX

@flaviendelangle flaviendelangle self-assigned this Jun 14, 2024
@flaviendelangle flaviendelangle added the component: tree view TreeView, TreeItem. This is the name of the generic UI component, not the React module! label Jun 14, 2024
@@ -56,9 +56,10 @@ Use the `setItemExpansion` API method to change the expansion of an item.
apiRef.current.setItemExpansion(
// The DOM event that triggered the change
event,
// The ID of the item to expand or collapse
// The id of the item to expand or collapse
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried to unify a bit the wording for those boolean parameters throughout the Tree View codebase
And to always have the same descriptions for the params in the JSDoc and in the doc section

@flaviendelangle flaviendelangle marked this pull request as ready for review June 14, 2024 14:33
@bharatkashyap
Copy link
Member

@flaviendelangle This DX looks perfectly agreeable to me 👍🏻

newSelected = [itemId].concat(cleanSelectedItems);
} else {
newSelected = cleanSelectedItems;
}
} else {
// eslint-disable-next-line no-lonely-if
if (newValue === false) {
if (isSelected === false || (isSelected == null && instance.isItemSelected(itemId))) {
Copy link
Member Author

@flaviendelangle flaviendelangle Jun 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Small fix: in single selection, if isSelected is not defined and the item is selected we should de-select.

I fixed the usage of this method in useTreeItemState and useTreeItem2Utils to keep the same behavior on the UI.

Copy link
Contributor

@noraleonte noraleonte left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very nice addition 👌 The DX is good, and the docs look nice. Thanks for adding this 🎉 Left a little nitpick, but looks good to me otherwise

@flaviendelangle flaviendelangle merged commit 76832df into mui:master Jul 2, 2024
15 checks passed
@flaviendelangle flaviendelangle deleted the select-item-apiRef branch July 2, 2024 09:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: tree view TreeView, TreeItem. This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[TreeView] Scroll to programmatically selected tree item
4 participants