@pagopa/mui-italia
Version:
[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).
79 lines (78 loc) • 4.25 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ProductSwitch = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const clsx_1 = tslib_1.__importDefault(require("clsx"));
const material_1 = require("@mui/material");
const system_1 = require("@mui/system");
const useButton_1 = require("@mui/base/useButton");
const ArrowDropUpRounded_1 = tslib_1.__importDefault(require("@mui/icons-material/ArrowDropUpRounded"));
const ArrowDropDownRounded_1 = tslib_1.__importDefault(require("@mui/icons-material/ArrowDropDownRounded"));
const _theme_1 = require("../../theme/index");
const ProductSwitch = ({ products,
/* token, */
onExit, currentProductId, }) => {
const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
const [selectedId, setSelectedId] = (0, react_1.useState)(currentProductId);
const open = Boolean(anchorEl);
const selectedProduct = (0, react_1.useMemo)(() => products.find((p) => p.id === selectedId), [selectedId]);
(0, react_1.useEffect)(() => {
setSelectedId(currentProductId);
}, [currentProductId]);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = (product) => {
if (product) {
if (product.linkType === "internal") {
setSelectedId(product.id);
}
if (onExit) {
onExit(product);
}
}
setAnchorEl(null);
};
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(ProductSwitchButton, Object.assign({ "aria-describedby": "product-selection", "aria-controls": open ? "product-selection" : undefined, "aria-haspopup": "true", "aria-expanded": open ? "true" : undefined, onClick: handleClick }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ sx: { fontSize: { xs: 20, sm: 28 }, fontWeight: "bold" } }, { children: selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.title })), open ? (0, jsx_runtime_1.jsx)(ArrowDropUpRounded_1.default, {}) : (0, jsx_runtime_1.jsx)(ArrowDropDownRounded_1.default, {})] })), (0, jsx_runtime_1.jsx)(material_1.Menu, Object.assign({ id: "product-selection", anchorOrigin: { vertical: "bottom", horizontal: "left" }, anchorEl: anchorEl, open: open, onClose: () => handleClose(), MenuListProps: {
"aria-labelledby": "Seleziona i tuoi prodotti",
} }, { children: products.map((product) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: () => handleClose(product), selected: product.id === selectedId }, { children: product.title }), product.id))) }))] }));
};
exports.ProductSwitch = ProductSwitch;
const StyledSwitcherButton = (0, system_1.styled)("div")(({ theme }) => ({
display: "flex",
alignItems: "center",
borderRadius: theme.spacing(1),
backgroundColor: "transparent",
padding: 0,
cursor: "pointer",
border: "none",
transitionProperty: ["color", "background-color", "box-shadow"],
/*
"&:not(.disabled):hover": {},
"&.active": {},
*/
"&.focusVisible": {
borderRadius: `${_theme_1.focusBorderRadius}`,
outline: `solid ${_theme_1.focusWidth} ${theme.palette.primary.main}`,
outlineOffset: `${_theme_1.focusOffset}`,
boxShadow: "none",
},
"&.disabled": {
opacity: "0.5",
cursor: "default",
},
}));
const ProductSwitchButton = (0, react_1.forwardRef)(function ProductSwitchButton(props, ref) {
const { children, disabled } = props;
const { focusVisible, getRootProps } = (0, useButton_1.useButton)(Object.assign(Object.assign({}, props), { rootRef: ref }));
const classes = {
disabled,
focusVisible,
};
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(StyledSwitcherButton, Object.assign({ sx: {
transition: `${_theme_1.theme.transitions.duration.short}ms ${_theme_1.theme.transitions.easing.easeInOut}`,
}, className: (0, clsx_1.default)(classes) }, getRootProps(), { children: children })) }));
});