TreeView: Implement typeahead #2357
Conversation
🦋 Changeset detectedLatest commit: a0b090c The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
size-limit report 📦
|
There was a problem hiding this comment.
This is looking great!
Just two questions before I approve:
- Will
useTypeaheadstill work if child nodes are loaded asynchronously when their parent directory is opened? - Any idea how we could handle typeahead functionality if tree nodes are virtualized? It would be nice if I could still jump to a matching node even if it hasn't been loaded into the DOM yet.
| onFocusChange: (element: Element) => void | ||
| } | ||
|
|
||
| export function useTypeahead({containerRef, onFocusChange}: TypeaheadOptions) { |
| * wrapArray(['a', 'b', 'c', 'd'], 2) // ['c', 'd', 'a', 'b'] | ||
| */ | ||
| function wrapArray<T>(array: T[], startIndex: number) { | ||
| return array.map((_, index) => array[(startIndex + index) % array.length]) |
There was a problem hiding this comment.
Very cool. I love those rare moments where you get to use a modulo.
Yeah, this implementation should work correctly with asynchronously loaded items. I will verify when I implement the async functionality 👍
Hmm. I haven't considered virtualization yet, but I imagine it will add a fair amount of complexity to the overall implementation. Is virtualization support in-scope for TreeView v1? |
Co-authored-by: Josh Black <joshblack@github.com>
|
@colebemis - we haven't discussed whether virtualization is in scope for v1. I think we can move forward without virtualization support for v1. When/if it comes up we'll collaborate with product engineers to support virtualization. Sound good? |
Summary
Implements typeahead search of items in a TreeView:
👉 Try it out
CleanShot.2022-09-20.at.16.47.30.mp4
Per @jsholes's suggestion, users can type multiple typeahead characters within a given timeout (300ms).
Test cases
What should reviewers focus on?
Merge checklist
Added/updated documentationTake a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.