mattermost-mobile/app/screens/channel_notification_preference/channel_notification_preference.ios.js
Kyriakos Z 094a34d05f
MM-37934: adds CRT channel notification preferences (#5744)
* MM-37934: adds CRT channel notification preferences

Adds push notification preferences per channel for CRT replies.
These are only enabled when push notifications for root messages
are set to 'mention', in any other case we don't show the switch.

* Adds another test case

Co-authored-by: Mattermod <mattermod@users.noreply.github.com>
2021-10-28 11:06:03 +03:00

124 lines
5.3 KiB
JavaScript

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import {
ScrollView,
View,
} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import FormattedText from '@components/formatted_text';
import StatusBar from '@components/status_bar';
import {ViewTypes} from '@constants';
import SectionItem from '@screens/settings/section_item';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
import ChannelNotificationPreferenceBase from './channel_notification_preference_base';
export default class ChannelNotificationPreferenceIos extends ChannelNotificationPreferenceBase {
render() {
const {theme, isCollapsedThreadsEnabled} = this.props;
const {notificationLevel, notificationThreadsLevel} = this.state;
const style = getStyleSheet(theme);
const items = this.getItems();
return (
<View
testID='channel_notification_preference.screen'
style={style.container}
>
<StatusBar/>
<SafeAreaView edges={['left', 'right']}>
<FormattedText
id='channel_notifications.preference.header'
defaultMessage='Send Notifications'
style={style.header}
/>
</SafeAreaView>
<ScrollView
contentContainerStyle={style.scrollView}
alwaysBounceVertical={false}
>
<View style={style.contentContainer}>
<SafeAreaView edges={['left', 'right']}>
{items.map((item) => (
<View key={item.id}>
<View style={style.divider}/>
<SectionItem
label={(
<FormattedText
id={item.id}
defaultMessage={item.defaultMessage}
values={item.labelValues}
/>
)}
action={this.handlePress}
actionType='select'
actionValue={item.value}
selected={item.checked}
theme={theme}
/>
</View>),
)}
{isCollapsedThreadsEnabled && notificationLevel === ViewTypes.NotificationLevels.MENTION && (
<View>
<FormattedText
id='mobile.notification_settings.push_threads.title'
defaultMessage={'Thread reply notifications'}
style={style.header}
/>
<View style={style.divider}/>
<SectionItem
label={(
<FormattedText
id='mobile.notification_settings.push_threads.description'
defaultMessage={'Notify me about all replies to threads I\'m following'}
/>
)}
description={<View/>}
action={this.handleThreadsPress}
actionType='toggle'
selected={notificationThreadsLevel === ViewTypes.NotificationLevels.ALL}
theme={theme}
/>
</View>
)}
</SafeAreaView>
<View style={style.divider}/>
</View>
</ScrollView>
</View>
);
}
}
const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
container: {
flex: 1,
backgroundColor: changeOpacity(theme.centerChannelColor, 0.03),
},
header: {
backgroundColor: changeOpacity(theme.centerChannelColor, 0.03),
color: changeOpacity(theme.centerChannelColor, 0.56),
fontSize: 13,
textTransform: 'uppercase',
padding: 16,
paddingTop: 26,
},
divider: {
backgroundColor: changeOpacity(theme.centerChannelColor, 0.1),
height: 1,
width: '100%',
marginLeft: 16,
},
scrollView: {
backgroundColor: changeOpacity(theme.centerChannelColor, 0.03),
},
contentContainer: {
backgroundColor: changeOpacity(theme.centerChannelBg, 1),
},
};
});