@pagopa/mui-italia
Version:
[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).
42 lines (41 loc) • 4.19 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const DefaultLoadingSkeleton = () => ((0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ width: "100%" }, { children: Array.from({ length: 4 }).map((_, index) => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { py: 1, px: 2 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: "40%", sx: { borderRadius: 8, lineHeight: 1.5 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: "80%", sx: { borderRadius: 8, lineHeight: 1.4 } })] }), `skeleton-${index}`))) })));
const AutocompleteContent = ({ multiple, filteredOptions, selectedOptions = [], getOptionLabel, isOptionEqualToValue, handleOptionSelect, listboxId, listboxRef, inputId, activeIndex, setActiveIndex, renderOption, loading = false, slots, }) => {
const handleOptionMouseDown = (event) => {
// Safari triggers focusOut before click, but if you
// preventDefault on mouseDown, you can stop that from happening.
// If this is removed, clicking on an option in Safari will trigger
// `handleOptionBlur`, which closes the menu, and the click will
// trigger on the element underneath instead.
// See: http://stackoverflow.com/questions/7621711/how-to-prevent-blur-running-when-clicking-a-link-in-jquery
event.preventDefault();
};
const handleOptionClick = (event, option) => {
event.preventDefault();
event.stopPropagation();
handleOptionSelect(option);
};
const isOptionSelectedInternal = (option) => {
if (multiple && Array.isArray(selectedOptions)) {
return selectedOptions.some((selected) => isOptionEqualToValue === null || isOptionEqualToValue === void 0 ? void 0 : isOptionEqualToValue(selected, option));
}
if (selectedOptions) {
return isOptionEqualToValue === null || isOptionEqualToValue === void 0 ? void 0 : isOptionEqualToValue(selectedOptions, option);
}
return;
};
const SkeletonComponent = (slots === null || slots === void 0 ? void 0 : slots.loadingSkeleton) || DefaultLoadingSkeleton;
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!loading && ((0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ id: listboxId, ref: listboxRef, role: "listbox", "aria-labelledby": inputId, sx: { p: 0 }, onMouseLeave: () => setActiveIndex(-1) }, { children: filteredOptions.map((option, index) => {
const optionLabel = getOptionLabel(option);
const isSelected = isOptionSelectedInternal(option);
return ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true, sx: {
backgroundColor: index === activeIndex ? 'rgba(0, 0, 0, 0.08)' : 'transparent',
} }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ id: `${listboxId}-option-${index}`, role: "option", tabIndex: -1, "aria-selected": isSelected, onClick: (event) => handleOptionClick(event, option), onMouseOver: () => setActiveIndex(index), onMouseDown: handleOptionMouseDown, "aria-posinset": index + 1, "aria-setsize": filteredOptions.length, sx: Object.assign({ py: 1, px: 2, cursor: 'pointer', backgroundColor: isSelected ? 'rgba(25, 118, 210, 0.08)' : 'transparent', '&:hover': {
backgroundColor: 'rgba(0, 0, 0, 0.04)',
} }, (multiple && { pr: 6 })) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: renderOption ? renderOption(option, index) : optionLabel, sx: { margin: 0, wordBreak: 'break-word' } }), multiple && ((0, jsx_runtime_1.jsx)(material_1.ListItemSecondaryAction, { children: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: isSelected, size: "small", sx: { p: 0 } }) }))] })) }), `option-${index}-${optionLabel}`));
}) }))), loading && (0, jsx_runtime_1.jsx)(SkeletonComponent, {})] }));
};
exports.default = AutocompleteContent;