Getting Started
Backend
Frontend
Getting StartedConceptsCookieDialogCreate DialogExport DialogPresentFormGridviewLayoutsLocal StorageRouterThemeTypescriptValidationsagasservice
ExampleLanguage

MetaFox Dialog is based on Material-UI Dialog, We wrap it in a Controller and dialogBackend services so you can work with Dialog Component more conveniently by using dialogBackend service and useDialog hooks.

Create Dialog

Here is the sample declaration of a simple dialog. Note that annotations MUST be at the beginning of the source file.

/**
* @type: dialog
* name: ExampleDialog
*
*/
import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle
} from '@metafox/dialog';
import React from 'react';
export default function ExampleDialog({
title,
message
}}) {
const { useDialog } = useGlobal();
const { setDialogValue, dialogProps } = useDialog();
const onSubmit = () => setDialogValue(true);
const onCancel = () => setDialogValue();
return (
<Dialog {...dialogProps}>
<DialogTitle id="dialog-title">{title}</DialogTitle>
<DialogContent>{message}</DialogContent>
<DialogActions>
<Button onClick={onCancel}>OK</Button>
<Button onClick={onSubmit}>Cancel</Button>
</DialogActions>
</Dialog>
);
}

Export Dialog

We are going to use MetaFox annotations syntax for the created dialog.

For example: this source defines a dialog named sampleModalDialog

/**
* @type: dialog
* name: sampleModalDialog
*/

Present

const value = await dialogBackend.present({
component: 'sampleModalDialog',
props: {
title: 'Simple Dialog Title',
message:
'This is simple dialog demo, you can extends with others function laters.'
}
});

In order to present dialog dialogBackend, assign component with value of 'sampleModalDialog'.

dialogBackend
.present({
component: 'sampleModalDialog',
props: {
title: 'Simple Dialog Title',
message:
'This is simple dialog demo, you can extends with others function laters.'
}
})
.then(value => {
// your code
});

Alert

Create a Alert Dialog with a single line message

dialogBackend.alert({
title: 'Alert',
messsage: 'You can not delete this content!'
});

Create a Alert Dialog with multiple line messages

dialogBackend.alert({
message:
'- Checking the network cables, modem, and router\n- Reconnecting to Wi-Fi'
});

Message Component

Content of message should be wrapped in

to keep a consistent look and feel.

dialogBackend.alert({
message: (
<DialogContentText>
Checking the network cables, modem, and router
</DialogContentText>
)
});

Confirm

Create a Confirm Dialog

const ok: boolean = await dialogBackend.confirm({
title: 'Confirm',
message: 'Are you sure?'
});

The message content is similar to Alert.

Add a Custom Button to Confirm Dialog

const ok: boolean = await dialogBackend.confirm({
title: 'Confirm',
messsage: 'Are you sure?'
});

Dismiss

Dismiss presenting dialog

dialogBackend.dimiss();

Dimiss all dialog

dialogBackend.dismiss(true);

Dialog Form

Use setDialogValue to set value for the current promise call.

Top