chore: update withFormState、withFormApi type define (#1323)

* chore: update withFormState、withFormApi type define

* chore: udpate withFormState withFormApi define

packages/semi-ui/form/_story/form.stories.tsx

@@ -1,10 +1,12 @@
 import React, { FunctionComponent } from 'react';
 import { storiesOf } from '@storybook/react';
-import { Form, useFormState, useFormApi, withField, Input, Button, Upload } from '../../index';
+import { Form, useFormState, useFormApi, withField, Input, Button, Upload, withFormApi, withFormState } from '../../index';
 import { values } from 'lodash';
 const stories = storiesOf('Form', module);
+import { FormApiContext } from '../context';
 
-import { FormApi, FormFCChild } from '../interface';
+
+import type { FormApi, FormFCChild, FormState } from '../interface';
 
 const treeData = [
     {
@@ -187,13 +189,45 @@ class Demo extends React.Component<IProps, IState> {
 stories.add('Form render', () => <Form render={({values, formApi, formState}) => <div></div>}></Form>);
 
 
+
+interface CodeProps {
+    type?: 'email' | 'phone';
+    test?: 'a' | 'b' | 'c';
+    onSend?: () => Promise<void>
+}
+
+class CodeC extends React.Component<CodeProps & { formState?: FormState, formApi?: FormApi }, IState> {
+    state: IState = {
+        visible: false,
+    };
+    render() {
+        const { formState } = this.props;
+
+        return <div>
+            t
+        </div>;
+    }
+}
+
+
+const t = () => (<CodeC type='email'></CodeC>);
+const DoubleWrap = withFormState(withFormApi(CodeC));
+const OneWrap = withFormApi(CodeC);
+
+
 stories.add('Form children', () => <Form>
     {({ formState, formApi, values }) => (
         <>
         <Form.Input field='fe'>
         </Form.Input>
+        
+        <DoubleWrap type='email' test='c'></DoubleWrap>
+        <OneWrap type='email'></OneWrap>
+        <CodeC type='email'></CodeC>
+        
         <Form.DatePicker field='role'/>
         </>
         )
     }
 </Form>);
+

packages/semi-ui/form/hoc/withFormApi.tsx

@@ -1,11 +1,21 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { FormApiContext } from '../context';
+import type { BaseFormApi as FormApi } from '@douyinfe/semi-foundation/form/interface';
 
-const withFormApi = (Component: React.ElementType) =>
-    React.forwardRef((props, ref) => (
-        <FormApiContext.Consumer>
-            {formApi => <Component formApi={formApi} ref={ref} {...props} />}
-        </FormApiContext.Consumer>
-    ));
+function withFormApi<
+    C extends React.ElementType,
+    T extends React.ComponentProps<C> & React.RefAttributes<any>,
+    R extends React.ComponentType<T>
+>(Component: C) {
+    let WithApiCom = (props: any, ref: React.MutableRefObject<any> | ((instance: any) => void)) => {
+        return (
+            <FormApiContext.Consumer>
+                { (formApi: FormApi) => (<Component formApi={formApi} ref={ref} {...props} />) }
+            </FormApiContext.Consumer>
+        );
+    };
+    WithApiCom = forwardRef(WithApiCom);
+    return WithApiCom as R;
+}
 
 export default withFormApi;

packages/semi-ui/form/hoc/withFormState.tsx

@@ -1,11 +1,21 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { FormStateContext } from '../context';
+import type { FormState } from '@douyinfe/semi-foundation/form/interface';
 
-const withFormState = (Component: React.ElementType) =>
-    React.forwardRef((props, ref) => (
-        <FormStateContext.Consumer>
-            {formState => <Component formState={formState} ref={ref} {...props} />}
-        </FormStateContext.Consumer>
-    ));
+function withFormState<
+    C extends React.ElementType,
+    T extends React.ComponentProps<C> & React.RefAttributes<any>,
+    R extends React.ComponentType<T>
+>(Component: C) {
+    let WithStateCom = (props: any, ref: React.MutableRefObject<any> | ((instance: any) => void)) => {
+        return (
+            <FormStateContext.Consumer>
+                {(formState: FormState) => <Component formState={formState} ref={ref} {...props} />}
+            </FormStateContext.Consumer>
+        );
+    };
+    WithStateCom = forwardRef(WithStateCom);
+    return WithStateCom as R;
+}
 
 export default withFormState;