%PDF- %PDF-
Direktori : /home/emergentqj/actioncivile/pre-auth/.8352c036a19b0051d0217d27d25e3f4a/static/js/components/LanguageDropdown/ |
Current File : /home/emergentqj/actioncivile/pre-auth/.8352c036a19b0051d0217d27d25e3f4a/static/js/components/LanguageDropdown/index.jsx |
import React, { useRef, useState } from "react"; import { arrayOf, func, object, string, shape, } from "prop-types"; import { withTranslation, useTranslation } from "react-i18next"; import { useNavigate, useLocation } from "react-router-dom"; import { getUniversalCookies } from "utils/cookies"; import { withStyles } from "@material-ui/core/styles"; import { Hidden } from "@material-ui/core"; import { trackMixpanelActions, getTranslationItem } from "utils"; import { setLanguageCookie } from "utils/languages"; import MIXPANEL_ACTIONS from "constants/mixpanel_actions"; import useOnClickOutside from "utils/useOnClickOutside"; import DropdownMenu from "components/DropdownMenu"; import { ArrowDropDown, Language } from "@material-ui/icons"; const styles = (theme) => ({ flagWrapper: { display: "flex", flexDirection: "row", alignItems: "center", width: "100%", }, icon: { marginRight: 10, color: theme.palette.text.secondary, }, name: { marginTop: 3, color: theme.palette.text.primary, }, arrow: { color: theme.palette.text.secondary, }, }); function LanguageDropdown({ i18n, classes, choosableLanguages, countryCode, languageManuallySet, }) { const [dropdownOpen, setDropdownOpen] = useState(false); const [t] = useTranslation(); const ref = useRef(); useOnClickOutside(ref, () => setDropdownOpen(false)); if (!countryCode) return null; const language = getTranslationItem(i18n.language); return ( <div ref={ref} className={classes.wrapper} onClick={(reference) => { if (!dropdownOpen) { setDropdownOpen(true); return; } const isMenuItemClicked = reference?.target?.classList?.[0]?.includes("dropdownItemButton"); if (isMenuItemClicked) { setDropdownOpen(false); } }} onKeyPress={(event) => { if (event.key === "Enter") { setDropdownOpen(!dropdownOpen); } }} role="button" tabIndex="0" > {language && ( <div className={classes.flagWrapper}> <Hidden smDown> <Language className={classes.icon} /> </Hidden> <span className={classes.name}>{language.name}</span> <ArrowDropDown className={classes.arrow} style={{ transform: dropdownOpen ? "rotate(180deg)" : "", }} /> </div> )} {dropdownOpen && ( <DropdownMenu title={t("auth.login.selectLanguage")}> {choosableLanguages.map(({ code, name }) => ( <LanguageDropdownButton key={code} i18n={i18n} code={code} name={name} classes={classes} languageManuallySet={languageManuallySet} /> ))} </DropdownMenu> )} </div> ); } export function LanguageDropdownButton({ classes, code, i18n, languageManuallySet, name, }) { const navigate = useNavigate(); const location = useLocation(); const changeLanguage = () => { const country = getUniversalCookies().get("epCountry"); const newSearchParams = { lang: code }; if (country) { newSearchParams.country = country; } const params = new URLSearchParams(newSearchParams); const navigateTo = `${location.pathname}?${params.toString()}`; navigate(navigateTo, { replace: true }); i18n.changeLanguage(code); languageManuallySet(); trackMixpanelActions(MIXPANEL_ACTIONS.LANGUAGE_SWITCHED, { category: "LanguageSwitch", channel: "DesktopWeb", eventType: "click", label: code, }); setLanguageCookie(code); }; return ( <li className={`${classes.dropdownItem} ${ code === i18n.language && classes.selectedItem }`} > <div className={classes.dropdownItemButton} onKeyPress={(event) => { if (event.key === "Enter") { changeLanguage(); } }} onClick={() => { changeLanguage(); }} role="button" tabIndex={0} > {name} </div> </li> ); } LanguageDropdownButton.propTypes = { code: string.isRequired, name: string.isRequired, i18n: object.isRequired, classes: object.isRequired, languageManuallySet: func.isRequired, }; LanguageDropdown.propTypes = { countryCode: string, choosableLanguages: arrayOf(shape({ code: string.isRequired, name: string.isRequired, })).isRequired, i18n: object.isRequired, classes: object.isRequired, languageManuallySet: func.isRequired, }; LanguageDropdown.defaultProps = { countryCode: null, }; export default withTranslation()(withStyles(styles)(LanguageDropdown));