@pagopa/mui-italia
Version:
[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).
137 lines (136 loc) • 9.42 kB
JavaScript
"use strict";
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PartySwitch = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const useButton_1 = require("@mui/base/useButton");
const material_1 = require("@mui/material");
const styles_1 = require("@mui/material/styles");
const _theme_1 = require("../../theme/index");
const clsx_1 = tslib_1.__importDefault(require("clsx"));
const react_1 = require("react");
const PartyAccountItem_1 = require("../PartyAccountItem");
const PartyAccountItemButton_1 = require("../PartyAccountItemButton");
const ArrowDropDownRounded_1 = tslib_1.__importDefault(require("@mui/icons-material/ArrowDropDownRounded"));
const ArrowDropUpRounded_1 = tslib_1.__importDefault(require("@mui/icons-material/ArrowDropUpRounded"));
const Close_1 = tslib_1.__importDefault(require("@mui/icons-material/Close"));
const Search_1 = tslib_1.__importDefault(require("@mui/icons-material/Search"));
const SentimentDissatisfied_1 = tslib_1.__importDefault(require("@mui/icons-material/SentimentDissatisfied"));
const useMediaQuery_1 = tslib_1.__importDefault(require("@mui/material/useMediaQuery"));
const CustomDrawer = (0, styles_1.styled)(material_1.Drawer)(() => ({
["@media only screen and (max-width: 599px)"]: {
"& .MuiDrawer-paper": {
width: "100vw",
},
},
["@media only screen and (min-width: 600px) and (max-width: 1536px)"]: {
"& .MuiDrawer-paper": {
width: "420px",
},
},
["@media only screen and (min-width: 1536px)"]: {
"& .MuiDrawer-paper": {
width: "35vw",
},
},
}));
const PartySwitch = ({ parties, onExit, currentPartyId, maxCharactersNumberMultiLineItem, maxCharactersNumberMultiLineButton, }) => {
const [selectedId, setSelectedId] = (0, react_1.useState)(currentPartyId);
const [open, setOpen] = (0, react_1.useState)(false);
const [filter, setFilter] = (0, react_1.useState)("");
const [offset, setOffset] = (0, react_1.useState)(50);
const [containerRef, setContainerRef] = (0, react_1.useState)(null);
const isMobile = (0, useMediaQuery_1.default)(_theme_1.theme.breakpoints.down("sm"));
const mobileHideStyle = (0, react_1.useMemo)(() => ({ display: { xs: "none", md: "block" } }), []);
const filteredParties = (0, react_1.useMemo)(() => {
if (!filter) {
return parties;
}
return parties.filter((e) => e.name.toLowerCase().indexOf(filter.toLowerCase()) > -1);
}, [filter, parties]);
const selectedParty = (0, react_1.useMemo)(() => filteredParties.find((e) => e.id === selectedId), [selectedId]);
(0, react_1.useEffect)(() => {
const handleScroll = () => {
if (containerRef &&
containerRef.scrollHeight - containerRef.scrollTop <=
containerRef.clientHeight + 20 &&
filteredParties.length > visibleParties.length) {
loadMoreParties();
}
};
containerRef === null || containerRef === void 0 ? void 0 : containerRef.addEventListener("scroll", handleScroll);
return () => {
containerRef === null || containerRef === void 0 ? void 0 : containerRef.removeEventListener("scroll", handleScroll);
};
}, [filteredParties, selectedParty, containerRef]);
const toggleDrawer = (openStatus) => {
setOpen(openStatus);
};
const handlePartySelection = (party) => {
setSelectedId(party.id);
setOpen(false);
if (onExit) {
onExit(party);
}
};
const handleFilterChange = (e) => {
setFilter(e.target.value);
};
const loadMoreParties = () => {
setOffset((prevOffset) => prevOffset + 50);
};
const visibleParties = filteredParties.slice(0, offset);
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(PartySwitchButton, Object.assign({ "aria-describedby": "party-selection", "aria-controls": open ? "party-selection" : undefined, "aria-haspopup": "true", "aria-expanded": open ? "true" : undefined, onClick: () => toggleDrawer(true) }, { children: [(0, jsx_runtime_1.jsx)(PartyAccountItem_1.PartyAccountItem, { partyName: selectedParty.name, partyRole: selectedParty.productRole, image: selectedParty.logoUrl, infoContainerSx: mobileHideStyle, maxCharactersNumberMultiLine: maxCharactersNumberMultiLineItem, parentPartyName: selectedParty === null || selectedParty === void 0 ? void 0 : selectedParty.parentName }), open ? ((0, jsx_runtime_1.jsx)(ArrowDropUpRounded_1.default, { sx: mobileHideStyle })) : ((0, jsx_runtime_1.jsx)(ArrowDropDownRounded_1.default, { sx: mobileHideStyle }))] })), (0, jsx_runtime_1.jsxs)(CustomDrawer, Object.assign({ anchor: "right", open: open, onKeyDownCapture: (e) => {
if (e.key === "Enter") {
const partySelected = e.target;
const selectedParty = filteredParties.find((p) => {
if ("textContent" in partySelected &&
typeof partySelected.textContent === "string") {
partySelected.textContent.includes(p.name);
}
});
if (selectedParty) {
handlePartySelection(selectedParty);
}
}
}, onClose: () => toggleDrawer(false), tabIndex: 0, PaperProps: { ref: (ref) => setContainerRef(ref) } }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ m: 3, display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "overline" }, { children: "Accedi per un altro ente" })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => toggleDrawer(false) }, { children: (0, jsx_runtime_1.jsx)(Close_1.default, { "aria-label": "chiudi" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.TextField, { label: "Cerca ente", InputProps: {
startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(Search_1.default, {}) }))),
endAdornment: filter && isMobile && ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end", onClick: () => setFilter(""), sx: { cursor: "pointer" } }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "elimina" }, { children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) })) }))),
}, variant: "outlined", size: "small", sx: { mx: 3, mb: 1 }, onChange: handleFilterChange, value: filter }), visibleParties.length > 0 &&
visibleParties.map((e) => ((0, jsx_runtime_1.jsx)(PartyAccountItemButton_1.PartyAccountItemButton, { partyName: e.name, partyRole: e.productRole, image: e.logoUrl, action: () => handlePartySelection(e), selectedItem: e.id === selectedId, maxCharactersNumberMultiLine: maxCharactersNumberMultiLineButton, parentPartyName: e.parentName }, e.id))), filteredParties.length === 0 && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "div", display: "flex", sx: {
flexDirection: "row",
justifyContent: "center",
my: 2.5,
} }, { children: [(0, jsx_runtime_1.jsx)(SentimentDissatisfied_1.default, { sx: { verticalAlign: "middle", margin: "0 10px" } }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", fontWeight: 700, fontSize: 18 }, { children: "Nessun ente trovato" }))] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", sx: { margin: "0 20px" } }, { children: "Registra un nuovo ente" }))] }))] }))] }));
};
exports.PartySwitch = PartySwitch;
const StyledSwitcherButton = (0, styles_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"],
"&.focusVisible": {
outline: "none",
boxShadow: `0 0 0 ${_theme_1.ringWidth} ${(0, styles_1.alpha)(theme.palette.primary.main, 0.4)}`,
},
"&.disabled": {
opacity: "0.5",
cursor: "default",
},
}));
const PartySwitchButton = (0, react_1.forwardRef)(function PartySwitchButton(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 })) }));
});