diff --git a/web/pgadmin/static/js/helpers/ModalProvider.jsx b/web/pgadmin/static/js/helpers/ModalProvider.jsx index 437e5d645..7e4fe5260 100644 --- a/web/pgadmin/static/js/helpers/ModalProvider.jsx +++ b/web/pgadmin/static/js/helpers/ModalProvider.jsx @@ -7,21 +7,88 @@ // ////////////////////////////////////////////////////////////// -import { Box, Dialog, DialogContent, DialogTitle, Paper } from '@material-ui/core'; +import { Box, Dialog, DialogContent, DialogTitle, makeStyles, Paper } from '@material-ui/core'; import React from 'react'; import {getEpoch} from 'sources/utils'; -import { PgIconButton } from '../components/Buttons'; +import { DefaultButton, PgIconButton, PrimaryButton } from '../components/Buttons'; import Draggable from 'react-draggable'; import CloseIcon from '@material-ui/icons/CloseRounded'; import CustomPropTypes from '../custom_prop_types'; import PropTypes from 'prop-types'; import gettext from 'sources/gettext'; +import Theme from '../Theme'; +import HTMLReactParser from 'html-react-parser'; +import CheckRoundedIcon from '@material-ui/icons/CheckRounded'; const ModalContext = React.createContext({}); export function useModal() { return React.useContext(ModalContext); } +const useAlertStyles = makeStyles((theme)=>({ + footer: { + display: 'flex', + justifyContent: 'flex-end', + padding: '0.5rem', + ...theme.mixins.panelBorder.top, + }, + margin: { + marginLeft: '0.25rem', + } +})); + +function AlertContent({text, confirm, okLabel=gettext('OK'), cancelLabel=gettext('Cancel'), onOkClick, onCancelClick}) { + const classes = useAlertStyles(); + return ( + + {typeof(text) == 'string' ? HTMLReactParser(text) : text} + + {confirm && + } onClick={onCancelClick} >{cancelLabel} + } + } onClick={onOkClick} autoFocus={true} >{okLabel} + + + ); +} +AlertContent.propTypes = { + text: PropTypes.string, + confirm: PropTypes.bool, + onOkClick: PropTypes.func, + onCancelClick: PropTypes.func, + okLabel: PropTypes.string, + cancelLabel: PropTypes.string, +}; + +function alert(title, text, onOkClick, okLabel=gettext('OK')){ + // bind the modal provider before calling + this.showModal(title, (closeModal)=>{ + const onOkClickClose = ()=>{ + onOkClick && onOkClick(); + closeModal(); + }; + return ( + + ); + }); +} + +function confirm(title, text, onOkClick, onCancelClick, okLabel=gettext('Yes'), cancelLabel=gettext('No')) { + // bind the modal provider before calling + this.showModal(title, (closeModal)=>{ + const onCancelClickClose = ()=>{ + onCancelClick && onCancelClick(); + closeModal(); + }; + const onOkClickClose = ()=>{ + onOkClick && onOkClick(); + closeModal(); + }; + return ( + + ); + }); +} export default function ModalProvider({children}) { const [modals, setModals] = React.useState([]); @@ -40,9 +107,14 @@ export default function ModalProvider({children}) { return prev.filter((o)=>o.id!=id); }); }; - const modalContext = React.useMemo(()=>({ + const modalContextBase = { showModal: showModal, closeModal: closeModal, + }; + const modalContext = React.useMemo(()=>({ + ...modalContextBase, + confirm: confirm.bind(modalContextBase), + alert: alert.bind(modalContextBase) }), []); return ( @@ -70,20 +142,22 @@ function ModalContainer({id, title, content}) { let useModalRef = useModal(); let closeModal = ()=>useModalRef.closeModal(id); return ( - - - {title} - } size="xs" noBorder onClick={closeModal}/> - - - {content(closeModal)} - - + + + + {title} + } size="xs" noBorder onClick={closeModal}/> + + + {content(closeModal)} + + + ); } ModalContainer.propTypes = { diff --git a/web/pgadmin/static/js/helpers/Notifier.jsx b/web/pgadmin/static/js/helpers/Notifier.jsx index 68b2d8238..d67faa381 100644 --- a/web/pgadmin/static/js/helpers/Notifier.jsx +++ b/web/pgadmin/static/js/helpers/Notifier.jsx @@ -17,13 +17,6 @@ import gettext from 'sources/gettext'; import _ from 'lodash'; import pgWindow from 'sources/window'; import ModalProvider, { useModal } from './ModalProvider'; -import { DefaultButton, PrimaryButton } from '../components/Buttons'; -import { Box } from '@material-ui/core'; -import { makeStyles } from '@material-ui/styles'; -import HTMLReactParse from 'html-react-parser'; -import CloseIcon from '@material-ui/icons/CloseRounded'; -import CheckRoundedIcon from '@material-ui/icons/CheckRounded'; -import PropTypes from 'prop-types'; const AUTO_HIDE_DURATION = 3000; // In milliseconds @@ -83,40 +76,6 @@ FinalNotifyContent.propTypes = { children: CustomPropTypes.children, }; -const useAlertStyles = makeStyles((theme)=>({ - footer: { - display: 'flex', - justifyContent: 'flex-end', - padding: '0.5rem', - ...theme.mixins.panelBorder.top, - }, - margin: { - marginLeft: '0.25rem', - } -})); -function AlertContent({text, confirm, okLabel=gettext('OK'), cancelLabel=gettext('Cancel'), onOkClick, onCancelClick}) { - const classes = useAlertStyles(); - return ( - - {typeof(text) == 'string' ? HTMLReactParse(text) : text} - - {confirm && - } onClick={onCancelClick} >{cancelLabel} - } - } onClick={onOkClick} autoFocus={true} >{okLabel} - - - ); -} -AlertContent.propTypes = { - text: PropTypes.string, - confirm: PropTypes.bool, - onOkClick: PropTypes.func, - onCancelClick: PropTypes.func, - okLabel: PropTypes.string, - cancelLabel: PropTypes.string, -}; - var Notifier = { success(msg, autoHideDuration = AUTO_HIDE_DURATION) { this._callNotify(msg, MESSAGE_TYPE.SUCCESS, autoHideDuration); @@ -221,37 +180,27 @@ var Notifier = { this.alert(promptmsg, msg.replace(new RegExp(/\r?\n/, 'g'), '
')); }, alert: (title, text, onOkClick, okLabel=gettext('OK'))=>{ + /* Use this if you want to use pgAdmin global notifier. + Or else, if you want to use modal inside iframe only then use ModalProvider eg- query tool */ if(!modalInitialized) { initializeModalProvider(); } - modalRef.showModal(title, (closeModal)=>{ - const onOkClickClose = ()=>{ - onOkClick && onOkClick(); - closeModal(); - }; - return ( - - ); - }); + modalRef.alert(title, text, onOkClick, okLabel); }, confirm: (title, text, onOkClick, onCancelClick, okLabel=gettext('Yes'), cancelLabel=gettext('No'))=>{ + /* Use this if you want to use pgAdmin global notifier. + Or else, if you want to use modal inside iframe only then use ModalProvider eg- query tool */ if(!modalInitialized) { initializeModalProvider(); } - modalRef.showModal(title, (closeModal)=>{ - const onCancelClickClose = ()=>{ - onCancelClick && onCancelClick(); - closeModal(); - }; - const onOkClickClose = ()=>{ - onOkClick && onOkClick(); - closeModal(); - }; - return ( - - ); - }); + modalRef.confirm(title, text, onOkClick, onCancelClick, okLabel, cancelLabel); }, + showModal(title, content) { + if(!modalInitialized) { + initializeModalProvider(); + } + modalRef.showModal(title, content); + } }; if(window.frameElement) {