@parkassist/pa-ui-library/dist/components/ProfileButton/LanguageSelector.js

INX Platform elements

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import LabelWithIcon from "../LabelWithIcon";
import React from "react";
import { StyledMenuItem } from "./index";
import ClickAwayListener from "@mui/material/ClickAwayListener";
import Popper from '@mui/material/Popper';
import styled from '@emotion/styled';
import Paper from "@mui/material/Paper";
import Palette from "../../constants/Palette";
import { Row, Column } from '../Layout/Flex';
import { CircleFlag } from 'react-circle-flags';
import { Icons } from "../../index";
export const PaperStyled = styled(Paper)`
    background-color: ${Palette.BLACK} !important;
    color: ${Palette.WHITE_SMOKE};
    transform-origin: right top;
    margin-top: -50px;
    width: 240px;
    margin-left: -400px;
    max-height: 300px;
    overflow-y: auto;
`;
export const LanguageSelector = props => {
  const [opened, setOpened] = React.useState(false);
  const [anchorEl, setAnchorEl] = React.useState(null);
  const handleClick = event => {
    setAnchorEl(anchorEl ? null : event.currentTarget);
  };
  const {
    selectedLanguage,
    languageOptions,
    onChangeLanguage,
    label
  } = props;
  const actualSelectedLanguage = languageOptions.find(l => l.id === selectedLanguage);
  const getLanguageIcon = language => {
    if (!language) {
      return _jsx(Icons.GlobeIcon, {
        filter: Palette.FILTER_BAY_OCCUPIED
      });
    }
    return language.flagCode === "global" ? _jsx(Icons.GlobeIcon, {
      filter: Palette.FILTER_BAY_OCCUPIED
    }) : _jsx("div", {
      id: "flagIcon",
      children: _jsx(CircleFlag, {
        countryCode: language.flagCode,
        height: 20
      })
    });
  };
  const menu = _jsx(Popper, {
    open: opened,
    anchorEl: anchorEl,
    children: _jsx(ClickAwayListener, {
      onClickAway: () => setOpened(false),
      children: _jsxs(PaperStyled, {
        children: [_jsx(Row, {
          style: {
            fontSize: 12,
            height: 24,
            padding: 16,
            marginBottom: 16,
            color: Palette.WHITE
          },
          children: label
        }), _jsx(Row, {
          style: {
            maxHeight: 250,
            width: "100%",
            overflowY: "auto"
          },
          children: _jsx(Column, {
            style: {
              width: "100%"
            },
            children: languageOptions.map(language => {
              const checkIcon = language.id === selectedLanguage ? _jsx(Icons.DoneIcon, {
                filter: Palette.FILTER_WHITE
              }) : _jsx("div", {});
              return _jsx(StyledMenuItem, {
                onClick: () => {
                  onChangeLanguage(language.id);
                },
                children: _jsx(LabelWithIcon, {
                  style: {
                    width: 200,
                    justifyContent: "space-between"
                  },
                  text: language.name,
                  textStyle: {
                    width: 150,
                    textAlign: "left"
                  },
                  leftIconStyle: {
                    filter: "none !important"
                  },
                  leftIcon: getLanguageIcon(language),
                  rightIcon: checkIcon
                })
              });
            })
          })
        })]
      })
    })
  });
  const button = _jsx(StyledMenuItem, {
    onClick: e => {
      setOpened(!opened);
      handleClick(e);
    },
    children: _jsx(LabelWithIcon, {
      text: label,
      leftIcon: getLanguageIcon(actualSelectedLanguage)
    })
  });
  return _jsxs(_Fragment, {
    children: [menu, button]
  });
};