@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
41 lines (40 loc) • 2.72 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const material_1 = require("@mui/material");
const utils_1 = require("@selfcommunity/utils");
const PREFIX = 'SCBaseDialog';
const classes = {
root: `${PREFIX}-root`,
titleRoot: `${PREFIX}-title-root`
};
const DialogTitleRoot = (0, material_1.styled)(material_1.DialogTitle, {
name: PREFIX,
slot: 'Root',
overridesResolver: (props, styles) => styles.titleRoot
})(({ theme }) => ({}));
const DialogTitle = ({ children = null, onClose = null }) => {
const theme = (0, material_1.useTheme)();
const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'), { noSsr: (0, utils_1.isClientSideRendering)() });
return ((0, jsx_runtime_1.jsxs)(DialogTitleRoot, Object.assign({ className: classes.titleRoot }, { children: [(0, jsx_runtime_1.jsx)("span", { children: children }), onClose ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "close", onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: isMobile ? 'arrow_back' : 'close' }) }))) : null] })));
};
const Root = (0, material_1.styled)(material_1.Dialog, {
name: PREFIX,
slot: 'Root',
overridesResolver: (props, styles) => styles.root
})(({ theme }) => ({}));
function BaseDialog(props) {
// OPTIONS
const theme = (0, material_1.useTheme)();
const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'), { noSsr: (0, utils_1.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 = tslib_1.__rest(props, ["className", "title", "subtitle", "DialogContentProps", "open", "onClose", "actions", "children", "maxWidth", "scroll"]);
/**
* Renders root object
*/
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), fullScreen: fullScreen, fullWidth: true, open: open, onClose: onClose, maxWidth: maxWidth, scroll: scroll }, rest, { children: [(0, jsx_runtime_1.jsx)(DialogTitle, Object.assign({ onClose: onClose }, { children: title })), subtitle && subtitle, (0, jsx_runtime_1.jsx)(material_1.DialogContent, Object.assign({}, DialogContentProps, { children: children })), actions && (0, jsx_runtime_1.jsx)(material_1.DialogActions, { children: actions })] })));
}
exports.default = BaseDialog;