Skip to content

Commit 5a890f3

Browse files
bernhardojbernhardoj
committed
apply the height to the list instead of the whole popover
1 parent 73725df commit 5a890f3

8 files changed

Lines changed: 176 additions & 163 deletions

File tree

‎src/components/Search/FilterDropdowns/CardSelectPopup.tsx‎

Lines changed: 39 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {openSearchCardFiltersPage} from '@libs/actions/Search';
1919
import {buildCardFeedsData, buildCardsData, generateSelectedCards, getDomainFeedData, getSelectedCardsFromFeeds} from '@libs/CardFeedUtils';
2020
import type {CardFilterItem} from '@libs/CardFeedUtils';
2121
import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
22+
import variables from '@styles/variables';
2223
import CONST from '@src/CONST';
2324
import ONYXKEYS from '@src/ONYXKEYS';
2425
import type {SearchAdvancedFiltersForm} from '@src/types/form';
@@ -39,7 +40,8 @@ function CardSelectPopup({isExpanded, updateFilterForm, closeOverlay}: CardSelec
3940
const illustrations = useThemeIllustrations();
4041
const companyCardFeedIcons = useCompanyCardFeedIcons();
4142
const {windowHeight} = useWindowDimensions();
42-
const {shouldUseNarrowLayout, isInLandscapeMode} = useResponsiveLayout();
43+
// eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
44+
const {isSmallScreenWidth, isInLandscapeMode} = useResponsiveLayout();
4345

4446
const [areCardsLoaded] = useOnyx(ONYXKEYS.IS_SEARCH_FILTERS_CARD_DATA_LOADED);
4547
const [userCardList, userCardListMetadata] = useOnyx(ONYXKEYS.CARD_LIST);
@@ -185,31 +187,44 @@ function CardSelectPopup({isExpanded, updateFilterForm, closeOverlay}: CardSelec
185187
onApply={applyChanges}
186188
resetSentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_CARD}
187189
applySentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_CARD}
188-
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- we want to fallback to 1 when it's 0
189-
style={styles.getCardSelectionListPopoverHeight(itemCount || 1, sectionHeaderCount, windowHeight, shouldUseNarrowLayout, isInLandscapeMode, shouldShowSearchInput)}
190190
>
191-
{!!shouldShowLoadingState && (
192-
<View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsCenter]}>
193-
<ActivityIndicator
194-
color={theme.spinner}
195-
size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
196-
style={[styles.pl3]}
197-
reasonAttributes={reasonAttributes}
191+
<View
192+
style={[
193+
styles.getSelectionListPopoverHeight({
194+
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- we want to fallback to 1 when it's 0
195+
itemCount: itemCount || 1,
196+
itemHeight: variables.optionRowHeight,
197+
windowHeight,
198+
isInLandscapeMode,
199+
hasTitle: isSmallScreenWidth,
200+
isSearchable: shouldShowSearchInput,
201+
extraHeight: 28 * sectionHeaderCount,
202+
}),
203+
]}
204+
>
205+
{!!shouldShowLoadingState && (
206+
<View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsCenter]}>
207+
<ActivityIndicator
208+
color={theme.spinner}
209+
size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
210+
style={[styles.pl3]}
211+
reasonAttributes={reasonAttributes}
212+
/>
213+
</View>
214+
)}
215+
{!shouldShowLoadingState && (
216+
<SelectionListWithSections<CardFilterItem>
217+
sections={sections}
218+
ListItem={CardListItem}
219+
onSelectRow={updateNewCards}
220+
shouldPreventDefaultFocusOnSelectRow={false}
221+
shouldShowTextInput={shouldShowSearchInput}
222+
textInputOptions={textInputOptions}
223+
shouldStopPropagation
224+
canSelectMultiple
198225
/>
199-
</View>
200-
)}
201-
{!shouldShowLoadingState && (
202-
<SelectionListWithSections<CardFilterItem>
203-
sections={sections}
204-
ListItem={CardListItem}
205-
onSelectRow={updateNewCards}
206-
shouldPreventDefaultFocusOnSelectRow={false}
207-
shouldShowTextInput={shouldShowSearchInput}
208-
textInputOptions={textInputOptions}
209-
shouldStopPropagation
210-
canSelectMultiple
211-
/>
212-
)}
226+
)}
227+
</View>
213228
</BasePopup>
214229
);
215230
}

