useDialogs API

useDialogs hook 的 API 参考。

导入

import useDialogs from '@toolpad/core/useDialogs';
// or
import { useDialogs } from '@toolpad/core';

通过阅读这篇指南，了解有关最小化 bundle size 的区别。

用法

通过调用 hook 来访问 dialogs API。

const dialogs = useDialogs();

参考

`dialogs.alert`

打开一个警告对话框，返回一个 promise，当用户关闭对话框时 resolve。

await dialogs.alert('Something went wrong', {
  title: 'Attention!',
});

签名

function alert(message, options?)

参数

message: React.ReactNode 要在警告对话框中显示的消息。
options?: object 警告对话框的额外配置。
- onClose?: () => Promise<void> 在对话框关闭之前调用的函数。只要返回的 promise 未 resolve，对话框就会保持打开状态。如果您想在关闭时执行异步操作并显示加载状态，请使用此选项。
- title?: React.ReactNode 对话框的标题。默认为 'Alert'。
- okText?: React.ReactNode 在“确定”按钮中显示的文本。默认为 'Ok'。

返回值

Promise<void> 一个 promise，一旦用户关闭对话框，该 promise 就会 resolve。

`dialogs.confirm`

打开一个确认对话框。返回一个 promise，如果用户确认，则 resolve 为 true，如果用户取消，则 resolve 为 false。

const confirmed = await dialogs.confirm('Are you sure?', {
  okText: 'Yes',
  cancelText: 'No',
});

签名

function confirm(message, options?)

参数

message: React.ReactNode 要在确认对话框中显示的消息。
options?: object 确认对话框的额外配置。
- onClose?: (result: boolean) => Promise<void> 在对话框关闭之前调用的函数。只要返回的 promise 未 resolve，对话框就会保持打开状态。如果您想在关闭时执行异步操作并显示加载状态，请使用此选项。
- title?: React.ReactNode 对话框的标题。默认为 'Confirm'。
- okText?: React.ReactNode 在“确定”按钮中显示的文本。默认为 'Ok'。
- severity?: 'error' | 'info' | 'success' | 'warning' 表示对话框的用途。这将影响“确定”按钮的颜色。默认为 undefined。
- cancelText?: React.ReactNode 在“取消”按钮中显示的文本。默认为 'Cancel'。

返回值

Promise<boolean> 一个 promise，如果用户确认，则 resolve 为 true，如果用户取消，则 resolve 为 false。

`dialogs.prompt`

打开一个提示对话框以请求用户输入。返回一个 promise，如果用户确认，则 resolve 为输入，如果用户取消，则 resolve 为 null。

const input = await dialogs.prompt('What is your name?', {
  cancelText: 'Leave me alone',
});

签名

function prompt(message, options?)

参数

message: React.ReactNode 要在提示对话框中显示的消息。
options?: object 提示对话框的额外配置。
- onClose?: (result: string) => Promise<void> 在对话框关闭之前调用的函数。只要返回的 promise 未 resolve，对话框就会保持打开状态。如果您想在关闭时执行异步操作并显示加载状态，请使用此选项。
- title?: React.ReactNode 对话框的标题。默认为 'Prompt'。
- okText?: React.ReactNode 在“确定”按钮中显示的文本。默认为 'Ok'。
- cancelText?: React.ReactNode 在“取消”按钮中显示的文本。默认为 'Cancel'。

返回值

Promise<string> 一个 promise，如果用户确认，则 resolve 为用户输入，如果用户取消，则 resolve 为 null。

`dialogs.open`

打开一个自定义对话框。该对话框是一个 React 组件，可以选择接受 payload，并可以选择在其 onClose 属性中返回结果。

function MyDialog({ open, onClose, payload }) {
  // ...
}

const result = await dialogs.open(MyDialog, 123, {
  onClose: async (result) => callApi(result),
});

签名

function open(component, payload, options?)

参数

component: React.ComponentType<{ open: boolean, onClose: (result: R) => Promise<void>, payload: P }> 要显示的对话框组件。
payload?: P 传递给对话框的可选 payload。如果您想参数化对话框或使用实例特定数据，这将很有用。此值将在对话框的生命周期内保持不变。
options?: object 对话框的额外配置。
- onClose?: (result: R) => Promise<void> 在对话框关闭之前调用的函数。只要返回的 promise 未 resolve，对话框就会保持打开状态。如果您想在关闭时执行异步操作并显示加载状态，请使用此选项。

返回值

Promise<R> 一个 promise，如果用户确认，则 resolve 为用户输入，如果用户取消，则 resolve 为 null。

`dialogs.close`

以编程方式关闭先前使用 dialogs.open 打开的对话框。如果对话框返回结果，则 close 也必须使用结果调用。原始对话框 promise 将使用此结果 resolve。此 promise 也从 close 函数返回。

const myDialog = dialogs.open(/* ... */);

// ...

const result = await dialogs.close(myDialog, 123);

签名

function close(dialog, result)

参数

dialog: Promise<R> 要关闭的对话框。这应该是由 dialogs.open 先前返回的 promise。
result?: R 从对话框返回的结果。

返回值

Promise<R> 一个 promise，当对话框完全关闭时，该 promise 使用对话框结果 resolve。