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

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

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