‎src/components/Search/FilterDropdowns/GroupByPopup.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -89,14 +89,15 @@ function GroupByPopup({value, sections, style, onBackButtonPress, closeOverlay,
8989
label={translate('search.display.groupBy')}
9090
resetSentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_SINGLE_SELECT}
9191
applySentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_SINGLE_SELECT}
92-
style={[style, styles.getSelectionListPopoverHeight({itemCount, windowHeight, isInLandscapeMode, hasHeader: true})]}
9392
>
94-
<SelectionListWithSections
95-
sections={listSections}
96-
shouldSingleExecuteRowSelect
97-
ListItem={SingleSelectListItem}
98-
onSelectRow={updateSelectedItem}
99-
/>
93+
<View style={[style, styles.getSelectionListPopoverHeight({itemCount, windowHeight, isInLandscapeMode, hasHeader: true})]}>
94+
<SelectionListWithSections
95+
sections={listSections}
96+
shouldSingleExecuteRowSelect
97+
ListItem={SingleSelectListItem}
98+
onSelectRow={updateSelectedItem}
99+
/>
100+
</View>
100101
</BasePopup>
101102
);
102103
}

‎src/components/Search/FilterDropdowns/InSelectPopup.tsx‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, {useEffect, useState} from 'react';
2+
import {View} from 'react-native';
23
import {usePersonalDetails} from '@components/OnyxListItemProvider';
34
import {useOptionsList} from '@components/OptionListContextProvider';
45
import InviteMemberListItem from '@components/SelectionList/ListItem/InviteMemberListItem';
@@ -192,21 +193,31 @@ function InSelectPopup({closeOverlay, updateFilterForm}: InSelectPopupProps) {
192193
onApply={applyChanges}
193194
resetSentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_REPORT}
194195
applySentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_REPORT}
195-
style={[
196-
styles.getSelectionListPopoverHeight({itemCount, itemHeight: variables.optionRowHeight, windowHeight, isInLandscapeMode, hasTitle: isSmallScreenWidth, isSearchable: true}),
197-
]}
198196
>
199-
<SelectionListWithSections
200-
sections={sections}
201-
onSelectRow={handleParticipantSelection}
202-
ListItem={InviteMemberListItem}
203-
canSelectMultiple
204-
shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()}
205-
textInputOptions={textInputOptions}
206-
isLoadingNewOptions={isLoadingNewOptions}
207-
shouldShowLoadingPlaceholder={shouldShowLoadingPlaceholder}
208-
shouldShowTextInput
209-
/>
197+
<View
198+
style={[
199+
styles.getSelectionListPopoverHeight({
200+
itemCount,
201+
itemHeight: variables.optionRowHeight,
202+
windowHeight,
203+
isInLandscapeMode,
204+
hasTitle: isSmallScreenWidth,
205+
isSearchable: true,
206+
}),
207+
]}
208+
>
209+
<SelectionListWithSections
210+
sections={sections}
211+
onSelectRow={handleParticipantSelection}
212+
ListItem={InviteMemberListItem}
213+
canSelectMultiple
214+
shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()}
215+
textInputOptions={textInputOptions}
216+
isLoadingNewOptions={isLoadingNewOptions}
217+
shouldShowLoadingPlaceholder={shouldShowLoadingPlaceholder}
218+
shouldShowTextInput
219+
/>
220+
</View>
210221
</BasePopup>
211222
);
212223
}

