Skip to content

Commit 3fa7f24

Browse files
bernhardojbernhardoj
committed
fix popup content is not fully shown
1 parent a611c16 commit 3fa7f24

18 files changed

Lines changed: 254 additions & 234 deletions

‎src/CONST/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9614,6 +9614,7 @@ const CONST = {
96149614
AUTH_IMAGES: 'auth-images',
96159615
},
96169616

9617+
MODAL_MAX_HEIGHT_TO_WINDOW_HEIGHT_RATIO: 0.9,
96179618
MODAL_MAX_HEIGHT_TO_WINDOW_HEIGHT_RATIO_LANDSCAPE_MODE: 0.75,
96189619

96199620
MAP_VIEW_LAYERS: {

‎src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -490,8 +490,8 @@ function MoneyRequestReportTransactionList({
490490

491491
const groupByPopoverComponent = useCallback(
492492
(props: {closeOverlay: () => void}) => (
493-
<View style={[!isSmallScreenWidth && styles.pv4]}>
494-
<View style={styles.getSelectionListPopoverHeight(groupByOptions.length || 1, windowHeight, false, isInLandscapeMode, false)}>
493+
<View style={[styles.pv4]}>
494+
<View style={styles.getSelectionListPopoverHeight({itemCount: groupByOptions.length || 1, windowHeight, isInLandscapeMode})}>
495495
<SelectionList
496496
data={groupByOptions}
497497
shouldSingleExecuteRowSelect

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ function BasePopup({children, label, applySentryLabel, resetSentryLabel, style,
2323
const styles = useThemeStyles();
2424

2525
return (
26-
<View style={[!isSmallScreenWidth && styles.pv4, style]}>
26+
<View style={[styles.pv4, style]}>
2727
{onBackButtonPress ? (
2828
<HeaderWithBackButton
2929
shouldDisplayHelpButton={false}

‎src/components/Search/FilterDropdowns/DateSelectPopup/index.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import Text from '@components/Text';
1111
import useLocalize from '@hooks/useLocalize';
1212
import useResponsiveLayout from '@hooks/useResponsiveLayout';
1313
import useThemeStyles from '@hooks/useThemeStyles';
14-
import useWindowDimensions from '@hooks/useWindowDimensions';
1514
import type {SearchDateValues} from '@libs/SearchQueryUtils';
1615
import {getDateModifierTitle, getDateRangeDisplayValueFromFormValue} from '@libs/SearchQueryUtils';
1716
import type {SearchDateModifier} from '@libs/SearchUIUtils';
@@ -47,7 +46,6 @@ function DateSelectPopup({label, value, presets, style, closeOverlay, onChange,
4746

4847
const {translate} = useLocalize();
4948
const styles = useThemeStyles();
50-
const {windowHeight} = useWindowDimensions();
5149
const searchDatePresetFilterBaseRef = useRef<SearchDatePresetFilterBaseHandle>(null);
5250
const scrollViewRef = useRef<React.ComponentRef<typeof ScrollView>>(null);
5351
const [selectedDateModifier, setSelectedDateModifier] = useState<SearchDateModifier | null>(null);
@@ -130,8 +128,6 @@ function DateSelectPopup({label, value, presets, style, closeOverlay, onChange,
130128
closeOverlay();
131129
}, [clearSelection, closeOverlay, onChange, selectedDateModifier]);
132130

133-
const maxPopupHeight = Math.round(windowHeight * 0.875);
134-
135131
// For non-Range modes, use original simple styles. For Range, use custom layout
136132
const useRangeLayout = selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE;
137133

@@ -186,14 +182,13 @@ function DateSelectPopup({label, value, presets, style, closeOverlay, onChange,
186182
);
187183
}
188184

189-
const topPaddingStyle = selectedDateModifier ? styles.pt3 : undefined;
190185
const buttonRowSpacing = selectedDateModifier ? styles.mt4 : styles.mt2;
191-
const mobileContainerStyle = useRangeLayout ? [topPaddingStyle, styles.flexGrow1, {maxHeight: maxPopupHeight}] : styles.gap2;
186+
const mobileContainerStyle = useRangeLayout ? [styles.flexGrow1] : styles.gap2;
192187
const mobileLabelStyle = useRangeLayout ? [styles.textLabel, styles.ph5, styles.pb3] : [styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1];
193188
const mobileButtonRowStyle = useRangeLayout ? [styles.flexRow, styles.ph5, buttonRowSpacing, styles.alignItemsCenter, styles.gap2] : [styles.flexRow, styles.gap2, styles.ph5];
194189

195190
return (
196-
<View style={[mobileContainerStyle, style, isInLandscapeMode ? styles.h100 : undefined]}>
191+
<View style={[styles.pv4, mobileContainerStyle, style, isInLandscapeMode ? styles.h100 : undefined]}>
197192
{!selectedDateModifier && !!label && <Text style={mobileLabelStyle}>{label}</Text>}
198193
<ScrollView
199194
ref={scrollViewRef}

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

Lines changed: 16 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, {useState} from 'react';
22
import {View} from 'react-native';
33
import type {OnyxEntry} from 'react-native-onyx';
4-
import HeaderWithBackButton from '@components/HeaderWithBackButton';
54
import MenuItem from '@components/MenuItem';
65
import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
76
import type {SearchQueryJSON} from '@components/Search/types';
@@ -37,7 +36,7 @@ type DisplayPopupProps = {
3736
function DisplayPopup({queryJSON, searchResults, closeOverlay, onSort}: DisplayPopupProps) {
3837
const {translate} = useLocalize();
3938
const styles = useThemeStyles();
40-
const {shouldUseNarrowLayout, isLargeScreenWidth} = useResponsiveLayout();
39+
const {isLargeScreenWidth} = useResponsiveLayout();
4140
const expensifyIcons = useMemoizedLazyExpensifyIcons(['Columns']);
4241
const [searchAdvancedFilters = getEmptyObject<SearchAdvancedFiltersForm>()] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
4342
const [selectedDisplayFilter, setSelectedDisplayFilter] = useState<
@@ -72,7 +71,7 @@ function DisplayPopup({queryJSON, searchResults, closeOverlay, onSort}: DisplayP
7271
const viewValue = searchAdvancedFilters[CONST.SEARCH.SYNTAX_ROOT_KEYS.VIEW];
7372

7473
return (
75-
<View style={[!shouldUseNarrowLayout && styles.pv4]}>
74+
<View style={[styles.pv4]}>
7675
<MenuItemWithTopDescription
7776
shouldShowRightIcon
7877
description={translate('search.display.sortBy')}
@@ -162,46 +161,35 @@ function DisplayPopup({queryJSON, searchResults, closeOverlay, onSort}: DisplayP
162161
setSelectedDisplayFilter(null);
163162
};
164163

165-
const subtitle = {
166-
[CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_BY]: translate('search.display.sortBy'),
167-
[CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_ORDER]: translate('search.display.sortOrder'),
168-
[CONST.SEARCH.SYNTAX_ROOT_KEYS.GROUP_BY]: translate('search.display.groupBy'),
169-
[CONST.SEARCH.SYNTAX_FILTER_KEYS.GROUP_CURRENCY]: translate('common.groupCurrency'),
170-
[CONST.SEARCH.SYNTAX_ROOT_KEYS.VIEW]: translate('search.view.label'),
171-
[CONST.SEARCH.SYNTAX_ROOT_KEYS.LIMIT]: translate('search.display.limitResults'),
172-
};
173-
174-
let subPopup: React.JSX.Element | null = null;
175-
176164
switch (selectedDisplayFilter) {
177165
case CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_BY:
178-
subPopup = (
166+
return (
179167
<SortByPopup
180168
searchResults={searchResults}
181169
queryJSON={queryJSON}
182170
groupBy={groupBy}
183171
onSort={onSort}
184172
onSortOrderPress={() => setSelectedDisplayFilter(CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_ORDER)}
173+
onBackButtonPress={goBack}
185174
closeOverlay={closeOverlay}
186175
/>
187176
);
188-
break;
189177
case CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_ORDER:
190-
subPopup = (
178+
return (
191179
<SortOrderPopup
192180
queryJSON={queryJSON}
193181
onSort={onSort}
182+
onBackButtonPress={goBack}
194183
closeOverlay={closeOverlay}
195184
/>
196185
);
197-
break;
198186
case CONST.SEARCH.SYNTAX_ROOT_KEYS.GROUP_BY:
199-
subPopup = (
187+
return (
200188
<GroupByPopup
201-
style={styles.p0}
202189
sections={groupBySections}
203190
value={groupBy}
204191
closeOverlay={closeOverlay}
192+
onBackButtonPress={goBack}
205193
onChange={(item) => {
206194
const newValue = item?.value;
207195
if (!newValue) {
@@ -212,52 +200,37 @@ function DisplayPopup({queryJSON, searchResults, closeOverlay, onSort}: DisplayP
212200
}}
213201
/>
214202
);
215-
break;
216203
case CONST.SEARCH.SYNTAX_FILTER_KEYS.GROUP_CURRENCY:
217-
subPopup = (
204+
return (
218205
<GroupCurrencyPopup
219206
onChange={(item) => updateFilterForm({groupCurrency: item?.value})}
207+
onBackButtonPress={goBack}
220208
closeOverlay={closeOverlay}
221209
/>
222210
);
223-
break;
224211
case CONST.SEARCH.SYNTAX_ROOT_KEYS.VIEW:
225-
subPopup = (
212+
return (
226213
<SingleSelectPopup
227-
style={styles.p0}
228214
items={viewOptions}
229215
value={view}
216+
label={translate('search.view.label')}
217+
onBackButtonPress={goBack}
230218
closeOverlay={closeOverlay}
231219
onChange={(item) => updateFilterForm({view: item?.value ?? CONST.SEARCH.VIEW.TABLE})}
232220
/>
233221
);
234-
break;
235222
case CONST.SEARCH.SYNTAX_ROOT_KEYS.LIMIT:
236-
subPopup = (
223+
return (
237224
<TextInputPopup
238-
style={styles.pv0}
239225
placeholder={translate('search.filters.limit')}
240226
defaultValue={limitValue}
227+
label={translate('search.display.limitResults')}
228+
onBackButtonPress={goBack}
241229
closeOverlay={closeOverlay}
242230
onChange={(value) => updateFilterForm({limit: value})}
243231
/>
244232
);
245-
break;
246-
default:
247-
break;
248233
}
249-
250-
return (
251-
<View style={[!shouldUseNarrowLayout && styles.pv4]}>
252-
<HeaderWithBackButton
253-
shouldDisplayHelpButton={false}
254-
style={[styles.h10, styles.pv1, styles.mb2]}
255-
subtitle={subtitle[selectedDisplayFilter]}
256-
onBackButtonPress={goBack}
257-
/>
258-
{subPopup}
259-
</View>
260-
);
261234
}
262235

263236
export default DisplayPopup;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,7 @@ function DropdownButton({
191191
restoreFocusType={CONST.MODAL.RESTORE_FOCUS_TYPE.DELETE}
192192
shouldEnableNewFocusManagement
193193
shouldMeasureAnchorPositionFromTop={false}
194+
shouldUseModalPaddingStyle={false}
194195
outerStyle={{...StyleUtils.getOuterModalStyle(windowHeight, viewportOffsetTop), ...containerStyles}}
195196
// This must be false because we dont want the modal to close if we open the RHP for selections
196197
// such as date years

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

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import type {SearchGroupBy} from '@components/Search/types';
55
import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
66
import SelectionListWithSections from '@components/SelectionList/SelectionListWithSections';
77
import type {ListItem} from '@components/SelectionList/types';
8+
import useLocalize from '@hooks/useLocalize';
89
import useResponsiveLayout from '@hooks/useResponsiveLayout';
910
import useThemeStyles from '@hooks/useThemeStyles';
1011
import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -18,16 +19,14 @@ type GroupByPopupItem = {
1819
};
1920

2021
type GroupByPopupProps = {
21-
/** The label to show when in an overlay on mobile */
22-
label?: string;
23-
2422
/** The grouped options to show in the list */
2523
sections: GroupBySection[];
2624

2725
/** The currently selected item */
2826
value: GroupByPopupItem | null;
2927

3028
style?: StyleProp<ViewStyle>;
29+
onBackButtonPress: () => void;
3130

3231
/** Function to call to close the overlay when changes are applied */
3332
closeOverlay: () => void;
@@ -36,10 +35,10 @@ type GroupByPopupProps = {
3635
onChange: (item: GroupByPopupItem | null) => void;
3736
};
3837

39-
function GroupByPopup({label, value, sections, style, closeOverlay, onChange}: GroupByPopupProps) {
38+
function GroupByPopup({value, sections, style, onBackButtonPress, closeOverlay, onChange}: GroupByPopupProps) {
39+
const {translate} = useLocalize();
4040
const styles = useThemeStyles();
41-
// eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
42-
const {isSmallScreenWidth, isInLandscapeMode} = useResponsiveLayout();
41+
const {isInLandscapeMode} = useResponsiveLayout();
4342
const {windowHeight} = useWindowDimensions();
4443
const [selectedItem, setSelectedItem] = useState(value);
4544

@@ -59,7 +58,7 @@ function GroupByPopup({label, value, sections, style, closeOverlay, onChange}: G
5958
[sections, selectedItem?.value, styles.dividerLine],
6059
);
6160

62-
const optionsCount = Math.max(
61+
const itemCount = Math.max(
6362
1,
6463
listSections.reduce((count, section) => count + section.data.length + (section.data.length > 0 && !!section.customHeader ? 1 : 0), 0),
6564
);
@@ -82,25 +81,22 @@ function GroupByPopup({label, value, sections, style, closeOverlay, onChange}: G
8281
closeOverlay();
8382
}, [closeOverlay, onChange]);
8483

85-
const shouldShowLabel = isSmallScreenWidth && !!label;
86-
8784
return (
8885
<BasePopup
89-
label={label}
9086
onReset={resetChanges}
9187
onApply={applyChanges}
88+
onBackButtonPress={onBackButtonPress}
89+
label={translate('search.display.groupBy')}
9290
resetSentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_SINGLE_SELECT}
9391
applySentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_SINGLE_SELECT}
94-
style={style}
92+
style={[style, styles.getSelectionListPopoverHeight({itemCount, windowHeight, isInLandscapeMode, hasHeader: true})]}
9593
>
96-
<View style={[styles.getSelectionListPopoverHeight(optionsCount, windowHeight, false, isInLandscapeMode, shouldShowLabel)]}>
97-
<SelectionListWithSections
98-
sections={listSections}
99-
shouldSingleExecuteRowSelect
100-
ListItem={SingleSelectListItem}
101-
onSelectRow={updateSelectedItem}
102-
/>
103-
</View>
94+
<SelectionListWithSections
95+
sections={listSections}
96+
shouldSingleExecuteRowSelect
97+
ListItem={SingleSelectListItem}
98+
onSelectRow={updateSelectedItem}
99+
/>
104100
</BasePopup>
105101
);
106102
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@ import type {OnyxEntry} from 'react-native-onyx';
33
import {useCurrencyListActions, useCurrencyListState} from '@components/CurrencyListContextProvider';
44
import useLocalize from '@hooks/useLocalize';
55
import useOnyx from '@hooks/useOnyx';
6-
import useThemeStyles from '@hooks/useThemeStyles';
76
import {getCurrencyOptions} from '@libs/SearchUIUtils';
87
import ONYXKEYS from '@src/ONYXKEYS';
98
import type {SearchAdvancedFiltersForm} from '@src/types/form';
109
import SingleSelectPopup from './SingleSelectPopup';
1110
import type {SingleSelectItem} from './SingleSelectPopup';
1211

1312
type GroupCurrencyPopupProps = {
13+
onBackButtonPress: () => void;
1414
closeOverlay: () => void;
1515
onChange: (item: SingleSelectItem<string> | null) => void;
1616
};
@@ -19,8 +19,7 @@ function filterGroupCurrencySelector(searchAdvancedFiltersForm: OnyxEntry<Search
1919
return searchAdvancedFiltersForm?.groupCurrency;
2020
}
2121

22-
function GroupCurrencyPopup({onChange, closeOverlay}: GroupCurrencyPopupProps) {
23-
const styles = useThemeStyles();
22+
function GroupCurrencyPopup({onBackButtonPress, onChange, closeOverlay}: GroupCurrencyPopupProps) {
2423
const {translate} = useLocalize();
2524
const {currencyList} = useCurrencyListState();
2625
const {getCurrencySymbol} = useCurrencyListActions();
@@ -31,9 +30,10 @@ function GroupCurrencyPopup({onChange, closeOverlay}: GroupCurrencyPopupProps) {
3130

3231
return (
3332
<SingleSelectPopup
34-
style={[styles.pv0, styles.mt2]}
3533
items={groupCurrencyOptions}
3634
value={groupCurrencyValue}
35+
label={translate('common.groupCurrency')}
36+
onBackButtonPress={onBackButtonPress}
3737
closeOverlay={closeOverlay}
3838
onChange={onChange}
3939
isSearchable

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,8 @@ function inSelector(searchAdvancedFiltersForm: SearchAdvancedFiltersForm | undef
4949
function InSelectPopup({closeOverlay, updateFilterForm}: InSelectPopupProps) {
5050
const {translate} = useLocalize();
5151
const styles = useThemeStyles();
52-
const {shouldUseNarrowLayout, isInLandscapeMode} = useResponsiveLayout();
52+
// eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
53+
const {isSmallScreenWidth, isInLandscapeMode} = useResponsiveLayout();
5354
const {windowHeight} = useWindowDimensions();
5455
const personalDetails = usePersonalDetails();
5556
const {options, areOptionsInitialized} = useOptionsList();
@@ -187,7 +188,9 @@ function InSelectPopup({closeOverlay, updateFilterForm}: InSelectPopupProps) {
187188
onApply={applyChanges}
188189
resetSentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_REPORT}
189190
applySentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_REPORT}
190-
style={[styles.getCommonSelectionListPopoverHeight(itemCount, variables.optionRowHeight, windowHeight, shouldUseNarrowLayout, isInLandscapeMode, true)]}
191+
style={[
192+
styles.getSelectionListPopoverHeight({itemCount, itemHeight: variables.optionRowHeight, windowHeight, isInLandscapeMode, hasTitle: isSmallScreenWidth, isSearchable: true}),
193+
]}
191194
>
192195
<SelectionListWithSections
193196
sections={sections}

0 commit comments

Comments
 (0)