From de0e7ca142219a97a89ffd7e3e540272ea80edd7 Mon Sep 17 00:00:00 2001 From: Miguel Alatzar Date: Fri, 18 Dec 2020 12:42:06 -0700 Subject: [PATCH] [MM-31376] Do not subtract offset from accessories container (#5042) (#5050) * Do not subtract offset from accessories container * Missing space * Adjust autcomplete offsetY * Adjust placement of autocomplete * Space fix * Unused onLayout --- app/components/autocomplete/index.js | 2 -- app/components/edit_channel_info/index.js | 5 ++-- .../post_draft/draft_input/draft_input.js | 23 ++++++++-------- .../post_draft/post_input/post_input.js | 3 ++- app/constants/device.js | 8 +++++- app/screens/channel/channel.ios.js | 22 ++++++++------- app/screens/edit_post/edit_post.js | 5 ++-- .../__snapshots__/thread.ios.test.js.snap | 27 ++++++++++--------- app/screens/thread/thread.ios.js | 8 +++--- ...-native-keyboard-tracking-view+5.7.0.patch | 21 ++++++++------- 10 files changed, 70 insertions(+), 54 deletions(-) diff --git a/app/components/autocomplete/index.js b/app/components/autocomplete/index.js index 31c6b8d24..31a4d15ad 100644 --- a/app/components/autocomplete/index.js +++ b/app/components/autocomplete/index.js @@ -17,6 +17,4 @@ function mapStateToProps(state) { }; } -export const AUTOCOMPLETE_MAX_HEIGHT = 200; - export default connect(mapStateToProps, null, null, {forwardRef: true})(Autocomplete); diff --git a/app/components/edit_channel_info/index.js b/app/components/edit_channel_info/index.js index 391be69dd..7930819c2 100644 --- a/app/components/edit_channel_info/index.js +++ b/app/components/edit_channel_info/index.js @@ -13,12 +13,13 @@ import {SafeAreaView} from 'react-native-safe-area-context'; import {General} from '@mm-redux/constants'; -import Autocomplete, {AUTOCOMPLETE_MAX_HEIGHT} from 'app/components/autocomplete'; +import Autocomplete from 'app/components/autocomplete'; import ErrorText from 'app/components/error_text'; import FormattedText from 'app/components/formatted_text'; import Loading from 'app/components/loading'; import StatusBar from 'app/components/status_bar'; import TextInputWithLocalizedPlaceholder from 'app/components/text_input_with_localized_placeholder'; +import DEVICE from '@constants/device'; import { changeOpacity, @@ -370,7 +371,7 @@ export default class EditChannelInfo extends PureComponent { + {Platform.OS === 'android' && + + } - {Platform.OS === 'android' && - - } ); } diff --git a/app/components/post_draft/post_input/post_input.js b/app/components/post_draft/post_input/post_input.js index a337a32f6..7c6e8a811 100644 --- a/app/components/post_draft/post_input/post_input.js +++ b/app/components/post_draft/post_input/post_input.js @@ -8,6 +8,7 @@ import {intlShape} from 'react-intl'; import PasteableTextInput from '@components/pasteable_text_input'; import {NavigationTypes} from '@constants'; +import DEVICE from '@constants/device'; import {INSERT_TO_COMMENT, INSERT_TO_DRAFT} from '@constants/post_draft'; import EventEmitter from '@mm-redux/utils/event_emitter'; import {t} from '@utils/i18n'; @@ -270,7 +271,7 @@ export default class PostInput extends PureComponent { const {channelDisplayName, isLandscape, theme} = this.props; const style = getStyleSheet(theme); const placeholder = this.getPlaceHolder(); - let maxHeight = 150; + let maxHeight = DEVICE.POST_INPUT_MAX_HEIGHT; if (isLandscape) { maxHeight = 88; diff --git a/app/constants/device.js b/app/constants/device.js index c73e32cfc..d052a81d0 100644 --- a/app/constants/device.js +++ b/app/constants/device.js @@ -14,13 +14,19 @@ const deviceTypes = keyMirror({ STATUSBAR_HEIGHT_CHANGED: null, }); +const isPhoneWithInsets = Platform.OS === 'ios' && DeviceInfo.hasNotch(); +const isTablet = DeviceInfo.isTablet(); +const isIPhone12Mini = DeviceInfo.getModel() === 'iPhone 12 mini'; + export default { ...deviceTypes, DOCUMENTS_PATH: `${RNFetchBlobFS.dirs.CacheDir}/Documents`, IMAGES_PATH: `${RNFetchBlobFS.dirs.CacheDir}/Images`, - IS_IPHONE_WITH_INSETS: Platform.OS === 'ios' && DeviceInfo.hasNotch(), + IS_IPHONE_WITH_INSETS: isPhoneWithInsets, IS_TABLET: DeviceInfo.isTablet(), VIDEOS_PATH: `${RNFetchBlobFS.dirs.CacheDir}/Videos`, PERMANENT_SIDEBAR_SETTINGS: '@PERMANENT_SIDEBAR_SETTINGS', TABLET_WIDTH: 250, + AUTOCOMPLETE_MAX_HEIGHT: (isPhoneWithInsets && !isIPhone12Mini) || isTablet ? 200 : 145, + POST_INPUT_MAX_HEIGHT: (isPhoneWithInsets && !isIPhone12Mini) || isTablet ? 150 : 88, }; diff --git a/app/screens/channel/channel.ios.js b/app/screens/channel/channel.ios.js index 688a7e85f..141e800e6 100644 --- a/app/screens/channel/channel.ios.js +++ b/app/screens/channel/channel.ios.js @@ -7,13 +7,14 @@ import {SafeAreaView} from 'react-native-safe-area-context'; import LocalConfig from '@assets/config'; import AnnouncementBanner from 'app/components/announcement_banner'; -import Autocomplete, {AUTOCOMPLETE_MAX_HEIGHT} from '@components/autocomplete'; +import Autocomplete from '@components/autocomplete'; import InteractiveDialogController from '@components/interactive_dialog_controller'; import NetworkIndicator from '@components/network_indicator'; import PostDraft from '@components/post_draft'; import MainSidebar from '@components/sidebars/main'; import SettingsSidebar from '@components/sidebars/settings'; import StatusBar from '@components/status_bar'; +import DEVICE from '@constants/device'; import {ACCESSORIES_CONTAINER_NATIVE_ID, CHANNEL_POST_TEXTBOX_CURSOR_CHANGE, CHANNEL_POST_TEXTBOX_VALUE_CHANGE} from '@constants/post_draft'; import {makeStyleSheetFromTheme} from '@utils/theme'; @@ -98,6 +99,16 @@ export default class ChannelIOS extends ChannelBase { {component} {indicators} + + + {renderDraftArea && } - - - ); diff --git a/app/screens/edit_post/edit_post.js b/app/screens/edit_post/edit_post.js index afbc4951b..2fca6c777 100644 --- a/app/screens/edit_post/edit_post.js +++ b/app/screens/edit_post/edit_post.js @@ -12,11 +12,12 @@ import {Navigation} from 'react-native-navigation'; import {KeyboardTrackingView} from 'react-native-keyboard-tracking-view'; import {SafeAreaView} from 'react-native-safe-area-context'; -import Autocomplete, {AUTOCOMPLETE_MAX_HEIGHT} from 'app/components/autocomplete'; +import Autocomplete from 'app/components/autocomplete'; import ErrorText from 'app/components/error_text'; import Loading from 'app/components/loading'; import StatusBar from 'app/components/status_bar'; import TextInputWithLocalizedPlaceholder from 'app/components/text_input_with_localized_placeholder'; +import DEVICE from '@constants/device'; import {switchKeyboardForCodeBlocks} from 'app/utils/markdown'; import { changeOpacity, @@ -280,7 +281,7 @@ export default class EditPost extends PureComponent { + + + - - - `; @@ -103,6 +104,7 @@ exports[`thread should match snapshot, no root post, loading 1`] = ` channelId="channel_id" cursorPositionEvent="onThreadTextBoxCursorChange" maxHeight={200} + offsetY={0} onChangeText={[Function]} rootId="root_id" valueEvent="onThreadTextBoxValueChange" @@ -185,6 +187,7 @@ exports[`thread should match snapshot, render footer 3`] = ` channelId="channel_id" cursorPositionEvent="onThreadTextBoxCursorChange" maxHeight={200} + offsetY={0} onChangeText={[Function]} rootId="root_id" valueEvent="onThreadTextBoxValueChange" diff --git a/app/screens/thread/thread.ios.js b/app/screens/thread/thread.ios.js index f68313413..51989dd6d 100644 --- a/app/screens/thread/thread.ios.js +++ b/app/screens/thread/thread.ios.js @@ -4,12 +4,13 @@ import React from 'react'; import {Animated, View} from 'react-native'; -import Autocomplete, {AUTOCOMPLETE_MAX_HEIGHT} from '@components/autocomplete'; +import Autocomplete from '@components/autocomplete'; import Loading from '@components/loading'; import PostList from '@components/post_list'; import PostDraft from '@components/post_draft'; import SafeAreaView from '@components/safe_area_view'; import StatusBar from '@components/status_bar'; +import DEVICE from '@constants/device'; import {THREAD} from '@constants/screen'; import {getLastPostIndex} from '@mm-redux/utils/post_list'; import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; @@ -90,17 +91,18 @@ export default class ThreadIOS extends ThreadBase { {content} - {postDraft} + {postDraft} ); } diff --git a/patches/react-native-keyboard-tracking-view+5.7.0.patch b/patches/react-native-keyboard-tracking-view+5.7.0.patch index be4cf12ee..7a4470a10 100644 --- a/patches/react-native-keyboard-tracking-view+5.7.0.patch +++ b/patches/react-native-keyboard-tracking-view+5.7.0.patch @@ -1,5 +1,5 @@ diff --git a/node_modules/react-native-keyboard-tracking-view/lib/KeyboardTrackingViewManager.m b/node_modules/react-native-keyboard-tracking-view/lib/KeyboardTrackingViewManager.m -index 1333a10..53b73a6 100644 +index 1333a10..6922a17 100644 --- a/node_modules/react-native-keyboard-tracking-view/lib/KeyboardTrackingViewManager.m +++ b/node_modules/react-native-keyboard-tracking-view/lib/KeyboardTrackingViewManager.m @@ -23,7 +23,7 @@ @@ -197,7 +197,7 @@ index 1333a10..53b73a6 100644 } } else if(self.scrollBehavior == KeyboardTrackingScrollBehaviorFixedOffset && !self.isDraggingScrollView) -@@ -422,16 +459,20 @@ - (void)_updateScrollViewInsets +@@ -422,16 +459,21 @@ - (void)_updateScrollViewInsets self.scrollViewToManage.contentOffset = CGPointMake(originalOffset.x, originalOffset.y + insetsDiff); } @@ -219,14 +219,15 @@ index 1333a10..53b73a6 100644 + self.scrollViewToManage.frame = frame; + + if (self.accessoriesContainer) { -+ self.accessoriesContainer.bounds = CGRectMake(self.accessoriesContainer.bounds.origin.x, positionY, ++ CGFloat containerPositionY = self.normalList ? 0 : _observingInputAccessoryView.keyboardHeight; ++ self.accessoriesContainer.bounds = CGRectMake(self.accessoriesContainer.bounds.origin.x, containerPositionY, + self.accessoriesContainer.bounds.size.width, self.accessoriesContainer.bounds.size.height); } - self.scrollViewToManage.scrollIndicatorInsets = insets; } } -@@ -448,7 +489,6 @@ -(void)addBottomViewIfNecessary +@@ -448,7 +490,6 @@ -(void)addBottomViewIfNecessary if (self.addBottomView && _bottomView == nil) { _bottomView = [UIView new]; @@ -234,7 +235,7 @@ index 1333a10..53b73a6 100644 [self addSubview:_bottomView]; [self updateBottomViewFrame]; } -@@ -467,6 +507,12 @@ -(void)updateBottomViewFrame +@@ -467,6 +508,12 @@ -(void)updateBottomViewFrame } } @@ -247,7 +248,7 @@ index 1333a10..53b73a6 100644 #pragma mark - safe area -(void)safeAreaInsetsDidChange -@@ -510,7 +556,7 @@ -(void)updateTransformAndInsets +@@ -510,7 +557,7 @@ -(void)updateTransformAndInsets CGFloat accessoryTranslation = MIN(-bottomSafeArea, -_observingInputAccessoryView.keyboardHeight); if (_observingInputAccessoryView.keyboardHeight <= bottomSafeArea) { @@ -256,7 +257,7 @@ index 1333a10..53b73a6 100644 } else if (_observingInputAccessoryView.keyboardState != KeyboardStateWillHide) { _bottomViewHeight = 0; } -@@ -582,6 +628,8 @@ - (void)scrollViewDidScroll:(UIScrollView *)scrollView +@@ -582,6 +629,8 @@ - (void)scrollViewDidScroll:(UIScrollView *)scrollView - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView { self.isDraggingScrollView = YES; @@ -265,7 +266,7 @@ index 1333a10..53b73a6 100644 } - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset -@@ -592,6 +640,15 @@ - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoi +@@ -592,6 +641,15 @@ - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoi - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate { self.isDraggingScrollView = NO; @@ -281,7 +282,7 @@ index 1333a10..53b73a6 100644 } - (CGFloat)getKeyboardHeight -@@ -634,6 +691,12 @@ @implementation KeyboardTrackingViewManager +@@ -634,6 +692,12 @@ @implementation KeyboardTrackingViewManager RCT_REMAP_VIEW_PROPERTY(addBottomView, addBottomView, BOOL) RCT_REMAP_VIEW_PROPERTY(scrollToFocusedInput, scrollToFocusedInput, BOOL) RCT_REMAP_VIEW_PROPERTY(allowHitsOutsideBounds, allowHitsOutsideBounds, BOOL) @@ -294,7 +295,7 @@ index 1333a10..53b73a6 100644 + (BOOL)requiresMainQueueSetup { -@@ -654,6 +717,20 @@ - (UIView *)view +@@ -654,6 +718,20 @@ - (UIView *)view return [[KeyboardTrackingView alloc] init]; }