-
Notifications
You must be signed in to change notification settings - Fork 474
/
LanguageSwitch.tsx
94 lines (81 loc) · 2.89 KB
/
LanguageSwitch.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import * as React from 'react';
import { kialiStyle } from 'styles/StyleUtils';
import { Dropdown, DropdownItem, DropdownList, MenuToggle, MenuToggleElement, Tooltip } from '@patternfly/react-core';
import { KialiIcon } from 'config/KialiIcon';
import { GlobalActions } from 'actions/GlobalActions';
import { store } from 'store/ConfigStore';
import { Language } from 'types/Common';
import { KialiAppState } from 'store/Store';
import { connect } from 'react-redux';
import { i18n } from 'i18n';
import { useKialiTranslation } from 'utils/I18nUtils';
const menuToggleStyle = kialiStyle({
marginTop: '0.25rem',
verticalAlign: '-0.125rem'
});
const iconStyle = kialiStyle({
verticalAlign: '-0.375rem',
$nest: {
'& svg': {
width: '1.5rem',
height: '1.5rem'
}
}
});
const checkStyle = kialiStyle({
marginLeft: '0.5rem'
});
type LanguageSwitchProps = {
language: string;
};
export const LanguageSwitchComponent: React.FC<LanguageSwitchProps> = ({ language }) => {
const [isDropdownOpen, setIsDropdownOpen] = React.useState<boolean>(false);
const { t } = useKialiTranslation();
const languageItems: React.ReactNode[] = [
<DropdownItem key="English" onClick={() => switchLanguage(Language.ENGLISH)}>
<span>English</span>
{language === Language.ENGLISH && <KialiIcon.Check className={checkStyle} />}
</DropdownItem>,
<DropdownItem key="Chinese" onClick={() => switchLanguage(Language.CHINESE)}>
<span>中文</span>
{language === Language.CHINESE && <KialiIcon.Check className={checkStyle} />}
</DropdownItem>
];
const switchLanguage = (language: string): void => {
i18n.changeLanguage(language).then(() => store.dispatch(GlobalActions.setLanguage(language)));
};
const onDropdownSelect = (): void => {
setIsDropdownOpen(!isDropdownOpen);
};
return (
<Tooltip position="bottom" content={<>{t('Switch language')}</>} trigger="mouseenter click" exitDelay={0}>
<Dropdown
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
ref={toggleRef}
className={menuToggleStyle}
data-test="switch-language-button"
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
aria-label="Switch language"
variant="plain"
isExpanded={isDropdownOpen}
>
<KialiIcon.Language className={iconStyle} />
</MenuToggle>
)}
isOpen={isDropdownOpen}
popperProps={{ position: 'center' }}
onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}
onSelect={onDropdownSelect}
>
<DropdownList>{languageItems}</DropdownList>
</Dropdown>
</Tooltip>
);
};
const mapStateToProps = (state: KialiAppState): LanguageSwitchProps => {
return {
language: state.globalState.language
};
};
export const LanguageSwitch = connect(mapStateToProps)(LanguageSwitchComponent);