2621d921d6
* Fix search bar style * MM-42983 Align mention badge on channel list item * MM-42985 polish channel intro UI * MM-42984 update fonts on 'Show' bottom sheet * MM-42982 Increase tap area of back button on channel view * Set StatusBar style based on theme sidebarBg * Reconnect other WS after 20 seconds insted of 5 * Only fetch missing profiles for DM/GMs * Database prepare records optimization * Do not use fallbackUsername for storing GM/DM in the database * fix filter for fetching missing dm/gm * remove use of indexOf inside another loop * remove use of includes inside another loop * remove use of find inside another loop * Add missing translations * disable Flipper on iOS * Remove Flipper code from AppDelegate * feedback review * trim DM display name to make sure is not empty * fixing missing direct channels display name * UI/UX feedback * fix WS channel viewed and mark as unread * Remove duplicate emojis from reaction bar
87 lines
2.7 KiB
TypeScript
87 lines
2.7 KiB
TypeScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
|
|
import React from 'react';
|
|
import {GestureResponderEvent, Platform, Text, useWindowDimensions, View} from 'react-native';
|
|
|
|
import {useTheme} from '@context/theme';
|
|
import {useIsTablet} from '@hooks/device';
|
|
import Button from '@screens/bottom_sheet/button';
|
|
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
|
|
import {typography} from '@utils/typography';
|
|
|
|
type Props = {
|
|
buttonIcon?: string;
|
|
buttonText?: string;
|
|
children: React.ReactNode;
|
|
onPress?: (e: GestureResponderEvent) => void;
|
|
showButton: boolean;
|
|
showTitle: boolean;
|
|
testID?: string;
|
|
title?: string;
|
|
}
|
|
|
|
export const TITLE_HEIGHT = 38;
|
|
|
|
const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
|
|
return {
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
titleContainer: {marginVertical: 4},
|
|
titleText: {
|
|
color: theme.centerChannelColor,
|
|
...typography('Heading', 700, 'SemiBold'),
|
|
},
|
|
separator: {
|
|
height: 1,
|
|
right: 16,
|
|
borderTopWidth: 1,
|
|
borderColor: changeOpacity(theme.centerChannelColor, 0.08),
|
|
},
|
|
};
|
|
});
|
|
|
|
const BottomSheetContent = ({buttonText, buttonIcon, children, onPress, showButton, showTitle, testID, title}: Props) => {
|
|
const dimensions = useWindowDimensions();
|
|
const theme = useTheme();
|
|
const isTablet = useIsTablet();
|
|
const styles = getStyleSheet(theme);
|
|
const separatorWidth = Math.max(dimensions.width, 450);
|
|
const buttonTestId = `${testID}.${buttonText?.replace(/ /g, '_').toLocaleLowerCase()}.button`;
|
|
|
|
return (
|
|
<View
|
|
style={styles.container}
|
|
testID={`${testID}.screen`}
|
|
>
|
|
{showTitle &&
|
|
<View style={styles.titleContainer}>
|
|
<Text
|
|
style={styles.titleText}
|
|
testID={`${testID}.title`}
|
|
>
|
|
{title}
|
|
</Text>
|
|
</View>
|
|
}
|
|
<>
|
|
{children}
|
|
</>
|
|
{showButton && (
|
|
<>
|
|
<View style={[styles.separator, {width: separatorWidth, marginBottom: (isTablet ? 20 : 12)}]}/>
|
|
<Button
|
|
onPress={onPress}
|
|
icon={buttonIcon}
|
|
testID={buttonTestId}
|
|
text={buttonText}
|
|
/>
|
|
<View style={{paddingBottom: Platform.select({ios: (isTablet ? 20 : 32), android: 20})}}/>
|
|
</>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default BottomSheetContent;
|