@abdulghani/promise-modal 中文文档教程

Question

React Promise based Modal

您可以简单地使用 jsx react 组件创建自己的模态组件，并通过函数调用将其呈现为 promise。

  // somewhere in your component
  const handleDelete = (e: MouseEvent) => {
    showModal()
      .then((e) => {
        // do something when confirmed
      })
      .catch((e) => {
        // do something when cancelled
      });
  }

Installation

纱 yarn add @abdulghani/promise-modal\ npm npm install @abdulghani/promise-modal

Usage

准备你的模态组件，它将呈现你的模态至少有 onConfirm 和 onCancel 道具。\ 使用的类型

  onConfirm: (e: MouseEvent) => void;
  onCancel: (e: MouseEvent) => void;

然后你可以从这个包中导入函数。

  import {createModal} from "@abdulghani/promise-modal";

您需要创建要调用的模态承诺实例。

  const deleteModal = createModal(YourModalComponent);

然后您可以调用该函数以在您的组件中显示模态。

  const YourComponent: React.FC = () => {

    const showModal = (e: MouseEvent) => {
      deleteModal()
        .then(e => {
          //  do something when confirmed
        })
        .catch(e => {
          // do something when cancelled
        });
    }

    return (
      <button type="button" onClick={showModal}>Show the modal</button>
    )
  }

Config & Properties

custom root node

默认情况下，它以您的 dom 中的 root 节点 id 为目标来挂载模态元素。\ 您可以通过将根节点 ID 传递给 createModal 函数的第二个参数来自定义它。\ 像这样

  const deleteModal = createModal(YourModalComponent, "my-custom-root");

passing custom props to your modal

您可以通过在您的模态组件上处理它来将自定义道具传递给您的模态，例如 title、description、confirmText、cancelText 等。 并将其传递给显示模态调用。\

  const YourModalComponent = (props: any) => {
    const {onConfirm: any, onCancel: any, title: string, description: string} = props;

    // rest of your modal component
  }

你可以像这样将参数传递给模态

  // somewhere in your main component
  const showModal = (e: MouseEvent) => {
    deleteModal({
      title: "hello world",
      description: "my custom description here"
    })
    .then(e => {
      // do something when confirmed
    })
    .catch(e => {
      // do something when cancelled
    });
  }