Module: Dialog

A dialog component in react that handle full screen containers, modals, alerts and dialogs.

Parameters:

Name Type Description

props

object

Component props.

Properties

Name	Type	Description
`alertButtonText`	string	If in alert mode, the text for the ok button below content.
`alignment`	string	Position of message in window.
`animateModal`	boolean	When in modal or dialog mode, animate the dialog in with a fade in and up?
`animationDelay`	number	The css animation delay for the reveal/hide effect. Synchronize with css if modifying the built-in 250 ms delay.
`buttonWidth`	string	The button width, one of `auto` or `full`.
`cancelButtonHeight`	string	The height for the cancel button.
`cancelButtonText`	string	If in dialog mode, the white cancel buttons text is set here.
`cancelButtonType`	string	The type of the cancel button.
`children`	JSX.Element	React element children.
`closeButtonSize`	string	The close button size. Default is `xs`.
`closeButtonTitle`	string	The close button title for accessibility purposes.
`closeButtonType`	string	The close button type. Default is `round`. Also supports `noborder` and `unstyled`.
`closeOnMaskClick`	boolean	Whether to close if the background mask is clicked.
`confirmButtonAttributes`	object	Arbitrary additional html attributes for the confirm button if in dialog mode.
`confirmButtonHeight`	string	The height of the confirm button.
`confirmButtonIcon`	string	If in dialog mode, the optional confirmation button icon before the button text.
`confirmButtonText`	string	If in dialog mode, the confirmation button text.
`confirmButtonType`	string	The type of the confirm button.
`content`	string	Container content. Can only be strings. Use React children for html.
`customCloseButtonClasses`	string \| Array \| object	Custom classes for the close button as array.
`customMaskClasses`	string \| Array \| object	Custom classes for the mask as array.
`customWrapperClasses`	string \| Array \| object	Custom classes for the wrapper as array.
`description`	string \| Array \| object	Optional text to show below title.
`id`	string	The id for the dialog. If not passed auto generated using uniqueId from our utils with a prefix of `dialog`.
`isOpen`	boolean	Prop to control whether the dialog is currently open.
`lockBody`	boolean	Whether to lock the body behind the dialog to prevent interaction or scrolling.
`maskBlur`	boolean	Whether to blur behind the mask for the dialog.
`maskTheme`	string	Mask background color scheme: `none`, `light` or `dark`.
`maxHeight`	string	Max height for the dialog.
`mode`	string	Container mode: `container`, `modal`, `alert` or `dialog`.
`onClose`	function	Function to execute when the dialog closes.
`onCloseAfterAnimation`	function	Function to execute after the dialog close animation.
`onOpen`	function	Function to execute when the dialog opens.
`onOpenAfterAnimation`	function	Function to execute after the dialog open animation.
`padContent`	boolean	Whether to pad the content on the right or not.
`position`	string	Position for the mask: `fixed`, `absolute`.
`showCancelButton`	boolean	Whether to show the cancel button or not.
`showCloseButton`	boolean	Whether to show the close button top right or not.
`showConfirmButton`	boolean	Whether to show the confirm button or not.
`simplebar`	boolean	Whether or not to use SimpleBar on the content.
`theme`	string	Theme for the dialog, one of `gravity-blue` or `cosmos`.
`title`	string	Title for the dialog. Does not show in container mode.
`titleDivider`	boolean	Whether to show a divider below the title or not.
`titleIndicatorType`	string	Indicator type for the dialog title.
`titleSize`	string	Size for the title, sm or md currently.
`titleTagName`	string	Tagname for the title of the dialog.
`zIndex`	number	The z-index for the dialog.

ref

object | null

Ref to the component.

Since: 1.1.15
Source: modules/Dialog/index.js, line 8

Returns:

Return the functional dialog component in React.

Type:: JSX.Element

Example

import Dialog from '@gravityforms/components/react/admin/modules/Dialog';

const Example = () => {
    	const dialogArgs = {
		    closeOnMaskClick: false,
		    customCloseButtonClasses: [ 'gform-example--exit-button' ],
		    customWrapperClasses: [
			    'gform-example',
		    ],
		    id: 'test-id',
		    isOpen,
		    lockBody: true,
		    mode: 'container',
		    zIndex: 100001,
     };

     return (
         <Dialog { ...dialogArgs }>
             { children }
         </Dialog>
     );
}