Dialog

The Dialog component is a window overlaid on either the primary window or another dialog window, It can be opened anywhere by calling context.dialog.open() with an object containing the necessary parameters.

Renamed from Modal in Gravity 12.

Preview

Usage

import { useContext } from 'react';
import { ViewContext, Button } from 'components/lib';

function MyComponent({ ...props }) {

  const viewContext = useContext(ViewContext);

  function openDialog(){
    viewContext.dialog.open({
      title: 'Add User',
      form: MyForm,
      buttonText: 'Send Invite',
      url: '/api/user/invite',
      method: 'POST'
    });
  }

  return (
    <div>
      <Button action={ openDialog } />
    <div/>
  );
}

Params

Param	Description	Required	Value
children	children to render a custom dialog	optional	component(s)
description	description message	optional	string
form	a form object	optional	object
onClose	callback executed when closed	required	function
open	override the internal open state	optional	boolean
title	dialog title	required	string
method	HTTP post type	optional	string
url	destination to send the form	optional	string

Notes

• The Dialog component uses DialogPrimitive components from @radix-ui/react-dialog.

• The onClose prop is a callback function that gets executed when the dialog is closed.

• The open prop can be used to control the open state of the dialog.

• The title and description props provide the title and description for the dialog.

• For more details, refer to the Shadcn Dialog documentation.