updated Language selector to use DropdownInput
This commit is contained in:
parent
e95706e0cb
commit
7b2e3ad4ae
|
@ -1,9 +1,8 @@
|
|||
import { OptionWithDivider } from 'components/Collections/CollectionShare/publicShare/manage/selectComponents/OptionWithDivider';
|
||||
import DropdownInput, { DropdownOption } from 'components/DropdownInput';
|
||||
import { Language } from 'constants/locale';
|
||||
import { useLocalState } from 'hooks/useLocalState';
|
||||
import { t } from 'i18next';
|
||||
import { useRouter } from 'next/router';
|
||||
import Select from 'react-select';
|
||||
import { DropdownStyle } from 'styles/dropdown';
|
||||
import { getBestPossibleUserLocale } from 'utils/i18n';
|
||||
import { LS_KEYS } from 'utils/storage/localStorage';
|
||||
|
||||
|
@ -16,7 +15,7 @@ const getLocaleDisplayName = (l: Language) => {
|
|||
}
|
||||
};
|
||||
|
||||
const getLanguageOptions = () => {
|
||||
const getLanguageOptions = (): DropdownOption<Language>[] => {
|
||||
return Object.values(Language).map((lang) => ({
|
||||
label: getLocaleDisplayName(lang),
|
||||
value: lang,
|
||||
|
@ -37,19 +36,12 @@ export const LanguageSelector = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<Select
|
||||
menuPosition="fixed"
|
||||
<DropdownInput
|
||||
options={getLanguageOptions()}
|
||||
components={{
|
||||
Option: OptionWithDivider,
|
||||
}}
|
||||
isSearchable={false}
|
||||
value={{
|
||||
label: getLocaleDisplayName(userLocale),
|
||||
value: userLocale,
|
||||
}}
|
||||
onChange={(e) => updateCurrentLocale(e.value)}
|
||||
styles={DropdownStyle}
|
||||
label={t('LANGUAGE')}
|
||||
labelProps={{ color: 'text.secondary' }}
|
||||
selectedValue={userLocale}
|
||||
setSelectedValue={updateCurrentLocale}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import ChevronRight from '@mui/icons-material/ChevronRight';
|
||||
import { Box, DialogProps, Stack } from '@mui/material';
|
||||
import { EnteDrawer } from 'components/EnteDrawer';
|
||||
import MenuSectionTitle from 'components/Menu/MenuSectionTitle';
|
||||
import Titlebar from 'components/Titlebar';
|
||||
import isElectron from 'is-electron';
|
||||
import { useState } from 'react';
|
||||
|
@ -46,10 +45,7 @@ export default function Preferences({ open, onClose, onRootClose }) {
|
|||
/>
|
||||
<Box px={'8px'}>
|
||||
<Stack py="20px" spacing="24px">
|
||||
<Box>
|
||||
<MenuSectionTitle title={t('LANGUAGE')} />
|
||||
<LanguageSelector />
|
||||
</Box>
|
||||
<LanguageSelector />
|
||||
{isElectron() && (
|
||||
<SidebarButton
|
||||
variant="contained"
|
||||
|
|
Loading…
Reference in a new issue