55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import { Select, MenuItem, Theme, Box, FormControl } from '@mui/material'
|
|
import {makeStyles} from '@mui/styles'
|
|
import { useCallback, useEffect } from 'react';
|
|
import { useGlobalState } from '../state/GlobalState'
|
|
|
|
const useStyles = makeStyles((theme: Theme) => ({
|
|
localeHolder: {
|
|
display: 'flex',
|
|
flexGrow: 1,
|
|
padding: '0 0.5vw 0 0.5vw'
|
|
},
|
|
select: {
|
|
display: 'flex',
|
|
flexGrow: 1
|
|
}
|
|
}))
|
|
|
|
|
|
|
|
export const LocaleSelect = () => {
|
|
const classes = useStyles()
|
|
const [preferedLocale, setPreferedLocale] = useGlobalState(useCallback(state => [state.preferedLocale, state.setPreferedLocale],[]))
|
|
const [localesList, refreshLocalesList] = useGlobalState(useCallback(state => [state.localesList, state.refreshLocalesList],[]))
|
|
|
|
useEffect(()=> {refreshLocalesList();}, [refreshLocalesList])
|
|
|
|
return (
|
|
<>
|
|
<Box className={classes.localeHolder}>
|
|
<FormControl fullWidth variant="standard">
|
|
<Select
|
|
displayEmpty
|
|
className={classes.select}
|
|
labelId="prefered-locale"
|
|
value={localesList.length > 0 ? preferedLocale : ''}
|
|
onChange={(evt) => {
|
|
setPreferedLocale(evt.target.value)
|
|
}}
|
|
id="locale-selector"
|
|
>
|
|
<MenuItem disabled value="">
|
|
<em>Language</em>
|
|
</MenuItem>
|
|
{localesList.map((locale, idx) => (
|
|
<MenuItem key={idx} value={locale}>
|
|
{locale}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
</Box>
|
|
</>
|
|
)
|
|
}
|