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