Skip to content

Commit

Permalink
fix non transparent iOS bottom safe area on missing pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@situchan
situchan committed Feb 7, 2023
1 parent 26fdace commit da61f36
Show file tree
Hide file tree
Showing 17 changed files with 469 additions and 425 deletions.
1 change: 1 addition & 0 deletions src/components/OptionsSelector/BaseOptionsSelector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,6 +271,7 @@ class BaseOptionsSelector extends Component {
isDisabled={this.props.isDisabled}
shouldHaveOptionSeparator={this.props.shouldHaveOptionSeparator}
onLayout={this.props.onLayout}
contentContainerStyles={shouldShowFooter ? [] : [this.props.safeAreaPaddingBottomStyle]}
/>
) : <FullScreenLoadingIndicator />;
return (
Expand Down
1 change: 1 addition & 0 deletions src/pages/NewChatPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,7 @@ class NewChatPage extends Component {
confirmButtonText={this.props.translate('newChatPage.createGroup')}
onConfirmSelection={this.createGroup}
placeholderText={this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
/>
) : (
<FullScreenLoadingIndicator />
Expand Down
64 changes: 33 additions & 31 deletions src/pages/ReportParticipantsPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,38 +72,40 @@ const ReportParticipantsPage = (props) => {
const participants = getAllParticipants(props.report, props.personalDetails);

return (
<ScreenWrapper>
<HeaderWithCloseButton
title={props.translate((ReportUtils.isChatRoom(props.report) || ReportUtils.isPolicyExpenseChat(props.report)) ? 'common.members' : 'common.details')}
onCloseButtonPress={Navigation.dismissModal}
onBackButtonPress={Navigation.goBack}
shouldShowBackButton={ReportUtils.isChatRoom(props.report) || ReportUtils.isPolicyExpenseChat(props.report)}
/>
<View
pointerEvents="box-none"
style={[
styles.containerWithSpaceBetween,
]}
>
{Boolean(participants.length)
&& (
<OptionsList
sections={[{
title: '', data: participants, shouldShow: true, indexOffset: 0,
}]}
onSelectRow={(option) => {
Navigation.navigate(ROUTES.getReportParticipantRoute(
props.route.params.reportID, option.login,
));
}}
hideSectionHeaders
showTitleTooltip
disableFocusOptions
boldStyle
optionHoveredStyle={styles.hoveredComponentBG}
<ScreenWrapper includeSafeAreaPaddingBottom={false}>
{({safeAreaPaddingBottomStyle}) => (
<>
<HeaderWithCloseButton
title={props.translate((ReportUtils.isChatRoom(props.report) || ReportUtils.isPolicyExpenseChat(props.report)) ? 'common.members' : 'common.details')}
onCloseButtonPress={Navigation.dismissModal}
onBackButtonPress={Navigation.goBack}
shouldShowBackButton={ReportUtils.isChatRoom(props.report) || ReportUtils.isPolicyExpenseChat(props.report)}
/>
)}
</View>
<View
pointerEvents="box-none"
style={[styles.containerWithSpaceBetween]}
>
{Boolean(participants.length) && (
<OptionsList
sections={[{
title: '', data: participants, shouldShow: true, indexOffset: 0,
}]}
onSelectRow={(option) => {
Navigation.navigate(ROUTES.getReportParticipantRoute(
props.route.params.reportID, option.login,
));
}}
hideSectionHeaders
showTitleTooltip
disableFocusOptions
boldStyle
optionHoveredStyle={styles.hoveredComponentBG}
contentContainerStyles={[safeAreaPaddingBottomStyle]}
/>
)}
</View>
</>
)}
</ScreenWrapper>
);
};
Expand Down
3 changes: 2 additions & 1 deletion src/pages/SearchPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ class SearchPage extends Component {
);
return (
<ScreenWrapper includeSafeAreaPaddingBottom={false}>
{({didScreenTransitionEnd}) => (
{({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
<>
<HeaderWithCloseButton
title={this.props.translate('common.search')}
Expand All @@ -188,6 +188,7 @@ class SearchPage extends Component {
shouldShowOptions={didScreenTransitionEnd}
placeholderText={this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
onLayout={this.searchRendered}
safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
/>
</View>
</>
Expand Down
29 changes: 17 additions & 12 deletions src/pages/iou/IOUCurrencySelection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,18 +113,23 @@ class IOUCurrencySelection extends Component {
const headerMessage = this.state.searchValue.trim() && !this.state.currencyData.length ? this.props.translate('common.noResultsFound') : '';
return (
<ScreenWrapper includeSafeAreaPaddingBottom={false}>
<HeaderWithCloseButton
title={this.props.translate('iOUCurrencySelection.selectCurrency')}
onCloseButtonPress={Navigation.goBack}
/>
<OptionsSelector
sections={this.getSections()}
onSelectRow={this.confirmCurrencySelection}
value={this.state.searchValue}
onChangeText={this.changeSearchValue}
placeholderText={this.props.translate('common.search')}
headerMessage={headerMessage}
/>
{({safeAreaPaddingBottomStyle}) => (
<>
<HeaderWithCloseButton
title={this.props.translate('iOUCurrencySelection.selectCurrency')}
onCloseButtonPress={Navigation.goBack}
/>
<OptionsSelector
sections={this.getSections()}
onSelectRow={this.confirmCurrencySelection}
value={this.state.searchValue}
onChangeText={this.changeSearchValue}
placeholderText={this.props.translate('common.search')}
headerMessage={headerMessage}
safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
/>
</>
)}
</ScreenWrapper>
);
}
Expand Down
83 changes: 43 additions & 40 deletions src/pages/iou/IOUDetailsModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,49 +154,52 @@ class IOUDetailsModal extends Component {
const pendingAction = this.findPendingAction();
const iouReportStateNum = lodashGet(this.props.iouReport, 'stateNum');
const hasOutstandingIOU = lodashGet(this.props.iouReport, 'hasOutstandingIOU');
const hasFixedFooter = hasOutstandingIOU && this.props.iouReport.managerEmail === sessionEmail;
return (
<ScreenWrapper>
<FullPageNotFoundView
shouldShow={_.isEmpty(this.props.iouReport)}
subtitleKey="notFound.iouReportNotFound"
onBackButtonPress={Navigation.dismissModal}
>
<HeaderWithCloseButton
title={this.props.translate('common.details')}
onCloseButtonPress={Navigation.dismissModal}
/>
{this.props.iou.loading ? <View style={styles.flex1}><FullScreenLoadingIndicator /></View> : (
<View style={[styles.flex1, styles.justifyContentBetween]}>
<ScrollView contentContainerStyle={styles.iouDetailsContainer}>
<IOUPreview
chatReportID={this.props.route.params.chatReportID}
iouReportID={this.props.route.params.iouReportID}
pendingAction={pendingAction}
shouldHidePayButton
/>
<IOUTransactions
chatReportID={this.props.route.params.chatReportID}
iouReportID={this.props.route.params.iouReportID}
isIOUSettled={iouReportStateNum === CONST.REPORT.STATE_NUM.SUBMITTED}
userEmail={sessionEmail}
/>
</ScrollView>
{(hasOutstandingIOU && this.props.iouReport.managerEmail === sessionEmail && (
<FixedFooter>
<SettlementButton
onPress={paymentMethodType => this.payMoneyRequest(paymentMethodType)}
shouldShowPaypal={Boolean(lodashGet(this.props, 'iouReport.submitterPayPalMeAddress'))}
currency={lodashGet(this.props, 'iouReport.currency')}
enablePaymentsRoute={ROUTES.IOU_DETAILS_ENABLE_PAYMENTS}
addBankAccountRoute={ROUTES.IOU_DETAILS_ADD_BANK_ACCOUNT}
addDebitCardRoute={ROUTES.IOU_DETAILS_ADD_DEBIT_CARD}
<ScreenWrapper includeSafeAreaPaddingBottom={hasFixedFooter}>
{({safeAreaPaddingBottomStyle}) => (
<FullPageNotFoundView
shouldShow={_.isEmpty(this.props.iouReport)}
subtitleKey="notFound.iouReportNotFound"
onBackButtonPress={Navigation.dismissModal}
>
<HeaderWithCloseButton
title={this.props.translate('common.details')}
onCloseButtonPress={Navigation.dismissModal}
/>
{this.props.iou.loading ? <View style={styles.flex1}><FullScreenLoadingIndicator /></View> : (
<View style={[styles.flex1, styles.justifyContentBetween]}>
<ScrollView contentContainerStyle={[styles.iouDetailsContainer, hasFixedFooter ? {} : safeAreaPaddingBottomStyle]}>
<IOUPreview
chatReportID={this.props.route.params.chatReportID}
iouReportID={this.props.route.params.iouReportID}
pendingAction={pendingAction}
shouldHidePayButton
/>
</FixedFooter>
))}
</View>
)}
</FullPageNotFoundView>
<IOUTransactions
chatReportID={this.props.route.params.chatReportID}
iouReportID={this.props.route.params.iouReportID}
isIOUSettled={iouReportStateNum === CONST.REPORT.STATE_NUM.SUBMITTED}
userEmail={sessionEmail}
/>
</ScrollView>
{(hasOutstandingIOU && this.props.iouReport.managerEmail === sessionEmail && (
<FixedFooter>
<SettlementButton
onPress={paymentMethodType => this.payMoneyRequest(paymentMethodType)}
shouldShowPaypal={Boolean(lodashGet(this.props, 'iouReport.submitterPayPalMeAddress'))}
currency={lodashGet(this.props, 'iouReport.currency')}
enablePaymentsRoute={ROUTES.IOU_DETAILS_ENABLE_PAYMENTS}
addBankAccountRoute={ROUTES.IOU_DETAILS_ADD_BANK_ACCOUNT}
addDebitCardRoute={ROUTES.IOU_DETAILS_ADD_DEBIT_CARD}
chatReportID={this.props.route.params.chatReportID}
/>
</FixedFooter>
))}
</View>
)}
</FullPageNotFoundView>
)}
</ScreenWrapper>
);
}
Expand Down
1 change: 1 addition & 0 deletions src/pages/iou/IOUModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -453,6 +453,7 @@ class IOUModal extends Component {
hasMultipleParticipants={this.props.hasMultipleParticipants}
onAddParticipants={this.addParticipants}
onStepComplete={this.navigateToNextStep}
safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
/>
</AnimatedStep>
)}
Expand Down
9 changes: 9 additions & 0 deletions src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,18 @@ const propTypes = {
/** Whether or not the IOU step is loading (retrieving participants) */
loading: PropTypes.bool,
}),

/** padding bottom style of safe area */
safeAreaPaddingBottomStyle: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.object),
PropTypes.object,
]),
};

const defaultProps = {
iou: {},
participants: [],
safeAreaPaddingBottomStyle: {},
};

const IOUParticipantsPage = (props) => {
Expand All @@ -63,12 +70,14 @@ const IOUParticipantsPage = (props) => {
onStepComplete={props.onStepComplete}
participants={props.participants}
onAddParticipants={props.onAddParticipants}
safeAreaPaddingBottomStyle={props.safeAreaPaddingBottomStyle}
/>
)
: (
<IOUParticipantsRequest
onStepComplete={props.onStepComplete}
onAddParticipants={props.onAddParticipants}
safeAreaPaddingBottomStyle={props.safeAreaPaddingBottomStyle}
/>
)
);
Expand Down
1 change: 1 addition & 0 deletions src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsRequest.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,7 @@ class IOUParticipantsRequest extends Component {
headerMessage={headerMessage}
placeholderText={this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
boldStyle
safeAreaPaddingBottomStyle={this.props.safeAreaPaddingBottomStyle}
/>
);
}
Expand Down
44 changes: 20 additions & 24 deletions src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import compose from '../../../../libs/compose';
import Text from '../../../../components/Text';
import personalDetailsPropType from '../../../personalDetailsPropType';
import reportPropTypes from '../../../reportPropTypes';
import SafeAreaConsumer from '../../../../components/SafeAreaConsumer';

const propTypes = {
/** Beta features list */
Expand Down Expand Up @@ -210,29 +209,26 @@ class IOUParticipantsSplit extends Component {
maxParticipantsReached,
);
return (
<SafeAreaConsumer>
{({safeAreaPaddingBottomStyle}) => (
<View style={[styles.flex1, styles.w100, (this.props.participants.length > 0 ? safeAreaPaddingBottomStyle : {})]}>
<Text style={[styles.textLabelSupporting, styles.pt3, styles.ph5]}>
{this.props.translate('common.to')}
</Text>
<OptionsSelector
canSelectMultipleOptions
sections={sections}
selectedOptions={this.props.participants}
value={this.state.searchTerm}
onSelectRow={this.toggleOption}
onChangeText={this.updateOptionsWithSearchTerm}
headerMessage={headerMessage}
boldStyle
shouldShowConfirmButton
confirmButtonText={this.props.translate('common.next')}
onConfirmSelection={this.finalizeParticipants}
placeholderText={this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
/>
</View>
)}
</SafeAreaConsumer>
<View style={[styles.flex1, styles.w100, (this.props.participants.length > 0 ? this.props.safeAreaPaddingBottomStyle : {})]}>
<Text style={[styles.textLabelSupporting, styles.pt3, styles.ph5]}>
{this.props.translate('common.to')}
</Text>
<OptionsSelector
canSelectMultipleOptions
sections={sections}
selectedOptions={this.props.participants}
value={this.state.searchTerm}
onSelectRow={this.toggleOption}
onChangeText={this.updateOptionsWithSearchTerm}
headerMessage={headerMessage}
boldStyle
shouldShowConfirmButton
confirmButtonText={this.props.translate('common.next')}
onConfirmSelection={this.finalizeParticipants}
placeholderText={this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
safeAreaPaddingBottomStyle={this.props.safeAreaPaddingBottomStyle}
/>
</View>
);
}
}
Expand Down
Loading

0 comments on commit da61f36

Please sign in to comment.