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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
import * as React from 'react';
import ReactDOM from 'react-dom';
import { Component, Styles, View } from 'reactxp';
import { colors } from '../../config.json';
import { messages } from '../../shared/gettext';
import CustomScrollbars from './CustomScrollbars';
import { Container, Layout } from './Layout';
import {
BackBarItem,
NavigationBar,
NavigationContainer,
NavigationItems,
NavigationScrollbars,
TitleBarItem,
} from './NavigationBar';
import Selector, { ISelectorItem, SelectorCell } from './Selector';
import SettingsHeader, { HeaderTitle } from './SettingsHeader';
interface IProps {
preferredLocale: string;
preferredLocalesList: Array<{ name: string; code: string }>;
setPreferredLocale: (locale: string) => void;
onClose: () => void;
}
interface IState {
source: Array<ISelectorItem<string>>;
}
const styles = {
page: Styles.createViewStyle({
backgroundColor: colors.darkBlue,
flex: 1,
}),
container: Styles.createViewStyle({
flex: 1,
}),
selector: Styles.createViewStyle({
marginBottom: 0,
}),
// plain CSS style
scrollview: {
flex: 1,
},
};
export default class SelectLanguage extends Component<IProps, IState> {
private scrollView = React.createRef<CustomScrollbars>();
private selectedCellRef = React.createRef<SelectorCell<string>>();
constructor(props: IProps) {
super(props);
this.state = {
source: [
...this.props.preferredLocalesList.map((item) => ({ label: item.name, value: item.code })),
],
};
}
public componentDidMount() {
this.scrollToSelectedCell();
}
public render() {
return (
<Layout>
<Container>
<View style={styles.page}>
<NavigationContainer>
<NavigationBar>
<NavigationItems>
<BackBarItem action={this.props.onClose}>
{
// TRANSLATORS: Back button in navigation bar
messages.pgettext('navigation-bar', 'Settings')
}
</BackBarItem>
<TitleBarItem>
{
// TRANSLATORS: Title label in navigation bar
messages.pgettext('select-language-nav', 'Select language')
}
</TitleBarItem>
</NavigationItems>
</NavigationBar>
<View style={styles.container}>
<NavigationScrollbars style={styles.scrollview}>
<SettingsHeader>
<HeaderTitle>
{messages.pgettext('select-language-nav', 'Select language')}
</HeaderTitle>
</SettingsHeader>
<Selector
style={styles.selector}
title=""
values={this.state.source}
value={this.props.preferredLocale}
onSelect={this.props.setPreferredLocale}
selectedCellRef={this.selectedCellRef}
/>
</NavigationScrollbars>
</View>
</NavigationContainer>
</View>
</Container>
</Layout>
);
}
private scrollToSelectedCell() {
const ref = this.selectedCellRef.current;
const scrollView = this.scrollView.current;
if (scrollView && ref) {
const cellDOMNode = ReactDOM.findDOMNode(ref);
if (cellDOMNode instanceof HTMLElement) {
scrollView.scrollToElement(cellDOMNode, 'middle');
}
}
}
}
|
