toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

[MM-31376] Do not subtract offset from accessories container (#5042) (#5050)

Browse source 
* Do not subtract offset from accessories container

* Missing space

* Adjust autcomplete offsetY

* Adjust placement of autocomplete

* Space fix

* Unused onLayout
This commit is contained in:
Miguel Alatzar 2020-12-18 12:42:06 -07:00 committed by GitHub
parent d43f619f40
commit de0e7ca142
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 70 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/components/autocomplete/index.js
View file

@ -17,6 +17,4 @@ function mapStateToProps(state) {
};
}
export const AUTOCOMPLETE_MAX_HEIGHT = 200;
export default connect(mapStateToProps, null, null, {forwardRef: true})(Autocomplete);

5
app/components/edit_channel_info/index.js
View file

@ -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 {
<View style={[style.autocompleteContainer, bottomStyle]}>
<Autocomplete
cursorPosition={header.length}
maxHeight={AUTOCOMPLETE_MAX_HEIGHT}
maxHeight={DEVICE.AUTOCOMPLETE_MAX_HEIGHT}
onChangeText={this.onHeaderChangeText}
value={header}
nestedScrollEnabled={true}

23
app/components/post_draft/draft_input/draft_input.js
View file

@ -14,6 +14,7 @@ import QuickActions from '@components/post_draft/quick_actions';
import SendAction from '@components/post_draft/send_action';
import Typing from '@components/post_draft/typing';
import Uploads from '@components/post_draft/uploads';
import DEVICE from '@constants/device';
import {CHANNEL_POST_TEXTBOX_CURSOR_CHANGE, CHANNEL_POST_TEXTBOX_VALUE_CHANGE, IS_REACTION_REGEX} from '@constants/post_draft';
import {NOTIFY_ALL_MEMBERS} from '@constants/view';
import EventEmitter from '@mm-redux/utils/event_emitter';
@ -23,7 +24,6 @@ import {confirmOutOfOfficeDisabled} from '@utils/status';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
const AUTOCOMPLETE_MARGIN = 20;
const AUTOCOMPLETE_MAX_HEIGHT = 200;
const HW_SHIFT_ENTER_TEXT = Platform.OS === 'ios' ? '\n' : '';
const HW_EVENT_IN_SCREEN = ['Channel', 'Thread'];
@ -417,6 +417,17 @@ export default class DraftInput extends PureComponent {
theme={theme}
registerTypingAnimation={registerTypingAnimation}
/>
{Platform.OS === 'android' &&
<Autocomplete
cursorPositionEvent={cursorPositionEvent}
maxHeight={Math.min(this.state.top - AUTOCOMPLETE_MARGIN, DEVICE.AUTOCOMPLETE_MAX_HEIGHT)}
onChangeText={this.handleInputQuickAction}
valueEvent={valueEvent}
rootId={rootId}
channelId={channelId}
offsetY={0}
/>
}
<SafeAreaView
edges={['left', 'right']}
onLayout={this.handleLayout}
@ -469,16 +480,6 @@ export default class DraftInput extends PureComponent {
</View>
</ScrollView>
</SafeAreaView>
{Platform.OS === 'android' &&
<Autocomplete
cursorPositionEvent={cursorPositionEvent}
maxHeight={Math.min(this.state.top - AUTOCOMPLETE_MARGIN, AUTOCOMPLETE_MAX_HEIGHT)}
onChangeText={this.handleInputQuickAction}
valueEvent={valueEvent}
rootId={rootId}
channelId={channelId}
/>
}
</>
);
}

3
app/components/post_draft/post_input/post_input.js
View file

@ -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;

8
app/constants/device.js
View file

@ -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,
};

22
app/screens/channel/channel.ios.js
View file

