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

MM-42403 - Calls Mobile: Join Call banner is too low on iOS (#6055)

Browse source 
* use device-specific measurements

* tests
This commit is contained in:
Christopher Poile 2022-03-16 07:51:09 -04:00 committed by GitHub
parent e8e7618497
commit 3f73514b98
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 57 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
app/products/calls/components/__snapshots__/floating_call_container.test.js.snap
View file

@ -1,21 +1,43 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`FloatingCallContainer should match snapshot 1`] = `
<View
<RNCSafeAreaProvider
onInsetsChange={[Function]}
style={
Array [
Object {
"position": "absolute",
"top": 91,
"width": "100%",
"zIndex": 9,
"flex": 1,
},
undefined,
]
}
>
<Text>
test
</Text>
</View>
<Context.Provider
value={
Object {
"height": 0,
"width": 0,
"x": 0,
"y": 0,
}
}
>
<Context.Provider
value={
Object {
"bottom": 0,
"left": 0,
"right": 0,
"top": 0,
}
}
>
<FloatingCallContainer>
<Text>
test
</Text>
</FloatingCallContainer>
</Context.Provider>
</Context.Provider>
</RNCSafeAreaProvider>
`;

18
app/products/calls/components/floating_call_container.test.js
View file

@ -4,12 +4,28 @@
import {shallow} from 'enzyme';
import React from 'react';
import {Text} from 'react-native';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import FloatingCallContainer from './floating_call_container';
function testSafeAreaProvider(children) {
return (
<SafeAreaProvider
initialMetrics={{
frame: {x: 0, y: 0, width: 0, height: 0},
insets: {top: 0, left: 0, right: 0, bottom: 0},
}}
>
{children}
</SafeAreaProvider>
);
}
describe('FloatingCallContainer', () => {
test('should match snapshot', () => {
const wrapper = shallow(<FloatingCallContainer><Text>{'test'}</Text></FloatingCallContainer>);
const wrapper = shallow(testSafeAreaProvider(
<FloatingCallContainer><Text>{'test'}</Text></FloatingCallContainer>,
));
expect(wrapper.getElement()).toMatchSnapshot();
});

12
app/products/calls/components/floating_call_container.tsx
View file

@ -3,6 +3,7 @@
import React, {useState, useEffect} from 'react';
import {View, Platform} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {ViewTypes} from '@constants';
import EventEmitter from '@mm-redux/utils/event_emitter';
@ -11,15 +12,20 @@ import {makeStyleSheetFromTheme} from '@utils/theme';
const {
IOS_TOP_PORTRAIT,
STATUS_BAR_HEIGHT,
ANDROID_TOP_PORTRAIT,
} = ViewTypes;
const getStyleSheet = makeStyleSheetFromTheme(() => {
const topBarHeight = Platform.select({android: 9, ios: IOS_TOP_PORTRAIT - STATUS_BAR_HEIGHT}) || 0;
const insets = useSafeAreaInsets();
let topBarHeight = ANDROID_TOP_PORTRAIT;
if (Platform.OS === 'ios') {
topBarHeight = (IOS_TOP_PORTRAIT - STATUS_BAR_HEIGHT) + insets.top;
}
return {
wrapper: {
position: 'absolute',
top: topBarHeight + ViewTypes.STATUS_BAR_HEIGHT + 27,
top: topBarHeight,
width: '100%',
...Platform.select({
android: {
@ -31,7 +37,7 @@ const getStyleSheet = makeStyleSheetFromTheme(() => {
}),
},
withIndicatorBar: {
top: topBarHeight + ViewTypes.STATUS_BAR_HEIGHT + 27 + ViewTypes.INDICATOR_BAR_HEIGHT,
top: topBarHeight + ViewTypes.INDICATOR_BAR_HEIGHT,
},
};
});