feat: modifying the ts definition

DTStack · Jun 7, 2023 · 5eda3c7 · 5eda3c7
1 parent ed14e04
commit 5eda3c7
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 25 deletions.
diff --git a/src/modal/demos/advance.tsx b/src/modal/demos/advance.tsx
@@ -2,16 +2,20 @@ import React, { useState } from 'react';
 import { Button, Form, Input, InputNumber, Table } from 'antd';
 import { Modal } from 'dt-react-component';
 
-interface FormValue {
+interface FormValues {
     name: string;
     age: number;
     address: string;
 }
 
-interface TableData extends FormValue {
+interface TableData extends FormValues {
     key: string;
 }
 
+interface CustomModalFormProps {
+    customAttr: string;
+}
+
 const data: TableData[] = [
     {
         key: '1',
@@ -27,9 +31,12 @@ const data: TableData[] = [
     },
 ];
 
-const ModalForm = Modal.Form<FormValue>((_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>
@@ -84,7 +91,7 @@ export default () => {
         },
     ];
 
-    const onSubmit = (values: FormValue) => {
+    const onSubmit = (values: FormValues) => {
         dataSource.splice(index, 0, { ...values, key: new Date() + '' });
         setDataSource([...dataSource]);
 
@@ -101,6 +108,7 @@ export default () => {
                 visible={visible}
                 onCancel={changeVisible}
                 onSubmit={onSubmit}
+                customAttr={'customAttr'}
             />
         </>
     );

diff --git a/src/modal/demos/basics.tsx b/src/modal/demos/basics.tsx
@@ -2,15 +2,24 @@ import React, { useState } from 'react';
 import { Button, Form, Input } from 'antd';
 import { Modal } from 'dt-react-component';
 
-interface FormValue {
+interface FormValues {
     username: string;
 }
 
-const ModalForm = Modal.Form<FormValue>((_props) => {
+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>
+        </>
     );
 });
 
@@ -26,6 +35,7 @@ export default () => {
                 onSubmit={(value) => {
                     console.log(value);
                 }}
+                customAttr={'customAttr'}
             />
         </>
     );

diff --git a/src/modal/demos/classComponent.tsx b/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'}
+            />
+        </>
+    );
+};
diff --git a/src/modal/form.tsx b/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,12 +72,12 @@ const ModalForm = (props: IModalFormProps) => {
     );
 };
 
-function InternalForm<V = any>(
-    FormComponent: React.ComponentType<IModalFormProps<V>>
-): React.FC<IModalFormProps<V>> {
-    return (props: IModalFormProps<V>) => (
+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>
     );
 }

diff --git a/src/modal/index.md b/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