92 lines
2.7 KiB
TypeScript
92 lines
2.7 KiB
TypeScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
|
|
import {useNavigation} from '@react-navigation/native';
|
|
|
|
import React from 'react';
|
|
import {injectIntl, intlShape} from 'react-intl';
|
|
import {StyleSheet, Text, TouchableHighlight, View} from 'react-native';
|
|
|
|
import FormattedText from '@components/formatted_text';
|
|
import {Preferences} from '@mm-redux/constants';
|
|
import {changeOpacity} from '@utils/theme';
|
|
|
|
import type {Channel} from '@mm-redux/types/channels';
|
|
|
|
interface ChannelButtonProps {
|
|
channel?: Channel | null;
|
|
intl: typeof intlShape;
|
|
onSelect: (channel?: Channel | null) => void;
|
|
teamId?: string;
|
|
}
|
|
|
|
const theme = Preferences.THEMES.default;
|
|
|
|
const ChannelButton = ({channel, intl, onSelect, teamId}: ChannelButtonProps) => {
|
|
const navigation = useNavigation();
|
|
const onPress = () => {
|
|
navigation.navigate('Channels', {
|
|
title: intl.formatMessage({id: 'mobile.routes.selectChannel', defaultMessage: 'Select Channel'}),
|
|
currentChannelId: channel?.id,
|
|
teamId,
|
|
onSelectChannel,
|
|
});
|
|
};
|
|
const onSelectChannel = (c: Channel) => {
|
|
onSelect(c);
|
|
navigation.goBack();
|
|
};
|
|
|
|
return (
|
|
<TouchableHighlight
|
|
onPress={onPress}
|
|
style={styles.buttonContainer}
|
|
underlayColor={changeOpacity(theme.centerChannelColor, 0.2)}
|
|
>
|
|
<View style={styles.buttonWrapper}>
|
|
<FormattedText
|
|
defaultMessage='Channel'
|
|
id='mobile.share_extension.channel'
|
|
style={styles.buttonLabel}
|
|
/>
|
|
<Text
|
|
ellipsizeMode='tail'
|
|
numberOfLines={1}
|
|
style={styles.buttonValue}
|
|
>
|
|
{channel?.display_name}
|
|
</Text>
|
|
</View>
|
|
</TouchableHighlight>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
flex: {
|
|
flex: 1,
|
|
},
|
|
buttonContainer: {
|
|
borderBottomColor: changeOpacity(theme.centerChannelColor, 0.2),
|
|
borderBottomWidth: 1,
|
|
borderTopColor: changeOpacity(theme.centerChannelColor, 0.2),
|
|
borderTopWidth: 1,
|
|
height: 70,
|
|
paddingHorizontal: 15,
|
|
},
|
|
buttonWrapper: {
|
|
alignItems: 'flex-start',
|
|
flex: 1,
|
|
},
|
|
buttonLabel: {
|
|
fontSize: 16,
|
|
marginTop: 16,
|
|
marginBottom: 3,
|
|
color: changeOpacity(theme.centerChannelColor, 0.7),
|
|
},
|
|
buttonValue: {
|
|
color: changeOpacity(theme.centerChannelColor, 0.6),
|
|
fontSize: 14,
|
|
},
|
|
});
|
|
|
|
export default injectIntl(ChannelButton);
|