mattermost-mobile/app/screens/channel_notification_preference/channel_notification_preference.android.js
Jyoti Patel b6920770f1
[GH-15185][MM-5973] Add Channel Settings > Notification Preferences. (#4730)
* Add Channel Settings > Notification Preferences.

Fixes #15185

* Make newly added strings mmjstool compatible.

mmjstool seems to be looking for specific patterns in AST like called with
`formatMessage` and `t()` [1]. Looks like `t()` is just for that purpose.

[1]: a83581379d/mmjstool/src/i18n_extract.js (L97):L100

* Pass only required props to NotificationPreference & ChannelNotificationPreference.

* Fix style issues/nits from code review.

* Use radio button for channel notifications on android, and checkmarks on iOS.

Also changes style according to figma spec.

* Fix missing prop error.

For some reason, `npm run fix` didn't catch this. But `npm run check` did during CircleCI.

* Fix missing i18n strings by passing strings through `t()`.

mmjstool really needs to be smarter to understand these types of cases.

* Address comments from UX code review.

* Remove remnant from merge conflict.

* Fix UI in iOS landscape mode.

* Use SafeArea view for ios landscape view

* Use paddingHorizontal for SafeArea view for iOS landscape mode
2020-09-12 00:53:29 -03:00

80 lines
2.4 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 FormattedText from 'app/components/formatted_text';
import RadioButtonGroup from 'app/components/radio_button';
import StatusBar from 'app/components/status_bar';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import ChannelNotificationPreferenceBase from './channel_notification_preference_base';
export default class ChannelNotificationPreferenceAndroid extends ChannelNotificationPreferenceBase {
getRadioItems = () => {
const {intl} = this.context;
const items = this.getItems();
const radioItems = [];
items.forEach((element) => {
const e = {
label: intl.formatMessage({
id: element.id,
defaultMessage: element.defaultMessage,
}),
value: element.value,
checked: element.checked,
};
radioItems.push(e);
});
return radioItems;
}
render() {
const {theme} = this.props;
const style = getStyleSheet(theme);
const options = this.getRadioItems();
return (
<View style={style.container}>
<StatusBar/>
<FormattedText
id='channel_notifications.preference.header'
defaultMessage='Send Notifications'
style={style.header}
/>
<ScrollView
contentContainerStyle={style.wrapper}
alwaysBounceVertical={false}
>
<RadioButtonGroup
name='pushSettings'
onSelect={this.handlePress}
options={options}
/>
</ScrollView>
</View>
);
}
}
const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
container: {
flex: 1,
backgroundColor: changeOpacity(theme.centerChannelBg, 0.03),
},
wrapper: {
marginLeft: 16,
},
header: {
color: changeOpacity(theme.centerChannelColor, 0.56),
fontSize: 13,
marginTop: 10,
padding: 16,
},
};
});