@pagopa/mui-italia
Version:
[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).
44 lines (43 loc) • 3.06 kB
JavaScript
"use strict";
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LangSwitch = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importStar(require("react"));
const material_1 = require("@mui/material");
const ButtonNaked_1 = require("../ButtonNaked");
/* Icons */
const KeyboardArrowDownRounded_1 = tslib_1.__importDefault(require("@mui/icons-material/KeyboardArrowDownRounded"));
const KeyboardArrowUpRounded_1 = tslib_1.__importDefault(require("@mui/icons-material/KeyboardArrowUpRounded"));
function LangSwitch({ currentLangCode = "it", languages, onLanguageChanged, }) {
var _a;
const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
const open = Boolean(anchorEl);
// checks if currentLangCode is included in languages,
// if not uses the italian labels, this allows non italian lang labels and
// languages to be optional while being backward compatible
const currentLangLabels = (_a = languages[currentLangCode]) !== null && _a !== void 0 ? _a : languages.it;
const handleClick = (e) => {
const currentTarget = e.currentTarget;
setAnchorEl(currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const wrapUpdateActiveLang = (newLang) => (e) => {
if (e) {
e.preventDefault();
}
onLanguageChanged(newLang);
handleClose();
};
return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(ButtonNaked_1.ButtonNaked, Object.assign({ sx: {
color: "text.primary",
justifyContent: "space-between",
p: 0,
height: "auto",
display: "flex",
}, "aria-label": "lingua", "aria-haspopup": "true", "aria-expanded": open ? "true" : undefined, onClick: handleClick }, { children: [currentLangCode && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "span", sx: { textAlign: "left" } }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "inherit", component: "span", variant: "subtitle2" }, { children: currentLangLabels[currentLangCode] })) }))), open ? ((0, jsx_runtime_1.jsx)(KeyboardArrowUpRounded_1.default, { fontSize: "small" })) : ((0, jsx_runtime_1.jsx)(KeyboardArrowDownRounded_1.default, { fontSize: "small" }))] })), Boolean(Object.keys(languages).length > 0) && ((0, jsx_runtime_1.jsx)(material_1.Menu, Object.assign({ anchorEl: anchorEl, open: open, onClose: handleClose, MenuListProps: { "aria-labelledby": "lang-menu-button" } }, { children: Object.keys(languages).map((langCode, i) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ "aria-label": currentLangLabels[langCode], onClick: wrapUpdateActiveLang(langCode) }, { children: currentLangLabels[langCode] }), i))) })))] }) }));
}
exports.LangSwitch = LangSwitch;