feat: language selection on web splash screen

zio/stable
Mary 2024-02-13 12:46:29 +07:00
parent 630b422618
commit a9029a5f4f
No known key found for this signature in database
1 changed files with 66 additions and 3 deletions

View File

@ -13,6 +13,9 @@ import {Trans, msg} from '@lingui/macro'
import {Logo} from '#/view/icons/Logo' import {Logo} from '#/view/icons/Logo'
import {Logotype} from '#/view/icons/Logotype' import {Logotype} from '#/view/icons/Logotype'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {sanitizeAppLanguageSetting} from '#/locale/helpers'
import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences'
import {APP_LANGUAGES} from '#/locale/languages'
export const SplashScreen = ({ export const SplashScreen = ({
onDismiss, onDismiss,
@ -101,6 +104,23 @@ function Footer({styles}: {styles: ReturnType<typeof useStyles>}) {
const pal = usePalette('default') const pal = usePalette('default')
const {_} = useLingui() const {_} = useLingui()
const langPrefs = useLanguagePrefs()
const setLangPrefs = useLanguagePrefsApi()
const sanitizedLang = sanitizeAppLanguageSetting(langPrefs.appLanguage)
const onChangeAppLanguage = React.useCallback(
(ev: React.ChangeEvent<HTMLSelectElement>) => {
const value = ev.target.value
if (!value) return
if (sanitizedLang !== value) {
setLangPrefs.setAppLanguage(sanitizeAppLanguageSetting(value))
}
},
[sanitizedLang, setLangPrefs],
)
return ( return (
<View style={[styles.footer, pal.view, pal.border]}> <View style={[styles.footer, pal.view, pal.border]}>
<TextLink <TextLink
@ -118,6 +138,48 @@ function Footer({styles}: {styles: ReturnType<typeof useStyles>}) {
text={_(msg`Jobs`)} text={_(msg`Jobs`)}
style={[styles.footerLink, pal.link]} style={[styles.footerLink, pal.link]}
/> />
<View style={styles.footerDivider} />
<View
style={{
flexDirection: 'row',
gap: 8,
alignItems: 'center',
flexShrink: 1,
}}>
<Text aria-hidden={true} style={[pal.textLight]}>
{APP_LANGUAGES.find(l => l.code2 === sanitizedLang)?.name}
</Text>
<FontAwesomeIcon
icon="chevron-down"
style={[pal.textLight, {width: 12, flexShrink: 0}]}
/>
<select
value={sanitizedLang}
onChange={onChangeAppLanguage}
style={{
cursor: 'pointer',
MozAppearance: 'none',
WebkitAppearance: 'none',
appearance: 'none',
position: 'absolute',
inset: 0,
width: '100%',
color: 'transparent',
background: 'transparent',
outline: 0,
border: 0,
padding: 0,
}}>
{APP_LANGUAGES.filter(l => Boolean(l.code2)).map(l => (
<option key={l.code2} value={l.code2}>
{l.name}
</option>
))}
</select>
</View>
</View> </View>
) )
} }
@ -190,9 +252,10 @@ const useStyles = () => {
padding: 20, padding: 20,
borderTopWidth: 1, borderTopWidth: 1,
flexDirection: 'row', flexDirection: 'row',
flexWrap: 'wrap',
gap: 20,
}, },
footerLink: { footerDivider: {flexGrow: 1},
marginRight: 20, footerLink: {},
},
}) })
} }