@etsoo/materialui
Version:
TypeScript Material-UI Implementation
50 lines (49 loc) • 3.05 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DialogButton = DialogButton;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const Labels_1 = require("./app/Labels");
const Button_1 = __importDefault(require("@mui/material/Button"));
const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
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 DialogContentText_1 = __importDefault(require("@mui/material/DialogContentText"));
const DialogActions_1 = __importDefault(require("@mui/material/DialogActions"));
/**
* Dialog button
* @param props Props
* @returns Component
*/
function DialogButton(props) {
// Labels shared with NotificationMU
const labels = Labels_1.Labels.NotificationMU;
// Destruct
const { buttonLabel = labels.alertOK, children, content, contentPre, dialogTitle, disableScrollLock, fullScreen, fullWidth, icon, inputs, maxWidth, onClick, title, ...rest } = props;
// Open state
const [open, setOpen] = react_1.default.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
// Onclick handler
const onClickLocal = (event) => {
// Stop propagation
event.stopPropagation();
event.preventDefault();
// Show dialog
handleClickOpen();
// Additional callback
if (onClick)
onClick(event);
};
// Layout
return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [icon == null ? ((0, jsx_runtime_1.jsx)(Button_1.default, { ...rest, title: title, onClick: onClickLocal, children: children })) : ((0, jsx_runtime_1.jsx)(IconButton_1.default, { ...rest, onClick: onClickLocal, title: title ?? children?.toString(), children: icon })), (0, jsx_runtime_1.jsxs)(Dialog_1.default, { disableScrollLock: disableScrollLock, fullScreen: fullScreen, fullWidth: fullWidth, maxWidth: maxWidth, open: open, onClose: () => setOpen(false), onClick: (event) => {
// The dialog will be embeded and the click event will bubble up
// Stop propatation but will also cancel onClose and onBackdropClick event
event.stopPropagation();
}, children: [(0, jsx_runtime_1.jsx)(DialogTitle_1.default, { children: dialogTitle ?? title ?? children }), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, { children: [(0, jsx_runtime_1.jsx)(DialogContentText_1.default, { component: contentPre ? "pre" : "span", children: content }), inputs] }), (0, jsx_runtime_1.jsx)(DialogActions_1.default, { children: (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: () => setOpen(false), children: buttonLabel }) })] })] }));
}