mattermost-mobile/app/screens/about/about.js
Miguel Alatzar 5eee2b7652
[MM-16139] [MM-16140] [MM-16141] Update the remaining screens/components (#2920)
* Update screens

* Update login tests

* Remove done

* Fix failing tests

* Update screens and components

* Check styles fix

* Update tests

* Prevent setState call after component unmounts

* Add empty setButtons func to dummy navigator

* Remove platform check

* Remove Platform import

* Update react-native-navigation version

* Add separate showModalOverCurrentContext function

* check-style fixes

* Remove overriding of AppDelegate's window

* Fix modal over current context animation

* Add showSearchModal navigation action

* Check-style fix

* Address review comments

* Update SettingsSidebar and children

* Update EditProfile screen

* Update SettingsSidebar

* Keep track of latest componentId to appear

* Track componentId in state to use in navigation actions

* Update FlaggedPosts and children

* Update RecentMentions

* Update Settings

* Store componentIds in ephemeral store

* Update AttachmentButton

* Remove unnecessary dismissModal

* Fix typo

* Upate NotificationSettings

* Update NotificationSettingsAutoResponder

* Update NotificationSettingsMentions

* Update NotificationSettingsMobile

* Update CreateChannel and children

* Update MoreChannels

* Update ChannelPeek and children

* Update ChannelNavBar and children

* Update ChannelPostList and children

* Update ChannelInfo and children

* Update ChannelAddMembers

* Update ChannelMembers

* Update EditChannel

* Fix setting of top bar buttons

* Update Channel screen and children

* Update PinnedPosts

* Update LongPost

* Update PostOptions

* Update PostTextboxBase

* Update EditPost

* Check-styles fix

* Update DisplaySettings

* Update Timezone

* Update SelectTimezone

* Update IntlWrapper and Notification

* Update InteractiveDialog and children

* Update ExpandedAnnouncementBanner

* Update ClientUpgradeListener

* Update MoreDirectMessages

* Update SelectorScreen

* Update UserProfile

* Update Thread

* Update About

* Update ImagePreview

* Update TextPreview

* Update AddReaction

* Update ReactionList and children

* Update Code

* Update TermsOfService

* Update Permalink

* Update Permalink

* Update ErrorTeamsList

* Update Search

* Remove navigator prop

* Fix setButtons calls

* Remove navigationComponentId

* Fix test

* Handle in-app notifs in global event handler

* Fix in-app notification handling

* Fix typo

* Fix tests

* Auto dismiss in-app notif after 5 seconds

* Fix typo

* Update overlay dismissal

* Animate in-app notif dismissal and allow gesture dismissal
2019-07-08 10:03:31 -07:00

448 lines
16 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 {
Linking,
ScrollView,
Text,
TouchableOpacity,
View,
} from 'react-native';
import DeviceInfo from 'react-native-device-info';
import FormattedText from 'app/components/formatted_text';
import StatusBar from 'app/components/status_bar';
import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
import AppIcon from 'app/components/app_icon';
import Config from 'assets/config';
const MATTERMOST_BUNDLE_IDS = ['com.mattermost.rnbeta', 'com.mattermost.rn'];
export default class About extends PureComponent {
static propTypes = {
componentId: PropTypes.string,
config: PropTypes.object.isRequired,
license: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
};
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.componentId, nextProps.theme);
}
}
handleAboutTeam = () => {
Linking.openURL(Config.AboutTeamURL);
};
handleAboutEnterprise = () => {
Linking.openURL(Config.AboutEnterpriseURL);
};
handlePlatformNotice = () => {
Linking.openURL(Config.PlatformNoticeURL);
};
handleMobileNotice = () => {
Linking.openURL(Config.MobileNoticeURL);
};
handleTermsOfService = () => {
Linking.openURL(this.props.config.TermsOfServiceLink);
};
handlePrivacyPolicy = () => {
Linking.openURL(this.props.config.PrivacyPolicyLink);
}
render() {
const {theme, config, license} = this.props;
const style = getStyleSheet(theme);
let title = (
<FormattedText
id='about.teamEditiont0'
defaultMessage='Team Edition'
style={style.title}
/>
);
let subTitle = (
<FormattedText
id='about.teamEditionSt'
defaultMessage='All your team communication in one place, instantly searchable and accessible anywhere.'
style={style.subtitle}
/>
);
let learnMore = (
<View style={style.learnContainer}>
<FormattedText
id='about.teamEditionLearn'
defaultMessage='Join the Mattermost community at '
style={style.learn}
/>
<TouchableOpacity
onPress={this.handleAboutTeam}
>
<Text style={style.learnLink}>
{Config.TeamEditionLearnURL}
</Text>
</TouchableOpacity>
</View>
);
let licensee;
if (config.BuildEnterpriseReady === 'true') {
title = (
<FormattedText
id='about.teamEditiont1'
defaultMessage='Enterprise Edition'
style={style.title}
/>
);
subTitle = (
<FormattedText
id='about.enterpriseEditionSt'
defaultMessage='Modern communication from behind your firewall.'
style={style.subtitle}
/>
);
learnMore = (
<View style={style.learnContainer}>
<FormattedText
id='about.enterpriseEditionLearn'
defaultMessage='Learn more about Enterprise Edition at '
style={style.learn}
/>
<TouchableOpacity
onPress={this.handleAboutEnterprise}
>
<Text style={style.learnLink}>
{Config.EELearnURL}
</Text>
</TouchableOpacity>
</View>
);
if (license.IsLicensed === 'true') {
title = (
<FormattedText
id='about.enterpriseEditione1'
defaultMessage='Enterprise Edition'
style={style.title}
/>
);
licensee = (
<View style={style.licenseContainer}>
<FormattedText
id='mobile.about.licensed'
defaultMessage='Licensed to: {company}'
style={style.info}
values={{
company: license.Company,
}}
/>
</View>
);
}
}
let serverVersion;
if (config.BuildNumber === config.Version) {
serverVersion = (
<FormattedText
id='mobile.about.serverVersionNoBuild'
defaultMessage='Server Version: {version}'
style={style.info}
values={{
version: config.Version,
}}
/>
);
} else {
serverVersion = (
<FormattedText
id='mobile.about.serverVersion'
defaultMessage='Server Version: {version} (Build {number})'
style={style.info}
values={{
version: config.Version,
number: config.BuildNumber,
}}
/>
);
}
let termsOfService;
if (config.TermsOfServiceLink) {
termsOfService = (
<FormattedText
id='mobile.tos_link'
defaultMessage='Terms of Service'
style={style.noticeLink}
onPress={this.handleTermsOfService}
/>
);
}
let privacyPolicy;
if (config.PrivacyPolicyLink) {
privacyPolicy = (
<FormattedText
id='mobile.privacy_link'
defaultMessage='Privacy Policy'
style={style.noticeLink}
onPress={this.handlePrivacyPolicy}
/>
);
}
let tosPrivacyHyphen;
if (termsOfService && privacyPolicy) {
tosPrivacyHyphen = (
<Text style={[style.footerText, style.hyphenText]}>
{' - '}
</Text>
);
}
return (
<View style={style.wrapper}>
<StatusBar/>
<ScrollView
style={style.scrollView}
contentContainerStyle={style.scrollViewContent}
>
<View style={style.logoContainer}>
<AppIcon
color={theme.centerChannelColor}
height={120}
width={120}
/>
</View>
<View style={style.infoContainer}>
<View style={style.titleContainer}>
<Text style={style.title}>
{`${config.SiteName} `}
</Text>
{title}
</View>
{subTitle}
<FormattedText
id='mobile.about.appVersion'
defaultMessage='App Version: {version} (Build {number})'
style={style.info}
values={{
version: DeviceInfo.getVersion(),
number: DeviceInfo.getBuildNumber(),
}}
/>
{serverVersion}
<FormattedText
id='mobile.about.database'
defaultMessage='Database: {type}'
style={style.info}
values={{
type: config.SQLDriverName,
}}
/>
{licensee}
{learnMore}
{!MATTERMOST_BUNDLE_IDS.includes(DeviceInfo.getBundleId()) &&
<FormattedText
id='mobile.about.powered_by'
defaultMessage='{site} is powered by Mattermost'
style={style.footerText}
values={{
site: this.props.config.SiteName,
}}
/>
}
<FormattedText
id='mobile.about.copyright'
defaultMessage='Copyright 2015-{currentYear} Mattermost, Inc. All rights reserved'
style={[style.footerText, style.copyrightText]}
values={{
currentYear: new Date().getFullYear(),
}}
/>
<View style={style.tosPrivacyContainer}>
{termsOfService}
{tosPrivacyHyphen}
{privacyPolicy}
</View>
<View style={style.noticeContainer}>
<View style={style.footerGroup}>
<FormattedText
id='mobile.notice_text'
defaultMessage='Mattermost is made possible by the open source software used in our {platform} and {mobile}.'
style={style.footerText}
values={{
platform: (
<FormattedText
id='mobile.notice_platform_link'
defaultMessage='server'
style={style.noticeLink}
onPress={this.handlePlatformNotice}
/>
),
mobile: (
<FormattedText
id='mobile.notice_mobile_link'
defaultMessage='mobile apps'
style={[style.noticeLink, {marginLeft: 5}]}
onPress={this.handleMobileNotice}
/>
),
}}
/>
</View>
</View>
<View style={style.hashContainer}>
<View style={style.footerGroup}>
<FormattedText
id='about.hash'
defaultMessage='Build Hash:'
style={style.footerTitleText}
/>
<Text style={style.footerText}>
{config.BuildHash}
</Text>
</View>
<View style={style.footerGroup}>
<FormattedText
id='about.hashee'
defaultMessage='EE Build Hash:'
style={style.footerTitleText}
/>
<Text style={style.footerText}>
{config.BuildHashEnterprise}
</Text>
</View>
</View>
<View style={style.footerGroup}>
<FormattedText
id='about.date'
defaultMessage='Build Date:'
style={style.footerTitleText}
/>
<Text style={style.footerText}>
{config.BuildDate}
</Text>
</View>
</View>
</ScrollView>
</View>
);
}
}
const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
wrapper: {
flex: 1,
backgroundColor: theme.centerChannelBg,
},
scrollView: {
flex: 1,
backgroundColor: changeOpacity(theme.centerChannelColor, 0.06),
},
scrollViewContent: {
paddingBottom: 30,
},
logoContainer: {
alignItems: 'center',
flex: 1,
height: 200,
paddingVertical: 40,
},
infoContainer: {
flex: 1,
flexDirection: 'column',
paddingHorizontal: 20,
},
titleContainer: {
flex: 1,
marginBottom: 20,
},
title: {
fontSize: 22,
color: theme.centerChannelColor,
},
subtitle: {
color: changeOpacity(theme.centerChannelColor, 0.5),
fontSize: 19,
marginBottom: 15,
},
learnContainer: {
flex: 1,
flexDirection: 'column',
marginVertical: 20,
},
learn: {
color: theme.centerChannelColor,
fontSize: 16,
},
learnLink: {
color: theme.linkColor,
fontSize: 16,
},
info: {
color: theme.centerChannelColor,
fontSize: 16,
lineHeight: 19,
},
licenseContainer: {
flex: 1,
flexDirection: 'row',
marginTop: 20,
},
noticeContainer: {
flex: 1,
flexDirection: 'column',
},
noticeLink: {
color: theme.linkColor,
fontSize: 11,
lineHeight: 13,
},
hashContainer: {
flex: 1,
flexDirection: 'column',
},
footerGroup: {
flex: 1,
},
footerTitleText: {
color: changeOpacity(theme.centerChannelColor, 0.5),
fontSize: 11,
fontWeight: '600',
lineHeight: 13,
},
footerText: {
color: changeOpacity(theme.centerChannelColor, 0.5),
fontSize: 11,
lineHeight: 13,
marginBottom: 10,
},
copyrightText: {
marginBottom: 0,
},
hyphenText: {
marginBottom: 0,
},
tosPrivacyContainer: {
flex: 1,
flexDirection: 'row',
marginBottom: 10,
},
};
});