feat: (React Aria) Implement filtering on a per CollectionNode basis #8641
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -17,6 +17,8 @@ export type Mutable<T> = { | |
| -readonly[P in keyof T]: T[P] | ||
| } | ||
|
|
||
| type FilterFn<T> = (textValue: string, node: Node<T>) => boolean; | ||
|
|
||
| /** An immutable object representing a Node in a Collection. */ | ||
| export class CollectionNode<T> implements Node<T> { | ||
| readonly type: string; | ||
|
|
@@ -65,8 +67,64 @@ export class CollectionNode<T> implements Node<T> { | |
| node.render = this.render; | ||
| node.colSpan = this.colSpan; | ||
| node.colIndex = this.colIndex; | ||
| node.filter = this.filter; | ||
LFDanLu marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| return node; | ||
| } | ||
|
|
||
| filter(collection: BaseCollection<T>, newCollection: BaseCollection<T>, filterFn: FilterFn<T>): CollectionNode<T> | null { | ||
| let [firstKey, lastKey] = filterChildren(collection, newCollection, this.firstChildKey, filterFn); | ||
| let newNode: Mutable<CollectionNode<T>> = this.clone(); | ||
| newNode.firstChildKey = firstKey; | ||
| newNode.lastChildKey = lastKey; | ||
| return newNode; | ||
| } | ||
| } | ||
|
|
||
| // TODO: naming, but essentially these nodes shouldn't be affected by filtering (BaseNode)? | ||
| // Perhaps this filter logic should be in CollectionNode instead and the current logic of CollectionNode's filter should move to Table | ||
| export class FilterLessNode<T> extends CollectionNode<T> { | ||
|
Comment on lines
+83
to
+85
There was a problem hiding this comment. open to opinions on the below nodes (naming and if BaseCollection's filter should instead be "do nothing") There was a problem hiding this comment.
There was a problem hiding this comment.
|
||
| // eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
| filter(collection: BaseCollection<T>, newCollection: BaseCollection<T>, filterFn: FilterFn<T>): FilterLessNode<T> | null { | ||
| return this.clone(); | ||
| } | ||
| } | ||
|
|
||
| export class ItemNode<T> extends CollectionNode<T> { | ||
| static readonly type = 'item'; | ||
|
|
||
| constructor(key: Key) { | ||
| super(ItemNode.type, key); | ||
|
There was a problem hiding this comment. Could the base CollectionNode class handle this? It could read There was a problem hiding this comment. made the change in #8695 for convience |
||
| } | ||
LFDanLu marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| filter(collection: BaseCollection<T>, newCollection: BaseCollection<T>, filterFn: FilterFn<T>): ItemNode<T> | null { | ||
| if (filterFn(this.textValue, this)) { | ||
| return this.clone(); | ||
|
There was a problem hiding this comment. Do the nodes always need to be cloned? Might be faster to lazily clone only when needed (e.g. when updating prevKey/nextKey. There was a problem hiding this comment. hm, tried this and it broke filtering, digging |
||
| } | ||
|
|
||
| return null; | ||
| } | ||
| } | ||
|
|
||
| export class SectionNode<T> extends CollectionNode<T> { | ||
| static readonly type = 'section'; | ||
|
|
||
| constructor(key: Key) { | ||
| super(SectionNode.type, key); | ||
| } | ||
|
|
||
| filter(collection: BaseCollection<T>, newCollection: BaseCollection<T>, filterFn: FilterFn<T>): SectionNode<T> | null { | ||
| let filteredSection = super.filter(collection, newCollection, filterFn); | ||
| if (filteredSection) { | ||
| if (filteredSection.lastChildKey !== null) { | ||
| let lastChild = collection.getItem(filteredSection.lastChildKey); | ||
| if (lastChild && lastChild.type !== 'header') { | ||
| return filteredSection; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| return null; | ||
| } | ||
| } | ||
|
|
||
| /** | ||
|
|
@@ -224,134 +282,65 @@ export class BaseCollection<T> implements ICollection<Node<T>> { | |
| this.frozen = !isSSR; | ||
| } | ||
|
|
||
| filter(filterFn: FilterFn<T>, newCollection?: BaseCollection<T>): BaseCollection<T> { | ||
| if (newCollection == null) { | ||
| newCollection = new BaseCollection<T>(); | ||
| } | ||
|
|
||
| let [firstKey, lastKey] = filterChildren(this, newCollection, this.firstKey, filterFn); | ||
| newCollection.firstKey = firstKey; | ||
| newCollection.lastKey = lastKey; | ||
| return newCollection; | ||
| } | ||
| } | ||
|
|
||
| function filterChildren<T>(collection: BaseCollection<T>, newCollection: BaseCollection<T>, firstChildKey: Key | null, filterFn: FilterFn<T>): [Key | null, Key | null] { | ||
| // loop over the siblings for firstChildKey | ||
| // create new nodes based on calling node.filter for each child | ||
| // if it returns null then don't include it, otherwise update its prev/next keys | ||
| // add them to the newCollection | ||
| if (firstChildKey == null) { | ||
| return [null, null]; | ||
| } | ||
|
|
||
| let firstNode: Node<T> | null = null; | ||
| let lastNode: Node<T> | null = null; | ||
| let currentNode = collection.getItem(firstChildKey); | ||
|
|
||
| while (currentNode != null) { | ||
| let newNode: Mutable<CollectionNode<T>> | null = (currentNode as CollectionNode<T>).filter(collection, newCollection, filterFn); | ||
| if (newNode != null) { | ||
| newNode.nextKey = null; | ||
| if (lastNode) { | ||
| newNode.prevKey = lastNode.key; | ||
| lastNode.nextKey = newNode.key; | ||
| } | ||
|
|
||
| if (firstNode == null) { | ||
| firstNode = newNode; | ||
| } | ||
|
|
||
| newCollection.addNode(newNode); | ||
| lastNode = newNode; | ||
snowystinger marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| } | ||
|
|
||
| currentNode = currentNode.nextKey ? collection.getItem(currentNode.nextKey) : null; | ||
| } | ||
|
|
||
| // TODO: this is pretty specific to dividers but doesn't feel like there is a good way to get around it since we only can know | ||
| // to filter the last separator in a collection only after performing a filter for the rest of the contents after it | ||
| // Its gross that it needs to live here, might be nice if somehow we could have this live in the separator code | ||
| if (lastNode && lastNode.type === 'separator') { | ||
LFDanLu marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| let prevKey = lastNode.prevKey; | ||
| newCollection.removeNode(lastNode.key); | ||
|
|
||
| if (prevKey) { | ||
| lastNode = newCollection.getItem(prevKey) as Mutable<CollectionNode<T>>; | ||
| lastNode.nextKey = null; | ||
| } else { | ||
| lastNode = null; | ||
| } | ||
| } | ||
|
|
||
| return [firstNode?.key ?? null, lastNode?.key ?? null]; | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.