From a58b635bd8f80605c59ce6801ee32697b60fd1d5 Mon Sep 17 00:00:00 2001 From: Markus Olsson Date: Thu, 31 Aug 2023 10:21:45 +0200 Subject: [PATCH] Revert "Merge pull request #17225 from desktop/jc-live-container-chill" This reverts commit 426b6dd0a7d7286fe7fd4d2512ce1c59dc892ee4, reversing changes made to 289e4bc250085d1d6aa889a09f519ec96be6b30c. --- app/src/ui/lib/filter-list.tsx | 67 +++++++------------------ app/src/ui/lib/section-filter-list.tsx | 69 +++++++------------------- 2 files changed, 38 insertions(+), 98 deletions(-) diff --git a/app/src/ui/lib/filter-list.tsx b/app/src/ui/lib/filter-list.tsx index 76917eb488..19ed4cbead 100644 --- a/app/src/ui/lib/filter-list.tsx +++ b/app/src/ui/lib/filter-list.tsx @@ -173,7 +173,6 @@ interface IFilterListState { readonly rows: ReadonlyArray> readonly selectedRow: number readonly filterValue: string - readonly filterValueChanged: boolean } /** @@ -194,33 +193,25 @@ export class FilterList extends React.Component< IFilterListProps, IFilterListState > { - public static getDerivedStateFromProps( - props: IFilterListProps, - state: IFilterListState - ) { - return createStateUpdate(props, state) - } - private list: List | null = null private filterTextBox: TextBox | null = null public constructor(props: IFilterListProps) { super(props) - if (props.filterTextBox !== undefined) { - this.filterTextBox = props.filterTextBox - } + this.state = createStateUpdate(props) + } - const filterValue = (props.filterText || '').toLowerCase() - - this.state = { - rows: new Array>(), - selectedRow: -1, - filterValue, - filterValueChanged: filterValue.length > 0, + public componentWillMount() { + if (this.props.filterTextBox !== undefined) { + this.filterTextBox = this.props.filterTextBox } } + public componentWillReceiveProps(nextProps: IFilterListProps) { + this.setState(createStateUpdate(nextProps)) + } + public componentDidUpdate( prevProps: IFilterListProps, prevState: IFilterListState @@ -285,23 +276,6 @@ export class FilterList extends React.Component< ) } - public renderLiveContainer() { - if (!this.state.filterValueChanged) { - return null - } - - const itemRows = this.state.rows.filter(row => row.kind === 'item') - const resultsPluralized = itemRows.length === 1 ? 'result' : 'results' - const screenReaderMessage = `${itemRows.length} ${resultsPluralized}` - - return ( - - ) - } - public renderFilterRow() { if (this.props.hideFilterRow === true) { return null @@ -316,10 +290,16 @@ export class FilterList extends React.Component< } public render() { + const itemRows = this.state.rows.filter(row => row.kind === 'item') + const resultsPluralized = itemRows.length === 1 ? 'result' : 'results' + const screenReaderMessage = `${itemRows.length} ${resultsPluralized}` + return (
- {this.renderLiveContainer()} - + {this.props.renderPreList ? this.props.renderPreList() : null} {this.renderFilterRow()} @@ -597,8 +577,7 @@ export function getText( } function createStateUpdate( - props: IFilterListProps, - state: IFilterListState + props: IFilterListProps ) { const flattenedRows = new Array>() const filter = (props.filterText || '').toLowerCase() @@ -639,15 +618,7 @@ function createStateUpdate( selectedRow = flattenedRows.findIndex(i => i.kind === 'item') } - // Stay true if already set, otherwise become true if the filter has content - const filterValueChanged = state.filterValueChanged ? true : filter.length > 0 - - return { - rows: flattenedRows, - selectedRow, - filterValue: filter, - filterValueChanged, - } + return { rows: flattenedRows, selectedRow, filterValue: filter } } function getItemFromRowIndex( diff --git a/app/src/ui/lib/section-filter-list.tsx b/app/src/ui/lib/section-filter-list.tsx index e064ff9f49..f6b3401dec 100644 --- a/app/src/ui/lib/section-filter-list.tsx +++ b/app/src/ui/lib/section-filter-list.tsx @@ -166,7 +166,6 @@ interface IFilterListState { readonly rows: ReadonlyArray>> readonly selectedRow: RowIndexPath readonly filterValue: string - readonly filterValueChanged: boolean // Indices of groups in the filtered list readonly groups: ReadonlyArray } @@ -175,34 +174,25 @@ interface IFilterListState { export class SectionFilterList< T extends IFilterListItem > extends React.Component, IFilterListState> { - public static getDerivedStateFromProps( - props: ISectionFilterListProps, - state: IFilterListState - ) { - return createStateUpdate(props, state) - } - private list: SectionList | null = null private filterTextBox: TextBox | null = null public constructor(props: ISectionFilterListProps) { super(props) - if (props.filterTextBox !== undefined) { - this.filterTextBox = props.filterTextBox - } + this.state = createStateUpdate(props) + } - const filterValue = (props.filterText || '').toLowerCase() - - this.state = { - rows: new Array>>(), - selectedRow: InvalidRowIndexPath, - filterValue, - filterValueChanged: filterValue.length > 0, - groups: [], + public componentWillMount() { + if (this.props.filterTextBox !== undefined) { + this.filterTextBox = this.props.filterTextBox } } + public componentWillReceiveProps(nextProps: ISectionFilterListProps) { + this.setState(createStateUpdate(nextProps)) + } + public componentDidUpdate( prevProps: ISectionFilterListProps, prevState: IFilterListState @@ -267,23 +257,6 @@ export class SectionFilterList< ) } - public renderLiveContainer() { - if (!this.state.filterValueChanged) { - return null - } - - const itemRows = this.state.rows.flat().filter(row => row.kind === 'item') - const resultsPluralized = itemRows.length === 1 ? 'result' : 'results' - const screenReaderMessage = `${itemRows.length} ${resultsPluralized}` - - return ( - - ) - } - public renderFilterRow() { if (this.props.hideFilterRow === true) { return null @@ -298,10 +271,16 @@ export class SectionFilterList< } public render() { + const itemRows = this.state.rows.flat().filter(row => row.kind === 'item') + const resultsPluralized = itemRows.length === 1 ? 'result' : 'results' + const screenReaderMessage = `${itemRows.length} ${resultsPluralized}` + return (
- {this.renderLiveContainer()} - + {this.props.renderPreList ? this.props.renderPreList() : null} {this.renderFilterRow()} @@ -635,8 +614,7 @@ function getFirstVisibleRow( } function createStateUpdate( - props: ISectionFilterListProps, - state: IFilterListState + props: ISectionFilterListProps ) { const rows = new Array>>() const filter = (props.filterText || '').toLowerCase() @@ -686,16 +664,7 @@ function createStateUpdate( selectedRow = getFirstVisibleRow(rows) } - // Stay true if already set, otherwise become true if the filter has content - const filterValueChanged = state.filterValueChanged ? true : filter.length > 0 - - return { - rows: rows, - selectedRow, - filterValue: filter, - filterValueChanged, - groups: groupIndices, - } + return { rows: rows, selectedRow, filterValue: filter, groups: groupIndices } } function getItemFromRowIndex(