/
LanguageSetting.tsx
65 lines (57 loc) · 1.58 KB
/
LanguageSetting.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import { BlueBase, BlueBaseContext, IntlContext, IntlContextData } from '@bluebase/core';
import { Dialog, List } from '@bluebase/components';
import React from 'react';
export class LanguageSetting extends React.PureComponent {
static contextType = BlueBaseContext;
readonly state = {
visible: false
};
toggleDialog = () => this.setState({ visible: !this.state.visible });
renderDialog = () => {
const BB: BlueBase = (this as any).context;
const localeOptions = BB.Configs.getValue('locale.options');
return (
<IntlContext.Consumer>
{({ changeLocale, locale }: IntlContextData) => (
<Dialog
visible={this.state.visible}
onDismiss={this.toggleDialog}
>
<List>
{Object.keys(localeOptions).map(localeKey => {
const onPress = () => changeLocale(localeKey);
return (
<List.Item
title={localeOptions[localeKey]}
onPress={onPress}
key={localeKey}
selected={locale === localeKey}
/>
);
})}
</List>
</Dialog>
)}
</IntlContext.Consumer>
);
}
render() {
const BB: BlueBase = (this as any).context;
const localeOptions = BB.Configs.getValue('locale.options');
return (
<IntlContext.Consumer>
{({ __, locale }: IntlContextData) => (
<React.Fragment>
{this.renderDialog()}
<List.Item
left={<List.Icon name="translate" />}
title={__('Language')}
description={localeOptions[locale]}
onPress={this.toggleDialog}
/>
</React.Fragment>
)}
</IntlContext.Consumer>
);
}
}