From 6f3586c35f45eb6c3495ba2bd04f25e979ba68df Mon Sep 17 00:00:00 2001 From: tidy-dev <75402236+tidy-dev@users.noreply.github.com> Date: Wed, 18 Dec 2024 11:47:50 -0500 Subject: [PATCH 1/2] Bubble up the filtered items --- app/src/ui/changes/filter-changes-list.tsx | 11 ++++++++++ app/src/ui/lib/augmented-filter-list.tsx | 24 ++++++++++++++++++---- 2 files changed, 31 insertions(+), 4 deletions(-) diff --git a/app/src/ui/changes/filter-changes-list.tsx b/app/src/ui/changes/filter-changes-list.tsx index 86559219347..47c94cb9a60 100644 --- a/app/src/ui/changes/filter-changes-list.tsx +++ b/app/src/ui/changes/filter-changes-list.tsx @@ -236,6 +236,7 @@ interface IFilterChangesListProps { interface IFilterChangesListState { readonly filterText: string + readonly filteredItems: ReadonlyArray readonly selectedItems: ReadonlyArray readonly focusedRow: string | null readonly groups: ReadonlyArray> @@ -280,6 +281,7 @@ export class FilterChangesList extends React.Component< this.state = { filterText: '', + filteredItems: [], selectedItems: getSelectedItemsFromProps(props), focusedRow: null, groups, @@ -1026,6 +1028,14 @@ export class FilterChangesList extends React.Component< this.setState({ filterText: text }) } + private onFilterListResultsChanged = ( + filteredItems: ReadonlyArray + ) => { + this.setState({ filteredItems }) + // TBD: Remove when used. + console.log(this.state.filteredItems, filteredItems) + } + private onFileSelectionChanged = (items: ReadonlyArray) => { const rows = items.map(i => this.props.workingDirectory.files.findIndex(f => f.id === i.change.id) @@ -1085,6 +1095,7 @@ export class FilterChangesList extends React.Component< rowHeight={RowHeight} filterText={this.state.filterText} onFilterTextChanged={this.onFilterTextChanged} + onFilterListResultsChanged={this.onFilterListResultsChanged} selectedItems={this.state.selectedItems} selectionMode="multi" renderItem={this.renderChangedFile} diff --git a/app/src/ui/lib/augmented-filter-list.tsx b/app/src/ui/lib/augmented-filter-list.tsx index 65c2b5bc057..621c1b5a5e2 100644 --- a/app/src/ui/lib/augmented-filter-list.tsx +++ b/app/src/ui/lib/augmented-filter-list.tsx @@ -152,7 +152,9 @@ interface IAugmentedSectionFilterListProps { /** * Callback to fire when the items in the filter list are updated */ - readonly onFilterListResultsChanged?: (resultCount: number) => void + readonly onFilterListResultsChanged?: ( + filteredItems: ReadonlyArray + ) => void /** Placeholder text for text box. Default is "Filter". */ readonly placeholderText?: string @@ -277,11 +279,25 @@ export class AugmentedSectionFilterList< } if (this.props.onFilterListResultsChanged !== undefined) { - const itemCount = this.state.rows + const oldfilteredItems = prevState.rows + .flat() + .filter(row => row.kind === 'item') + .map(r => r.item) + + const currentFilteredItemIds = this.state.rows .flat() - .filter(row => row.kind === 'item').length + .filter(row => row.kind === 'item') + .map(r => r.item) - this.props.onFilterListResultsChanged(itemCount) + if ( + oldfilteredItems.length !== currentFilteredItemIds.length || + xor( + oldfilteredItems.map(i => i.id), + currentFilteredItemIds.map(i => i.id) + ).length > 0 + ) { + this.props.onFilterListResultsChanged(currentFilteredItemIds) + } } } From 5a90c674009f983b75d2f0e2b05c2ed41552f3c2 Mon Sep 17 00:00:00 2001 From: tidy-dev <75402236+tidy-dev@users.noreply.github.com> Date: Thu, 19 Dec 2024 08:42:22 -0500 Subject: [PATCH 2/2] Better has same ids documentation --- app/src/ui/lib/augmented-filter-list.tsx | 49 ++++++++++++++---------- 1 file changed, 28 insertions(+), 21 deletions(-) diff --git a/app/src/ui/lib/augmented-filter-list.tsx b/app/src/ui/lib/augmented-filter-list.tsx index 2e90faef631..ba8ac4e78e6 100644 --- a/app/src/ui/lib/augmented-filter-list.tsx +++ b/app/src/ui/lib/augmented-filter-list.tsx @@ -255,20 +255,17 @@ export class AugmentedSectionFilterList< prevState: IAugmentedSectionFilterListState ) { if (this.props.onSelectionChanged) { - const oldSelectedItemIds = prevState.selectedRows.map(row => - getItemIdFromRowIndex(prevState.rows, row) - ) - const newSelectedItemIds = this.state.selectedRows.map(row => - getItemIdFromRowIndex(this.state.rows, row) - ) - - // xor = exclusive Or; returns the symmetric difference of given arrays - // i.e. it will create an array that contains an id that doesn’t exist in - // boths arrays indicating that both arrays do not contain the same ids. - if (xor(oldSelectedItemIds, newSelectedItemIds).length > 0) { + const oldSelectedItemIds = prevState.selectedRows + .map(row => getItemIdFromRowIndex(prevState.rows, row)) + .filter(i => i !== null) + const newSelectedItemIds = this.state.selectedRows + .map(row => getItemIdFromRowIndex(this.state.rows, row)) + .filter(i => i !== null) + + if (!this.hasSameIds(oldSelectedItemIds, newSelectedItemIds)) { const propSelectionIds = this.props.selectedItems.map(si => si.id) - if (xor(newSelectedItemIds, propSelectionIds).length > 0) { + if (!this.hasSameIds(newSelectedItemIds, propSelectionIds)) { const newSelectedItems = this.state.selectedRows .map(row => getItemFromRowIndex(this.state.rows, row)) .filter(r => r !== null) @@ -282,28 +279,38 @@ export class AugmentedSectionFilterList< } if (this.props.onFilterListResultsChanged !== undefined) { - const oldfilteredItems = prevState.rows + const oldFilteredIds = prevState.rows .flat() .filter(row => row.kind === 'item') - .map(r => r.item) + .map(r => r.item.id) const currentFilteredItemIds = this.state.rows .flat() .filter(row => row.kind === 'item') .map(r => r.item) - if ( - oldfilteredItems.length !== currentFilteredItemIds.length || - xor( - oldfilteredItems.map(i => i.id), - currentFilteredItemIds.map(i => i.id) - ).length > 0 - ) { + const currentFilteredIds = currentFilteredItemIds.map(i => i.id) + + if (!this.hasSameIds(oldFilteredIds, currentFilteredIds)) { this.props.onFilterListResultsChanged(currentFilteredItemIds) } } } + private hasSameIds( + oldIds: ReadonlyArray, + newIds: ReadonlyArray + ) { + if (oldIds.length !== newIds.length) { + return false + } + + // xor = exclusive Or; returns the symmetric difference of given arrays + // i.e. it will create an array that contains an id that doesn’t exist in + // both arrays. If no empty array, then both arrays contain the same elements. + return xor(oldIds, newIds).length === 0 + } + public componentDidMount() { if (this.filterTextBox !== null) { this.filterTextBox.selectAll()