Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): use chakra menu for language picker

Browse Source
This commit is contained in:
psychedelicious 2023-05-12 19:50:34 +10:00
parent 4d6eea7e81
commit 7d582553f2
1 changed files with 30 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
invokeai/frontend/web/src/features/system/components/LanguagePicker.tsx
View File

@ -1,15 +1,19 @@
import type { ReactNode } from 'react'; import {
Menu,
import { VStack } from '@chakra-ui/react'; MenuButton,
import IAIButton from 'common/components/IAIButton'; MenuItemOption,
MenuList,
MenuOptionGroup,
Tooltip,
} from '@chakra-ui/react';
import IAIIconButton from 'common/components/IAIIconButton'; import IAIIconButton from 'common/components/IAIIconButton';
import IAIPopover from 'common/components/IAIPopover';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaCheck, FaLanguage } from 'react-icons/fa'; import { FaLanguage } from 'react-icons/fa';
import i18n from 'i18n'; import i18n from 'i18n';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { languageSelector } from '../store/systemSelectors'; import { languageSelector } from '../store/systemSelectors';
import { languageChanged } from '../store/systemSlice'; import { languageChanged } from '../store/systemSlice';
import { map } from 'lodash-es';
export const LANGUAGES = { export const LANGUAGES = {
ar: i18n.t('common.langArabic', { lng: 'ar' }), ar: i18n.t('common.langArabic', { lng: 'ar' }),
@ -35,43 +39,29 @@ export default function LanguagePicker() {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const language = useAppSelector(languageSelector); const language = useAppSelector(languageSelector);
const renderLanguagePicker = () => {
const languagesToRender: ReactNode[] = [];
Object.keys(LANGUAGES).forEach((lang) => {
const l = lang as keyof typeof LANGUAGES;
languagesToRender.push(
<IAIButton
key={lang}
isChecked={language === l}
leftIcon={language === l ? <FaCheck /> : undefined}
onClick={() => dispatch(languageChanged(l))}
aria-label={LANGUAGES[l]}
size="sm"
minWidth="200px"
>
{LANGUAGES[l]}
</IAIButton>
);
});
return languagesToRender;
};
return ( return (
<IAIPopover <Tooltip title={t('common.languagePickerLabel')}>
triggerComponent={ <Menu closeOnSelect={false}>
<IAIIconButton <MenuButton
aria-label={t('common.languagePickerLabel')} as={IAIIconButton}
tooltip={t('common.languagePickerLabel')}
icon={<FaLanguage />} icon={<FaLanguage />}
size="sm"
variant="link" variant="link"
data-variant="link" aria-label={t('common.languagePickerLabel')}
fontSize={26}
/> />
} <MenuList>
> <MenuOptionGroup value={language}>
<VStack>{renderLanguagePicker()}</VStack> {map(LANGUAGES, (languageName, l: keyof typeof LANGUAGES) => (
</IAIPopover> <MenuItemOption
key={l}
value={l}
onClick={() => dispatch(languageChanged(l))}
>
{languageName}
</MenuItemOption>
))}
</MenuOptionGroup>
</MenuList>
</Menu>
</Tooltip>
); );
} }