@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 { Icons } from "../../index";
export const PaperStyled = styled(Paper)`
    background-color: ${Palette.BLACK} !important;
    color: ${Palette.WHITE_SMOKE};
    transform-origin: right top;
    margin-top: -54px;
    width: 240px;
    margin-left: -392px;
    max-height: 300px;
    overflow-y: auto;
`;
export const EmptyMenu = props => {
  const {
    children,
    style,
    open,
    onClose,
    anchorEl
  } = props;
  return _jsx(Popper, {
    open: open,
    anchorEl: anchorEl,
    sx: {
      zIndex: 1
    },
    style: {
      zIndex: 1
    },
    children: _jsx(ClickAwayListener, {
      onClickAway: onClose,
      children: _jsx(PaperStyled, {
        style: style,
        children: children
      })
    })
  });
};
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
      });
    }
    if (language.flagComponent) {
      return _jsx("div", {
        id: "flagIcon",
        children: language.flagComponent
      });
    }
    return language.flagCode === "global" ? _jsx(Icons.GlobeIcon, {
      filter: Palette.FILTER_BAY_OCCUPIED
    }) : _jsx("div", {
      id: "flagIcon",
      children: _jsx("img", {
        src: `https://hatscripts.github.io/circle-flags/flags/${language.flagCode}.svg`,
        width: '20',
        crossOrigin: "anonymous"
      })
    });
  };
  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, {
                selected: language.id === selectedLanguage,
                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, {
    selected: opened,
    onClick: e => {
      setOpened(!opened);
      handleClick(e);
    },
    children: _jsx(LabelWithIcon, {
      text: label,
      style: {
        width: '100%',
        justifyContent: 'space-between'
      },
      textStyle: {
        width: 200,
        textAlign: 'left'
      },
      leftIcon: getLanguageIcon(actualSelectedLanguage),
      rightIcon: _jsx(Icons.ClosedArrowIcon, {})
    })
  });
  return _jsxs(_Fragment, {
    children: [menu, button]
  });
};