‎src/components/Search/FilterDropdowns/MultiSelectPopup.tsx‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -120,28 +120,29 @@ function MultiSelectPopup<T extends string>({label, loading, value, items, close
120120
onApply={applyChanges}
121121
resetSentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_MULTI_SELECT}
122122
applySentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_MULTI_SELECT}
123-
style={[styles.getSelectionListPopoverHeight({itemCount: listData.length || 1, windowHeight, isInLandscapeMode, hasTitle})]}
124123
>
125-
{!!loading && (
126-
<View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter]}>
127-
<ActivityIndicator
128-
size={CONST.ACTIVITY_INDICATOR_SIZE.SMALL}
129-
color={theme.spinner}
130-
reasonAttributes={reasonAttributes}
124+
<View style={[styles.getSelectionListPopoverHeight({itemCount: listData.length || 1, windowHeight, isInLandscapeMode, hasTitle})]}>
125+
{!!loading && (
126+
<View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter]}>
127+
<ActivityIndicator
128+
size={CONST.ACTIVITY_INDICATOR_SIZE.SMALL}
129+
color={theme.spinner}
130+
reasonAttributes={reasonAttributes}
131+
/>
132+
</View>
133+
)}
134+
135+
{!loading && (
136+
<SelectionList
137+
shouldSingleExecuteRowSelect
138+
data={listData}
139+
ListItem={MultiSelectListItem}
140+
onSelectRow={updateSelectedItems}
141+
textInputOptions={textInputOptions}
142+
style={{contentContainerStyle: [styles.pb0]}}
131143
/>
132-
</View>
133-
)}
134-
135-
{!loading && (
136-
<SelectionList
137-
shouldSingleExecuteRowSelect
138-
data={listData}
139-
ListItem={MultiSelectListItem}
140-
onSelectRow={updateSelectedItems}
141-
textInputOptions={textInputOptions}
142-
style={{contentContainerStyle: [styles.pb0]}}
143-
/>
144-
)}
144+
)}
145+
</View>
145146
</BasePopup>
146147
);
147148
}

‎src/components/Search/FilterDropdowns/SingleSelectPopup.tsx‎

Lines changed: 28 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, {Activity, useCallback, useMemo, useState} from 'react';
22
import type {StyleProp, ViewStyle} from 'react-native';
3+
import {View} from 'react-native';
34
import SelectionList from '@components/SelectionList';
45
import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
56
import type {ListItem, SelectionListStyle} from '@components/SelectionList/types';
@@ -143,31 +144,34 @@ function SingleSelectPopup<T extends string>({
143144
onBackButtonPress={onBackButtonPress}
144145
resetSentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_SINGLE_SELECT}
145146
applySentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_SINGLE_SELECT}
146-
style={[
147-
style,
148-
styles.getSelectionListPopoverHeight({
149-
itemCount: options.length || 1,
150-
windowHeight,
151-
isInLandscapeMode,
152-
hasTitle,
153-
hasHeader: !!onBackButtonPress,
154-
isSearchable: isSearchable ?? false,
155-
}),
156-
]}
147+
style={[style]}
157148
>
158-
<Activity mode={shouldShowList ? 'visible' : 'hidden'}>
159-
<SelectionList
160-
data={options}
161-
shouldSingleExecuteRowSelect
162-
ListItem={SingleSelectListItem}
163-
onSelectRow={updateSelectedItem}
164-
textInputOptions={textInputOptions}
165-
style={{contentContainerStyle: [styles.pb0], ...selectionListStyle}}
166-
shouldUpdateFocusedIndex={isSearchable}
167-
initiallyFocusedItemKey={isSearchable ? value?.value : undefined}
168-
shouldShowLoadingPlaceholder={!noResultsFound}
169-
/>
170-
</Activity>
149+
<View
150+
style={[
151+
styles.getSelectionListPopoverHeight({
152+
itemCount: options.length || 1,
153+
windowHeight,
154+
isInLandscapeMode,
155+
hasTitle,
156+
hasHeader: !!onBackButtonPress,
157+
isSearchable: isSearchable ?? false,
158+
}),
159+
]}
160+
>
161+
<Activity mode={shouldShowList ? 'visible' : 'hidden'}>
162+
<SelectionList
163+
data={options}
164+
shouldSingleExecuteRowSelect
165+
ListItem={SingleSelectListItem}
166+
onSelectRow={updateSelectedItem}
167+
textInputOptions={textInputOptions}
168+
style={{contentContainerStyle: [styles.pb0], ...selectionListStyle}}
169+
shouldUpdateFocusedIndex={isSearchable}
170+
initiallyFocusedItemKey={isSearchable ? value?.value : undefined}
171+
shouldShowLoadingPlaceholder={!noResultsFound}
172+
/>
173+
</Activity>
174+
</View>
171175
</BasePopup>
172176
);
173177
}

