Frontend
Dialog

MetaFox Dialog is based on Material-UI Dialog (opens in a new tab), 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,
  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 core.dialog.sampleModalDialog

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

Present

const value = await dialogBackend.present({
  component: "core.dialog.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 'core.dialog.sampleModalDialog'.

dialogBackend
  .present({
    component: "core.dialog.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 DialogContentText to keep a consistent look and feel.

import { DialogContentText } from "@mui/material";
 
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?",
  positiveButton: {
    label: i18n.formatMessage({ id: "approve" }),
  },
  negativeButton: {
    label: i18n.formatMessage({ id: "cancel" }),
  },
});

Dismiss

Dismiss presenting dialog

dialogBackend.dimiss();

Dimiss all dialog

dialogBackend.dismiss(true);

Dialog Form

Use setDialogValue to set value for the current promise call.

CookieForm Builder