Skip to content

Commit

Permalink
Merge pull request #10113 from Expensify/jasper-revertUpdateGlobalOff…
Browse files Browse the repository at this point in the history 
…lineIndicator3

Revert Update Global Offline Indicator

(cherry picked from commit 71609fd)
  • Loading branch information
@jasperhuangg @OSBotify
jasperhuangg authored and OSBotify committed Jul 26, 2022
1 parent 7e251a2 commit ffd8581
Show file tree
Hide file tree
Showing 24 changed files with 1,203 additions and 1,061 deletions.
60 changes: 17 additions & 43 deletions src/components/ScreenWrapper.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import _ from 'underscore';
import React from 'react';
import PropTypes from 'prop-types';
import {View, KeyboardAvoidingView} from 'react-native';
import {View} from 'react-native';
import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
import {withOnyx} from 'react-native-onyx';
import styles from '../styles/styles';
Expand All @@ -15,10 +15,6 @@ import compose from '../libs/compose';
import ONYXKEYS from '../ONYXKEYS';
import CONST from '../CONST';
import withNavigation from './withNavigation';
import withWindowDimensions from './withWindowDimensions';
import OfflineIndicator from './OfflineIndicator';
import {withNetwork} from './OnyxProvider';
import networkPropTypes from './networkPropTypes';

