fix: not extends InnerModalProps

raotaohub · Jun 14, 2023 · 3411dcf · 3411dcf
1 parent fcff9d8
commit 3411dcf
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 47 deletions.
diff --git a/demo/antdModal/HappyModal.tsx → demo/antdModal/ComplexModal.tsx b/demo/antdModal/HappyModal.tsx → demo/antdModal/ComplexModal.tsx
@@ -3,7 +3,6 @@ import { Modal, Button, Space, Input, message } from 'antd';
 import EasyModal, { useModal } from '../../src';
 import { InnerModalProps } from '../../src/type';
 
-
 interface Props extends InnerModalProps<string> {
   name: string;
   age: number;
@@ -14,10 +13,18 @@ export const Info = EasyModal.create((props: Props) => {
   const [remark, setRemark] = useState('');
 
   const handleSave = async () => {
-    modal.hide(remark); // ts(2345)
-    modal.resolve(remark); // ts(2345)
-
-    message.success('easy');
+    try {
+      const val = await new Promise((resolve) => {
+        return setTimeout(() => {
+          resolve('request' + remark);
+        }, 1000);
+      });
+
+      modal.hide(remark);
+      message.success('easy' + val);
+    } catch (error) {
+      // ...
+    }
   };
 
   return (
@@ -31,37 +38,18 @@ export const Info = EasyModal.create((props: Props) => {
   );
 });
 
-export default function HappyModal() {
+export default function ComplexModal() {
   return (
     <Space>
       <Button
         type="primary"
         onClick={async () => {
-          // setTimeout(() => {
-          //   EasyModal.hide(MyAntdModal1);
-          // }, 3000);
-
-          // setTimeout(() => {
-          //   EasyModal.remove(MyAntdModal1);
-          // }, 3000);
-
-          EasyModal.show(
-            Info,
-            { name: 'happy', age: 19 },
-            {
-              removeOnHide: true,
-              resolveOnHide: false,
-            },
-          )
-            .then((result) => {
-              console.log('show-result:', result);
-            })
-            .catch((reason) => {
-              console.log('show-reason:', reason);
-            });
+          EasyModal.show(Info, { name: 'happy', age: 19 }).then((result) => {
+            console.log('show-result:', result);
+          });
         }}
       >
-        Show Modal
+        Complex Modal
       </Button>
     </Space>
   );

diff --git a/demo/antdModal/NoCreate.tsx → demo/antdModal/NoCreateModal.tsx b/demo/antdModal/NoCreate.tsx → demo/antdModal/NoCreateModal.tsx
@@ -9,19 +9,18 @@ interface NoCreateProps extends InnerModalProps<boolean> {
   flag: string;
 }
 
+//!! no use EasyModal.create
 export const NoCreateModal = (props: NoCreateProps) => {
-  const modal = useModal();
+  const modal = useModal<NoCreateProps>();
   const [remark, setRemark] = useState('');
 
   const handleSave = async () => {
     const value = remark.trim();
-
-    modal.hide(value); // warn ts(2554)
-    props.hide(value); // warn ts(2554)
-    message.success('easy');
+    modal.hide(false);
+    message.success('easy' + value);
   };
   return (
-    <Modal title="Hello Antd" open={modal.visible} onOk={() => handleSave()} onCancel={() => modal.hide()} centered>
+    <Modal title="Hello Antd" open={modal.visible} onOk={() => handleSave()} onCancel={() => modal.hide(null)} centered>
       Greetings: {props.name}!
       <div style={{ padding: '10px 0' }}>
         remark:
@@ -37,14 +36,14 @@ export default function NoCreate() {
       <Button
         type="primary"
         onClick={async () => {
-          const res = await EasyModal.show(NoCreateModal, {
+          await EasyModal.show(NoCreateModal, {
             name: 'no create',
             value: {},
             flag: '19',
-          }); // !error
+          });
         }}
       >
-        No Create Modal
+        Bad Modal
       </Button>
     </Space>
   );

diff --git a/demo/antdModal/NormalModal.tsx b/demo/antdModal/NormalModal.tsx
@@ -0,0 +1,39 @@
+import { Modal, Button } from 'antd';
+import EasyModal, { useModal } from '../../src';
+
+// no type
+
+export const Info = EasyModal.create((props) => {
+  // use hooks
+  // const modal = useModal();
+  // function handle() {
+  //   modal.hide(); // move the mouse modal
+  // }
+
+  return (
+    <Modal title="Hello Antd1" open={props.visible} onOk={props.hide} onCancel={props.hide}>
+      <div style={{ padding: '10px 0' }}>
+        <ul>
+          {new Array<number>(10).fill(0, 0, 10).map((t, idx) => (
+            <li key={idx}>{++t}</li>
+          ))}
+        </ul>
+      </div>
+    </Modal>
+  );
+});
+
+export default function NormalModal() {
+  return (
+    <Button
+      type="primary"
+      onClick={async () => {
+        EasyModal.show(Info).then((result) => {
+          console.log('show-result:', result);
+        });
+      }}
+    >
+      Normal Modal
+    </Button>
+  );
+}
diff --git a/demo/antdModal/RefModal.tsx b/demo/antdModal/RefModal.tsx
@@ -1,11 +1,11 @@
-import React, { useState, forwardRef } from 'react';
+import React, { useState, forwardRef, Ref, useImperativeHandle } from 'react';
 import { Modal, Button, Space, Input } from 'antd';
 import EasyModal, { useModal } from '../../src';
 import { InnerModalProps } from '../../src/type';
 
 interface IProps extends InnerModalProps<string> {
   name: string;
-  ref: React.Ref<number>;
+  ref: Ref<number>;
 }
 
 export const ForwardRefComp: React.ForwardRefExoticComponent<IProps> = forwardRef((props: IProps, ref) => {
@@ -15,6 +15,10 @@ export const ForwardRefComp: React.ForwardRefExoticComponent<IProps> = forwardRe
   console.log('modal', modal);
   console.log('props', props);
 
+  useImperativeHandle(ref, () => {
+    return 1;
+  });
+
   return (
     <Modal
       title="Hello Antd"
@@ -69,7 +73,8 @@ export const ForwardRefComp: React.ForwardRefExoticComponent<IProps> = forwardRe
 const RefComp = EasyModal.create(ForwardRefComp);
 
 export default function RefCompDemo() {
-  const ref = React.useRef(11);
+  const ref = React.useRef<number>(null);
+
   return (
     <Space>
       <Button
@@ -82,7 +87,7 @@ export default function RefCompDemo() {
           console.log('show-res:', res);
         }}
       >
-        Show Modal - Ref
+        Ref Modal
       </Button>
     </Space>
   );

diff --git a/demo/index.tsx b/demo/index.tsx
@@ -3,8 +3,9 @@ import ReactDOM from 'react-dom';
 
 import EasyModal from '../src'; /*  */
 import RefCompDemo from './antdModal/RefModal';
-import HappyModal from './antdModal/HappyModal';
-import NoCreate from './antdModal/NoCreate';
+import ComplexModal from './antdModal/ComplexModal';
+import NoCreate from './antdModal/NoCreateModal';
+import NormalModal from './antdModal/NormalModal';
 
 function App() {
   return (
@@ -20,9 +21,10 @@ function App() {
     >
       <h2> Ez Modal React </h2>
       <div>
-        <HappyModal></HappyModal>
+        <ComplexModal></ComplexModal>
         <RefCompDemo></RefCompDemo>
         <NoCreate></NoCreate>
+        <NormalModal></NormalModal>
       </div>
     </div>
   );

diff --git a/src/index.tsx b/src/index.tsx
@@ -16,6 +16,7 @@ import {
   ModalResolveType,
   ModalProps,
   BuildFnInterfaceCheck,
+  InnerModalProps,
 } from './type';
 
 export * from './type';
@@ -129,7 +130,9 @@ function findModal<P, V>(Modal: EasyModalHOC<P, V> | string) {
   return find ? find.Component : void 0;
 }
 
-function create<P extends ModalProps<P, V>, V = ModalResolveType<P>>(Comp: React.ComponentType<P>): EasyModalHOC<P, V> {
+function create<P extends ModalProps<P, V> = InnerModalProps, V = ModalResolveType<P>>(
+  Comp: React.ComponentType<P>,
+): EasyModalHOC<P, V> {
   if (!Comp) new Error('Please pass in the react component.');
   const EasyModalHOCWrapper: EasyModalHOC<P, V> = ({ id: modalId }) => {
     const { id, props, promise, config, ...innerProps } = useModal(modalId);
@@ -160,7 +163,7 @@ function register<P, V>(id: string, Modal: EasyModalHOC<P, V>, props: ModalProps
 
 function show<P extends ModalProps<P, V>, V extends ModalResolveType<P> = ModalResolveType<P>>(
   Modal: EasyModalHOC<P, V>,
-  props: ModalProps<P, V>,
+  props: ModalProps<P, V> = {} as any,
   config: EasyModalItem<P, V>['config'] = {
     removeOnHide: true,
     resolveOnHide: true,