Merge branch 'gui-language'

1 files changed, 119 insertions, 0 deletions

diff --git a/gui/src/renderer/components/SelectLanguage.tsx b/gui/src/renderer/components/SelectLanguage.tsx
new file mode 100644
index 0000000000..c5c2228d00
--- /dev/null
+++ b/gui/src/renderer/components/SelectLanguage.tsx
@@ -0,0 +1,119 @@
+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('select-language-nav', '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');
+      }
+    }
+  }
+}