Adding Demo To Source Code

[PurplePineapple123]

Would you be open to adding a working demo to the source code? I know demos are available on codepen, however, I wanted to fork the repo and play around with it on a localserver. Thanks!

[minop1205]

Thank you for your message.

I am sorry, but I do not plan to include the demo code in the repository at this time. However, I am currently migrating each demo to Storybook, so you will be able to use Storybook in the near future to try things out on your local server.

You can also export the public CodeSandbox demos to your own repository.

You can open any demo screen of CodeSandbox and create a repository with any name from Github in the main menu.

If you clone that repository locally, you will be able to edit and play with the same demo as CSB on your local server.

NOTE: If you create a repository from the CSB demo, npm install of the cloned project may fail to resolve the dependency and cause an error. In this case, please use npm install --legacy-peer-deps to install.

[martinmoesby]

I am trying to figure out how the manual sort callback function works, but cannot seem to get it to work. My data does contain a Sortorder key and most nodes, are correctly places in the tree - but some nodes at placed at the bottom, even though the node should be placed in the middle (at root leve with parent = 0)

Is it possible to get en example of the callback function for the manual sort?

[minop1205]

@martinmoesby The sort API should be passed a comparison function. Do you find the following sample useful?

https://codesandbox.io/s/custom-sort-js-znkrh?file=/src/App.jsx

NOTE: By default, nodes that are droppable are placed before nodes that are non-droppable. To disable this and have them both sorted at the same level, set the insertDroppableFirst property to false.

[martinmoesby]

@martinmoesby The sort API should be passed a comparison function. Do you find the following sample useful?

https://codesandbox.io/s/custom-sort-js-znkrh?file=/src/App.jsx

NOTE: By default, nodes that are droppable are placed before nodes that are non-droppable. To disable this and have them both sorted at the same level, set the insertDroppableFirst property to false.

Thank you - this was just what I needed :)

[martinmoesby]

@martinmoesby The sort API should be passed a comparison function. Do you find the following sample useful? https://codesandbox.io/s/custom-sort-js-znkrh?file=/src/App.jsx NOTE: By default, nodes that are droppable are placed before nodes that are non-droppable. To disable this and have them both sorted at the same level, set the insertDroppableFirst property to false.

Thank you - this was just what I needed :)

Just one other question/remark... When implementing this using TYpeScript, I get an error: "Type '(a: NodeModel, b: NodeModel) => 1 | 0 | -1' is not assignable to type 'boolean | SortCallback | undefined'.

          sort={(a:NodeModel<IHierarchyNode>, b:NodeModel<IHierarchyNode>) => {
            if (a.data!.sortOrder > b.data!.sortOrder) {
              return 1;
            } else if (a.data!.sortOrder < b.data!.sortOrder) {
              return -1;
            }
            return 0;
          }}

[minop1205]

@martinmoesby Thanks for the bug report!

I checked the code and found that the type definition of the sort callback did not support generic types.

I've just fixed it and published it as an alpha version, so please try it.

npm install @minoru/react-dnd-treeview@alpha

Please let me know if you have any problems. If there are no problems, I will include it in the next official release.

[minop1205]

Merged: https://github.com/minop1205/react-dnd-treeview/pull/75/files

I published it as v1.5.10