-
Notifications
You must be signed in to change notification settings - Fork 36
/
InstallerLocaleSwitcher.jsx
81 lines (73 loc) · 2.65 KB
/
InstallerLocaleSwitcher.jsx
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
/*
* Copyright (c) [2023] SUSE LLC
*
* All Rights Reserved.
*
* This program is free software; you can redistribute it and/or modify it
* under the terms of version 2 of the GNU General Public License as published
* by the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along
* with this program; if not, contact SUSE LLC.
*
* To contact SUSE LLC about this file by physical or electronic mail, you may
* find current contact information at www.suse.com.
*/
import React, { useCallback, useState } from "react";
import { Link } from "react-router-dom";
import { FormSelect, FormSelectOption, Popover } from "@patternfly/react-core";
import { Icon } from "../layout";
import { _ } from "~/i18n";
import { useInstallerL10n } from "~/context/installerL10n";
import supportedLanguages from "~/languages.json";
export default function InstallerLocaleSwitcher() {
const { language, changeLanguage } = useInstallerL10n();
const [selected, setSelected] = useState(null);
const onChange = useCallback((_event, value) => {
setSelected(value);
changeLanguage(value);
}, [setSelected, changeLanguage]);
// sort by the language code to maintain consistent order
const options = Object.keys(supportedLanguages).sort()
.map(id => <FormSelectOption key={id} value={id} label={supportedLanguages[id]} />);
// TRANSLATORS: help text for the language selector in the sidebar,
// %s will be replaced by the "Localization" page link
const [msg1, msg2] = _("The language used by the installer. The language \
for the installed system can be set in the %s page.").split("%s");
// "hide" is a function which closes the popover
const description = (hide) => (
<>
{msg1}
{/* close the popover after clicking the link */}
<Link to="/l10n" onClick={hide}>
{_("Localization")}
</Link>
{msg2}
</>
);
return (
<>
<h3>
<Icon name="translate" size="s" />
{_("Language")}
{/* smaller width of the popover so it does not overflow outside the sidebar */}
<Popover showClose={false} bodyContent={description} maxWidth="15em">
<Icon name="info" size="xxs" />
</Popover>
</h3>
<FormSelect
id="language"
aria-label={_("language")}
value={selected || language}
onChange={onChange}
>
{options}
</FormSelect>
</>
);
}