cdn-frontend/src/pages/settings/appearance/components/LanguageComponent.js

55 lines
1.2 KiB
JavaScript

import React from "react";
import PropTypes from "prop-types";
import Flag from "react-flags";
import { IconButton } from "@material-ui/core";
import LanguageMenu from "./LanguageMenu";
const LanguageComponent = ({
languageIsSet,
anchorEl,
onMenuOpen,
onLanguageChange,
onClose,
flag,
getFlagsPath
}) => {
return (
<>
<IconButton
aria-controls="language-menu"
aria-haspopup="true"
onClick={onMenuOpen}
color="inherit"
>
{languageIsSet && (
<Flag
name={flag.name}
format="png"
pngSize={32}
shiny={true}
basePath={getFlagsPath()}
alt={flag.alt}
/>
)}
</IconButton>
<LanguageMenu
anchorEl={anchorEl}
onLanguageChange={onLanguageChange}
onClose={onClose}
/>
</>
);
};
LanguageComponent.propTypes = {
languageIsSet: PropTypes.bool.isRequired,
anchorEl: PropTypes.object,
onMenuOpen: PropTypes.func.isRequired,
onLanguageChange: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired,
flag: PropTypes.object.isRequired,
getFlagsPath: PropTypes.func.isRequired
};
export default LanguageComponent;