Skip to content

Tree view component #900

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 39 commits into from
Feb 12, 2024
Merged

Tree view component #900

merged 39 commits into from
Feb 12, 2024

Conversation

matt-aitken
Copy link
Member

@matt-aitken matt-aitken commented Feb 12, 2024 •
edited
Loading

A useTree hook and TreeView component that will be used for our logs view, and other things.

Features

  • Allows passing in a selectedId and collapsedIds from outside the component.
  • Keyboard navigation.
  • Scroll to node support.
  • Autofocus on page load.
  • Virtualized rows so it only renders what's on screen. This should allow massive trees to be rendered with good performance.
  • Animation when expanding and collapsing parent nodes
  • Filtering with custom logic
CleanShot.2024-02-11.at.15.14.00.mp4

@matt-aitken
WIP creating a TreeView component
c227818
@matt-aitken
Very simple tree displaying
0837e4b
@matt-aitken
WIP on TreeView types
c5264a6
@matt-aitken
The state is computing properly
3c2ef0a
@matt-aitken
Improved the state and types
b3f05f9
@matt-aitken
Virtualized rendering
0f3b80c
@matt-aitken
Added state inside the useTreeState hook
67679c8
@matt-aitken
Selection working
5701554
@matt-aitken
Deselecting nodes
798bce6
@matt-aitken
Toggle selection
ff0bb2d
@matt-aitken
Expanding/collapsing nodes
e088241
@matt-aitken
Get notifications when changes are made
4ca923d
@matt-aitken
Only try show the visible items
e7358e6
@matt-aitken
Experiment to try getting cell animations working
c46a707
@matt-aitken
Renamed hook to useTree
2c38d52
@matt-aitken
Keyboard navigation is working
c96330f
@matt-aitken
Proper focus support
2fd20b7
@matt-aitken
Nice selection of the parent by pressing left
830f124
@matt-aitken
End selects the last visible node
6610b6c
@matt-aitken
Showing how the TreeView can accept a selected id and expanded ids fr…
2103fee 
…om the outside
@matt-aitken
The useTree hook now uses selectedId and collapsedIds to make it easi…
348f8b8 
…er to use
@matt-aitken
Check the inputs are valid before applying them, ignore if they’re not
d4400c1
@matt-aitken
Don’t allow a selected node to be hidden by collapsed parents
ee1d762
@matt-aitken
Nicer API for the onChange callback
6d81693
@matt-aitken
Supports animated collapsing of the tree view
24b4483
@matt-aitken
Nice smooth scrolling
b6850f4
@matt-aitken
Removed logs
b8831da
@matt-aitken
Removed unused key
c9c13bb
@matt-aitken
Remove intricate estimation
62796e3
@matt-aitken
StandardTreeView has lots of good defaults baked in
a427ee4
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Feb 12, 2024 •
edited
Loading

⚠️ No Changeset found

Latest commit: c05e929

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@matt-aitken matt-aitken merged commit 310d51b into main Feb 12, 2024
@matt-aitken matt-aitken deleted the tree-view-component branch February 12, 2024 16:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@matt-aitken