0.6.1 (#85)

* Update README.md * Fix rowIndex not defined error * Implmented strict equal * Removed redundant messages file * Fixed showWhen and enabledWhen not working on change issue * Removed unused code * 0.6.1
flipbyte · May 15, 2020 · f91afa3 · f91afa3
1 parent 53888e8
commit f91afa3
Show file tree

Hide file tree

Showing 14 changed files with 34 additions and 91 deletions.
diff --git a/README.md b/README.md
@@ -204,7 +204,7 @@ containers and keys or use the ones that come with the module.
 |       | comment        |      String     | comment / description that goes below the field                               |                                                                                                                                                                             |
 |       | commentAs      |      String     | define the HTML tag to be used for wrapping the comment. (Default: <small />) |                                                                                                                                                                             |
 |       | commentClass   |      String     | html class for the comment element                                            |                                                                                                                                                                             |
-|       | template       | React Component | String                                                                        | define your custom template for the field (check `src/FieldTemplate.js`) or set the template in the template registry using `registerTemplate` and pass the string key here |
+|       | template       | React Component | String                                                                        | define your custom template for the field (check `src/Template/Default.js`) or set the template in the template registry using `registerTemplate` and pass the string key here |
 |       | errorAs        |      String     | define the HTML tag to be used for wrapping the error. (Default: <div />)     |                                                                                                                                                                             |
 |       | errorClass     |      String     | html class for the error element                                              |                                                                                                                                                                             |
 

diff --git a/demo/src/index.js b/demo/src/index.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { render } from 'react-dom';
 import forms from './schema';
 import ExampleFormContainer from './ExampleFormContainer';

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@flipbyte/formik-json",
-    "version": "0.6.0",
+    "version": "0.6.1",
     "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",

diff --git a/src/Container/EditableGrid.js b/src/Container/EditableGrid.js
@@ -118,7 +118,7 @@ const EditableGrid = ({
                                     { isObject === false && !!buttons && !!buttons.add &&
                                         <td colSpan={ _.size(elements) + additionalColumnCount }>
                                             { _.isFunction(buttons.add)
-                                                ? buttons.add(arrayActions, arrayFields, rowIndex)
+                                                ? buttons.add(arrayActions, arrayFields)
                                                 : (
                                                     <button
                                                         type="button"

diff --git a/src/Container/Tabs.js b/src/Container/Tabs.js
@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import Element from '../Element';
 import { joinNames } from '../utils';
-import React, { Component, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import shallowequal from 'shallowequal';
 
@@ -80,14 +80,16 @@ const Tabs = ({ config = {} }) => {
                                         key={ key }
                                         href={ null }
                                         className={
-                                            tabListItemClass + ( activeTab == key ? tabActiveClass : '' ) +
-                                            ( tabInvalid ? ' is-invalid ' : '' )
+                                            tabListItemClass 
+                                            + ( activeTab === key ? tabActiveClass : '' ) 
+                                            + ( tabInvalid ? ' is-invalid ' : '' )
                                         }
-                                        style={ (tabInvalid
-                                            ? activeTab == key
+                                        style={(
+                                            tabInvalid ? (
+                                                activeTab === key
                                                 ? tabPaneActiveInvalid
                                                 : tabPaneInvalid
-                                            : null
+                                            ) : null
                                         )}
                                         onClick={() => setActiveTab(key)}
                                     >
@@ -107,15 +109,15 @@ const Tabs = ({ config = {} }) => {
                                 <div
                                     key={ tabKey }
                                     className={
-                                        tabPaneClass + ' ' + ( activeTab == tabKey ? tabActiveClass : '' )
+                                        `${tabPaneClass} ${activeTab === tabKey ? tabActiveClass : ''}` 
                                     }
                                 >
                                     { comment && <small className={ commentClass }>{ comment }</small> }
                                     { _.map(content, ({ name, ...rest }, key) => (
                                         <Element
                                             key={ key }
                                             config={{ ...rest, name: joinNames(containerName, tabName, name) }}
-                                            update={ activeTab == tabKey }
+                                            update={ activeTab === tabKey }
                                         />
                                     ))}
                                 </div>

diff --git a/src/Element.js b/src/Element.js
@@ -1,16 +1,15 @@
 import _ from 'lodash';
 import { connect } from 'formik';
-import React, { useEffect, useLayoutEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import ElementRenderer from './Renderer';
 import { FIELD } from './registry';
 import shallowequal from 'shallowequal';
 
 const Element = ({ config, update, formik }) => {
-    const { configSource, dataSource, name } = config;
+    const { configSource, dataSource } = config;
     const [ hasLoadedConfig, setHasLoadedConfig ] = useState(false);
     const [ hasLoadedData, setHasLoadedData ] = useState(dataSource ? false : true);
     const [ hasMounted, setHasMounted ] = useState(update !== false);
-    const [ submitCount, setSubmitCount ] = useState();
     const [ loadedConfig, setLoadedConfig ] = useState(undefined);
 
     /**

diff --git a/src/Field/Autocomplete.js b/src/Field/Autocomplete.js
@@ -48,13 +48,7 @@ class Autocomplete extends Component {
 
     render() {
         const { config, formik, error, value } = this.props;
-        const {
-            name,
-            type,
-            attributes,
-            defaultValue,
-            options = {}
-        } = config;
+        const { name } = config;
         const { setFieldValue, handleBlur } = formik;
 
         this.autosuggestOptions.inputProps.name = name;

diff --git a/src/Field/FileUploader.js b/src/Field/FileUploader.js
@@ -1,5 +1,4 @@
-import PropTypes from 'prop-types';
-import React, { useMemo, useEffect, Fragment } from 'react';
+import React, { useMemo } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { changeHandler } from '../utils';
 

diff --git a/src/Form.js b/src/Form.js
@@ -1,7 +1,6 @@
 import _ from 'lodash';
 import React, { useEffect, useCallback, useState } from 'react';
 import { Formik } from 'formik';
-import messages from './messages';
 import Element from './Element';
 import { SchemaProvider } from './withFormConfig';
 import { prepareValidationSchema } from './utils';

diff --git a/src/Renderer.js b/src/Renderer.js
@@ -1,6 +1,5 @@
-import _ from 'lodash';
 import React, { useState, useEffect } from 'react';
-import { Field } from 'formik';
+import { Field, useFormikContext } from 'formik';
 import withFormConfig from './withFormConfig';
 import { containers, fields, templates, FIELD } from './registry';
 import when from '@flipbyte/when-condition';
@@ -44,10 +43,9 @@ const ElementRenderer = ({
         enabledWhen,
         template
     } = config;
-    const { values } = formik;
+    const { values } = useFormikContext();
     const [ canShow, setCanShow ] = useState(showWhen ? false : true);
     const [ disabled, setDisabled ] = useState(enabledWhen ? true : false);
-    const currentValue = _.get(values, name);
 
     /**
      * If the template is function, assuming it is a react component, use it
@@ -73,15 +71,19 @@ const ElementRenderer = ({
 
     return !!type && canShow && (
         type === FIELD
-            ? <Field name={ name } render={({ field: { value }}) => (
-                <ErrorManager name={ name }>
-                    {(error) => (
-                        <Template disabled={ disabled } error={ error } { ...config }>
-                            { renderElement({ config, formik, value, error }) }
-                        </Template>
+            ? (
+                <Field name={ name }>
+                    {({ field: { value }}) => (
+                        <ErrorManager name={ name }>
+                            {(error) => (
+                                <Template disabled={ disabled } error={ error } { ...config }>
+                                    { renderElement({ config, formik, value, error }) }
+                                </Template>
+                            )}
+                        </ErrorManager>
                     )}
-                </ErrorManager>
-            )} />
+                </Field>
+            ) 
             : renderElement({ config, formik })
     );
 }

diff --git a/src/messages.js b/src/messages.js
diff --git a/src/registry.js b/src/registry.js
@@ -1,6 +1,3 @@
-import React, { Component } from 'react';
-import { Field } from 'formik';
-
 export const CONTAINER = 'container';
 export const FIELD = 'field';
 export const TEMPLATE = 'template';

diff --git a/src/withFormConfig.js b/src/withFormConfig.js
@@ -1,6 +1,4 @@
-import messages from './messages';
-import React, { Component } from 'react';
-import { prepareValidationSchema } from './utils';
+import React from 'react'; 
 
 const SchemaContext = React.createContext({});
 export const SchemaProvider = ({ value, children }) => (