@pagopa/mui-italia
Version:
[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).
64 lines (63 loc) • 3.2 kB
JavaScript
"use strict";
'use client';
Object.defineProperty(exports, "__esModule", { value: true });
exports.Banner = 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 model_1 = require("./model");
const shared_1 = require("./shared");
const Primary_1 = require("./layouts/Primary");
const Secondary_1 = require("./layouts/Secondary");
const Tertiary_1 = require("./layouts/Tertiary");
/**
* Variant router.
* Keeps Banner as a thin orchestrator: it selects the right layout component
* based on the resolved variant and passes only the minimal data needed.
*/
function renderBannerLayout(args) {
const { view, model, title, message, cta, onClose, closeAriaLabel, titleId } = args;
switch (view.variant) {
case 'primary':
return ((0, jsx_runtime_1.jsx)(Primary_1.Primary, { model: model, view: view, title: title, message: message, cta: cta, onClose: onClose, closeAriaLabel: closeAriaLabel, titleId: titleId }));
case 'secondary':
return ((0, jsx_runtime_1.jsx)(Secondary_1.Secondary, { model: model, view: view, title: title, message: message, cta: cta, onClose: onClose, closeAriaLabel: closeAriaLabel, titleId: titleId }));
case 'tertiary':
default:
return ((0, jsx_runtime_1.jsx)(Tertiary_1.Tertiary, { model: model, view: view, title: title, message: message, cta: cta, onClose: onClose, closeAriaLabel: closeAriaLabel, titleId: titleId }));
}
}
const Banner = (props) => {
const { title, message, onClose, closeAriaLabel, cta } = props, rest = tslib_1.__rest(props, ["title", "message", "onClose", "closeAriaLabel", "cta"]);
const titleId = (0, react_1.useId)();
const ctaId = (0, react_1.useId)();
const resolvedCta = cta ? Object.assign(Object.assign({}, cta), { id: ctaId }) : undefined;
/**
* Normalize optional props (variant defaults) once,
* so downstream helpers and layouts can assume they are always defined.
*/
const normalizedProps = (0, model_1.normalizeProps)(props);
const variant = normalizedProps.variant;
const theme = (0, material_1.useTheme)();
const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'));
const direction = variant === 'tertiary' || !isMobile ? 'horizontal' : 'vertical';
/**
* Model = "what to render" (derived flags + resolved nodes).
* View = "how to render it" (derived layout numbers based on direction/variant).
*/
const model = (0, model_1.computeModel)(normalizedProps, direction);
const view = (0, model_1.computeViewState)(normalizedProps, direction);
const content = renderBannerLayout({
view,
model,
title,
message,
cta: resolvedCta,
onClose,
closeAriaLabel: closeAriaLabel !== null && closeAriaLabel !== void 0 ? closeAriaLabel : 'Close',
titleId,
});
return ((0, jsx_runtime_1.jsx)(shared_1.Root, Object.assign({ colorStyle: model.colorStyle }, rest, { children: (0, jsx_runtime_1.jsx)(shared_1.Inner, { children: content }) })));
};
exports.Banner = Banner;