Merge pull request Expensify#24164 from hungvu193/fix-23165

fix offline indicator not show in mobile
tienifr · Aug 11, 2023 · 4e37ce6 · 4e37ce6
2 parents da2fbe1 + 52103e8
commit 4e37ce6
Show file tree

Hide file tree

Showing 5 changed files with 151 additions and 120 deletions.
diff --git a/src/components/AvatarCropModal/AvatarCropModal.js b/src/components/AvatarCropModal/AvatarCropModal.js
@@ -22,6 +22,7 @@ import HeaderGap from '../HeaderGap';
 import * as StyleUtils from '../../styles/StyleUtils';
 import Tooltip from '../Tooltip';
 import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
+import ScreenWrapper from '../ScreenWrapper';
 
 const propTypes = {
     /** Link to image for cropping */
@@ -361,79 +362,85 @@ function AvatarCropModal(props) {
             type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
             onModalHide={resetState}
         >
-            {props.isSmallScreenWidth && <HeaderGap />}
-            <HeaderWithBackButton
-                title={props.translate('avatarCropModal.title')}
-                onBackButtonPress={props.onClose}
-            />
-            <Text style={[styles.mh5]}>{props.translate('avatarCropModal.description')}</Text>
-            <GestureHandlerRootView
-                onLayout={initializeImageContainer}
-                style={[styles.alignSelfStretch, styles.m5, styles.flex1, styles.alignItemsCenter]}
+            <ScreenWrapper
+                style={[styles.pb0]}
+                includePaddingTop={false}
+                includeSafeAreaPaddingBottom={false}
             >
-                {/* To avoid layout shift we should hide this component until the image container & image is initialized */}
-                {!isImageInitialized || !isImageContainerInitialized ? (
-                    <ActivityIndicator
-                        color={themeColors.spinner}
-                        style={[styles.flex1]}
-                        size="large"
-                    />
-                ) : (
-                    <>
-                        <ImageCropView
-                            imageUri={props.imageUri}
-                            containerSize={imageContainerSize}
-                            panGestureEventHandler={panGestureEventHandler}
-                            originalImageHeight={originalImageHeight}
-                            originalImageWidth={originalImageWidth}
-                            scale={scale}
-                            translateY={translateY}
-                            translateX={translateX}
-                            rotation={rotation}
-                            maskImage={props.maskImage}
+                {props.isSmallScreenWidth && <HeaderGap />}
+                <HeaderWithBackButton
+                    title={props.translate('avatarCropModal.title')}
+                    onBackButtonPress={props.onClose}
+                />
+                <Text style={[styles.mh5]}>{props.translate('avatarCropModal.description')}</Text>
+                <GestureHandlerRootView
+                    onLayout={initializeImageContainer}
+                    style={[styles.alignSelfStretch, styles.m5, styles.flex1, styles.alignItemsCenter]}
+                >
+                    {/* To avoid layout shift we should hide this component until the image container & image is initialized */}
+                    {!isImageInitialized || !isImageContainerInitialized ? (
+                        <ActivityIndicator
+                            color={themeColors.spinner}
+                            style={[styles.flex1]}
+                            size="large"
                         />
-                        <View style={[styles.mt5, styles.justifyContentBetween, styles.alignItemsCenter, styles.flexRow, StyleUtils.getWidthStyle(imageContainerSize)]}>
-                            <Icon
-                                src={Expensicons.Zoom}
-                                fill={themeColors.icons}
+                    ) : (
+                        <>
+                            <ImageCropView
+                                imageUri={props.imageUri}
+                                containerSize={imageContainerSize}
+                                panGestureEventHandler={panGestureEventHandler}
+                                originalImageHeight={originalImageHeight}
+                                originalImageWidth={originalImageWidth}
+                                scale={scale}
+                                translateY={translateY}
+                                translateX={translateX}
+                                rotation={rotation}
+                                maskImage={props.maskImage}
                             />
-                            <PressableWithoutFeedback
-                                style={[styles.mh5, styles.flex1]}
-                                onLayout={initializeSliderContainer}
-                                onPressIn={(e) => runOnUI(sliderOnPress)(e.nativeEvent.locationX)}
-                                accessibilityLabel="slider"
-                                accessibilityRole={CONST.ACCESSIBILITY_ROLE.ADJUSTABLE}
-                            >
-                                <Slider
-                                    sliderValue={translateSlider}
-                                    onGesture={panSliderGestureEventHandler}
+                            <View style={[styles.mt5, styles.justifyContentBetween, styles.alignItemsCenter, styles.flexRow, StyleUtils.getWidthStyle(imageContainerSize)]}>
+                                <Icon
+                                    src={Expensicons.Zoom}
+                                    fill={themeColors.icons}
                                 />
-                            </PressableWithoutFeedback>
-                            <Tooltip
-                                text={props.translate('common.rotate')}
-                                shiftVertical={-2}
-                            >
-                                <View>
-                                    <Button
-                                        medium
-                                        icon={Expensicons.Rotate}
-                                        iconFill={themeColors.inverse}
-                                        iconStyles={[styles.mr0]}
-                                        onPress={rotateImage}
+                                <PressableWithoutFeedback
+                                    style={[styles.mh5, styles.flex1]}
+                                    onLayout={initializeSliderContainer}
+                                    onPressIn={(e) => runOnUI(sliderOnPress)(e.nativeEvent.locationX)}
+                                    accessibilityLabel="slider"
+                                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.ADJUSTABLE}
+                                >
+                                    <Slider
+                                        sliderValue={translateSlider}
+                                        onGesture={panSliderGestureEventHandler}
                                     />
-                                </View>
-                            </Tooltip>
-                        </View>
-                    </>
-                )}
-            </GestureHandlerRootView>
-            <Button
-                success
-                style={[styles.m5]}
-                onPress={cropAndSaveImage}
-                pressOnEnter
-                text={props.translate('common.save')}
-            />
+                                </PressableWithoutFeedback>
+                                <Tooltip
+                                    text={props.translate('common.rotate')}
+                                    shiftVertical={-2}
+                                >
+                                    <View>
+                                        <Button
+                                            medium
+                                            icon={Expensicons.Rotate}
+                                            iconFill={themeColors.inverse}
+                                            iconStyles={[styles.mr0]}
+                                            onPress={rotateImage}
+                                        />
+                                    </View>
+                                </Tooltip>
+                            </View>
+                        </>
+                    )}
+                </GestureHandlerRootView>
+                <Button
+                    success
+                    style={[styles.m5]}
+                    onPress={cropAndSaveImage}
+                    pressOnEnter
+                    text={props.translate('common.save')}
+                />
+            </ScreenWrapper>
         </Modal>
     );
 }

