86 lines
2.8 KiB
JavaScript
86 lines
2.8 KiB
JavaScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import {TouchableOpacity, View} from 'react-native';
|
|
|
|
import {Preferences} from 'mattermost-redux/constants';
|
|
|
|
import FormattedText from 'app/components/formatted_text';
|
|
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
|
|
|
|
export default function errorMessage(props) {
|
|
const {close} = props;
|
|
const theme = Preferences.THEMES.default;
|
|
const styles = getStyleSheet(theme);
|
|
|
|
return (
|
|
<View style={styles.errorWrapper}>
|
|
<View style={styles.errorContainer}>
|
|
<View style={styles.errorContent}>
|
|
<View style={styles.errorMessage}>
|
|
<FormattedText
|
|
style={styles.errorMessageText}
|
|
id={'mobile.share_extension.error_message'}
|
|
defaultMessage={'An error has occurred while using the share extension.'}
|
|
/>
|
|
</View>
|
|
<TouchableOpacity
|
|
style={styles.errorButton}
|
|
onPress={() => close()}
|
|
>
|
|
<FormattedText
|
|
style={styles.errorButtonText}
|
|
id={'mobile.share_extension.error_close'}
|
|
defaultMessage={'Close'}
|
|
/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
errorMessage.propTypes = {
|
|
close: PropTypes.func.isRequired,
|
|
};
|
|
|
|
const getStyleSheet = makeStyleSheetFromTheme((theme) => {
|
|
return {
|
|
errorButton: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
borderTopWidth: 2,
|
|
borderTopColor: changeOpacity(theme.linkColor, 0.3),
|
|
paddingVertical: 15,
|
|
},
|
|
errorButtonText: {
|
|
color: changeOpacity(theme.linkColor, 0.7),
|
|
fontSize: 18,
|
|
},
|
|
errorContainer: {
|
|
borderRadius: 5,
|
|
backgroundColor: 'white',
|
|
marginHorizontal: 35,
|
|
},
|
|
errorContent: {
|
|
backgroundColor: changeOpacity(theme.centerChannelColor, 0.05),
|
|
},
|
|
errorMessage: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
padding: 25,
|
|
},
|
|
errorMessageText: {
|
|
color: theme.centerChannelColor,
|
|
fontSize: 16,
|
|
textAlign: 'center',
|
|
},
|
|
errorWrapper: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backgroundColor: changeOpacity(theme.centerChannelColor, 0.5),
|
|
},
|
|
};
|
|
});
|