[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:
parent
b4e353c3d3
commit
5532d0f368
|
@ -19,11 +19,11 @@ import SafeAreaView from '../containers/SafeAreaView';
|
||||||
|
|
||||||
const DEFAULT_BROWSERS = [
|
const DEFAULT_BROWSERS = [
|
||||||
{
|
{
|
||||||
title: I18n.t('In_app'),
|
title: 'In_app',
|
||||||
value: 'inApp'
|
value: 'inApp'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: isIOS ? 'Safari' : I18n.t('Browser'),
|
title: isIOS ? 'Safari' : 'Browser',
|
||||||
value: 'systemDefault:'
|
value: 'systemDefault:'
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
@ -137,7 +137,7 @@ class DefaultBrowserView extends React.Component {
|
||||||
const { title, value } = item;
|
const { title, value } = item;
|
||||||
return (
|
return (
|
||||||
<ListItem
|
<ListItem
|
||||||
title={title}
|
title={I18n.t(title, { defaultValue: title })}
|
||||||
onPress={() => this.changeDefaultBrowser(value)}
|
onPress={() => this.changeDefaultBrowser(value)}
|
||||||
testID={`default-browser-view-${ title }`}
|
testID={`default-browser-view-${ title }`}
|
||||||
right={this.isSelected(value) ? this.renderIcon : null}
|
right={this.isSelected(value) ? this.renderIcon : null}
|
||||||
|
|
|
@ -21,9 +21,6 @@ import SafeAreaView from '../../containers/SafeAreaView';
|
||||||
|
|
||||||
const OPTIONS = {
|
const OPTIONS = {
|
||||||
days: [{
|
days: [{
|
||||||
label: I18n.t('Never'), value: 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '1', value: 1
|
label: '1', value: 1
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -36,9 +33,6 @@ const OPTIONS = {
|
||||||
label: '30', value: 30
|
label: '30', value: 30
|
||||||
}],
|
}],
|
||||||
maxUses: [{
|
maxUses: [{
|
||||||
label: I18n.t('No_limit'), value: 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '1', value: 1
|
label: '1', value: 1
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -91,9 +85,12 @@ class InviteUsersView extends React.Component {
|
||||||
navigation.pop();
|
navigation.pop();
|
||||||
}
|
}
|
||||||
|
|
||||||
renderPicker = (key) => {
|
renderPicker = (key, first) => {
|
||||||
const { props } = this;
|
const { props } = this;
|
||||||
const { theme } = props;
|
const { theme } = props;
|
||||||
|
const firstEl = [{
|
||||||
|
label: I18n.t(first), value: 0
|
||||||
|
}];
|
||||||
return (
|
return (
|
||||||
<RNPickerSelect
|
<RNPickerSelect
|
||||||
style={{ viewContainer: styles.viewContainer }}
|
style={{ viewContainer: styles.viewContainer }}
|
||||||
|
@ -102,7 +99,7 @@ class InviteUsersView extends React.Component {
|
||||||
useNativeAndroidPickerStyle={false}
|
useNativeAndroidPickerStyle={false}
|
||||||
placeholder={{}}
|
placeholder={{}}
|
||||||
onValueChange={value => this.onValueChangePicker(key, value)}
|
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} />
|
<Separator theme={theme} />
|
||||||
<ListItem
|
<ListItem
|
||||||
title={I18n.t('Expiration_Days')}
|
title={I18n.t('Expiration_Days')}
|
||||||
right={() => this.renderPicker('days')}
|
right={() => this.renderPicker('days', 'Never')}
|
||||||
theme={theme}
|
theme={theme}
|
||||||
/>
|
/>
|
||||||
<Separator theme={theme} />
|
<Separator theme={theme} />
|
||||||
<ListItem
|
<ListItem
|
||||||
title={I18n.t('Max_number_of_uses')}
|
title={I18n.t('Max_number_of_uses')}
|
||||||
right={() => this.renderPicker('maxUses')}
|
right={() => this.renderPicker('maxUses', 'No_limit')}
|
||||||
theme={theme}
|
theme={theme}
|
||||||
/>
|
/>
|
||||||
<Separator theme={theme} />
|
<Separator theme={theme} />
|
||||||
|
|
|
@ -71,58 +71,58 @@ Info.propTypes = {
|
||||||
|
|
||||||
const OPTIONS = {
|
const OPTIONS = {
|
||||||
desktopNotifications: [{
|
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: [{
|
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: [{
|
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: [{
|
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: [{
|
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: [{
|
audioNotificationValue: [{
|
||||||
label: 'None', value: 'none None'
|
label: 'None', value: 'none None'
|
||||||
}, {
|
}, {
|
||||||
label: I18n.t('Default'), value: '0 Default'
|
label: 'Default', value: '0 Default'
|
||||||
}, {
|
}, {
|
||||||
label: 'Beep', value: 'beep Beep'
|
label: 'Beep', value: 'beep Beep'
|
||||||
}, {
|
}, {
|
||||||
|
@ -229,7 +229,7 @@ class NotificationPreferencesView extends React.Component {
|
||||||
const { room } = this.state;
|
const { room } = this.state;
|
||||||
const { theme } = this.props;
|
const { theme } = this.props;
|
||||||
const text = room[key] ? OPTIONS[key].find(option => option.value === room[key]) : OPTIONS[key][0];
|
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) => {
|
renderSwitch = (key) => {
|
||||||
|
|
|
@ -42,7 +42,7 @@ const Item = React.memo(({
|
||||||
theme
|
theme
|
||||||
}) => (
|
}) => (
|
||||||
<ListItem
|
<ListItem
|
||||||
title={item.label}
|
title={I18n.t(item.label, { defaultValue: item.label, second: item?.second })}
|
||||||
right={selected && (() => <Check theme={theme} style={styles.check} />)}
|
right={selected && (() => <Check theme={theme} style={styles.check} />)}
|
||||||
onPress={onItemPress}
|
onPress={onItemPress}
|
||||||
theme={theme}
|
theme={theme}
|
||||||
|
|
|
@ -24,16 +24,16 @@ import SafeAreaView from '../containers/SafeAreaView';
|
||||||
|
|
||||||
const STATUS = [{
|
const STATUS = [{
|
||||||
id: 'online',
|
id: 'online',
|
||||||
name: I18n.t('Online')
|
name: 'Online'
|
||||||
}, {
|
}, {
|
||||||
id: 'busy',
|
id: 'busy',
|
||||||
name: I18n.t('Busy')
|
name: 'Busy'
|
||||||
}, {
|
}, {
|
||||||
id: 'away',
|
id: 'away',
|
||||||
name: I18n.t('Away')
|
name: 'Away'
|
||||||
}, {
|
}, {
|
||||||
id: 'offline',
|
id: 'offline',
|
||||||
name: I18n.t('Invisible')
|
name: 'Invisible'
|
||||||
}];
|
}];
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
|
@ -164,7 +164,7 @@ class StatusView extends React.Component {
|
||||||
const { id, name } = item;
|
const { id, name } = item;
|
||||||
return (
|
return (
|
||||||
<ListItem
|
<ListItem
|
||||||
title={name}
|
title={I18n.t(name)}
|
||||||
onPress={async() => {
|
onPress={async() => {
|
||||||
if (user.status !== item.id) {
|
if (user.status !== item.id) {
|
||||||
try {
|
try {
|
||||||
|
|
|
@ -21,28 +21,28 @@ const THEME_GROUP = 'THEME_GROUP';
|
||||||
const DARK_GROUP = 'DARK_GROUP';
|
const DARK_GROUP = 'DARK_GROUP';
|
||||||
|
|
||||||
const SYSTEM_THEME = {
|
const SYSTEM_THEME = {
|
||||||
label: I18n.t('Automatic'),
|
label: 'Automatic',
|
||||||
value: 'automatic',
|
value: 'automatic',
|
||||||
group: THEME_GROUP
|
group: THEME_GROUP
|
||||||
};
|
};
|
||||||
|
|
||||||
const THEMES = [
|
const THEMES = [
|
||||||
{
|
{
|
||||||
label: I18n.t('Light'),
|
label: 'Light',
|
||||||
value: 'light',
|
value: 'light',
|
||||||
group: THEME_GROUP
|
group: THEME_GROUP
|
||||||
}, {
|
}, {
|
||||||
label: I18n.t('Dark'),
|
label: 'Dark',
|
||||||
value: 'dark',
|
value: 'dark',
|
||||||
group: THEME_GROUP
|
group: THEME_GROUP
|
||||||
}, {
|
}, {
|
||||||
label: I18n.t('Dark'),
|
label: 'Dark',
|
||||||
value: 'dark',
|
value: 'dark',
|
||||||
separator: true,
|
separator: true,
|
||||||
header: I18n.t('Dark_level'),
|
header: 'Dark_level',
|
||||||
group: DARK_GROUP
|
group: DARK_GROUP
|
||||||
}, {
|
}, {
|
||||||
label: I18n.t('Black'),
|
label: 'Black',
|
||||||
value: 'black',
|
value: 'black',
|
||||||
group: DARK_GROUP
|
group: DARK_GROUP
|
||||||
}
|
}
|
||||||
|
@ -129,7 +129,7 @@ class ThemeView extends React.Component {
|
||||||
<>
|
<>
|
||||||
{item.separator || isFirst ? this.renderSectionHeader(item.header) : null}
|
{item.separator || isFirst ? this.renderSectionHeader(item.header) : null}
|
||||||
<ListItem
|
<ListItem
|
||||||
title={label}
|
title={I18n.t(label)}
|
||||||
onPress={() => this.onClick(item)}
|
onPress={() => this.onClick(item)}
|
||||||
testID={`theme-view-${ value }`}
|
testID={`theme-view-${ value }`}
|
||||||
right={this.isSelected(item) ? this.renderIcon : null}
|
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;
|
const { theme } = this.props;
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<View style={styles.info}>
|
<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>
|
</View>
|
||||||
{this.renderSeparator()}
|
{this.renderSeparator()}
|
||||||
</>
|
</>
|
||||||
|
@ -169,7 +169,7 @@ class ThemeView extends React.Component {
|
||||||
<StatusBar theme={theme} />
|
<StatusBar theme={theme} />
|
||||||
<FlatList
|
<FlatList
|
||||||
data={THEMES}
|
data={THEMES}
|
||||||
keyExtractor={item => item.value}
|
keyExtractor={item => item.value + item.group}
|
||||||
contentContainerStyle={[
|
contentContainerStyle={[
|
||||||
styles.list,
|
styles.list,
|
||||||
{ borderColor: themes[theme].separatorColor }
|
{ borderColor: themes[theme].separatorColor }
|
||||||
|
|
Loading…
Reference in New Issue