[TreeView] Add onIconClick and onLabelClick #20657
Conversation
Details of bundle changes.Comparing: cbae0f8...1fa7aef Details of page changes
|
oliviertassinari
added
the
component: tree view
|
@tonyhallett is it possible to use this already? |
tonyhallett
changed the title
|
@isren1 you could fork and merge these changes in. I am just a contributor so we will have to wait if this is accepted. |
|
@isrsen1 You can use the version published by codesandbox-ci (check the status details). |
eps1lon
changed the title
|
Thank you everyone for working on this... |
|
@tonyhallett Thanks! |
|
@tonyhallett is there sample code on how to incorporate these changes? Thanks! |
|
@Rony-Kaseyani no sample code currently. Create a wrapper treeitem and prevent default in the appropriate handler. For instance TreeItemClickOnlyExpansion with boolean prop iconExpands. Pass through both handlers and other props. Prevent default in onLabelClick if iconExpands is true and prevent default in onIconClick if iconExpands is false. Default iconExpands to true if this is your preferred choice. |
|
hi @tonyhallett Is there a way to prevent |
|
@zwang1208 the click event is passed to onNodeSelect so you can check defaultPrevented and prevent the selection |
Sorry I'm new to coding. How would you code this within a TreeItem? |
Hello @zwang1208 did you manage to solve this? |
|
@NiroSenor I end up using a variable to control. |
|
Hello @zwang1208, For example how would you prevent onNodeSelect in onIconClick below? ` ` |
|
I think that this is what you are looking for. No need for additional selectingNode. todo You can use the idea to create your own TreeItemX / TreeViewX that fits your common use case. To have icon click do the toggling pass iconClickOnly as true. To have label select under these circumstances have defaultPreventedPrevent as false ( one expands the other selects). |
|
@tonyhallett Thanks for the demo. It works but the child cannot be selected anymore. |
Sorry, had used a regular TreeItem as child, replacing with TreeItemX works |
|
@NiroSenor sorry this should have been addressed to you. |
pass You could also try Tony's solution, i think it's a better way than mine. |
|
Thank you very much @zwang1208 and @tonyhallett First, I am so sorry for being a pain :( Accept my sincere apologies! I am still trying to get this to work for me. I am trying to convert @tonyhallett 's Typescript code to React but I am having a errors in my code... Can you help with this Tony - here @zwang1208 do you have some code demo somewhere that works for me to look at please? Thanks again! |
|
@zwang1208, from your sample code, did you use the useState Hook? |
|
@NiroSenor yes, except for |
|
Is there any way to get the id of the node / icon that was just clicked? |
|
@zwang1208 Thanks! That solves my problem. I was looking at the on* functions on TreeItem rather than TreeView. |
This is a replacement for #20609 and #20087 and provides for issue #19953
Note:
I have also prevented an unnecessary call to onNodeToggle in expandAllSiblings
I have reversed the order onNodeToggle and setExpandedState in expandAllSiblings to be consistent with toggleExpansion
Edit @eps1lon: Closes #19953