使用法

ConfirmDialog には、主に制御モードと非制御モードの2つの暗黙のモードがあります。

非制御モード

コンポーネントをスタンドアロンで使用できるようにし、他のReactコンポーネントのレンダーメソッドの一部として宣言するだけで済みます:

  • マウント時に自動的に開きます（表示されます）；
  • キャンセルボタンをクリックするか、ESCキーを押すか、ダイアログのフォーカスの外をクリックすることで自動的に閉じます（つまり、オーバーレイ）；
  • onCancelは必須ではありませんが、渡すことができます。渡された場合でも、ダイアログは自動的に閉じることができます。

このモードを有効にするのは、isOpenプロパティを省略するだけで簡単です。この場合、唯一の必須プロパティはonConfirmコールバックです。メッセージはchildrenとして渡されます。任意のJSXを渡すことができ、メッセージをさらにフォーマットしたり、サブコンポーネントを含めたりすることができます: 

  1. import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
  3. function Example() {
  4.    return (
  5.    <ConfirmDialog onConfirm={ () => console.debug( ' Confirmed! ' ) }>
  6.    Are you sure? <strong>This action cannot be undone!</strong>
  7.    </ConfirmDialog>
  8.    );
  9. }

制御モード

親コンポーネントがダイアログの開閉を制御できるようにします。isOpenにブール値が渡されると有効になります:

  • 自動的には閉じません。isOpenプロパティの値を更新することで、開閉のタイミングを知らせる必要があります；
  • このモードでは、onConfirmとonCancelのコールバックは必須のプロパティです；
  • onCancelおよびonConfirmコールバックから更新することで、isOpenを制御する状態を更新する必要があります。
  1. import { useState } from 'react';
  2. import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
  4. function Example() {
  5.    const [ isOpen, setIsOpen ] = useState( true );
  7.    const handleConfirm = () => {
  8.    console.debug( 'Confirmed!' );
  9.    setIsOpen( false );
  10.    };
  12.    const handleCancel = () => {
  13.    console.debug( 'Cancelled!' );
  14.    setIsOpen( false );
  15.    };
  17.    return (
  18.    <ConfirmDialog
  19.    isOpen={ isOpen }
  20.    onConfirm={ handleConfirm }
  21.    onCancel={ handleCancel }
  22.    >
  23.    Are you sure? <strong>This action cannot be undone!</strong>
  24.    </ConfirmDialog>
  25.    );
  26. }

サポートされていない: 複数のインスタンス

複数のConfirmDialogは、現在このコンポーネントで公式にサポートされていないエッジケースです。現時点では、新しいインスタンスがModalの実装方法のために最後のインスタンスを閉じることになります。

カスタムタイプ

  1. type DialogInputEvent =
  2.    | KeyboardEvent< HTMLDivElement >
  3.    | MouseEvent< HTMLButtonElement >;

プロパティ

title: string

  • 必須: いいえ

ダイアログのためのオプションのtitle。タイトルを設定すると、ダイアログの上部にタイトルバーが表示され、少し高さが増します。このバーには、右上隅にxの閉じるボタンも含まれます。

children: React.ReactNode

  • 必須: はい

ダイアログの実際のメッセージです。子要素として渡され、任意の有効なReactNodeが受け入れられます: 

  1. <ConfirmDialog>
  2.    Are you sure? <strong>This action cannot be undone!</strong>
  3. </ConfirmDialog>

isOpen: boolean

  • 必須: いいえ

ダイアログが開いている（表示されている）か、閉じている（レンダリングされていない/表示されていない）かを定義します。また、設定されている場合は制御モードを暗黙的に切り替え、設定されていない場合は非制御モードを切り替えます。

onConfirm: ( event: DialogInputEvent ) => void

  • 必須: はい

ユーザーが確認したときに呼び出されるコールバックです。確認は、OKボタンがクリックされたときや、Enterが押されたときに発生します。

onCancel: ( event: DialogInputEvent ) => void

  • 必須: isOpenが設定されていない場合のみ

ユーザーがキャンセルしたときに呼び出されるコールバックです。キャンセルは、Cancelボタンがクリックされたとき、ESCキーが押されたとき、またはダイアログのフォーカスの外をクリックしたときに発生します（つまり、オーバーレイ内）。

isOpenが設定されていない場合（非制御モード）では必須ではありません。コンポーネントは自動的に閉じるためですが、キャンセル時に何かを行う必要がある場合はコールバックを渡すことができます（この場合でもコンポーネントは自動的に閉じます）。

isOpenが設定されている場合（制御モード）、それは必須であり、ユーザーがキャンセルしたときにダイアログを閉じるためにisOpenをfalseとして定義する状態を設定する必要があります。

confirmButtonText: string

  • 必須: いいえ
  • デフォルト: “OK”

確認ボタンのラベルとして表示するオプションのカスタムテキスト

cancelButtonText: string

  • 必須: いいえ
  • デフォルト: “キャンセル”

キャンセルボタンのラベルとして表示するオプションのカスタムテキスト

ベストプラクティス

ConfirmDialogコンポーネントは次のようにすべきです:

  • キャンセルと確認のアクションが提供される短い確認メッセージのみに使用されるべきです。
  • 確認ボタンには説明的なテキストを使用してください。デフォルトは「OK」です。