‎src/components/Search/FilterDropdowns/SortByPopup.tsx‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -99,30 +99,33 @@ function SortByPopup({searchResults, queryJSON, groupBy, onSort, onSortOrderPres
9999
onBackButtonPress={onBackButtonPress}
100100
resetSentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_SINGLE_SELECT}
101101
applySentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_SINGLE_SELECT}
102-
style={[
103-
styles.getSelectionListPopoverHeight({
104-
itemCount: sortableColumns.length,
105-
windowHeight,
106-
isInLandscapeMode,
107-
hasHeader: true,
108-
extraHeight: variables.optionRowHeight + DIVIDER_HEIGHT,
109-
}),
110-
]}
111102
>
112-
<MenuItemWithTopDescription
113-
shouldShowRightIcon
114-
description={translate('search.display.sortOrder')}
115-
title={sortOrder ? translate(`search.filters.sortOrder.${sortOrder}`) : undefined}
116-
onPress={onSortOrderPress}
117-
/>
118-
<View style={styles.dividerLine} />
119-
<SelectionList
120-
data={options}
121-
shouldSingleExecuteRowSelect
122-
ListItem={SingleSelectListItem}
123-
onSelectRow={updateSelectedItem}
124-
style={{contentContainerStyle: [styles.pb0]}}
125-
/>
103+
<View
104+
style={[
105+
styles.getSelectionListPopoverHeight({
106+
itemCount: sortableColumns.length,
107+
windowHeight,
108+
isInLandscapeMode,
109+
hasHeader: true,
110+
extraHeight: variables.optionRowHeight + DIVIDER_HEIGHT,
111+
}),
112+
]}
113+
>
114+
<MenuItemWithTopDescription
115+
shouldShowRightIcon
116+
description={translate('search.display.sortOrder')}
117+
title={sortOrder ? translate(`search.filters.sortOrder.${sortOrder}`) : undefined}
118+
onPress={onSortOrderPress}
119+
/>
120+
<View style={styles.dividerLine} />
121+
<SelectionList
122+
data={options}
123+
shouldSingleExecuteRowSelect
124+
ListItem={SingleSelectListItem}
125+
onSelectRow={updateSelectedItem}
126+
style={{contentContainerStyle: [styles.pb0]}}
127+
/>
128+
</View>
126129
</BasePopup>
127130
);
128131
}

‎src/components/Search/FilterDropdowns/UserSelectPopup.tsx‎

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import isEmpty from 'lodash/isEmpty';
22
import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react';
3+
import {View} from 'react-native';
34
import {usePersonalDetails} from '@components/OnyxListItemProvider';
45
import SelectionList from '@components/SelectionList';
56
import UserSelectionListItem from '@components/SelectionList/ListItem/UserSelectionListItem';
@@ -177,28 +178,31 @@ function UserSelectPopup({value, label, closeOverlay, onChange, isSearchable}: U
177178
onApply={applyChanges}
178179
resetSentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_USER}
179180
applySentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_USER}
180-
style={[
181-
styles.getSelectionListPopoverHeight({
182-
itemCount: listData.length || 1,
183-
windowHeight,
184-
isInLandscapeMode,
185-
hasTitle: isSmallScreenWidth,
186-
isSearchable: shouldShowSearchInput,
187-
}),
188-
]}
189181
>
190-
<SelectionList
191-
data={listData}
192-
ref={selectionListRef}
193-
textInputOptions={textInputOptions}
194-
canSelectMultiple
195-
ListItem={UserSelectionListItem}
196-
onSelectRow={selectUser}
197-
isLoadingNewOptions={isLoadingNewOptions}
198-
shouldShowLoadingPlaceholder={!areOptionsInitialized}
199-
onEndReached={onListEndReached}
200-
style={{contentContainerStyle: [styles.pb0]}}
201-
/>
182+
<View
183+
style={[
184+
styles.getSelectionListPopoverHeight({
185+
itemCount: listData.length || 1,
186+
windowHeight,
187+
isInLandscapeMode,
188+
hasTitle: isSmallScreenWidth,
189+
isSearchable: shouldShowSearchInput,
190+
}),
191+
]}
192+
>
193+
<SelectionList
194+
data={listData}
195+
ref={selectionListRef}
196+
textInputOptions={textInputOptions}
197+
canSelectMultiple
198+
ListItem={UserSelectionListItem}
199+
onSelectRow={selectUser}
200+
isLoadingNewOptions={isLoadingNewOptions}
201+
shouldShowLoadingPlaceholder={!areOptionsInitialized}
202+
onEndReached={onListEndReached}
203+
style={{contentContainerStyle: [styles.pb0]}}
204+
/>
205+
</View>
202206
</BasePopup>
203207
);
204208
}

0 commit comments

Comments
 (0)