const propTypes = {
/** Array of additional styles to add */
Expand All @@ -39,13 +35,6 @@ const propTypes = {
// Called when navigated Screen's transition is finished.
onTransitionEnd: PropTypes.func,

/** Is the window width narrow, like on a mobile device */
isSmallScreenWidth: PropTypes.bool.isRequired,

/** The behavior to pass to the KeyboardAvoidingView, requires some trial and error depending on the layout/devices used.
* Search 'switch(behavior)' in ./node_modules/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js for more context */
keyboardAvoidingViewBehavior: PropTypes.oneOf(['padding', 'height', 'position']),

// react-navigation navigation object available to screen components
navigation: PropTypes.shape({
// Method to attach listener to Navigation state.
Expand All @@ -58,9 +47,6 @@ const propTypes = {
willAlertModalBecomeVisible: PropTypes.bool,
}),

/** Information about the network */
network: networkPropTypes.isRequired,

};

const defaultProps = {
Expand All @@ -72,7 +58,6 @@ const defaultProps = {
addListener: () => {},
},
modal: {},
keyboardAvoidingViewBehavior: 'padding',
};

class ScreenWrapper extends React.Component {
Expand Down Expand Up @@ -120,36 +105,27 @@ class ScreenWrapper extends React.Component {
paddingStyle.paddingTop = paddingTop;
}

// We always need the safe area padding bottom if we're showing the offline indicator since it is bottom-docked.
if (this.props.includePaddingBottom || this.props.network.isOffline) {
if (this.props.includePaddingBottom) {
paddingStyle.paddingBottom = paddingBottom;
}

return (
<View
style={[
...this.props.style,
styles.flex1,
paddingStyle,
]}
<View style={[
...this.props.style,
styles.flex1,
paddingStyle,
]}
>
<KeyboardAvoidingView style={[styles.w100, styles.h100]} behavior={this.props.keyboardAvoidingViewBehavior}>
<HeaderGap />
{// If props.children is a function, call it to provide the insets to the children.
_.isFunction(this.props.children)
? this.props.children({
insets,
didScreenTransitionEnd: this.state.didScreenTransitionEnd,
})
: this.props.children
}
<KeyboardShortcutsModal />
{this.props.isSmallScreenWidth && this.props.network.isOffline && (
<View style={styles.chatItemComposeSecondaryRow}>
<OfflineIndicator />
</View>
)}
</KeyboardAvoidingView>
<HeaderGap />
{// If props.children is a function, call it to provide the insets to the children.
_.isFunction(this.props.children)
? this.props.children({
insets,
didScreenTransitionEnd: this.state.didScreenTransitionEnd,
})
: this.props.children
}
<KeyboardShortcutsModal />
</View>
);
}}
Expand All @@ -163,11 +139,9 @@ ScreenWrapper.defaultProps = defaultProps;

export default compose(
withNavigation,
withWindowDimensions,
withOnyx({
modal: {
key: ONYXKEYS.MODAL,
},
}),
withNetwork(),
)(ScreenWrapper);
117 changes: 60 additions & 57 deletions src/pages/AddPersonalBankAccountPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import AddPlaidBankAccount from '../components/AddPlaidBankAccount';
import getPlaidOAuthReceivedRedirectURI from '../libs/getPlaidOAuthReceivedRedirectURI';
import compose from '../libs/compose';
import ONYXKEYS from '../ONYXKEYS';
import KeyboardAvoidingView from '../components/KeyboardAvoidingView';
import Text from '../components/Text';
import styles from '../styles/styles';
import Button from '../components/Button';
Expand Down Expand Up @@ -124,65 +125,67 @@ class AddPersonalBankAccountPage extends React.Component {

return (
<ScreenWrapper>
<HeaderWithCloseButton
title={this.props.translate('bankAccount.addBankAccount')}
onCloseButtonPress={Navigation.goBack}
shouldShowBackButton
onBackButtonPress={Navigation.goBack}
/>
{success ? (
<>
<Text style={[styles.formSuccess, styles.mh5]}>
{success}
</Text>
<View style={[styles.mh5, styles.mb5, styles.flex1, styles.justifyContentEnd]}>
<Button
success
text={this.props.translate('common.continue')}
onPress={() => Navigation.navigate(ROUTES.SETTINGS_PAYMENTS)}
/>
</View>
</>
) : (
<FormScrollView>
<View style={[styles.mh5, styles.mb5]}>
<AddPlaidBankAccount
onSelect={(params) => {
this.setState({
selectedPlaidBankAccount: params.selectedPlaidBankAccount,
});
}}
onExitPlaid={Navigation.goBack}
receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
/>
<KeyboardAvoidingView>
<HeaderWithCloseButton
title={this.props.translate('bankAccount.addBankAccount')}
onCloseButtonPress={Navigation.goBack}
shouldShowBackButton
onBackButtonPress={Navigation.goBack}
/>
{success ? (
<>
<Text style={[styles.formSuccess, styles.mh5]}>
{success}
</Text>
<View style={[styles.mh5, styles.mb5, styles.flex1, styles.justifyContentEnd]}>
<Button
success
text={this.props.translate('common.continue')}
onPress={() => Navigation.navigate(ROUTES.SETTINGS_PAYMENTS)}
/>
</View>
</>
) : (
<FormScrollView>
<View style={[styles.mh5, styles.mb5]}>
<AddPlaidBankAccount
onSelect={(params) => {
this.setState({
selectedPlaidBankAccount: params.selectedPlaidBankAccount,
});
}}
onExitPlaid={Navigation.goBack}
receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
/>
{!_.isUndefined(this.state.selectedPlaidBankAccount) && (
<View style={[styles.mb5]}>
<TextInput
label={this.props.translate('addPersonalBankAccountPage.enterPassword')}
secureTextEntry
value={this.state.password}
autoCompleteType="password"
textContentType="password"
autoCapitalize="none"
autoFocus={canFocusInputOnScreenFocus()}
onChangeText={text => this.setState({password: text})}
errorText={this.getErrorText('password')}
hasError={this.getErrors().password}
/>
</View>
)}
</View>
{!_.isUndefined(this.state.selectedPlaidBankAccount) && (
<View style={[styles.mb5]}>
<TextInput
label={this.props.translate('addPersonalBankAccountPage.enterPassword')}
secureTextEntry
value={this.state.password}
autoCompleteType="password"
textContentType="password"
autoCapitalize="none"
autoFocus={canFocusInputOnScreenFocus()}
onChangeText={text => this.setState({password: text})}
errorText={this.getErrorText('password')}
hasError={this.getErrors().password}
/>
</View>
<FormAlertWithSubmitButton
isAlertVisible={Boolean(error)}
buttonText={this.props.translate('common.saveAndContinue')}
onSubmit={this.submit}
message={error}
isLoading={loading}
/>
)}
</View>
{!_.isUndefined(this.state.selectedPlaidBankAccount) && (
<FormAlertWithSubmitButton
isAlertVisible={Boolean(error)}
buttonText={this.props.translate('common.saveAndContinue')}
onSubmit={this.submit}
message={error}
isLoading={loading}
/>
)}
</FormScrollView>
)}
</FormScrollView>
)}
</KeyboardAvoidingView>
</ScreenWrapper>
);
}
Expand Down
Loading

0 comments on commit ffd8581

Please sign in to comment.