Dialog | xl-vision

A modal box that masks other content pops up, carrying operations that require the user's priority.

Examples

Basic

Basic.

Delay close

It is suitable for closing after clicking the confirm or cancel button and waiting for the processing to complete.

Prompt Dialog

Prompt Dialog。

Confirming button width is long

When confirming button width is long, confirming button appear above dismissive actions.

Custom

Custom. If you don't need footer buttons, please pass footer={null} to disable it.

hooks

Use hooks to open dialog.

message tips

Message tips.

In this way, you need to pass in ThemeContext and LocalizationContext, otherwise the default theme and internationalization configuration will be used.

Invoke method

Open dialog according to method.

In this way, you need to pass in ThemeContext and LocalizationContext, otherwise the default theme and internationalization configuration will be used.

Properties

Property	Description	Type	Default	Require
title	Title	React.ReactNode	-	true
children	Dialog content	React.ReactNode	-	false
footer	Dialog footer, if pass `null`, footer will be hidden	React.ReactNode	-	false
onCancel	Click to cancel the event	()=>(void \| Promise<void>)	-	false
onConfirm	Click to confirm event	()=>(void \| Promise<void>)	-	false
cancelButtonProps	The props of the cancel button, refer to Button	object	-	false
confirmButtonProps	The props of the confirm button, refer to Button	object	-	false
cancelText	Cancel button text, support `i18n`	string	取消	false
confirmText	Confirm button text, support `i18n`	string	确认	false
prompt	Prompt dialog, only confirm button	boolean	-	false

Methods

Dialog.open

In addition to the basicDialog.open, it also includes

Dialog.info
Dialog.success
Dialog.error
Dialog.warning
Dialog.confirm

The above are all functions, the parameter is object, and the specific attributes are as follows

Property	Description	Type	Default	Require
icon	Icon	React.ReactNode	-	false
content	Content	React.ReactNode	-	false
themeProviderProps	Theme, see ThemeProvider	object	-	false
configProviderProps	Global Config ConfigProvider	object	-	false

Dialog.open inherits most of the parameters of Dialog, except for open and defaultOpen, where children is renamed to content.

If you want to modify the theme and internationalization information of the dialog box created by Dialog.open, you need to pass in themeProviderProps and configProviderProps, otherwise the system default theme and internationalization information will be used.

When the dialog box is closed, it will be destroyed automatically.

After the above function is called, a reference will be returned, and the dialog can be updated and closed by this reference.

const dialog = Dialog.info();

dialog.update({
  title: 'title',
  content: 'content',
});

dialog.update((prevConfig) => ({
  ...prevConfig,
  title: `${prevConfig.title}(new)`,
}));

dialog.destroy();

Dialog.destroyAll

Use Dialog.destroyAll() to destroy the pop-up confirmation window (ie the above-mentioned Dialog.open, Dialog.info, Dialog.success, Dialog.error, Dialog.warning, Dialog.confirm). It is usually used in routing monitoring to deal with the problem that the confirmation dialog cannot be destroyed when routing forward and backward, instead of using the return value of the instance to close it (Dialog.destroy() is suitable for active closing, not passive routing like closed)

import { browserHistory } from 'react-router';

// router change
browserHistory.listen(() => {
  Dialog.destroyAll();
});

Dialog.useDialog

Dialog.useDialog has almost the same parameters and methods as Dialog.open, but there is no need to pass in themeProviderProps and configProviderProps.

We recommend using Dialog.useDialog. By inserting holder in the corresponding position, dialog can get the context of the inserted position, such as themeProviderProps and configProviderProps.

const [dialog, holder] = Dialog.useDialog();

React.useEffect(() => {
  dialog.confirm({
    // ...
  });
}, []);

return (
  <div>
    {holder}
    content
  </div>
);

A modal box that masks other content pops up, carrying operations that require the user's priority.

Examples

Basic

Basic.

Delay close

It is suitable for closing after clicking the confirm or cancel button and waiting for the processing to complete.

Prompt Dialog

Prompt Dialog。

Confirming button width is long

When confirming button width is long, confirming button appear above dismissive actions.

Custom

Custom. If you don't need footer buttons, please pass footer={null} to disable it.

hooks

Use hooks to open dialog.

message tips

Message tips.

In this way, you need to pass in ThemeContext and LocalizationContext, otherwise the default theme and internationalization configuration will be used.

Invoke method

Open dialog according to method.

In this way, you need to pass in ThemeContext and LocalizationContext, otherwise the default theme and internationalization configuration will be used.

Properties

Property	Description	Type	Default	Require
title	Title	React.ReactNode	-	true
children	Dialog content	React.ReactNode	-	false
footer	Dialog footer, if pass `null`, footer will be hidden	React.ReactNode	-	false
onCancel	Click to cancel the event	()=>(void \| Promise<void>)	-	false
onConfirm	Click to confirm event	()=>(void \| Promise<void>)	-	false
cancelButtonProps	The props of the cancel button, refer to Button	object	-	false
confirmButtonProps	The props of the confirm button, refer to Button	object	-	false
cancelText	Cancel button text, support `i18n`	string	取消	false
confirmText	Confirm button text, support `i18n`	string	确认	false
prompt	Prompt dialog, only confirm button	boolean	-	false

Methods

Dialog.open

In addition to the basicDialog.open, it also includes

Dialog.info
Dialog.success
Dialog.error
Dialog.warning
Dialog.confirm

The above are all functions, the parameter is object, and the specific attributes are as follows

Property	Description	Type	Default	Require
icon	Icon	React.ReactNode	-	false
content	Content	React.ReactNode	-	false
themeProviderProps	Theme, see ThemeProvider	object	-	false
configProviderProps	Global Config ConfigProvider	object	-	false

Dialog.open inherits most of the parameters of Dialog, except for open and defaultOpen, where children is renamed to content.

If you want to modify the theme and internationalization information of the dialog box created by Dialog.open, you need to pass in themeProviderProps and configProviderProps, otherwise the system default theme and internationalization information will be used.

When the dialog box is closed, it will be destroyed automatically.

After the above function is called, a reference will be returned, and the dialog can be updated and closed by this reference.

const dialog = Dialog.info();

dialog.update({
  title: 'title',
  content: 'content',
});

dialog.update((prevConfig) => ({
  ...prevConfig,
  title: `${prevConfig.title}(new)`,
}));

dialog.destroy();

Dialog.destroyAll

import { browserHistory } from 'react-router';

// router change
browserHistory.listen(() => {
  Dialog.destroyAll();
});

Dialog.useDialog

Dialog.useDialog has almost the same parameters and methods as Dialog.open, but there is no need to pass in themeProviderProps and configProviderProps.

We recommend using Dialog.useDialog. By inserting holder in the corresponding position, dialog can get the context of the inserted position, such as themeProviderProps and configProviderProps.

const [dialog, holder] = Dialog.useDialog();

React.useEffect(() => {
  dialog.confirm({
    // ...
  });
}, []);

return (
  <div>
    {holder}
    content
  </div>
);