%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/emergentqj/actioncivile/pre-auth/.632e77b3fb93bc8da5b589b869bc0037/static/js/components/LanguageDropdown/
Upload File :
Create Path :
Current File : /home/emergentqj/actioncivile/pre-auth/.632e77b3fb93bc8da5b589b869bc0037/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));

Zerion Mini Shell 1.0