-
Notifications
You must be signed in to change notification settings - Fork 39
/
Copy pathTranslationsProvider.tsx
74 lines (66 loc) · 1.9 KB
/
TranslationsProvider.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
66
67
68
69
70
71
72
73
74
import * as React from 'react';
import * as translationsDE from '../translations/translations-de.json';
import * as translationsEN from '../translations/translations-en.json';
import { readRecord } from './localStorageService';
import { darkTheme, lightTheme, ThemeProvider } from '../theme';
export interface IAppContext {
clockDisplay: string;
clockModes: {
hours12: string;
hours24: string;
},
colors: {
color1: string;
color2: string;
};
interfaceColor: string;
langCode: string;
langLabel: string;
languageEN: string;
languageDE: string;
nav: {
chatTabLabel: string,
settingsTabLabel: string
};
resetButtonLabel: string;
userName: string;
ctrlEnterOptionsTitle: string;
ctrlEnterSendingOptions: {
option1: string;
option2: string;
}
changeLanguage: () => void;
}
const context = React.createContext<IAppContext | any>(null);
const AppContextProvider = context.Provider;
export const AppContextConsumer = context.Consumer;
export default class TranslationProvider extends React.Component<{children: any}> {
public state = {
translations: readRecord('lang') !== 'de' ? translationsEN : translationsDE,
colorTheme: readRecord('theme') !== 'dark' ? lightTheme : darkTheme
};
public render() {
const { colorTheme } = this.state;
return (
<AppContextProvider value={{
state: this.state,
changeLanguage: this.changeLanguage,
changeTheme: this.changeTheme,
}}>
<ThemeProvider theme={colorTheme}>
{this.props.children as any}
</ThemeProvider>
</AppContextProvider>
)
}
private changeTheme = () => {
this.setState({
colorTheme: this.state.colorTheme === lightTheme ? darkTheme : lightTheme
});
};
private changeLanguage = () => {
this.setState({
translations: this.state.translations.langCode === 'DE' ? translationsEN : translationsDE
});
}
}