search

minop1205 / react-dnd-treeview

A draggable / droppable React-based treeview component. You can use render props to create each node freely.
MIT License
530 stars 71 forks source link

[Feature] support show structure line #170

Closed percy507 closed 1 year ago

percy507 commented 1 year ago

There is an demo from MUI. https://mui.com/x/

image
percy507 commented 1 year ago

Referable example: https://iamkate.com/code/tree-views/

minop1205 commented 1 year ago

@percy507 Thank you for your suggestion.

In react-dnd-treeview, the implementation regarding appearance is left to the user of the library.

The structure line is the part related to appearance, where all kinds of designs exist.

Therefore, I do not include the implementation of the structure line in the library, but would like it to be done by the application that uses the library.

However, since the display of structure lines is a common use case in treeviews, I believe it is necessary to provide sample codes.

In providing samples, I will consider extending the render options, etc., if they cannot be implemented with existing functionality alone.

nilesh2b commented 1 year ago

@minop1205 Is it possible to show the tree in horizontal view?

abrman commented 1 year ago

@minop1205 Is it possible to show the tree in horizontal view?

Can you provide an example of what you mean by horizontal view?

abrman commented 1 year ago

@percy507 I was interested in something similar as you, so I built this using this react-dnd-treeview component. Let me know if you're still looking for a MUI similar treeview style.

https://user-images.githubusercontent.com/6663260/212092428-9cb73dcc-0ec7-478b-a72d-13b5a4cdf907.mp4

percy507 commented 1 year ago

@abrman Looks great. It will be nice if you can make a PR to add this feature as an example.

abrman commented 1 year ago

Right. I'm not sure if I should add it to stories somehow, also think it might be my first PR on a public project ever. lol

Anyways, here's the demo: https://codesandbox.io/s/nifty-farrell-qpq9h3?file=/src/App.tsx

percy507 commented 1 year ago

Anyways, here's the demo: https://codesandbox.io/s/nifty-farrell-qpq9h3?file=/src/App.tsx

@minop1205 What do you think about adding this demo to the stories?

minop1205 commented 1 year ago

@percy507 @abrman Thanks for the great samples!

If you can, please send us a pull request with additional stories and we will review and merge them.

At that time, it would be great if you could add the test as well as the other stories, but if it is difficult, I will add the test on my end.

percy507 commented 1 year ago

@abrman Be bold and submit your first PR.

minop1205 commented 1 year ago

@abrman Thank you for your contribution! Merged: https://github.com/minop1205/react-dnd-treeview/pull/183 Demo: https://minop1205.github.io/react-dnd-treeview/?path=/docs/basic-examples-directory-structure--directory-structure-story