support notContainForm (#13)

* feat: add notContainForm props to allow customize form

* chore: add yarn.lock to .gitignore

Author: JIACHENG9

.gitignore

@@ -4,4 +4,5 @@ node_modules
 coverage/
 es/
 lib/
-~*
+~*
+yarn.lock

examples/StateForm-notContainForm.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Form, { Field, useForm } from '../src/';
+import Input from './components/Input';
+
+
+export default () => {
+  const [form] = useForm();
+  return (
+    <form onSubmit={event => {
+      event.preventDefault();
+      event.stopPropagation();
+      form.validateFields().then(function (values) {
+        console.log(values);
+      }) // Do nothing about submit catch
+      .catch(function (e) {
+        return e;
+      });
+    }}>
+      <Form notContainForm form={form}>
+        <Field name="username">
+          <Input placeholder="Username" />
+        </Field>
+        <Field name="password">
+          <Input placeholder="Password" />
+        </Field>
+      </Form>
+      <button type="submit">submit</button>
+    </form>
+  );
+}

src/Form.tsx

@@ -22,6 +22,10 @@ export interface FormProps extends BaseFormProps {
   fields?: FieldData[];
   name?: string;
   validateMessages?: ValidateMessages;
+  __COMPATIBILITY_USAGE_OR_YOU_WILL_BE_FIRED__?: {
+    NOT_CONTAIN_FORM?: boolean;
+    HOOK_MARK: string;
+  };
   onValuesChange?: Callbacks['onValuesChange'];
   onFieldsChange?: Callbacks['onFieldsChange'];
   onFinish?: (values: Store) => void;
@@ -38,6 +42,7 @@ const Form: React.FunctionComponent<FormProps> = (
     onValuesChange,
     onFieldsChange,
     onFinish,
+    __COMPATIBILITY_USAGE_OR_YOU_WILL_BE_FIRED__,
     ...restProps
   }: FormProps,
   ref,
@@ -105,6 +110,19 @@ const Form: React.FunctionComponent<FormProps> = (
   }
   prevFieldsRef.current = fields;
 
+  if (
+    __COMPATIBILITY_USAGE_OR_YOU_WILL_BE_FIRED__ &&
+    __COMPATIBILITY_USAGE_OR_YOU_WILL_BE_FIRED__.NOT_CONTAIN_FORM &&
+    __COMPATIBILITY_USAGE_OR_YOU_WILL_BE_FIRED__.HOOK_MARK ===
+      'asdihasiodhaohdioahfoihsoefhisihifhsiofhiosfd'
+  ) {
+    return (
+      <FieldContext.Provider value={formInstance as InternalFormInstance}>
+        {childrenNode}
+      </FieldContext.Provider>
+    );
+  }
+
   return (
     <form
       {...restProps}

tests/index.test.js

@@ -25,6 +25,21 @@ describe('Basic', () => {
       expect(wrapper.find('input').length).toBe(2);
     });
 
+    it('notContainForm', () => {
+      const wrapper = mount(
+        <Form
+          __COMPATIBILITY_USAGE_OR_YOU_WILL_BE_FIRED__={{
+            NOT_CONTAIN_FORM: true,
+            HOOK_MARK: 'asdihasiodhaohdioahfoihsoefhisihifhsiofhiosfd',
+          }}
+        >
+          {renderContent()}
+        </Form>,
+      );
+      expect(wrapper.find('form').length).toBe(0);
+      expect(wrapper.find('input').length).toBe(2);
+    });
+
     describe('render props', () => {
       it('normal', () => {
         const wrapper = mount(<Form>{renderContent}</Form>);