From b1d639e8bcdd8f3c4cee3f49325adddffa3b4e9b Mon Sep 17 00:00:00 2001
From: wuzheqing <wuzheqing@bytedance.com>
Date: Thu, 21 Nov 2024 16:26:57 +0800
Subject: [PATCH] Improve ModalHolder usage

---
 example/src/PropsBinding.jsx | 12 +++++++++---
 src/index.tsx                |  7 +++++++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/example/src/PropsBinding.jsx b/example/src/PropsBinding.jsx
index 95281d3..225d697 100644
--- a/example/src/PropsBinding.jsx
+++ b/example/src/PropsBinding.jsx
@@ -1,6 +1,10 @@
 import { useEffect, useState } from 'react';
 import { Modal, Button } from 'antd';
-import NiceModal, { useModal, ModalHolder } from '@ebay/nice-modal-react';
+import NiceModal, {
+	useModal, ModalHolder,
+	// TS type friendly
+	createModalHandler
+} from '@ebay/nice-modal-react';
 
 export const MyAntdModal = NiceModal.create(({ time }) => {
   const modal = useModal();
@@ -26,13 +30,15 @@ export default function Example() {
 
   // modalHandler will be assign show/hide method.
   const modalHandler = {};
+	// TS type friendly
+	// const modalHandler = createModalHandler<typeof MyAntdModal>()
 
   return (
     <>
-      <Button type="primary" onClick={() => modalHandler.show()}>
+      <Button type="primary" onClick={() => modalHandler.show({ time })}>
         Show Modal
       </Button>
-      <ModalHolder modal={MyAntdModal} handler={modalHandler} time={time} />
+      <ModalHolder modal={MyAntdModal} handler={modalHandler} />
     </>
   );
 }
diff --git a/src/index.tsx b/src/index.tsx
index 9e4f5b7..c88120d 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -565,6 +565,13 @@ export const ModalHolder: React.FC<Record<string, unknown>> = ({
   return <ModalComp id={mid} {...restProps} />;
 };
 
+export function createModalHandler<T extends React.ComponentType<any>>(): {
+  show: (args?: Omit<React.ComponentProps<T>, keyof NiceModalHocProps>) => Promise<unknown>;
+  hide: () => void;
+} {
+  return Object.create(null);
+}
+
 export const antdModal = (
   modal: NiceModalHandler,
 ): { visible: boolean; onCancel: () => void; onOk: () => void; afterClose: () => void } => {