@pagopa/mui-italia
Version:
[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).
55 lines (54 loc) • 3.3 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 = 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 isFlatLanguages(languages) {
return typeof languages.it === 'string';
}
function LangSwitch({ currentLangCode = 'it', languages, onLanguageChanged, }) {
const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
const open = Boolean(anchorEl);
const flat = isFlatLanguages(languages);
const getLabel = (langCode) => {
var _a;
if (flat) {
return languages[langCode] || languages.it;
}
const currentLangLabels = (_a = languages[currentLangCode]) !== null && _a !== void 0 ? _a : languages.it;
return currentLangLabels[langCode] || languages.it.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.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(ButtonNaked_1.ButtonNaked, Object.assign({ id: "lang-menu-button", sx: {
color: 'text.primary',
justifyContent: 'space-between',
p: 0,
height: 'auto',
display: 'flex',
}, "aria-label": `Seleziona lingua: ${getLabel(currentLangCode)}`, "aria-haspopup": "true", "aria-expanded": open, "aria-controls": open ? 'lang-menu' : 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: getLabel(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({ id: "lang-menu", anchorEl: anchorEl, open: open, onClose: handleClose, MenuListProps: { 'aria-labelledby': 'lang-menu-button' } }, { children: Object.keys(languages).map((langCode) => {
const code = langCode;
const label = getLabel(code);
return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ "aria-label": label, onClick: wrapUpdateActiveLang(code), lang: flat ? code : undefined }, { children: label }), code));
}) })))] }));
}
exports.LangSwitch = LangSwitch;