mattermost-mobile/share_extension/components/team_button.tsx
Dean Whillier fb8238ab0b
[MM-37553] Update default themes (#5648)
* new themes and theme type updates

* update theme processing

port newer functionality from webapp

* update theme UI

including new svg-based thumbnail

* lint fixes

* update snapshots and tests

* update theme tile border approach

* remove unused path component

* remove old variable typo

* remove old variable type from theme type

* lint and snapshot updates

* update snapshots
2021-09-03 10:50:24 -04:00

97 lines
3 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 {useDispatch, useStore} from 'react-redux';
import FormattedText from '@components/formatted_text';
import {getMyTeams} from '@mm-redux/actions/teams';
import {Preferences} from '@mm-redux/constants';
import {DispatchFunc} from '@mm-redux/types/actions';
import {loadTeamChannels, getTeamDefaultChannel} from '@share/actions';
import {changeOpacity} from '@utils/theme';
import type {Channel} from '@mm-redux/types/channels';
import type {Team} from '@mm-redux/types/teams';
interface TeamButtonProps {
intl: typeof intlShape;
onSelect: (team: Team, channel?: Channel | null) => void;
team?: Team | null;
}
const theme = Preferences.THEMES.denim;
const TeamButton = ({intl, onSelect, team}: TeamButtonProps) => {
const store = useStore();
const dispatch = useDispatch();
const navigation = useNavigation();
const onPress = () => {
dispatch(getMyTeams());
navigation.navigate('Teams', {
title: intl.formatMessage({id: 'mobile.routes.selectTeam', defaultMessage: 'Select Team'}),
currentTeamId: team?.id,
onSelectTeam,
});
};
const onSelectTeam = async (t: Team) => {
const loadChannels = loadTeamChannels(t.id);
const getChannel = getTeamDefaultChannel(t.id);
await loadChannels(dispatch as DispatchFunc, store.getState);
const defaultChannel = await getChannel(dispatch as DispatchFunc, store.getState);
onSelect(t, defaultChannel);
navigation.goBack();
};
return (
<TouchableHighlight
onPress={onPress}
style={styles.buttonContainer}
underlayColor={changeOpacity(theme.centerChannelColor, 0.2)}
>
<View style={styles.buttonWrapper}>
<FormattedText
defaultMessage='Team'
id='mobile.share_extension.team'
style={styles.buttonLabel}
/>
<Text style={styles.buttonValue}>
{team?.display_name}
</Text>
</View>
</TouchableHighlight>
);
};
const styles = StyleSheet.create({
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,
color: changeOpacity(theme.centerChannelColor, 0.7),
},
buttonValue: {
color: changeOpacity(theme.centerChannelColor, 0.6),
fontSize: 14,
},
});
export default injectIntl(TeamButton);