@etsoo/materialui/lib/mjs/DialogButton.js

TypeScript Material-UI Implementation

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Labels } from "./app/Labels";
import Button from "@mui/material/Button";
import IconButton from "@mui/material/IconButton";
import Dialog from "@mui/material/Dialog";
import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogActions from "@mui/material/DialogActions";
/**
 * Dialog button
 * @param props Props
 * @returns Component
 */
export function DialogButton(props) {
    // Labels shared with NotificationMU
    const labels = 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.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 (_jsxs(React.Fragment, { children: [icon == null ? (_jsx(Button, { ...rest, title: title, onClick: onClickLocal, children: children })) : (_jsx(IconButton, { ...rest, onClick: onClickLocal, title: title ?? children?.toString(), children: icon })), _jsxs(Dialog, { 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: [_jsx(DialogTitle, { children: dialogTitle ?? title ?? children }), _jsxs(DialogContent, { children: [_jsx(DialogContentText, { component: contentPre ? "pre" : "span", children: content }), inputs] }), _jsx(DialogActions, { children: _jsx(Button, { onClick: () => setOpen(false), children: buttonLabel }) })] })] }));
}