feat: Support component on Form (#19)

* support component

* update father

* remove never hit

Author: zombieJ

README.md

@@ -63,6 +63,7 @@ We use typescript to create the Type definition. You can view directly in IDE. B
 
 | Prop             | Description                                        | Type                                  | Default          |
 | ---------------- | -------------------------------------------------- | ------------------------------------- | ---------------- |
+| component        | Customize Form render component                    | string \| Component \| false          | form             |
 | fields           | Control Form fields status. Only use when in Redux | [FieldData](#fielddata)[]             | -                |
 | form             | Set form instance created by `useForm`             | [FormInstance](#useform)              | `Form.useForm()` |
 | initialValues    | Initial value of Form                              | Object                                | -                |

package.json

@@ -47,7 +47,7 @@
     "enzyme": "^3.1.0",
     "enzyme-adapter-react-16": "^1.0.2",
     "enzyme-to-json": "^3.1.4",
-    "father": "^2.8.0",
+    "father": "^2.13.2",
     "np": "^5.0.3",
     "react": "^v16.9.0-alpha.0",
     "react-dom": "^v16.9.0-alpha.0",

src/Form.tsx

@@ -20,13 +20,11 @@ export interface FormProps extends BaseFormProps {
   initialValues?: Store;
   form?: FormInstance;
   children?: RenderProps | React.ReactNode;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  component?: false | string | React.FC<any> | React.ComponentClass<any>;
   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;
@@ -39,11 +37,11 @@ const Form: React.FunctionComponent<FormProps> = (
     fields,
     form,
     children,
+    component: Component = 'form',
     validateMessages,
     onValuesChange,
     onFieldsChange,
     onFinish,
-    __COMPATIBILITY_USAGE_OR_YOU_WILL_BE_FIRED__,
     ...restProps
   }: FormProps,
   ref,
@@ -113,21 +111,18 @@ const Form: React.FunctionComponent<FormProps> = (
     prevFieldsRef.current = fields;
   }, [fields, formInstance]);
 
-  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>
-    );
+  const wrapperNode = (
+    <FieldContext.Provider value={formInstance as InternalFormInstance}>
+      {childrenNode}
+    </FieldContext.Provider>
+  );
+
+  if (Component === false) {
+    return wrapperNode;
   }
 
   return (
-    <form
+    <Component
       {...restProps}
       onSubmit={event => {
         event.preventDefault();
@@ -144,10 +139,8 @@ const Form: React.FunctionComponent<FormProps> = (
           .catch(e => e);
       }}
     >
-      <FieldContext.Provider value={formInstance as InternalFormInstance}>
-        {childrenNode}
-      </FieldContext.Provider>
-    </form>
+      {wrapperNode}
+    </Component>
   );
 };
 

src/utils/validateUtil.ts

@@ -38,10 +38,8 @@ function convertMessages(
     enum: (rule.enum || []).join(', '),
   };
 
-  const replaceFunc = (template: string, additionalKV?: Record<string, string>) => {
-    if (!template) return null;
-    return () => replaceMessage(template, { ...kv, ...additionalKV });
-  };
+  const replaceFunc = (template: string, additionalKV?: Record<string, string>) => () =>
+    replaceMessage(template, { ...kv, ...additionalKV });
 
   /* eslint-disable no-param-reassign */
   type Template =

tests/index.test.js

@@ -25,19 +25,27 @@ describe('Form.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('component', () => {
+      it('without dom', () => {
+        const wrapper = mount(<Form component={false}>{renderContent()}</Form>);
+        expect(wrapper.find('form').length).toBe(0);
+        expect(wrapper.find('input').length).toBe(2);
+      });
+
+      it('use string', () => {
+        const wrapper = mount(<Form component="pre">{renderContent()}</Form>);
+        expect(wrapper.find('form').length).toBe(0);
+        expect(wrapper.find('pre').length).toBe(1);
+        expect(wrapper.find('input').length).toBe(2);
+      });
+
+      it('use component', () => {
+        const MyComponent = ({ children }) => <div>{children}</div>;
+        const wrapper = mount(<Form component={MyComponent}>{renderContent()}</Form>);
+        expect(wrapper.find('form').length).toBe(0);
+        expect(wrapper.find(MyComponent).length).toBe(1);
+        expect(wrapper.find('input').length).toBe(2);
+      });
     });
 
     describe('render props', () => {