452 lines
17 KiB
JavaScript
452 lines
17 KiB
JavaScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
|
|
import React from 'react';
|
|
import {
|
|
Modal,
|
|
ScrollView,
|
|
Text,
|
|
TouchableOpacity,
|
|
View,
|
|
} from 'react-native';
|
|
import {injectIntl} from 'react-intl';
|
|
|
|
import FormattedText from 'app/components/formatted_text';
|
|
import RadioButtonGroup from 'app/components/radio_button';
|
|
import StatusBar from 'app/components/status_bar';
|
|
import TextInputWithLocalizedPlaceholder from 'app/components/text_input_with_localized_placeholder';
|
|
import SectionItem from 'app/screens/settings/section_item';
|
|
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
|
|
import {t} from 'app/utils/i18n';
|
|
|
|
import NotificationSettingsMentionsBase from './notification_settings_mention_base';
|
|
|
|
class NotificationSettingsMentionsAndroid extends NotificationSettingsMentionsBase {
|
|
cancelMentionKeys = () => {
|
|
this.setState({
|
|
androidKeywords: this.state.mention_keys,
|
|
showKeywordsModal: false,
|
|
});
|
|
};
|
|
|
|
cancelReplyNotification = () => {
|
|
this.setState({
|
|
newReplyValue: this.state.comments,
|
|
showReplyModal: false,
|
|
});
|
|
};
|
|
|
|
onKeywordsChangeText = (androidKeywords) => {
|
|
this.setState({androidKeywords});
|
|
};
|
|
|
|
onReplyChanged = (value) => {
|
|
this.setState({newReplyValue: value});
|
|
};
|
|
|
|
renderKeywordsModal(style) {
|
|
const {theme} = this.props;
|
|
|
|
return (
|
|
<Modal
|
|
animationType='slide'
|
|
transparent={true}
|
|
visible={this.state.showKeywordsModal}
|
|
onRequestClose={this.cancelMentionKeys}
|
|
>
|
|
<View style={style.modalOverlay}>
|
|
<View style={style.modal}>
|
|
<View style={style.modalBody}>
|
|
<View style={style.modalTitleContainer}>
|
|
<FormattedText
|
|
id='mobile.notification_settings_mentions.keywords'
|
|
defaultMessage='Keywords'
|
|
style={style.modalTitle}
|
|
/>
|
|
</View>
|
|
<TextInputWithLocalizedPlaceholder
|
|
autoFocus={true}
|
|
value={this.state.androidKeywords}
|
|
blurOnSubmit={true}
|
|
onChangeText={this.onKeywordsChangeText}
|
|
onSubmitEditing={this.saveMentionKeys}
|
|
multiline={false}
|
|
style={style.input}
|
|
autoCapitalize='none'
|
|
autoCorrect={false}
|
|
placeholder={{id: 'mobile.notification_settings_mentions.keywordsDescription', defaultMessage: 'Other words that trigger a mention'}}
|
|
placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.4)}
|
|
returnKeyType='done'
|
|
returnKeyLabel={this.props.intl.formatMessage({id: 'mobile.notification_settings.modal_save'})}
|
|
underlineColorAndroid={theme.linkColor}
|
|
/>
|
|
<FormattedText
|
|
id='mobile.notification_settings_mentions.keywordsHelp'
|
|
defaultMessage='Keywords are non-case sensitive and should be separated by a comma.'
|
|
style={style.modalHelpText}
|
|
/>
|
|
</View>
|
|
<View style={style.modalFooter}>
|
|
<View style={style.separator}/>
|
|
<View style={style.modalFooterContainer}>
|
|
<TouchableOpacity
|
|
style={style.modalFooterOptionContainer}
|
|
onPress={this.cancelMentionKeys}
|
|
>
|
|
<FormattedText
|
|
id='mobile.notification_settings.modal_cancel'
|
|
defaultMessage='CANCEL'
|
|
style={style.modalFooterOption}
|
|
/>
|
|
</TouchableOpacity>
|
|
<View style={{marginRight: 10}}/>
|
|
<TouchableOpacity
|
|
style={style.modalFooterOptionContainer}
|
|
onPress={this.saveMentionKeys}
|
|
>
|
|
<FormattedText
|
|
id='mobile.notification_settings.modal_save'
|
|
defaultMessage='SAVE'
|
|
style={style.modalFooterOption}
|
|
/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
renderReplyModal(style) {
|
|
const {intl} = this.props;
|
|
const {newReplyValue} = this.state;
|
|
|
|
const options = [{
|
|
label: intl.formatMessage({
|
|
id: 'mobile.account_notifications.threads_start_participate',
|
|
defaultMessage: 'Threads that I start or participate in',
|
|
}),
|
|
value: 'any',
|
|
checked: newReplyValue === 'any',
|
|
}, {
|
|
label: intl.formatMessage({
|
|
id: 'mobile.account_notifications.threads_start',
|
|
defaultMessage: 'Threads that I start',
|
|
}),
|
|
value: 'root',
|
|
checked: newReplyValue === 'root',
|
|
}, {
|
|
label: intl.formatMessage({
|
|
id: 'mobile.account_notifications.threads_mentions',
|
|
defaultMessage: 'Mentions in threads',
|
|
}),
|
|
value: 'never',
|
|
checked: newReplyValue === 'never',
|
|
}];
|
|
|
|
return (
|
|
<Modal
|
|
animationType='slide'
|
|
transparent={true}
|
|
visible={this.state.showReplyModal}
|
|
onRequestClose={this.cancelReplyNotification}
|
|
>
|
|
<View style={style.modalOverlay}>
|
|
<View style={style.modal}>
|
|
<View style={style.modalBody}>
|
|
<View style={style.modalTitleContainer}>
|
|
<FormattedText
|
|
id='mobile.notification_settings.mentions.reply_title'
|
|
defaultMessage='Send Reply notifications for'
|
|
style={style.modalTitle}
|
|
/>
|
|
</View>
|
|
<RadioButtonGroup
|
|
name='replySettings'
|
|
onSelect={this.onReplyChanged}
|
|
options={options}
|
|
/>
|
|
</View>
|
|
<View style={style.modalFooter}>
|
|
<View style={style.separator}/>
|
|
<View style={style.modalFooterContainer}>
|
|
<TouchableOpacity
|
|
style={style.modalFooterOptionContainer}
|
|
onPress={this.cancelReplyNotification}
|
|
>
|
|
<FormattedText
|
|
id='mobile.notification_settings.modal_cancel'
|
|
defaultMessage='CANCEL'
|
|
style={style.modalFooterOption}
|
|
/>
|
|
</TouchableOpacity>
|
|
<View>
|
|
<View style={{marginRight: 10}}/>
|
|
<TouchableOpacity
|
|
style={style.modalFooterOptionContainer}
|
|
onPress={this.saveReplyNotification}
|
|
>
|
|
<FormattedText
|
|
id='mobile.notification_settings.modal_save'
|
|
defaultMessage='SAVE'
|
|
style={style.modalFooterOption}
|
|
/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
renderReplySection() {
|
|
const {theme} = this.props;
|
|
|
|
let i18nId;
|
|
let i18nMessage;
|
|
switch (this.state.comments) {
|
|
case 'root':
|
|
i18nId = t('mobile.account_notifications.threads_start');
|
|
i18nMessage = 'Threads that I start';
|
|
break;
|
|
case 'never':
|
|
i18nId = t('mobile.account_notifications.threads_mentions');
|
|
i18nMessage = 'Mentions in threads';
|
|
break;
|
|
case 'any':
|
|
default:
|
|
i18nId = t('mobile.account_notifications.threads_start_participate');
|
|
i18nMessage = 'Threads that I start or participate in';
|
|
break;
|
|
}
|
|
|
|
return (
|
|
<SectionItem
|
|
description={(
|
|
<FormattedText
|
|
id={i18nId}
|
|
defaultMessage={i18nMessage}
|
|
/>
|
|
)}
|
|
label={(
|
|
<FormattedText
|
|
id='user.settings.notifications.comments'
|
|
defaultMessage='Reply notifications'
|
|
/>
|
|
)}
|
|
action={this.showReplyModal}
|
|
actionType='default'
|
|
theme={theme}
|
|
/>
|
|
);
|
|
}
|
|
|
|
saveMentionKeys = () => {
|
|
this.updateMentionKeys(this.state.androidKeywords);
|
|
};
|
|
|
|
saveReplyNotification = () => {
|
|
this.setState({showReplyModal: false});
|
|
this.setReplyNotifications(this.state.newReplyValue);
|
|
};
|
|
|
|
showKeywordsModal = () => {
|
|
this.setState({showKeywordsModal: true});
|
|
};
|
|
|
|
showReplyModal = () => {
|
|
this.setState({showReplyModal: true});
|
|
};
|
|
|
|
render() {
|
|
const {currentUser, theme} = this.props;
|
|
const style = getStyleSheet(theme);
|
|
|
|
let mentionKeysComponent;
|
|
if (this.state.mention_keys) {
|
|
mentionKeysComponent = (<Text>{this.state.mention_keys}</Text>);
|
|
} else {
|
|
mentionKeysComponent = (
|
|
<FormattedText
|
|
id='mobile.notification_settings_mentions.keywordsDescription'
|
|
defaultMessage='Other words that trigger a mention'
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<View style={style.container}>
|
|
<StatusBar/>
|
|
<ScrollView
|
|
style={style.scrollView}
|
|
contentContainerStyle={style.scrollViewContent}
|
|
>
|
|
{currentUser.first_name.length > 0 &&
|
|
<View>
|
|
<SectionItem
|
|
label={(
|
|
<Text>
|
|
{currentUser.first_name}
|
|
</Text>
|
|
)}
|
|
description={(
|
|
<FormattedText
|
|
id='mobile.notification_settings.mentions.sensitiveName'
|
|
defaultMessage='Your case sensitive first name'
|
|
/>
|
|
)}
|
|
action={this.toggleFirstNameMention}
|
|
actionType='toggle'
|
|
selected={this.state.first_name === 'true'}
|
|
theme={theme}
|
|
/>
|
|
<View style={style.separator}/>
|
|
</View>
|
|
}
|
|
<SectionItem
|
|
label={(
|
|
<Text>
|
|
{currentUser.username}
|
|
</Text>
|
|
)}
|
|
description={(
|
|
<FormattedText
|
|
id='mobile.notification_settings.mentions.sensitiveUsername'
|
|
defaultMessage='Your non-case sensitive username'
|
|
/>
|
|
)}
|
|
selected={this.state.usernameMention}
|
|
action={this.toggleUsernameMention}
|
|
actionType='toggle'
|
|
theme={theme}
|
|
/>
|
|
<View style={style.separator}/>
|
|
<SectionItem
|
|
label={(
|
|
<Text>
|
|
{'@channel, @all, @here'}
|
|
</Text>
|
|
)}
|
|
description={(
|
|
<FormattedText
|
|
id='mobile.notification_settings.mentions.channelWide'
|
|
defaultMessage='Channel-wide mentions'
|
|
/>
|
|
)}
|
|
action={this.toggleChannelMentions}
|
|
actionType='toggle'
|
|
selected={this.state.channel === 'true'}
|
|
theme={theme}
|
|
/>
|
|
<View style={style.separator}/>
|
|
<SectionItem
|
|
label={(
|
|
<FormattedText
|
|
id='mobile.notification_settings_mentions.keywords'
|
|
defaultMessage='Keywords'
|
|
/>
|
|
)}
|
|
description={mentionKeysComponent}
|
|
action={this.showKeywordsModal}
|
|
actionType='default'
|
|
theme={theme}
|
|
/>
|
|
<View style={style.separator}/>
|
|
{this.renderReplySection()}
|
|
<View style={style.separator}/>
|
|
</ScrollView>
|
|
{this.renderKeywordsModal(style)}
|
|
{this.renderReplyModal(style)}
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
const getStyleSheet = makeStyleSheetFromTheme((theme) => {
|
|
return {
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: theme.centerChannelBg,
|
|
},
|
|
input: {
|
|
color: theme.centerChannelColor,
|
|
fontSize: 12,
|
|
height: 40,
|
|
},
|
|
separator: {
|
|
backgroundColor: changeOpacity(theme.centerChannelColor, 0.1),
|
|
height: 1,
|
|
width: '100%',
|
|
},
|
|
scrollView: {
|
|
flex: 1,
|
|
backgroundColor: changeOpacity(theme.centerChannelColor, 0.06),
|
|
},
|
|
scrollViewContent: {
|
|
paddingVertical: 0,
|
|
},
|
|
modalOverlay: {
|
|
backgroundColor: changeOpacity('#000000', 0.6),
|
|
alignItems: 'center',
|
|
flex: 1,
|
|
},
|
|
modal: {
|
|
backgroundColor: theme.centerChannelBg,
|
|
borderRadius: 4,
|
|
marginTop: 20,
|
|
width: '95%',
|
|
},
|
|
modalBody: {
|
|
paddingHorizontal: 24,
|
|
},
|
|
modalTitleContainer: {
|
|
marginBottom: 30,
|
|
marginTop: 20,
|
|
},
|
|
modalTitle: {
|
|
color: theme.centerChannelColor,
|
|
fontSize: 19,
|
|
},
|
|
modalOptionDisabled: {
|
|
color: changeOpacity(theme.centerChannelColor, 0.5),
|
|
fontSize: 17,
|
|
},
|
|
modalInput: {
|
|
color: theme.centerChannelColor,
|
|
fontSize: 19,
|
|
},
|
|
modalHelpText: {
|
|
color: changeOpacity(theme.centerChannelColor, 0.5),
|
|
fontSize: 13,
|
|
marginTop: 20,
|
|
},
|
|
modalFooter: {
|
|
alignItems: 'flex-end',
|
|
height: 58,
|
|
marginTop: 40,
|
|
width: '100%',
|
|
},
|
|
modalFooterContainer: {
|
|
alignItems: 'center',
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
paddingRight: 24,
|
|
},
|
|
modalFooterOptionContainer: {
|
|
alignItems: 'center',
|
|
height: 40,
|
|
justifyContent: 'center',
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 5,
|
|
},
|
|
modalFooterOption: {
|
|
color: theme.linkColor,
|
|
fontSize: 14,
|
|
},
|
|
};
|
|
});
|
|
|
|
export default injectIntl(NotificationSettingsMentionsAndroid);
|