Merge pull request #84 from easeq/master

v0.6.0

Author: easeq

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@flipbyte/formik-json",
-    "version": "0.5.1",
+    "version": "0.6.0",
     "description": "formik-json is a wrapper for Formik to easily create forms using JSON / Javascript Object for defining the elements",
     "main": "lib/index.js",
     "module": "es/index.js",
@@ -29,7 +29,7 @@
         "@flipbyte/when-condition": "^0.6.0",
         "@flipbyte/yup-schema": "^0.1.5",
         "codemirror": "^5.41.0",
-        "formik": "^1.5.2",
+        "formik": "^2.1.4",
         "react-autosuggest": "^9.4.3",
         "react-codemirror2": "^7.0.0",
         "react-dropzone": "^10.2.1",

package.json

@@ -3,21 +3,21 @@ import React from 'react';
 import Element from '../Element';
 import { getName } from '../utils';
 import PropTypes from 'prop-types';
+import { Form as FormikDOMForm } from 'formik';
 
-const Form = ({ config, formik }) => {
+const Form = ({ config }) => {
     const { name: containerName = '', elements, htmlClass = 'form-horizontal', comment, commentClass = 'text-muted d-block mb-3' } = config;
-    const { handleSubmit, handleReset } = formik;
 
     return(
-        <form className={ htmlClass } onSubmit={ handleSubmit } onReset={ handleReset }>
+        <FormikDOMForm className={ htmlClass }>
             { comment && <small className={ commentClass }>{ comment }</small> }
             { _.map(elements, ({ name, ...config }, key) => (
                 <Element
                     key={ key }
                     config={{ ...config, name: getName(config.type, name, containerName) }}
                 />
             ))}
-        </form>
+        </FormikDOMForm>
     );
 }
 

src/Container/Form.js

@@ -83,5 +83,6 @@ export default connect(
         && shallowequal(config, nextProps.config)
         && formik.initialValues === nextProps.formik.initialValues
         && formik.isValidating === nextProps.formik.isValidating
+        && formik.isSubmitting === nextProps.formik.isSubmitting
     ))
 );

src/Element.js

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import React, { useState } from 'react';
-import { connect } from 'formik';
+import { useFormikContext } from 'formik';
 
 /**
  * Error manager component that displays error only when it's right
@@ -20,9 +20,10 @@ import { connect } from 'formik';
  * @param {object} formik
  * @param {function} children
  */
-const ErrorManager = ({ name, formik, children }) => {
+const ErrorManager = ({ name, children }) => {
     // Set submitCount on initial mount.
-    const { submitCount: formikSubmitCount, isSubmitting, errors, touched } = formik;
+    const formik = useFormikContext();
+    const { submitCount: formikSubmitCount, isSubmitting, errors, touched } = useFormikContext();
     const [ submitCount ] = useState(isSubmitting ? formikSubmitCount - 1 : formikSubmitCount);
     const isTouched = _.get(touched, name);
     const errorMessage = _.get(errors, name);
@@ -31,4 +32,4 @@ const ErrorManager = ({ name, formik, children }) => {
     return children(error);
 };
 
-export default connect(ErrorManager);
+export default ErrorManager;

src/ErrorManager.js

@@ -35,7 +35,7 @@ const Form = React.forwardRef(({ schema, onUpdate = () => {}, initialValues = {}
     }, [ schema ]);
 
     /**
-     * Everytime the schema changes re-initialize validationSchema
+     * Everytime the schema changes, re-initialize validationSchema
      *
      * This is has to be done everytime schema changes because,
      * certain cases may involve dynamically changing form fields based on
@@ -54,7 +54,7 @@ const Form = React.forwardRef(({ schema, onUpdate = () => {}, initialValues = {}
         <SchemaProvider value={{ validationSchema, schema }}>
             <Formik
                 { ...formProps }
-                ref={ ref }
+                innerRef={ ref }
                 render={(props) => (
                     <FormikForm
                         onUpdate={ onUpdate }