@pagopa/mui-italia
Version:
[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).
43 lines (42 loc) • 4.31 kB
JavaScript
"use strict";
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.HeaderProduct = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const material_1 = require("@mui/material");
const ProductSwitch_1 = require("../ProductSwitch");
const PartySwitch_1 = require("../PartySwitch");
const PartyAccountItem_1 = require("../PartyAccountItem");
const HeaderProduct = ({ borderBottom, borderColor, chipColor = "primary", chipLabel, chipSize = "small", maxCharactersNumberMultiLineButton, maxCharactersNumberMultiLineItem, onSelectedParty, onSelectedProduct = () => { }, partyId, partyList, productId, productsList, }) => {
const selectedProduct = (0, react_1.useMemo)(() => productId
? productsList.find((p) => p.id === productId)
: productsList[0], [productId, productsList]);
const [iconSelected, setIconSelected] = (0, react_1.useState)(selectedProduct.icon || null);
const selectedParty = (0, react_1.useMemo)(() => {
if (!partyList) {
return;
}
return partyId ? partyList.find((e) => e.id === partyId) : partyList[0];
}, [partyList, partyId]);
const ChipComponent = ((0, jsx_runtime_1.jsx)(material_1.Chip, { sx: {
py: 0,
"& .MuiChip-labelSmall": {
py: "2px",
},
}, color: chipColor, label: chipLabel, size: chipSize }));
const onSelectedProductChangeIcon = (e) => {
setIconSelected(e.icon);
onSelectedProduct(e);
};
return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "div", display: "flex", alignItems: "center", sx: {
backgroundColor: "background.paper",
borderBottom: borderBottom !== null && borderBottom !== void 0 ? borderBottom : 1,
borderColor: borderColor !== null && borderColor !== void 0 ? borderColor : "divider",
boxSizing: "border-box",
minHeight: { xs: "auto", md: "80px" },
} }, { children: (0, jsx_runtime_1.jsx)(material_1.Container, Object.assign({ maxWidth: false }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ alignItems: "center", direction: "row", justifyContent: "space-between", spacing: 2, sx: { py: 2 } }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ alignItems: "center", direction: "row" }, { children: [!!iconSelected && (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: iconSelected }), productsList.length > 1 && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ spacing: 2, direction: "row", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(ProductSwitch_1.ProductSwitch, { currentProductId: selectedProduct.id, products: productsList, onExit: onSelectedProductChangeIcon }), chipLabel && chipLabel !== "" && ChipComponent] }))), selectedProduct && productsList.length === 1 && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ spacing: 2, direction: "row", alignItems: "center" }, { 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 })), chipLabel && chipLabel !== "" && ChipComponent] })))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ maxWidth: "25rem" }, { children: [partyList && partyList.length > 1 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PartySwitch_1.PartySwitch, { currentPartyId: selectedParty.id, parties: partyList, onExit: onSelectedParty, maxCharactersNumberMultiLineItem: maxCharactersNumberMultiLineItem, maxCharactersNumberMultiLineButton: maxCharactersNumberMultiLineButton }) })), partyList && selectedParty && partyList.length === 1 && ((0, jsx_runtime_1.jsx)(PartyAccountItem_1.PartyAccountItem, { maxCharactersNumberMultiLine: maxCharactersNumberMultiLineItem, partyName: selectedParty.name, partyRole: selectedParty.productRole, image: selectedParty.logoUrl, infoContainerSx: {
display: { xs: "none", md: "block" },
}, parentPartyName: selectedParty.parentName }))] }))] })) })) })));
};
exports.HeaderProduct = HeaderProduct;