fix: fixed Modal.Form ts problems (#350)

* fix: fixed Modal.Form  ts problems

* feat: issuse ts name

* feat: modifying the ts definition

Author: Zaoei

src/modal/demos/advance.tsx

@@ -2,14 +2,21 @@ import React, { useState } from 'react';
 import { Button, Form, Input, InputNumber, Table } from 'antd';
 import { Modal } from 'dt-react-component';
 
-interface Data {
-    key: string;
+interface FormValues {
     name: string;
     age: number;
     address: string;
 }
 
-const data: Data[] = [
+interface TableData extends FormValues {
+    key: string;
+}
+
+interface CustomModalFormProps {
+    customAttr: string;
+}
+
+const data: TableData[] = [
     {
         key: '1',
         name: 'UED',
@@ -24,9 +31,12 @@ const data: Data[] = [
     },
 ];
 
-const ModalForm = Modal.Form((_props) => {
+const ModalForm = Modal.Form<CustomModalFormProps, FormValues>((props) => {
     return (
         <>
+            <Form.Item label="我是自定义参数" name={'name'} initialValue={props.customAttr}>
+                <Input disabled />
+            </Form.Item>
             <Form.Item label="name" name={'name'}>
                 <Input />
             </Form.Item>
@@ -43,7 +53,7 @@ const ModalForm = Modal.Form((_props) => {
 export default () => {
     const [visible, setVisible] = useState(false);
     const [index, setIndex] = useState<number>(0);
-    const [dataSource, setDataSource] = useState<Data[]>(data);
+    const [dataSource, setDataSource] = useState<TableData[]>(data);
 
     const columns = [
         {
@@ -65,7 +75,7 @@ export default () => {
             title: '操作',
             dataIndex: 'operate',
             key: 'operate',
-            render: (_: void, record: Data, index: number) => {
+            render: (_: void, _record: TableData, index: number) => {
                 return (
                     <Button
                         onClick={() => {
@@ -81,7 +91,7 @@ export default () => {
         },
     ];
 
-    const onSubmit = (values: Data) => {
+    const onSubmit = (values: FormValues) => {
         dataSource.splice(index, 0, { ...values, key: new Date() + '' });
         setDataSource([...dataSource]);
 
@@ -98,6 +108,7 @@ export default () => {
                 visible={visible}
                 onCancel={changeVisible}
                 onSubmit={onSubmit}
+                customAttr={'customAttr'}
             />
         </>
     );

src/modal/demos/basics.tsx

@@ -2,11 +2,24 @@ import React, { useState } from 'react';
 import { Button, Form, Input } from 'antd';
 import { Modal } from 'dt-react-component';
 
-const ModalForm = Modal.Form((_props) => {
+interface FormValues {
+    username: string;
+}
+
+interface CustomModalFormProps {
+    customAttr: string;
+}
+
+const ModalForm = Modal.Form<CustomModalFormProps, FormValues>((props) => {
     return (
-        <Form.Item label="username" name={'username'} rules={[{ max: 10 }]}>
-            <Input />
-        </Form.Item>
+        <>
+            <Form.Item label="我是自定义参数" name={'name'} initialValue={props.customAttr}>
+                <Input disabled />
+            </Form.Item>
+            <Form.Item label="username" name={'username'} rules={[{ max: 10 }]}>
+                <Input />
+            </Form.Item>
+        </>
     );
 });
 
@@ -22,6 +35,7 @@ export default () => {
                 onSubmit={(value) => {
                     console.log(value);
                 }}
+                customAttr={'customAttr'}
             />
         </>
     );

src/modal/demos/classComponent.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { Button, Form, Input } from 'antd';
+import { Modal } from 'dt-react-component';
+import { IModalFormProps } from '../form';
+
+interface FormValue {
+    username: string;
+}
+
+interface CustomModalFormProps {
+    customAttr: string;
+}
+
+type FormItemsProps = CustomModalFormProps & IModalFormProps<FormValue>;
+
+class FormItems extends React.Component<FormItemsProps> {
+    render(): React.ReactNode {
+        return (
+            <>
+                <Form.Item
+                    label="我是自定义参数"
+                    name={'name'}
+                    initialValue={this.props.customAttr}
+                >
+                    <Input disabled />
+                </Form.Item>
+                <Form.Item label="username" name={'username'} rules={[{ max: 10 }]}>
+                    <Input />
+                </Form.Item>
+            </>
+        );
+    }
+}
+
+const ModalForm = Modal.Form<CustomModalFormProps, FormValue>(FormItems);
+
+export default () => {
+    const [visible, setVisible] = useState(false);
+    return (
+        <>
+            <Button onClick={() => setVisible(true)}>click</Button>
+            <ModalForm
+                title="BasicModalForm"
+                visible={visible}
+                onCancel={() => setVisible((v) => !v)}
+                onSubmit={(value) => {
+                    console.log(value);
+                }}
+                customAttr={'customAttr'}
+            />
+        </>
+    );
+};

src/modal/form.tsx

@@ -1,15 +1,12 @@
 import React, { ReactElement, useMemo } from 'react';
-import { Modal, FormProps, ModalFuncProps } from 'antd';
+import { Modal, FormProps, ModalProps } from 'antd';
 import { FORM_PROPS, MODAL_PROPS } from '../utils/antdProps';
 import Utils from '../utils';
 import Form from '../form';
 
-export interface IModalFormProps<Values = any> extends FormProps, ModalFuncProps {
-    /**
-     * modal title
-     * @param {string}
-     */
-    title?: string;
+export interface IModalFormProps<Values = any>
+    extends Omit<FormProps, 'title'>,
+        Omit<ModalProps, 'children'> {
     /**
      * modal className
      * @param {string}
@@ -22,7 +19,6 @@ export interface IModalFormProps<Values = any> extends FormProps, ModalFuncProps
      * @returns
      */
     onSubmit?: (values: Values) => void;
-    [key: string]: any;
 }
 
 const ModalForm = (props: IModalFormProps) => {
@@ -50,8 +46,8 @@ const ModalForm = (props: IModalFormProps) => {
         } catch (error) {}
     };
 
-    const onCancel = () => {
-        props.onCancel?.();
+    const onCancel = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+        props.onCancel?.(e);
     };
 
     const afterClose = () => {
@@ -76,11 +72,14 @@ const ModalForm = (props: IModalFormProps) => {
     );
 };
 
-const InternalForm = (FormComponent: React.ComponentType) => {
-    return (props: IModalFormProps) => (
+function InternalForm<P = any, V = any>(
+    FormComponent: React.ComponentType<IModalFormProps<V> & P>
+): React.FC<IModalFormProps<V> & P> {
+    return (props: IModalFormProps<V> & P) => (
         <ModalForm {...props}>
-            <FormComponent />
+            <FormComponent {...(props as IModalFormProps<V> & P)} />
         </ModalForm>
     );
-};
+}
+
 export default InternalForm;

src/modal/index.md

@@ -17,7 +17,8 @@ demo:
 所用使用方式同 `Ant Design` 的 Modal 组件，新增 `Modal.Form` 组件
 
 <code src="./demos/basics.tsx" title="基础使用"></code>
-<code src="./demos/advance.tsx" title="进阶使用"></code>
+<code src="./demos/advance.tsx" title="接收函数组件"></code>
+<code src="./demos/classComponent.tsx" title="接收类组件"></code>
 
 ## API