From 382056d2dbe3fe71145816f98e75cd45bdf81612 Mon Sep 17 00:00:00 2001 From: s-alves10 Date: Fri, 27 Oct 2023 04:28:02 -0500 Subject: [PATCH 1/5] fix: offline indicator inside a keyboard avoiding view --- src/components/ScreenWrapper/index.js | 2 +- src/pages/NewChatPage.js | 7 ++++++- src/pages/NewChatSelectorPage.js | 1 + src/pages/workspace/WorkspaceNewRoomPage.js | 9 ++++++++- 4 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js index e2af40589a8a..9643d7a785a5 100644 --- a/src/components/ScreenWrapper/index.js +++ b/src/components/ScreenWrapper/index.js @@ -108,7 +108,7 @@ function ScreenWrapper({ } // We always need the safe area padding bottom if we're showing the offline indicator since it is bottom-docked. - if (includeSafeAreaPaddingBottom || isOffline) { + if (includeSafeAreaPaddingBottom || (isOffline && shouldShowOfflineIndicator)) { paddingStyle.paddingBottom = paddingBottom; } diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js index 381564b82600..7b97e3c82a07 100755 --- a/src/pages/NewChatPage.js +++ b/src/pages/NewChatPage.js @@ -14,6 +14,7 @@ import CONST from '../CONST'; import withWindowDimensions, {windowDimensionsPropTypes} from '../components/withWindowDimensions'; import ScreenWrapper from '../components/ScreenWrapper'; import KeyboardAvoidingView from '../components/KeyboardAvoidingView'; +import OfflineIndicator from '../components/OfflineIndicator'; import withLocalize, {withLocalizePropTypes} from '../components/withLocalize'; import * as Browser from '../libs/Browser'; import compose from '../libs/compose'; @@ -22,6 +23,7 @@ import reportPropTypes from './reportPropTypes'; import variables from '../styles/variables'; import useNetwork from '../hooks/useNetwork'; import useDelayedInputFocus from '../hooks/useDelayedInputFocus'; +import useWindowDimensions from '../hooks/useWindowDimensions'; const propTypes = { /** Beta features list */ @@ -58,6 +60,7 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, i const [filteredUserToInvite, setFilteredUserToInvite] = useState(); const [selectedOptions, setSelectedOptions] = useState([]); const {isOffline} = useNetwork(); + const {isSmallScreenWidth} = useWindowDimensions(); const maxParticipantsReached = selectedOptions.length === CONST.REPORT.MAXIMUM_PARTICIPANTS; const headerMessage = OptionsListUtils.getHeaderMessage( @@ -218,7 +221,8 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, i return ( + {isSmallScreenWidth && } )} diff --git a/src/pages/NewChatSelectorPage.js b/src/pages/NewChatSelectorPage.js index 2ac2ed8177a1..ba4366f06349 100755 --- a/src/pages/NewChatSelectorPage.js +++ b/src/pages/NewChatSelectorPage.js @@ -30,6 +30,7 @@ function NewChatSelectorPage(props) { diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js index 548b00254721..af073886ea1c 100644 --- a/src/pages/workspace/WorkspaceNewRoomPage.js +++ b/src/pages/workspace/WorkspaceNewRoomPage.js @@ -28,6 +28,9 @@ import useDelayedInputFocus from '../../hooks/useDelayedInputFocus'; import ValuePicker from '../../components/ValuePicker'; import FormProvider from '../../components/Form/FormProvider'; import InputWrapper from '../../components/Form/InputWrapper'; +import useWindowDimensions from '../../hooks/useWindowDimensions'; +import OfflineIndicator from '../../components/OfflineIndicator'; +import useNetwork from '../../hooks/useNetwork'; const propTypes = { /** All reports shared with the user */ @@ -74,6 +77,8 @@ const defaultProps = { function WorkspaceNewRoomPage(props) { const {translate} = useLocalize(); + const {isOffline} = useNetwork(); + const {isSmallScreenWidth} = useWindowDimensions(); const [visibility, setVisibility] = useState(CONST.REPORT.VISIBILITY.RESTRICTED); const [policyID, setPolicyID] = useState(null); const [writeCapability, setWriteCapability] = useState(CONST.REPORT.WRITE_CAPABILITIES.ALL); @@ -171,7 +176,8 @@ function WorkspaceNewRoomPage(props) { > {visibilityDescription} + {isSmallScreenWidth && } )} From 17ba3276c1939d4564f39cb46d1babea0ce8de56 Mon Sep 17 00:00:00 2001 From: s-alves10 Date: Mon, 30 Oct 2023 04:10:44 -0500 Subject: [PATCH 2/5] fix: conflicts --- src/pages/NewChatPage.js | 4 ++-- src/pages/workspace/WorkspaceNewRoomPage.js | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js index a6918d7dc526..449d86b5c72b 100755 --- a/src/pages/NewChatPage.js +++ b/src/pages/NewChatPage.js @@ -8,8 +8,10 @@ import OptionsSelector from '@components/OptionsSelector'; import ScreenWrapper from '@components/ScreenWrapper'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; +import OfflineIndicator from '@components/OfflineIndicator'; import useDelayedInputFocus from '@hooks/useDelayedInputFocus'; import useNetwork from '@hooks/useNetwork'; +import useWindowDimensions from '@hooks/useWindowDimensions'; import * as Browser from '@libs/Browser'; import compose from '@libs/compose'; import * as OptionsListUtils from '@libs/OptionsListUtils'; @@ -22,8 +24,6 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import personalDetailsPropType from './personalDetailsPropType'; import reportPropTypes from './reportPropTypes'; -import OfflineIndicator from '../components/OfflineIndicator'; -import useWindowDimensions from '../hooks/useWindowDimensions'; const propTypes = { /** Beta features list */ diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js index affc6b8c5019..36a97c60ff19 100644 --- a/src/pages/workspace/WorkspaceNewRoomPage.js +++ b/src/pages/workspace/WorkspaceNewRoomPage.js @@ -12,8 +12,11 @@ import Text from '@components/Text'; import TextInput from '@components/TextInput'; import ValuePicker from '@components/ValuePicker'; import withNavigationFocus from '@components/withNavigationFocus'; +import OfflineIndicator from '@components/OfflineIndicator'; import useDelayedInputFocus from '@hooks/useDelayedInputFocus'; import useLocalize from '@hooks/useLocalize'; +import useWindowDimensions from '@hooks/useWindowDimensions'; +import useNetwork from '@hooks/useNetwork'; import compose from '@libs/compose'; import * as ErrorUtils from '@libs/ErrorUtils'; import Permissions from '@libs/Permissions'; @@ -27,9 +30,6 @@ import * as App from '@userActions/App'; import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import useWindowDimensions from '../../hooks/useWindowDimensions'; -import OfflineIndicator from '../../components/OfflineIndicator'; -import useNetwork from '../../hooks/useNetwork'; const propTypes = { /** All reports shared with the user */ From 08949a410cbe839ec18e3c836e17aa3287a7600a Mon Sep 17 00:00:00 2001 From: s-alves10 Date: Mon, 30 Oct 2023 04:13:46 -0500 Subject: [PATCH 3/5] fix: prettier --- src/pages/NewChatPage.js | 2 +- src/pages/workspace/WorkspaceNewRoomPage.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js index 449d86b5c72b..9232cef455cc 100755 --- a/src/pages/NewChatPage.js +++ b/src/pages/NewChatPage.js @@ -4,11 +4,11 @@ import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import KeyboardAvoidingView from '@components/KeyboardAvoidingView'; +import OfflineIndicator from '@components/OfflineIndicator'; import OptionsSelector from '@components/OptionsSelector'; import ScreenWrapper from '@components/ScreenWrapper'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; -import OfflineIndicator from '@components/OfflineIndicator'; import useDelayedInputFocus from '@hooks/useDelayedInputFocus'; import useNetwork from '@hooks/useNetwork'; import useWindowDimensions from '@hooks/useWindowDimensions'; diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js index 36a97c60ff19..97b884a70cfe 100644 --- a/src/pages/workspace/WorkspaceNewRoomPage.js +++ b/src/pages/workspace/WorkspaceNewRoomPage.js @@ -6,17 +6,17 @@ import _ from 'underscore'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import Form from '@components/Form'; import KeyboardAvoidingView from '@components/KeyboardAvoidingView'; +import OfflineIndicator from '@components/OfflineIndicator'; import RoomNameInput from '@components/RoomNameInput'; import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; import TextInput from '@components/TextInput'; import ValuePicker from '@components/ValuePicker'; import withNavigationFocus from '@components/withNavigationFocus'; -import OfflineIndicator from '@components/OfflineIndicator'; import useDelayedInputFocus from '@hooks/useDelayedInputFocus'; import useLocalize from '@hooks/useLocalize'; -import useWindowDimensions from '@hooks/useWindowDimensions'; import useNetwork from '@hooks/useNetwork'; +import useWindowDimensions from '@hooks/useWindowDimensions'; import compose from '@libs/compose'; import * as ErrorUtils from '@libs/ErrorUtils'; import Permissions from '@libs/Permissions'; From 2a56958abe00353def17264751e4dad1d9c5159b Mon Sep 17 00:00:00 2001 From: s-alves10 Date: Tue, 31 Oct 2023 02:54:25 -0500 Subject: [PATCH 4/5] fix: add default value to the style props of OfflineIndicator --- src/components/OfflineIndicator.js | 5 +++++ src/pages/NewChatPage.js | 2 +- src/pages/workspace/WorkspaceNewRoomPage.js | 2 +- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/OfflineIndicator.js b/src/components/OfflineIndicator.js index f120fe535834..a5040a705e4f 100644 --- a/src/components/OfflineIndicator.js +++ b/src/components/OfflineIndicator.js @@ -5,6 +5,7 @@ import compose from '@libs/compose'; import styles from '@styles/styles'; import * as StyleUtils from '@styles/StyleUtils'; import variables from '@styles/variables'; +import stylePropTypes from '@styles/stylePropTypes'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; import networkPropTypes from './networkPropTypes'; @@ -21,6 +22,9 @@ const propTypes = { // eslint-disable-next-line react/forbid-prop-types containerStyles: PropTypes.arrayOf(PropTypes.object), + /** Optional styles for the container */ + style: stylePropTypes, + /** Is the window width narrow, like on a mobile device */ isSmallScreenWidth: PropTypes.bool.isRequired, @@ -29,6 +33,7 @@ const propTypes = { const defaultProps = { containerStyles: [], + style: [], }; const setStyles = (containerStyles, isSmallScreenWidth) => { diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js index 9232cef455cc..f8b041951016 100755 --- a/src/pages/NewChatPage.js +++ b/src/pages/NewChatPage.js @@ -262,7 +262,7 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, i isLoadingNewOptions={isSearchingForReports} /> - {isSmallScreenWidth && } + {isSmallScreenWidth && } )} diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js index 7592a65b5eca..271dc45026c7 100644 --- a/src/pages/workspace/WorkspaceNewRoomPage.js +++ b/src/pages/workspace/WorkspaceNewRoomPage.js @@ -249,7 +249,7 @@ function WorkspaceNewRoomPage(props) { {visibilityDescription} - {isSmallScreenWidth && } + {isSmallScreenWidth && } )} From a984c5fbc0f09383c6a1c80749e62cb266b9fe97 Mon Sep 17 00:00:00 2001 From: s-alves10 Date: Tue, 31 Oct 2023 03:01:08 -0500 Subject: [PATCH 5/5] fix: prettier --- src/components/OfflineIndicator.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/OfflineIndicator.js b/src/components/OfflineIndicator.js index a5040a705e4f..9cacc3621790 100644 --- a/src/components/OfflineIndicator.js +++ b/src/components/OfflineIndicator.js @@ -2,10 +2,10 @@ import PropTypes from 'prop-types'; import React from 'react'; import {View} from 'react-native'; import compose from '@libs/compose'; +import stylePropTypes from '@styles/stylePropTypes'; import styles from '@styles/styles'; import * as StyleUtils from '@styles/StyleUtils'; import variables from '@styles/variables'; -import stylePropTypes from '@styles/stylePropTypes'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; import networkPropTypes from './networkPropTypes';