Hook form working

Author: lukefrogger

src/examples/FullyManaged.js

@@ -20,7 +20,7 @@ const FullyManaged = () => {
         <br />
         <div>
           <FetchForm
-            slug='6fa85752-e237-493d-9c63-c441049cb53d'
+            slug='fcd4ca8b-12d4-4b8c-882d-00144d54d02c'
             onSubmit={onSubmit}
           />
         </div>

src/examples/hookform/HookForm.js

@@ -7,14 +7,15 @@ import {
   Checkbox,
   Select,
   Radio,
-  InputNumber
+  InputNumber,
+  Alert
 } from 'antd';
 import './styles.css';
 
 const HookForm = () => {
   // FetchFormProvider needs to wrap this component
   const [fetchForm, loading, error] = useFetchForms(
-    'a6e92e44-fe5e-4018-b555-3ed9bd60fc70'
+    'fcd4ca8b-12d4-4b8c-882d-00144d54d02c'
   );
 
   const onFinish = (values) => {
@@ -26,8 +27,7 @@ const HookForm = () => {
   };
 
   // custom form validation
-  const validate = (fieldType, validations) => {
-    console.log('validate');
+  const createValidationRules = (fieldType, validations) => {
     const rules = validations.map((validation) => {
       if (validation.rule === 'required') {
         return { required: true, message: validation.message };
@@ -40,16 +40,15 @@ const HookForm = () => {
         return {
           [validation.rule]: validation.limit,
           message: validation.message,
-          type: fieldType
+          type: fieldType === 'number' ? 'number' : 'string'
         };
       }
     });
-
-    // console.log('rules', rules);
+    console.log('rules', rules);
     return rules;
   };
 
-  const selectField = (item) => {
+  const findFieldType = (item) => {
     switch (item.fieldType) {
       case 'select':
         const { Option } = Select;
@@ -71,7 +70,7 @@ const HookForm = () => {
       case 'number':
         return <InputNumber key={item.name} />;
       default:
-        return <Input key={item.name} />;
+        return <Input {...item.fieldHtml} key={item.name} />;
     }
   };
 
@@ -83,19 +82,20 @@ const HookForm = () => {
         with custom components and layouts
       </p>
       <br />
-      {error && <div>Error: {error.message}</div>}
+      {error && <Alert message={error} type='error' showIcon />}
 
       {loading ? (
         <div>Loading...</div>
       ) : (
         fetchForm && (
           <Form
             name='HookForm'
-            labelCol={{ span: 6 }}
+            labelCol={{ span: 4 }}
             wrapperCol={{ span: 18 }}
             onFinish={onFinish}
             onFinishFailed={onFinishFailed}
             autoComplete='off'
+            noValidate
           >
             {fetchForm.formItems.map((item, i) => (
               <Form.Item
@@ -105,7 +105,7 @@ const HookForm = () => {
                 valuePropName={
                   item.fieldType === 'checkbox' ? 'checked' : 'value'
                 }
-                rules={validate(item.fieldType, item.validation)}
+                rules={createValidationRules(item.fieldType, item.validation)}
                 validateTrigger='onBlur'
               >
                 {item.fieldType === 'radio' ? (
@@ -117,7 +117,7 @@ const HookForm = () => {
                     ))}
                   </Radio.Group>
                 ) : (
-                  selectField(item)
+                  findFieldType(item)
                 )}
               </Form.Item>
             ))}
@@ -128,7 +128,7 @@ const HookForm = () => {
               }}
             >
               <Button type='primary' htmlType='submit'>
-                {fetchForm.submitText || 'Submit'}
+                {fetchForm.submitText}
               </Button>
             </Form.Item>
           </Form>

src/examples/hookform/Parent.js

@@ -4,7 +4,7 @@ import HookForm from './HookForm';
 
 const HookParent = () => {
   return (
-    <FetchFormsProvider permission='ad784124b18825b417ab71426f13f050'>
+    <FetchFormsProvider permission='92a7a5221aef332efa00bd23012ad6b2'>
       <HookForm />
     </FetchFormsProvider>
   );

src/lib/exports/hooks/useCloudSave.js

@@ -46,27 +46,3 @@ export const validate = (values, validation) => {
   }
   return errors;
 };
-
-export const validateField = (value, validations) => {
-  console.log(value, validations);
-  for (let i = 0; i < validations.length; i++) {
-    const validation = validations[i];
-
-    if (validation.rule === 'regex' && !validRegex(validation.limit, value)) {
-      return validation.message;
-    } else if (
-      validation.rule === 'min' &&
-      !biggerThan(validation.limit, value)
-    ) {
-      return validation.message;
-    } else if (
-      validation.rule === 'max' &&
-      !smallerTan(validation.limit, value)
-    ) {
-      return validation.message;
-    } else if (validation.rule === 'required' && !hasValue(value)) {
-      return validation.message;
-    }
-  }
-  return undefined;
-};