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
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.