[FIX] i18n being called outside render (#2334)
* Fix I18n usage in ThemeView Signed-off-by: Ezequiel De Oliveira <ezequiel1de1oliveira@gmail.com> * Fix I18n usage in NotificationPreferencesView Signed-off-by: Ezequiel De Oliveira <ezequiel1de1oliveira@gmail.com> * Fix some I18n wrong uses Signed-off-by: Ezequiel De Oliveira <ezequiel1de1oliveira@gmail.com> Co-authored-by: Diego Mello <diegolmello@gmail.com>
This commit is contained in:
Ezequiel de Oliveira
GitHub
parent
b4e353c3d3
commit
5532d0f368
|
|
@ -19,11 +19,11 @@ import SafeAreaView from '../containers/SafeAreaView';
|
|||
|
||||
const DEFAULT_BROWSERS = [
|
||||
{
|
||||
title: I18n.t('In_app'),
|
||||
title: 'In_app',
|
||||
value: 'inApp'
|
||||
},
|
||||
{
|
||||
title: isIOS ? 'Safari' : I18n.t('Browser'),
|
||||
title: isIOS ? 'Safari' : 'Browser',
|
||||
value: 'systemDefault:'
|
||||
}
|
||||
];
|
||||
|
|
@ -137,7 +137,7 @@ class DefaultBrowserView extends React.Component {
|
|||
const { title, value } = item;
|
||||
return (
|
||||
<ListItem
|
||||
title={title}
|
||||
title={I18n.t(title, { defaultValue: title })}
|
||||
onPress={() => this.changeDefaultBrowser(value)}
|
||||
testID={`default-browser-view-${ title }`}
|
||||
right={this.isSelected(value) ? this.renderIcon : null}
|
||||
|
|
|
|||
|
|
@ -21,9 +21,6 @@ import SafeAreaView from '../../containers/SafeAreaView';
|
|||
|
||||
const OPTIONS = {
|
||||
days: [{
|
||||
label: I18n.t('Never'), value: 0
|
||||
},
|
||||
{
|
||||
label: '1', value: 1
|
||||
},
|
||||
{
|
||||
|
|
@ -36,9 +33,6 @@ const OPTIONS = {
|
|||
label: '30', value: 30
|
||||
}],
|
||||
maxUses: [{
|
||||
label: I18n.t('No_limit'), value: 0
|
||||
},
|
||||
{
|
||||
label: '1', value: 1
|
||||
},
|
||||
{
|
||||
|
|
@ -91,9 +85,12 @@ class InviteUsersView extends React.Component {
|
|||
navigation.pop();
|
||||
}
|
||||
|
||||
renderPicker = (key) => {
|
||||
renderPicker = (key, first) => {
|
||||
const { props } = this;
|
||||
const { theme } = props;
|
||||
const firstEl = [{
|
||||
label: I18n.t(first), value: 0
|
||||
}];
|
||||
return (
|
||||
<RNPickerSelect
|
||||
style={{ viewContainer: styles.viewContainer }}
|
||||
|
|
@ -102,7 +99,7 @@ class InviteUsersView extends React.Component {
|
|||
useNativeAndroidPickerStyle={false}
|
||||
placeholder={{}}
|
||||
onValueChange={value => this.onValueChangePicker(key, value)}
|
||||
items={OPTIONS[key]}
|
||||
items={firstEl.concat(OPTIONS[key])}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -121,13 +118,13 @@ class InviteUsersView extends React.Component {
|
|||
<Separator theme={theme} />
|
||||
<ListItem
|
||||
title={I18n.t('Expiration_Days')}
|
||||
right={() => this.renderPicker('days')}
|
||||
right={() => this.renderPicker('days', 'Never')}
|
||||
theme={theme}
|
||||
/>
|
||||
<Separator theme={theme} />
|
||||
<ListItem
|
||||
title={I18n.t('Max_number_of_uses')}
|
||||
right={() => this.renderPicker('maxUses')}
|
||||
right={() => this.renderPicker('maxUses', 'No_limit')}
|
||||
theme={theme}
|
||||
/>
|
||||
<Separator theme={theme} />
|
||||
|
|
|
|||
|
|
@ -71,58 +71,58 @@ Info.propTypes = {
|
|||
|
||||
const OPTIONS = {
|
||||
desktopNotifications: [{
|
||||
label: I18n.t('Default'), value: 'default'
|
||||
label: 'Default', value: 'default'
|
||||
}, {
|
||||
label: I18n.t('All_Messages'), value: 'all'
|
||||
label: 'All_Messages', value: 'all'
|
||||
}, {
|
||||
label: I18n.t('Mentions'), value: 'mentions'
|
||||
label: 'Mentions', value: 'mentions'
|
||||
}, {
|
||||
label: I18n.t('Nothing'), value: 'nothing'
|
||||
label: 'Nothing', value: 'nothing'
|
||||
}],
|
||||
audioNotifications: [{
|
||||
label: I18n.t('Default'), value: 'default'
|
||||
label: 'Default', value: 'default'
|
||||
}, {
|
||||
label: I18n.t('All_Messages'), value: 'all'
|
||||
label: 'All_Messages', value: 'all'
|
||||
}, {
|
||||
label: I18n.t('Mentions'), value: 'mentions'
|
||||
label: 'Mentions', value: 'mentions'
|
||||
}, {
|
||||
label: I18n.t('Nothing'), value: 'nothing'
|
||||
label: 'Nothing', value: 'nothing'
|
||||
}],
|
||||
mobilePushNotifications: [{
|
||||
label: I18n.t('Default'), value: 'default'
|
||||
label: 'Default', value: 'default'
|
||||
}, {
|
||||
label: I18n.t('All_Messages'), value: 'all'
|
||||
label: 'All_Messages', value: 'all'
|
||||
}, {
|
||||
label: I18n.t('Mentions'), value: 'mentions'
|
||||
label: 'Mentions', value: 'mentions'
|
||||
}, {
|
||||
label: I18n.t('Nothing'), value: 'nothing'
|
||||
label: 'Nothing', value: 'nothing'
|
||||
}],
|
||||
emailNotifications: [{
|
||||
label: I18n.t('Default'), value: 'default'
|
||||
label: 'Default', value: 'default'
|
||||
}, {
|
||||
label: I18n.t('All_Messages'), value: 'all'
|
||||
label: 'All_Messages', value: 'all'
|
||||
}, {
|
||||
label: I18n.t('Mentions'), value: 'mentions'
|
||||
label: 'Mentions', value: 'mentions'
|
||||
}, {
|
||||
label: I18n.t('Nothing'), value: 'nothing'
|
||||
label: 'Nothing', value: 'nothing'
|
||||
}],
|
||||
desktopNotificationDuration: [{
|
||||
label: I18n.t('Default'), value: 0
|
||||
label: 'Default', value: 0
|
||||
}, {
|
||||
label: I18n.t('Seconds', { second: 1 }), value: 1
|
||||
label: 'Seconds', second: 1, value: 1
|
||||
}, {
|
||||
label: I18n.t('Seconds', { second: 2 }), value: 2
|
||||
label: 'Seconds', second: 2, value: 2
|
||||
}, {
|
||||
label: I18n.t('Seconds', { second: 3 }), value: 3
|
||||
label: 'Seconds', second: 3, value: 3
|
||||
}, {
|
||||
label: I18n.t('Seconds', { second: 4 }), value: 4
|
||||
label: 'Seconds', second: 4, value: 4
|
||||
}, {
|
||||
label: I18n.t('Seconds', { second: 5 }), value: 5
|
||||
label: 'Seconds', second: 5, value: 5
|
||||
}],
|
||||
audioNotificationValue: [{
|
||||
label: 'None', value: 'none None'
|
||||
}, {
|
||||
label: I18n.t('Default'), value: '0 Default'
|
||||
label: 'Default', value: '0 Default'
|
||||
}, {
|
||||
label: 'Beep', value: 'beep Beep'
|
||||
}, {
|
||||
|
|
@ -229,7 +229,7 @@ class NotificationPreferencesView extends React.Component {
|
|||
const { room } = this.state;
|
||||
const { theme } = this.props;
|
||||
const text = room[key] ? OPTIONS[key].find(option => option.value === room[key]) : OPTIONS[key][0];
|
||||
return <Text style={[styles.pickerText, { color: themes[theme].actionTintColor }]}>{text?.label}</Text>;
|
||||
return <Text style={[styles.pickerText, { color: themes[theme].actionTintColor }]}>{I18n.t(text?.label, { defaultValue: text?.label, second: text?.second })}</Text>;
|
||||
}
|
||||
|
||||
renderSwitch = (key) => {
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ const Item = React.memo(({
|
|||
theme
|
||||
}) => (
|
||||
<ListItem
|
||||
title={item.label}
|
||||
title={I18n.t(item.label, { defaultValue: item.label, second: item?.second })}
|
||||
right={selected && (() => <Check theme={theme} style={styles.check} />)}
|
||||
onPress={onItemPress}
|
||||
theme={theme}
|
||||
|
|
|
|||
|
|
@ -24,16 +24,16 @@ import SafeAreaView from '../containers/SafeAreaView';
|
|||
|
||||
const STATUS = [{
|
||||
id: 'online',
|
||||
name: I18n.t('Online')
|
||||
name: 'Online'
|
||||
}, {
|
||||
id: 'busy',
|
||||
name: I18n.t('Busy')
|
||||
name: 'Busy'
|
||||
}, {
|
||||
id: 'away',
|
||||
name: I18n.t('Away')
|
||||
name: 'Away'
|
||||
}, {
|
||||
id: 'offline',
|
||||
name: I18n.t('Invisible')
|
||||
name: 'Invisible'
|
||||
}];
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
|
|
@ -164,7 +164,7 @@ class StatusView extends React.Component {
|
|||
const { id, name } = item;
|
||||
return (
|
||||
<ListItem
|
||||
title={name}
|
||||
title={I18n.t(name)}
|
||||
onPress={async() => {
|
||||
if (user.status !== item.id) {
|
||||
try {
|
||||
|
|
|
|||
|
|
@ -21,28 +21,28 @@ const THEME_GROUP = 'THEME_GROUP';
|
|||
const DARK_GROUP = 'DARK_GROUP';
|
||||
|
||||
const SYSTEM_THEME = {
|
||||
label: I18n.t('Automatic'),
|
||||
label: 'Automatic',
|
||||
value: 'automatic',
|
||||
group: THEME_GROUP
|
||||
};
|
||||
|
||||
const THEMES = [
|
||||
{
|
||||
label: I18n.t('Light'),
|
||||
label: 'Light',
|
||||
value: 'light',
|
||||
group: THEME_GROUP
|
||||
}, {
|
||||
label: I18n.t('Dark'),
|
||||
label: 'Dark',
|
||||
value: 'dark',
|
||||
group: THEME_GROUP
|
||||
}, {
|
||||
label: I18n.t('Dark'),
|
||||
label: 'Dark',
|
||||
value: 'dark',
|
||||
separator: true,
|
||||
header: I18n.t('Dark_level'),
|
||||
header: 'Dark_level',
|
||||
group: DARK_GROUP
|
||||
}, {
|
||||
label: I18n.t('Black'),
|
||||
label: 'Black',
|
||||
value: 'black',
|
||||
group: DARK_GROUP
|
||||
}
|
||||
|
|
@ -129,7 +129,7 @@ class ThemeView extends React.Component {
|
|||
<>
|
||||
{item.separator || isFirst ? this.renderSectionHeader(item.header) : null}
|
||||
<ListItem
|
||||
title={label}
|
||||
title={I18n.t(label)}
|
||||
onPress={() => this.onClick(item)}
|
||||
testID={`theme-view-${ value }`}
|
||||
right={this.isSelected(item) ? this.renderIcon : null}
|
||||
|
|
@ -139,12 +139,12 @@ class ThemeView extends React.Component {
|
|||
);
|
||||
}
|
||||
|
||||
renderSectionHeader = (header = I18n.t('Theme')) => {
|
||||
renderSectionHeader = (header = 'Theme') => {
|
||||
const { theme } = this.props;
|
||||
return (
|
||||
<>
|
||||
<View style={styles.info}>
|
||||
<Text style={[styles.infoText, { color: themes[theme].infoText }]}>{header}</Text>
|
||||
<Text style={[styles.infoText, { color: themes[theme].infoText }]}>{I18n.t(header)}</Text>
|
||||
</View>
|
||||
{this.renderSeparator()}
|
||||
</>
|
||||
|
|
@ -169,7 +169,7 @@ class ThemeView extends React.Component {
|
|||
<StatusBar theme={theme} />
|
||||
<FlatList
|
||||
data={THEMES}
|
||||
keyExtractor={item => item.value}
|
||||
keyExtractor={item => item.value + item.group}
|
||||
contentContainerStyle={[
|
||||
styles.list,
|
||||
{ borderColor: themes[theme].separatorColor }
|
||||
|
|
|
|||
Loading…
Reference in New Issue