Skip to content

Commit

Permalink
Merge pull request #10140 from Expensify/jasper-fixUpdateGlobalOfflin…
Browse files Browse the repository at this point in the history
…eIndicator

Fix for Update Global Offline Indicator
  • Loading branch information
neil-marcellini authored Aug 3, 2022
2 parents 28778a0 + 41c7054 commit 1d06ec9
Show file tree
Hide file tree
Showing 32 changed files with 1,195 additions and 1,199 deletions.
1 change: 1 addition & 0 deletions src/CONST.js
Original file line number Diff line number Diff line change
Expand Up @@ -477,6 +477,7 @@ const CONST = {
EMOJI_PICKER_ITEM_HEIGHT: 40,
EMOJI_PICKER_HEADER_HEIGHT: 38,
COMPOSER_MAX_HEIGHT: 125,
CHAT_FOOTER_MIN_HEIGHT: 65,
CHAT_SKELETON_VIEW: {
AVERAGE_ROW_HEIGHT: 80,
HEIGHT_FOR_ROW_COUNT: {
Expand Down
147 changes: 0 additions & 147 deletions src/components/ScreenWrapper.js

This file was deleted.

115 changes: 115 additions & 0 deletions src/components/ScreenWrapper/BaseScreenWrapper.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
import {KeyboardAvoidingView, View} from 'react-native';
import React from 'react';
import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
import _ from 'underscore';
import {withOnyx} from 'react-native-onyx';
import CONST from '../../CONST';
import KeyboardShortcut from '../../libs/KeyboardShortcut';
import Navigation from '../../libs/Navigation/Navigation';
import onScreenTransitionEnd from '../../libs/onScreenTransitionEnd';
import * as StyleUtils from '../../styles/StyleUtils';
import styles from '../../styles/styles';
import HeaderGap from '../HeaderGap';
import KeyboardShortcutsModal from '../KeyboardShortcutsModal';
import OfflineIndicator from '../OfflineIndicator';
import compose from '../../libs/compose';
import withNavigation from '../withNavigation';
import withWindowDimensions from '../withWindowDimensions';
import ONYXKEYS from '../../ONYXKEYS';
import {withNetwork} from '../OnyxProvider';
import {propTypes, defaultProps} from './propTypes';

class BaseScreenWrapper extends React.Component {
constructor(props) {
super(props);

this.state = {
didScreenTransitionEnd: false,
};
}

componentDidMount() {
const shortcutConfig = CONST.KEYBOARD_SHORTCUTS.ESCAPE;
this.unsubscribeEscapeKey = KeyboardShortcut.subscribe(shortcutConfig.shortcutKey, () => {
if (this.props.modal.willAlertModalBecomeVisible) {
return;
}

Navigation.dismissModal();
}, shortcutConfig.descriptionKey, shortcutConfig.modifiers, true);

this.unsubscribeTransitionEnd = onScreenTransitionEnd(this.props.navigation, () => {
this.setState({didScreenTransitionEnd: true});
this.props.onTransitionEnd();
});
}

componentWillUnmount() {
if (this.unsubscribeEscapeKey) {
this.unsubscribeEscapeKey();
}
if (this.unsubscribeTransitionEnd) {
this.unsubscribeTransitionEnd();
}
}

render() {
return (
<SafeAreaInsetsContext.Consumer>
{(insets) => {
const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets);
const paddingStyle = {};

if (this.props.includePaddingTop) {
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) {
paddingStyle.paddingBottom = paddingBottom;
}

return (
<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 && (
<OfflineIndicator />
)}
</KeyboardAvoidingView>
</View>
);
}}
</SafeAreaInsetsContext.Consumer>
);
}
}

BaseScreenWrapper.propTypes = propTypes;
BaseScreenWrapper.defaultProps = defaultProps;

export default compose(
withNavigation,
withWindowDimensions,
withOnyx({
modal: {
key: ONYXKEYS.MODAL,
},
}),
withNetwork(),
)(BaseScreenWrapper);
17 changes: 17 additions & 0 deletions src/components/ScreenWrapper/index.android.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React from 'react';
import BaseScreenWrapper from './BaseScreenWrapper';
import {defaultProps, propTypes} from './propTypes';

const ScreenWrapper = props => (
<BaseScreenWrapper
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
keyboardAvoidingViewBehavior="height"
>
{props.children}
</BaseScreenWrapper>
);
ScreenWrapper.propTypes = propTypes;
ScreenWrapper.defaultProps = defaultProps;

export default ScreenWrapper;
16 changes: 16 additions & 0 deletions src/components/ScreenWrapper/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from 'react';
import BaseScreenWrapper from './BaseScreenWrapper';
import {defaultProps, propTypes} from './propTypes';

const ScreenWrapper = props => (
<BaseScreenWrapper
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
>
{props.children}
</BaseScreenWrapper>
);
ScreenWrapper.propTypes = propTypes;
ScreenWrapper.defaultProps = defaultProps;

export default ScreenWrapper;
42 changes: 42 additions & 0 deletions src/components/ScreenWrapper/propTypes.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import PropTypes from 'prop-types';

const propTypes = {
/** Array of additional styles to add */
style: PropTypes.arrayOf(PropTypes.object),

/** Returns a function as a child to pass insets to or a node to render without insets */
children: PropTypes.oneOfType([
PropTypes.node,
PropTypes.func,
]).isRequired,

/** Whether to include padding bottom */
includePaddingBottom: PropTypes.bool,

/** Whether to include padding top */
includePaddingTop: PropTypes.bool,

// Called when navigated Screen's transition is finished.
onTransitionEnd: PropTypes.func,

/** 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']),

/** Details about any modals being used */
modal: PropTypes.shape({
/** Indicates when an Alert modal is about to be visible */
willAlertModalBecomeVisible: PropTypes.bool,
}),
};

const defaultProps = {
style: [],
includePaddingBottom: true,
includePaddingTop: true,
onTransitionEnd: () => {},
modal: {},
keyboardAvoidingViewBehavior: 'padding',
};

export {propTypes, defaultProps};
Loading

0 comments on commit 1d06ec9

Please sign in to comment.