diff options
Diffstat (limited to 'packages/demobank-ui/src/components/menu/LangSelector.tsx')
-rw-r--r-- | packages/demobank-ui/src/components/menu/LangSelector.tsx | 63 |
1 files changed, 33 insertions, 30 deletions
diff --git a/packages/demobank-ui/src/components/menu/LangSelector.tsx b/packages/demobank-ui/src/components/menu/LangSelector.tsx index 221237a5b..69d6ee64a 100644 --- a/packages/demobank-ui/src/components/menu/LangSelector.tsx +++ b/packages/demobank-ui/src/components/menu/LangSelector.tsx @@ -19,23 +19,23 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { h, VNode, Fragment } from 'preact'; -import { useCallback, useEffect, useState } from 'preact/hooks'; -import langIcon from '../../assets/icons/languageicon.svg'; -import { useTranslationContext } from '../../context/translation'; -import { strings as messages } from '../../i18n/strings'; +import { h, VNode, Fragment } from "preact"; +import { useCallback, useEffect, useState } from "preact/hooks"; +import langIcon from "../../assets/icons/languageicon.svg"; +import { useTranslationContext } from "../../context/translation"; +import { strings as messages } from "../../i18n/strings"; type LangsNames = { [P in keyof typeof messages]: string; }; const names: LangsNames = { - es: 'Español [es]', - en: 'English [en]', - fr: 'Français [fr]', - de: 'Deutsch [de]', - sv: 'Svenska [sv]', - it: 'Italiano [it]', + es: "Español [es]", + en: "English [en]", + fr: "Français [fr]", + de: "Deutsch [de]", + sv: "Svenska [sv]", + it: "Italiano [it]", }; function getLangName(s: keyof LangsNames | string): string { @@ -47,36 +47,38 @@ function getLangName(s: keyof LangsNames | string): string { export function LangSelectorLikePy(): VNode { const [updatingLang, setUpdatingLang] = useState(false); const { lang, changeLanguage } = useTranslationContext(); - const [hidden, setHidden] = useState(true) + const [hidden, setHidden] = useState(true); useEffect(() => { - function bodyKeyPress(event:KeyboardEvent) { - if (event.code === 'Escape') - setHidden(true); - + function bodyKeyPress(event: KeyboardEvent) { + if (event.code === "Escape") setHidden(true); } - function bodyOnClick(event:Event) { + function bodyOnClick(event: Event) { setHidden(true); } - document.body.addEventListener('click', bodyOnClick) - document.body.addEventListener('keydown', bodyKeyPress as any) + document.body.addEventListener("click", bodyOnClick); + document.body.addEventListener("keydown", bodyKeyPress as any); return () => { - document.body.removeEventListener('keydown', bodyKeyPress as any) - document.body.removeEventListener('click', bodyOnClick) - } - },[]) + document.body.removeEventListener("keydown", bodyKeyPress as any); + document.body.removeEventListener("click", bodyOnClick); + }; + }, []); return ( <Fragment> - <button name="language" onClick={(ev) => { - setHidden(h => !h); - ev.stopPropagation(); - }}> + <button + name="language" + onClick={(ev) => { + setHidden((h) => !h); + ev.stopPropagation(); + }} + > {getLangName(lang)} </button> - <div id="lang" class={hidden ? 'hide' : ''}> + <div id="lang" class={hidden ? "hide" : ""}> <div style="position: relative; overflow: visible;"> <div class="nav" - style="position: absolute; max-height: 60vh; overflow-y: scroll"> + style="position: absolute; max-height: 60vh; overflow-y: scroll" + > {Object.keys(messages) .filter((l) => l !== lang) .map((l) => ( @@ -88,7 +90,8 @@ export function LangSelectorLikePy(): VNode { onClick={() => { changeLanguage(l); setUpdatingLang(false); - }}> + }} + > {getLangName(l)} </a> ))} |