chore: replace mui dialog

dhis2 · Nov 5, 2023 · 304ca78 · 304ca78
1 parent d6ac2c2
commit 304ca78
Show file tree

Hide file tree

Showing 14 changed files with 104 additions and 155 deletions.
diff --git a/...Entries/withErrorMessagePostProcessor/UniqueTEADuplicate/ExistingTEIContents.component.js b/...Entries/withErrorMessagePostProcessor/UniqueTEADuplicate/ExistingTEIContents.component.js
@@ -2,10 +2,7 @@
 import React, { type ComponentType } from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import i18n from '@dhis2/d2-i18n';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import DialogActions from '@material-ui/core/DialogActions';
-import { Button } from '@dhis2/ui';
+import { Button, ModalContent, ModalTitle, ModalActions } from '@dhis2/ui';
 import { CardList } from '../../../CardList';
 import type { Props } from './existingTeiContents.types';
 
@@ -35,18 +32,18 @@ const ExistingTEIContentsComponentPlain = ({
 
     return (
         <React.Fragment>
-            <DialogContent>
-                <DialogTitle>
+            <ModalContent>
+                <ModalTitle>
                     {i18n.t('Registered person')}
-                </DialogTitle>
+                </ModalTitle>
                 <CardList
                     currentProgramId={programId}
                     // $FlowFixMe
                     items={items}
                     dataElements={dataElements}
                 />
-            </DialogContent>
-            <DialogActions>
+            </ModalContent>
+            <ModalActions>
                 <Button
                     onClick={onCancel}
                     secondary
@@ -61,7 +58,7 @@ const ExistingTEIContentsComponentPlain = ({
                         />
                     </div>
                 )}
-            </DialogActions>
+            </ModalActions>
         </React.Fragment>
     );
 };

diff --git a/...taEntries/withErrorMessagePostProcessor/UniqueTEADuplicate/ExistingTEIDialog.component.js b/...taEntries/withErrorMessagePostProcessor/UniqueTEADuplicate/ExistingTEIDialog.component.js
@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import Dialog from '@material-ui/core/Dialog';
+import { Modal } from '@dhis2/ui';
 import { ExistingTEILoader } from './ExistingTEILoader.container';
 
 type Props = {
@@ -11,15 +11,13 @@ type Props = {
 export const ExistingTEIDialog = (props: Props) => {
     const { open, ...passOnProps } = props;
     return (
-        <Dialog
-            fullWidth
-            maxWidth={'md'}
-            open={open}
+        <Modal
+            hide={!open}
             onClose={props.onCancel}
         >
             <ExistingTEILoader
                 {...passOnProps}
             />
-        </Dialog>
+        </Modal>
     );
 };
diff --git a/...nents/DataEntry/withSaveHandler/MessagesDialogContents/ErrorAndWarningDialog.component.js b/...nents/DataEntry/withSaveHandler/MessagesDialogContents/ErrorAndWarningDialog.component.js
@@ -1,12 +1,8 @@
 // @flow
 import * as React from 'react';
 import { withStyles } from '@material-ui/core';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
 import i18n from '@dhis2/d2-i18n';
-import { Button } from '@dhis2/ui';
+import { Button, ModalTitle, ModalContent, ModalActions } from '@dhis2/ui';
 
 const getStyles = (theme: Theme) => ({
     errors: {
@@ -134,17 +130,15 @@ class ErrorAndWarningDialogPlain extends React.Component<Props> {
     render() {
         return (
             <React.Fragment>
-                <DialogTitle id="save-dialog-errors-and-warnings-title">
+                <ModalTitle id="save-dialog-errors-and-warnings-title">
                     {i18n.t('Validation errors and warnings')}
-                </DialogTitle>
-                <DialogContent>
-                    <DialogContentText>
-                        {this.getContents()}
-                    </DialogContentText>
-                </DialogContent>
-                <DialogActions>
+                </ModalTitle>
+                <ModalContent>
+                    {this.getContents()}
+                </ModalContent>
+                <ModalActions>
                     {this.getButtons()}
-                </DialogActions>
+                </ModalActions>
             </React.Fragment>
         );
     }

diff --git a/...core/components/DataEntry/withSaveHandler/MessagesDialogContents/ErrorDialog.component.js b/...core/components/DataEntry/withSaveHandler/MessagesDialogContents/ErrorDialog.component.js
@@ -1,11 +1,7 @@
 // @flow
 import * as React from 'react';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
 import i18n from '@dhis2/d2-i18n';
-import { Button } from '@dhis2/ui';
+import { Button, ModalTitle, ModalContent, ModalActions } from '@dhis2/ui';
 import { withStyles } from '@material-ui/core';
 
 type Props = {
@@ -52,7 +48,7 @@ class ErrorDialogPlain extends React.Component<Props> {
         const { onAbort, onSave, saveEnabled, classes } = this.props;
 
         return (
-            <div style={{ margin: '0 20px 12px 20px' }}>
+            <div>
                 <Button onClick={onAbort} color="primary">
                     {i18n.t('Back to form')}
                 </Button>
@@ -73,17 +69,15 @@ class ErrorDialogPlain extends React.Component<Props> {
     render() {
         return (
             <React.Fragment>
-                <DialogTitle id="save-dialog-errors-title">
+                <ModalTitle id="save-dialog-errors-title">
                     {i18n.t('Validation errors')}
-                </DialogTitle>
-                <DialogContent>
-                    <DialogContentText>
-                        {this.getContents()}
-                    </DialogContentText>
-                </DialogContent>
-                <DialogActions>
+                </ModalTitle>
+                <ModalContent>
+                    {this.getContents()}
+                </ModalContent>
+                <ModalActions>
                     {this.getButtons()}
-                </DialogActions>
+                </ModalActions>
             </React.Fragment>
         );
     }

diff --git a/...re/components/DataEntry/withSaveHandler/MessagesDialogContents/WarningDialog.component.js b/...re/components/DataEntry/withSaveHandler/MessagesDialogContents/WarningDialog.component.js
@@ -1,11 +1,7 @@
 // @flow
 import * as React from 'react';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
 import i18n from '@dhis2/d2-i18n';
-import { Button } from '@dhis2/ui';
+import { Button, ModalTitle, ModalContent, ModalActions } from '@dhis2/ui';
 import { withStyles } from '@material-ui/core';
 
 type Props = {
@@ -51,15 +47,13 @@ class WarningDialogPlain extends React.Component<Props> {
         const { onAbort, onSave, classes } = this.props;
         return (
             <React.Fragment>
-                <DialogTitle id="save-dialog-errors-and-warnings-title">
+                <ModalTitle id="save-dialog-errors-and-warnings-title">
                     {i18n.t('Validation warnings')}
-                </DialogTitle>
-                <DialogContent>
-                    <DialogContentText>
-                        {this.getContents()}
-                    </DialogContentText>
-                </DialogContent>
-                <DialogActions>
+                </ModalTitle>
+                <ModalContent>
+                    {this.getContents()}
+                </ModalContent>
+                <ModalActions>
                     <div style={{ margin: '0 20px 12px 20px' }}>
                         <Button onClick={onAbort} color="primary">
                             {i18n.t('Back to form')}
@@ -73,7 +67,7 @@ class WarningDialogPlain extends React.Component<Props> {
                             {i18n.t('Save anyway')}
                         </Button>
                     </div>
-                </DialogActions>
+                </ModalActions>
             </React.Fragment>
         );
     }

diff --git a/src/core_modules/capture-core/components/DataEntry/withSaveHandler/withSaveHandler.js b/src/core_modules/capture-core/components/DataEntry/withSaveHandler/withSaveHandler.js
@@ -1,10 +1,7 @@
 // @flow
 import * as React from 'react';
 import log from 'loglevel';
-import Dialog from '@material-ui/core/Dialog';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import { Modal, ModalContent, ModalTitle } from '@dhis2/ui';
 import { connect } from 'react-redux';
 import i18n from '@dhis2/d2-i18n';
 import { errorCreator } from 'capture-core-utils';
@@ -248,8 +245,8 @@ const getSaveHandler = (
                         onSave={this.handleSaveAttempt}
                         {...filteredProps}
                     />
-                    <Dialog
-                        open={this.state.messagesDialogOpen}
+                    <Modal
+                        hide={!this.state.messagesDialogOpen}
                         onClose={this.handleAbortDialog}
                     >
                         <MessagesDialogContents
@@ -261,19 +258,17 @@ const getSaveHandler = (
                             isCompleting={this.isCompleting}
                             validationStrategy={calculatedFoundation.validationStrategy}
                         />
-                    </Dialog>
-                    <Dialog
-                        open={this.state.waitForPromisesDialogOpen}
+                    </Modal>
+                    <Modal
+                        hide={!this.state.waitForPromisesDialogOpen}
                     >
-                        <DialogTitle>
+                        <ModalTitle>
                             {i18n.t('Operations running')}
-                        </DialogTitle>
-                        <DialogContent>
-                            <DialogContentText>
-                                {this.getDialogWaitForUploadContents()}
-                            </DialogContentText>
-                        </DialogContent>
-                    </Dialog>
+                        </ModalTitle>
+                        <ModalContent>
+                            {this.getDialogWaitForUploadContents()}
+                        </ModalContent>
+                    </Modal>
                 </div>
             );
         }

diff --git a/src/core_modules/capture-core/components/FeedbackBar/FeedbackBar.component.js b/src/core_modules/capture-core/components/FeedbackBar/FeedbackBar.component.js
@@ -1,13 +1,9 @@
 // @flow
 import * as React from 'react';
 import SnackBar from '@material-ui/core/Snackbar';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
 import { withStyles } from '@material-ui/core/styles';
 import { IconButton } from 'capture-ui';
-import { IconCross24, Button } from '@dhis2/ui';
+import { IconCross24, Button, Modal, ModalTitle, ModalContent, ModalActions } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
 import isDefined from 'd2-utilizr/lib/isDefined';
 
@@ -100,25 +96,25 @@ class Index extends React.Component<Props> {
                     message={<span>{message}</span>}
                     action={this.getAction()}
                 />
-                <Dialog
-                    open={isDefined(message) && displayType === 'dialog'}
+                <Modal
+                    hide={!isDialogOpen}
                 >
-                    <DialogTitle>
+                    <ModalTitle>
                         {
                             // $FlowFixMe[prop-missing] automated comment
                             isDialogOpen ? message && message.title : ''}
-                    </DialogTitle>
-                    <DialogContent>
+                    </ModalTitle>
+                    <ModalContent>
                         {
                             // $FlowFixMe[prop-missing] automated comment
                             isDialogOpen ? message && message.content : ''}
-                    </DialogContent>
-                    <DialogActions>
+                    </ModalContent>
+                    <ModalActions>
                         <Button onClick={this.handleClose} primary>
                             {i18n.t('Close')}
                         </Button>
-                    </DialogActions>
-                </Dialog>
+                    </ModalActions>
+                </Modal>
             </React.Fragment>
         );
     }

diff --git a/...apture-core/components/FormFields/New/Fields/CoordinateField/CoordinateField.component.js b/...apture-core/components/FormFields/New/Fields/CoordinateField/CoordinateField.component.js
@@ -2,8 +2,7 @@
 import * as React from 'react';
 import withStyles from '@material-ui/core/styles/withStyles';
 import { CoordinateField as UICoordinateField } from 'capture-ui';
-import Dialog from '@material-ui/core/Dialog';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import { Modal, ModalTitle } from '@dhis2/ui';
 import { typeof orientations } from '../../../New';
 
 const getStyles = (theme: Theme) => ({
@@ -80,11 +79,12 @@ class CoordinateFieldPlain extends React.Component<Props> {
             // $FlowFixMe[cannot-spread-inexact] automated comment
             <UICoordinateField
                 mapDialog={
-                    <Dialog
-                        classes={this.dialogClasses}
+                    <Modal
+                        className={this.dialogClasses}
+                        large
                     >
-                        <DialogTitle key="title">{dialogLabel}</DialogTitle>
-                    </Dialog>
+                        <ModalTitle>{dialogLabel}</ModalTitle>
+                    </Modal>
                 }
                 {...passOnProps}
                 classes={this.passOnClasses}

diff --git a/...modules/capture-core/components/ListView/ColumnSelector/ColumnSelectorDialog.component.js b/...modules/capture-core/components/ListView/ColumnSelector/ColumnSelectorDialog.component.js
@@ -1,11 +1,7 @@
 // @flow
 import React, { useState, useEffect } from 'react';
 import { isEqual } from 'lodash';
-import { Button } from '@dhis2/ui';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import { Modal, ModalTitle, ModalContent, ModalActions, Button } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
 
 import { DragDropList } from './DragDropList';
@@ -42,21 +38,21 @@ export const ColumnSelectorDialog = ({ columns, open, onClose, onSave }: Props)
 
     return (
         <span>
-            <Dialog open={!!open} onClose={onClose} fullWidth>
-                <DialogTitle>{i18n.t('Columns to show in table')}</DialogTitle>
-                <DialogContent>
+            <Modal hide={!open} onClose={onClose}>
+                <ModalTitle>{i18n.t('Columns to show in table')}</ModalTitle>
+                <ModalContent>
                     <DragDropList
                         listItems={columnList}
                         handleUpdateListOrder={handleUpdateListOrder}
                         handleToggle={handleToggle}
                     />
-                </DialogContent>
-                <DialogActions>
+                </ModalContent>
+                <ModalActions>
                     <Button onClick={handleSave} primary initialFocus>
                         {i18n.t('Save')}
                     </Button>
-                </DialogActions>
-            </Dialog>
+                </ModalActions>
+            </Modal>
         </span>
     );
 };