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

[MM-54599] Fix Servers bottom sheet (#7609)

Browse source
This commit is contained in:
Paul Vrn 2023-10-30 04:53:15 +01:00 committed by GitHub
parent 01fdd1f7d4
commit 2583b470b2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
app/screens/home/channel_list/servers/index.tsx
View file

@ -3,7 +3,7 @@
import React, {useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
import {useIntl} from 'react-intl';
import {StyleSheet} from 'react-native';
import {Dimensions, StyleSheet} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import ServerIcon from '@components/server_icon';
@ -27,7 +27,8 @@ export type ServersRef = {
openServers: () => void;
}
export const SERVER_ITEM_HEIGHT = 72;
export const SERVER_ITEM_HEIGHT = 75;
export const PUSH_ALERT_TEXT_HEIGHT = 42;
const subscriptions: Map<string, UnreadSubscription> = new Map();
const styles = StyleSheet.create({
@ -116,12 +117,18 @@ const Servers = React.forwardRef<ServersRef>((_, ref) => {
<ServerList servers={registeredServers.current!}/>
);
};
const maxScreenHeight = Math.ceil(0.6 * Dimensions.get('window').height);
const maxSnapPoint = Math.min(
maxScreenHeight,
bottomSheetSnapPoint(registeredServers.current.length, SERVER_ITEM_HEIGHT, bottom) + TITLE_HEIGHT + BUTTON_HEIGHT +
(registeredServers.current.filter((s: ServersModel) => s.lastActiveAt).length * PUSH_ALERT_TEXT_HEIGHT),
);
const snapPoints: BottomSheetProps['snapPoints'] = [
1,
bottomSheetSnapPoint(Math.min(2.5, registeredServers.current.length), 72, bottom) + TITLE_HEIGHT + BUTTON_HEIGHT,
maxSnapPoint,
];
if (registeredServers.current.length > 1) {
if (maxSnapPoint === maxScreenHeight) {
snapPoints.push('80%');
}

7
app/screens/home/channel_list/servers/servers_list/index.tsx
View file

@ -4,11 +4,12 @@
import {BottomSheetFlatList} from '@gorhom/bottom-sheet';
import React, {useCallback, useMemo} from 'react';
import {useIntl} from 'react-intl';
import {FlatList, type ListRenderItemInfo, StyleSheet, View} from 'react-native';
import {FlatList, StyleSheet, View, type ListRenderItemInfo} from 'react-native';
import {useServerUrl} from '@context/server';
import {useTheme} from '@context/theme';
import {useIsTablet} from '@hooks/device';
import {BUTTON_HEIGHT} from '@screens/bottom_sheet';
import BottomSheetContent from '@screens/bottom_sheet/content';
import {addNewServer} from '@utils/server';
@ -29,6 +30,9 @@ const styles = StyleSheet.create({
contentContainer: {
marginVertical: 4,
},
serverList: {
marginBottom: BUTTON_HEIGHT,
},
});
const keyExtractor = (item: ServersModel) => item.url;
@ -68,6 +72,7 @@ const ServerList = ({servers}: Props) => {
<View style={[styles.container, {marginTop: isTablet ? 12 : 0}]}>
<List
data={servers}
style={styles.serverList}
renderItem={renderServer}
keyExtractor={keyExtractor}
contentContainerStyle={styles.contentContainer}