@ -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}
</SafeAreaView>
{indicators}
<View nativeID={ACCESSORIES_CONTAINER_NATIVE_ID}>
<Autocomplete
maxHeight={DEVICE.AUTOCOMPLETE_MAX_HEIGHT}
onChangeText={this.handleAutoComplete}
cursorPositionEvent={CHANNEL_POST_TEXTBOX_CURSOR_CHANGE}
valueEvent={CHANNEL_POST_TEXTBOX_VALUE_CHANGE}
channelId={currentChannelId}
offsetY={0}
/>
</View>
{renderDraftArea &&
<PostDraft
accessoriesContainerID={ACCESSORIES_CONTAINER_NATIVE_ID}
@ -109,15 +120,6 @@ export default class ChannelIOS extends ChannelBase {
valueEvent={CHANNEL_POST_TEXTBOX_VALUE_CHANGE}
/>
}
<View nativeID={ACCESSORIES_CONTAINER_NATIVE_ID}>
<Autocomplete
maxHeight={AUTOCOMPLETE_MAX_HEIGHT}
onChangeText={this.handleAutoComplete}
cursorPositionEvent={CHANNEL_POST_TEXTBOX_CURSOR_CHANGE}
valueEvent={CHANNEL_POST_TEXTBOX_VALUE_CHANGE}
channelId={currentChannelId}
/>
</View>
</>
);

5
app/screens/edit_post/edit_post.js
View file

@ -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 {
<KeyboardTrackingView style={autocompleteStyles}>
<Autocomplete
cursorPosition={this.state.cursorPosition}
maxHeight={AUTOCOMPLETE_MAX_HEIGHT}
maxHeight={DEVICE.AUTOCOMPLETE_MAX_HEIGHT}
onChangeText={this.onPostChangeText}
value={message}
nestedScrollEnabled={true}

27
app/screens/thread/__snapshots__/thread.ios.test.js.snap
View file

@ -50,6 +50,19 @@ exports[`thread should match snapshot, has root post 1`] = `
</ForwardRef(AnimatedComponentWrapper)>
</React.Fragment>
</Connect(SafeArea)>
<View
nativeID="threadAccessoriesContainer"
>
<Connect(Autocomplete)
channelId="channel_id"
cursorPositionEvent="onThreadTextBoxCursorChange"
maxHeight={200}
offsetY={0}
onChangeText={[Function]}
rootId="root_id"
valueEvent="onThreadTextBoxValueChange"
/>
</View>
<Connect(PostDraft)
accessoriesContainerID="threadAccessoriesContainer"
channelId="channel_id"
@ -60,18 +73,6 @@ exports[`thread should match snapshot, has root post 1`] = `
scrollViewNativeID="threadPostList"
valueEvent="onThreadTextBoxValueChange"
/>
<View
nativeID="threadAccessoriesContainer"
>
<Connect(Autocomplete)
channelId="channel_id"
cursorPositionEvent="onThreadTextBoxCursorChange"
maxHeight={200}
onChangeText={[Function]}
rootId="root_id"
valueEvent="onThreadTextBoxValueChange"
/>
</View>
</React.Fragment>
`;
@ -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"

8
app/screens/thread/thread.ios.js
View file

@ -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 {
<StatusBar/>
{content}
</SafeAreaView>
{postDraft}
<View nativeID={ACCESSORIES_CONTAINER_NATIVE_ID}>
<Autocomplete
maxHeight={AUTOCOMPLETE_MAX_HEIGHT}
maxHeight={DEVICE.AUTOCOMPLETE_MAX_HEIGHT}
onChangeText={this.handleAutoComplete}
cursorPositionEvent={THREAD_POST_TEXTBOX_CURSOR_CHANGE}
valueEvent={THREAD_POST_TEXTBOX_VALUE_CHANGE}
rootId={rootId}
channelId={channelId}
offsetY={0}
/>
</View>
{postDraft}
</React.Fragment>
);
}

21
patches/react-native-keyboard-tracking-view+5.7.0.patch
View file

@ -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];
}