minop1205 / react-dnd-treeview

A draggable / droppable React-based treeview component. You can use render props to create each node freely.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Feature: add callback prop when changing open item IDs

bensalilijames opened this issue Β· comments

Thank you for this fantastic library! πŸ™Œ

One thing that I think it would be great to add is a function prop that is called whenever an item is toggled between being open and being closed, something like:

<Tree
  {...props}
  onChangeOpen={(newOpenIds: TreeModel["id"][]) => {
    // save this to the user's browser, so it can be restored next time
  }}
/>

This would be useful for serialising the current open IDs state to LocalStorage, so that when the user refreshes the page, it can be passed to initialOpen, and the collapsed state of the tree is preserved between sessions!

What do you think? πŸ™‚

@benhjames Thank you!
That's one simple, easy to use API!
I'll work on the implementation as soon as possible

@benhjames Now i pablished v1.5.1 with onChangeOpen callback API.
Please check sample bellow and README.
https://codesandbox.io/s/onchangeopen-callback-issue-55-h6fg5

If you find any bugs, please let me know!!

Thanks so much for such a quick implementation! It works great! πŸ™Œ

Only one small issue, it appears that the TypeScript definition for onChangeOpen doesn't exist in dist/Tree.d.ts in the published package v1.5.1:

Property 'onChangeOpen' does not exist on type 'IntrinsicAttributes & TreeStateBase<unknown> & { listComponent?: ElementType<any>; listItemComponent?: ElementType<any>; ... 7 more ...; canDrag?: (node: NodeModel<...>) => boolean; } & { ...; }'.

I guess must be something weird when building/publishing the package since the source looks correct!

@benhjames Thanks for the report!!
I was able to identify the cause of the problem where the type definitions were not updated after the build.

We have released the fixed version as v1.5.2, so please try it.

Thanks, that's solved it! Thanks for your help! ❀️