diff options
Diffstat (limited to 'gui/src/renderer')
| -rw-r--r-- | gui/src/renderer/app.tsx | 4 | ||||
| -rw-r--r-- | gui/src/renderer/components/SelectLanguage.tsx | 151 |
2 files changed, 76 insertions, 79 deletions
diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx index 7991453240..c991e07104 100644 --- a/gui/src/renderer/app.tsx +++ b/gui/src/renderer/app.tsx @@ -491,7 +491,7 @@ export default class AppRenderer { ]; } - public async setPreferredLocale(preferredLocale: string): Promise<void> { + public setPreferredLocale = async (preferredLocale: string): Promise<void> => { const translations = await IpcRendererEventChannel.guiSettings.setPreferredLocale( preferredLocale, ); @@ -502,7 +502,7 @@ export default class AppRenderer { // load translations for new locale loadTranslations(messages, translations.locale, translations.messages); loadTranslations(relayLocations, translations.locale, translations.relayLocations); - } + }; public getPreferredLocaleDisplayName = (localeCode: string): string => { const preferredLocale = this.getPreferredLocaleList().find((item) => item.code === localeCode); diff --git a/gui/src/renderer/components/SelectLanguage.tsx b/gui/src/renderer/components/SelectLanguage.tsx index 2b11f0a924..b97243a456 100644 --- a/gui/src/renderer/components/SelectLanguage.tsx +++ b/gui/src/renderer/components/SelectLanguage.tsx @@ -1,7 +1,10 @@ -import * as React from 'react'; +import { useCallback, useEffect, useMemo, useRef } from 'react'; import styled from 'styled-components'; +import { useAppContext } from '../../renderer/context'; import { messages } from '../../shared/gettext'; +import { useHistory } from '../lib/history'; +import { useSelector } from '../redux/store'; import { AriaInputGroup } from './AriaGroup'; import Selector, { SelectorItem } from './cell/Selector'; import { CustomScrollbarsRef } from './CustomScrollbars'; @@ -16,91 +19,85 @@ import { } from './NavigationBar'; 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<SelectorItem<string>>; -} - -const StyledNavigationScrollbars = styled(NavigationScrollbars)({ - flex: 1, -}); - const StyledSelector = styled(Selector)({ marginBottom: 0, }) as typeof Selector; -export default class SelectLanguage extends React.Component<IProps, IState> { - private scrollView = React.createRef<CustomScrollbarsRef>(); - private selectedCellRef = React.createRef<HTMLButtonElement>(); +export default function SelectLanguage() { + const history = useHistory(); + const { preferredLocale, preferredLocalesList, setPreferredLocale } = usePreferredLocale(); + const scrollView = useRef<CustomScrollbarsRef>(null); + const selectedCellRef = useRef<HTMLButtonElement>(null); + + const selectLocale = useCallback( + async (locale: string) => { + await setPreferredLocale(locale); + history.pop(); + }, + [history.pop], + ); + + const scrollToSelectedCell = () => { + const ref = selectedCellRef.current; + const view = scrollView.current; + if (view && ref) { + if (ref instanceof HTMLElement) { + view.scrollToElement(ref, 'middle'); + } + } + }; - constructor(props: IProps) { - super(props); + useEffect(() => { + scrollToSelectedCell(); + }, []); - this.state = { - source: [ - ...this.props.preferredLocalesList.map((item) => ({ label: item.name, value: item.code })), - ], - }; - } + return ( + <BackAction action={history.pop}> + <Layout> + <SettingsContainer> + <NavigationContainer> + <NavigationBar> + <NavigationItems> + <TitleBarItem> + { + // TRANSLATORS: Title label in navigation bar + messages.pgettext('select-language-nav', 'Select language') + } + </TitleBarItem> + </NavigationItems> + </NavigationBar> - public componentDidMount() { - this.scrollToSelectedCell(); - } + <NavigationScrollbars ref={scrollView}> + <SettingsHeader> + <HeaderTitle> + {messages.pgettext('select-language-nav', 'Select language')} + </HeaderTitle> + </SettingsHeader> + <AriaInputGroup> + <StyledSelector + title="" + value={preferredLocale} + items={preferredLocalesList} + onSelect={selectLocale} + selectedCellRef={selectedCellRef} + /> + </AriaInputGroup> + </NavigationScrollbars> + </NavigationContainer> + </SettingsContainer> + </Layout> + </BackAction> + ); +} - public render() { - return ( - <BackAction action={this.props.onClose}> - <Layout> - <SettingsContainer> - <NavigationContainer> - <NavigationBar> - <NavigationItems> - <TitleBarItem> - { - // TRANSLATORS: Title label in navigation bar - messages.pgettext('select-language-nav', 'Select language') - } - </TitleBarItem> - </NavigationItems> - </NavigationBar> +function usePreferredLocale() { + const preferredLocale = useSelector((state) => state.settings.guiSettings.preferredLocale); - <StyledNavigationScrollbars ref={this.scrollView}> - <SettingsHeader> - <HeaderTitle> - {messages.pgettext('select-language-nav', 'Select language')} - </HeaderTitle> - </SettingsHeader> - <AriaInputGroup> - <StyledSelector - title="" - items={this.state.source} - value={this.props.preferredLocale} - onSelect={this.props.setPreferredLocale} - selectedCellRef={this.selectedCellRef} - /> - </AriaInputGroup> - </StyledNavigationScrollbars> - </NavigationContainer> - </SettingsContainer> - </Layout> - </BackAction> - ); - } + const { getPreferredLocaleList, setPreferredLocale } = useAppContext(); - private scrollToSelectedCell() { - const ref = this.selectedCellRef.current; - const scrollView = this.scrollView.current; + const preferredLocalesList: SelectorItem<string>[] = useMemo(() => { + return [...getPreferredLocaleList().map(({ name, code }) => ({ label: name, value: code }))]; + }, []); - if (scrollView && ref) { - if (ref instanceof HTMLElement) { - scrollView.scrollToElement(ref, 'middle'); - } - } - } + return { preferredLocale, preferredLocalesList, setPreferredLocale }; } |