@selfcommunity/react-ui/lib/esm/shared/BaseDialog/BaseDialog.js

React UI Components to integrate a Community created with SelfCommunity Platform.

import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { styled } from '@mui/material/styles';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import useMediaQuery from '@mui/material/useMediaQuery';
import classNames from 'classnames';
import { useTheme } from '@mui/material';
import MuiDialogTitle from '@mui/material/DialogTitle';
import IconButton from '@mui/material/IconButton';
import Icon from '@mui/material/Icon';
import { isClientSideRendering } from '@selfcommunity/utils';
const PREFIX = 'SCBaseDialog';
const classes = {
    root: `${PREFIX}-root`,
    titleRoot: `${PREFIX}-title-root`
};
const DialogTitleRoot = styled(MuiDialogTitle, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (props, styles) => styles.titleRoot
})(({ theme }) => ({}));
const DialogTitle = ({ children = null, onClose = null }) => {
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down('md'), { noSsr: isClientSideRendering() });
    return (_jsxs(DialogTitleRoot, Object.assign({ className: classes.titleRoot }, { children: [_jsx("span", { children: children }), onClose ? (_jsx(IconButton, Object.assign({ "aria-label": "close", onClick: onClose }, { children: _jsx(Icon, { children: isMobile ? 'arrow_back' : 'close' }) }))) : null] })));
};
const Root = styled(Dialog, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (props, styles) => styles.root
})(({ theme }) => ({}));
export default function BaseDialog(props) {
    // OPTIONS
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down('md'), { noSsr: isClientSideRendering() });
    const fullScreen = isMobile;
    // PROPS
    const { className = '', title = '', subtitle = null, DialogContentProps = { dividers: !isMobile }, open = false, onClose = null, actions = null, children, maxWidth = 'sm', scroll = 'body' } = props, rest = __rest(props, ["className", "title", "subtitle", "DialogContentProps", "open", "onClose", "actions", "children", "maxWidth", "scroll"]);
    /**
     * Renders root object
     */
    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className), fullScreen: fullScreen, fullWidth: true, open: open, onClose: onClose, maxWidth: maxWidth, scroll: scroll }, rest, { children: [_jsx(DialogTitle, Object.assign({ onClose: onClose }, { children: title })), subtitle && subtitle, _jsx(DialogContent, Object.assign({}, DialogContentProps, { children: children })), actions && _jsx(DialogActions, { children: actions })] })));
}