mattermost-mobile/share_extension/android/extension_post/team_button/team_button.js
2018-06-19 19:14:50 -04:00

76 lines
2.1 KiB
JavaScript

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {intlShape} from 'react-intl';
import {
Text,
TouchableHighlight,
View,
} from 'react-native';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
export default class TeamButton extends PureComponent {
static propTypes = {
team: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
onPress: PropTypes.func.isRequired,
};
static contextTypes = {
intl: intlShape,
};
render() {
const {formatMessage} = this.context.intl;
const {onPress, team, theme} = this.props;
const teamName = team ? team.display_name : '';
const styles = getStyleSheet(theme);
return (
<TouchableHighlight
onPress={onPress}
style={styles.buttonContainer}
underlayColor={changeOpacity(theme.centerChannelColor, 0.2)}
>
<View style={styles.buttonWrapper}>
<Text style={styles.buttonLabel}>
{formatMessage({id: 'mobile.share_extension.team', defaultMessage: 'Team'})}
</Text>
<Text style={styles.buttonValue}>
{teamName}
</Text>
</View>
</TouchableHighlight>
);
}
}
const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
flex: {
flex: 1,
},
buttonContainer: {
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,
},
buttonValue: {
color: changeOpacity(theme.centerChannelColor, 0.6),
fontSize: 14,
},
};
});