@totalsoft/rocket-ui
Version:
A set of reusable and composable React components built on top of Material UI core for developing fast and friendly web applications interfaces.
148 lines • 6.29 kB
JavaScript
import React, { useCallback, useMemo } from 'react';
import PropTypes from 'prop-types';
import * as R from 'ramda';
import MuiDialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContentText from '@mui/material/DialogContentText';
import useMediaQuery from '@mui/material/useMediaQuery';
import { useTheme } from '@mui/material/styles';
import CloseIcon from '@mui/icons-material/Close';
import { TransparentBackdrop, DialogContent, DialogTitle, justifyRight } from './DialogStyles';
import { Button, IconButton } from '../../index';
import { Stack } from '@mui/material';
/**
* Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.
*
* A Dialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision. Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken.
*
* Dialogs are purposefully interruptive, so they should be used sparingly.
*/
const Dialog = ({ id, title, titleProps, content, contentProps, textContent, textContentProps, actions, actionsProps, defaultActions, defaultActionsProps = { textDialogYes: 'Yes', textDialogNo: 'No' }, onYes, onClose, closeButtonProps, disableBackdropClick = false, fullScreen, showX = true, transparentBackdrop, dividers, fullWidth = true, open = false, ...rest }) => {
const dialogTitleId = `${id}-dialog-display-title`;
const theme = useTheme();
const smallScreen = useMediaQuery(theme.breakpoints.down('md'));
const handleClose = useCallback((event, reason) => {
if (disableBackdropClick && reason === 'backdropClick')
return;
onClose(event, reason ?? 'closeActionClick');
}, [disableBackdropClick, onClose]);
const { textDialogYes, textDialogNo, ...buttonProps } = defaultActionsProps;
const defaultActionsComp = (React.createElement(React.Fragment, null,
React.createElement(Button, { right: true, ...buttonProps, onClick: onYes }, textDialogYes),
React.createElement(Button, { right: true, ...buttonProps, onClick: handleClose }, textDialogNo)));
const closeButtonSx = useMemo(() => ({ ...justifyRight, ...closeButtonProps?.sx }), [closeButtonProps?.sx]);
return (React.createElement(MuiDialog, { onClose: handleClose, "aria-labelledby": dialogTitleId, fullScreen: R.isNil(fullScreen) ? smallScreen : fullScreen, slots: { backdrop: transparentBackdrop && TransparentBackdrop }, fullWidth: fullWidth, open: open, ...rest },
React.createElement(Stack, { alignItems: "center", direction: "row", p: "16px 24px" },
React.createElement(DialogTitle, { id: dialogTitleId, ...titleProps }, title),
showX && (React.createElement(IconButton, { color: "default", variant: "text", size: "small", "aria-label": "Close", onClick: handleClose, ...closeButtonProps, sx: closeButtonSx },
React.createElement(CloseIcon, null)))),
React.createElement(DialogContent, { dividers: dividers, ...contentProps },
textContent && React.createElement(DialogContentText, { ...textContentProps }, textContent),
content),
!defaultActions && !actions ? null : (React.createElement(DialogActions, { ...actionsProps }, defaultActions ? defaultActionsComp : actions))));
};
Dialog.propTypes = {
/**
* Identifier of the dialog.
*/
id: PropTypes.string.isRequired,
/**
* @default false
* If true, the component is shown.
*/
open: PropTypes.bool.isRequired,
/**
* Callback fired when the component requests to be closed.
*/
onClose: PropTypes.func,
/**
* Title of the dialog.
*/
title: PropTypes.node,
/**
* Content of the dialog.
*/
content: PropTypes.node,
/**
* Text content of the dialog. If received, it will be wrapped by the MUI DialogContentText component.
*/
textContent: PropTypes.node,
/**
* The actions provided below the dialog.
*/
actions: PropTypes.node,
/**
* @default false
* If true, clicking the backdrop will not fire the onClose callback.
*/
disableBackdropClick: PropTypes.bool,
/**
* Props sent to the DialogTitle component.
*/
titleProps: PropTypes.object,
/**
* Props sent to the DialogContent component.
*/
contentProps: PropTypes.object,
/**
* Props sent to the DialogContentText component.
*/
textContentProps: PropTypes.object,
/**
* Props sent to the DialogActions component.
*/
actionsProps: PropTypes.object,
/**
* @default false
* If `true`, it will render `Yes` and `No` button actions by default.
*
* The following properties would be required: @onYes and @onClose properties.
*
* The two default buttons can be configured using @defaultActionsProps property.
*/
defaultActions: PropTypes.bool,
/**
* Props sent to the default action buttons.
*/
defaultActionsProps: PropTypes.object,
/**
* Callback fired when a "click" event is detected.
*/
onYes: PropTypes.func,
/**
* Props sent to the close button.
*/
closeButtonProps: PropTypes.object,
/**
* If true, the backdrop will be transparent.
*/
transparentBackdrop: PropTypes.bool,
/**
* If true, the dialog is full-screen.
*/
fullScreen: PropTypes.bool,
/**
* @default true
* If true, the close button is shown.
*/
showX: PropTypes.bool,
/**
* @default false
* Display dividers at the top and bottom of DialogContent.
*/
dividers: PropTypes.bool,
/**
* If `true`, the dialog stretches to `maxWidth`.
*
* Notice that the dialog width grow is limited by the default margin.
* @default true
*/
fullWidth: PropTypes.bool,
/**
* @default 'sm'
* Determine the max-width of the dialog. The dialog width grows with the size of the screen. Set to false to disable maxWidth.
*/
maxWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false])
};
export default Dialog;
//# sourceMappingURL=Dialog.js.map