diff --git a/src/components/CountryPicker/CountrySelectorModal.js b/src/components/CountryPicker/CountrySelectorModal.js
@@ -6,6 +6,8 @@ import useLocalize from '../../hooks/useLocalize';
 import HeaderWithBackButton from '../HeaderWithBackButton';
 import SelectionListRadio from '../SelectionListRadio';
 import Modal from '../Modal';
+import ScreenWrapper from '../ScreenWrapper';
+import styles from '../../styles/styles';
 import searchCountryOptions from '../../libs/searchCountryOptions';
 
 const propTypes = {
@@ -61,23 +63,29 @@ function CountrySelectorModal({currentCountry, isVisible, onClose, onCountrySele
             hideModalContentWhileAnimating
             useNativeDriver
         >
-            <HeaderWithBackButton
-                title={translate('common.country')}
-                onBackButtonPress={onClose}
-            />
-            <SelectionListRadio
-                headerMessage={headerMessage}
-                textInputLabel={translate('common.country')}
-                textInputPlaceholder={translate('countrySelectorModal.placeholderText')}
-                textInputValue={searchValue}
-                sections={[{data: searchResults, indexOffset: 0}]}
-                onSelectRow={onCountrySelected}
-                onChangeText={setSearchValue}
-                shouldFocusOnSelectRow
-                shouldHaveOptionSeparator
-                shouldDelayFocus
-                initiallyFocusedOptionKey={currentCountry}
-            />
+            <ScreenWrapper
+                style={[styles.pb0]}
+                includePaddingTop={false}
+                includeSafeAreaPaddingBottom={false}
+            >
+                <HeaderWithBackButton
+                    title={translate('common.country')}
+                    onBackButtonPress={onClose}
+                />
+                <SelectionListRadio
+                    headerMessage={headerMessage}
+                    textInputLabel={translate('common.country')}
+                    textInputPlaceholder={translate('countrySelectorModal.placeholderText')}
+                    textInputValue={searchValue}
+                    sections={[{data: searchResults, indexOffset: 0}]}
+                    onSelectRow={onCountrySelected}
+                    onChangeText={setSearchValue}
+                    shouldFocusOnSelectRow
+                    shouldHaveOptionSeparator
+                    shouldDelayFocus
+                    initiallyFocusedOptionKey={currentCountry}
+                />
+            </ScreenWrapper>
         </Modal>
     );
 }

diff --git a/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js b/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js
@@ -7,6 +7,8 @@ import SelectionListRadio from '../../SelectionListRadio';
 import Modal from '../../Modal';
 import {radioListItemPropTypes} from '../../SelectionListRadio/selectionListRadioPropTypes';
 import useLocalize from '../../../hooks/useLocalize';
+import ScreenWrapper from '../../ScreenWrapper';
+import styles from '../../../styles/styles';
 
 const propTypes = {
     /** Whether the modal is visible */
@@ -58,22 +60,28 @@ function YearPickerModal(props) {
             hideModalContentWhileAnimating
             useNativeDriver
         >
-            <HeaderWithBackButton
-                title={translate('yearPickerPage.year')}
-                onBackButtonPress={props.onClose}
-            />
-            <SelectionListRadio
-                shouldDelayFocus
-                textInputLabel={translate('yearPickerPage.selectYear')}
-                textInputValue={searchText}
-                textInputMaxLength={4}
-                onChangeText={(text) => setSearchText(text.replace(CONST.REGEX.NON_NUMERIC, '').trim())}
-                keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
-                headerMessage={headerMessage}
-                sections={sections}
-                onSelectRow={(option) => props.onYearChange(option.value)}
-                initiallyFocusedOptionKey={props.currentYear.toString()}
-            />
+            <ScreenWrapper
+                style={[styles.pb0]}
+                includePaddingTop={false}
+                includeSafeAreaPaddingBottom={false}
+            >
+                <HeaderWithBackButton
+                    title={translate('yearPickerPage.year')}
+                    onBackButtonPress={props.onClose}
+                />
+                <SelectionListRadio
+                    shouldDelayFocus
+                    textInputLabel={translate('yearPickerPage.selectYear')}
+                    textInputValue={searchText}
+                    textInputMaxLength={4}
+                    onChangeText={(text) => setSearchText(text.replace(CONST.REGEX.NON_NUMERIC, '').trim())}
+                    keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
+                    headerMessage={headerMessage}
+                    sections={sections}
+                    onSelectRow={(option) => props.onYearChange(option.value)}
+                    initiallyFocusedOptionKey={props.currentYear.toString()}
+                />
+            </ScreenWrapper>
         </Modal>
     );
 }

diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js
@@ -111,7 +111,7 @@ class ScreenWrapper extends React.Component {
                             {...(this.props.environment === CONST.ENVIRONMENT.DEV ? this.panResponder.panHandlers : {})}
                         >
                             <View
-                                style={[...this.props.style, styles.flex1, paddingStyle]}
+                                style={[styles.flex1, paddingStyle, ...this.props.style]}
                                 // eslint-disable-next-line react/jsx-props-no-spreading
                                 {...this.keyboardDissmissPanResponder.panHandlers}
                             >

diff --git a/src/components/StatePicker/StateSelectorModal.js b/src/components/StatePicker/StateSelectorModal.js
@@ -6,6 +6,8 @@ import Modal from '../Modal';
 import HeaderWithBackButton from '../HeaderWithBackButton';
 import SelectionListRadio from '../SelectionListRadio';
 import useLocalize from '../../hooks/useLocalize';
+import ScreenWrapper from '../ScreenWrapper';
+import styles from '../../styles/styles';
 import searchCountryOptions from '../../libs/searchCountryOptions';
 
 const propTypes = {
@@ -65,24 +67,30 @@ function StateSelectorModal({currentState, isVisible, onClose, onStateSelected,
             hideModalContentWhileAnimating
             useNativeDriver
         >
-            <HeaderWithBackButton
-                title={label || translate('common.state')}
-                shouldShowBackButton
-                onBackButtonPress={onClose}
-            />
-            <SelectionListRadio
-                headerMessage={headerMessage}
-                textInputLabel={label || translate('common.state')}
-                textInputPlaceholder={translate('stateSelectorModal.placeholderText')}
-                textInputValue={searchValue}
-                sections={[{data: searchResults, indexOffset: 0}]}
-                onSelectRow={onStateSelected}
-                onChangeText={setSearchValue}
-                shouldFocusOnSelectRow
-                shouldHaveOptionSeparator
-                shouldDelayFocus
-                initiallyFocusedOptionKey={currentState}
-            />
+            <ScreenWrapper
+                style={[styles.pb0]}
+                includePaddingTop={false}
+                includeSafeAreaPaddingBottom={false}
+            >
+                <HeaderWithBackButton
+                    title={label || translate('common.state')}
+                    shouldShowBackButton
+                    onBackButtonPress={onClose}
+                />
+                <SelectionListRadio
+                    headerMessage={headerMessage}
+                    textInputLabel={label || translate('common.state')}
+                    textInputPlaceholder={translate('stateSelectorModal.placeholderText')}
+                    textInputValue={searchValue}
+                    sections={[{data: searchResults, indexOffset: 0}]}
+                    onSelectRow={onStateSelected}
+                    onChangeText={setSearchValue}
+                    shouldFocusOnSelectRow
+                    shouldHaveOptionSeparator
+                    shouldDelayFocus
+                    initiallyFocusedOptionKey={currentState}
+                />
+            </ScreenWrapper>
         </Modal>
     );
 }