@etsoo/materialui
Version:
TypeScript Material-UI Implementation
78 lines (77 loc) • 3.75 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ItemList = ItemList;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const shared_1 = require("@etsoo/shared");
const Button_1 = __importDefault(require("@mui/material/Button"));
const Dialog_1 = __importDefault(require("@mui/material/Dialog"));
const DialogTitle_1 = __importDefault(require("@mui/material/DialogTitle"));
const DialogContent_1 = __importDefault(require("@mui/material/DialogContent"));
const List_1 = __importDefault(require("@mui/material/List"));
const ListItemButton_1 = __importDefault(require("@mui/material/ListItemButton"));
const ListItemText_1 = __importDefault(require("@mui/material/ListItemText"));
/**
* Item list component
* @param props Properties
*/
function ItemList(props) {
// properties destructure
const { buttonLabel, className, color = "primary", keepClick = false, items, idField = "id", labelField = "label", minWidth, icon, onClose, selectedValue, size = "medium", title, variant = "outlined" } = props;
// Get label
const getLabel = (item) => {
if (typeof labelField === "function") {
return labelField(item);
}
else {
return shared_1.DataTypes.convert(item[labelField], "string") ?? "";
}
};
// Dialog open or not state
const [open, setOpen] = react_1.default.useState(false);
// Default state
const defaultItem = items.find((item) => item[idField] === selectedValue);
// Current item
const [currentItem, setCurrentItem] = react_1.default.useState(defaultItem);
// Click handler
const clickHandler = () => {
if (items.length < 1 ||
(items.length === 1 && !keepClick && defaultItem != null)) {
return;
}
// Open the dialog
setOpen(true);
};
// Close handler
const closeHandler = () => {
if (!open)
return;
// Close the dialog
setOpen(false);
// Emit close event
if (onClose) {
onClose(currentItem, false);
}
};
// Close item handler
const closeItemHandler = (item) => {
if (!keepClick) {
// Update the current item
setCurrentItem(item);
}
// Close the dialog
setOpen(false);
// Emit close event
if (onClose) {
onClose(item, true);
}
};
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, { className: className, variant: variant, startIcon: icon, color: color, size: size, onClick: clickHandler, children: buttonLabel ?? (currentItem ? getLabel(currentItem) : undefined) }), (0, jsx_runtime_1.jsxs)(Dialog_1.default, { "aria-labelledby": "dialog-title", open: open, onClose: closeHandler, children: [title && (0, jsx_runtime_1.jsx)(DialogTitle_1.default, { id: "dialog-title", children: title }), (0, jsx_runtime_1.jsx)(DialogContent_1.default, { sx: { minWidth }, children: (0, jsx_runtime_1.jsx)(List_1.default, { children: items.map((item) => {
const id = item[idField];
return ((0, jsx_runtime_1.jsx)(ListItemButton_1.default, { disabled: id === (currentItem ? currentItem[idField] : undefined) &&
!keepClick, onClick: () => closeItemHandler(item), children: (0, jsx_runtime_1.jsx)(ListItemText_1.default, { children: getLabel(item) }) }, id));
}) }) })] })] }));
}