flipbyte · tgrrr · Feb 28, 2020 · Feb 28, 2020 · Feb 28, 2020 · Feb 28, 2020
diff --git a/README.md b/README.md
@@ -195,7 +195,7 @@ containers and keys or use the ones that come with the module.
 |       | showWhen       |      String     | Check [when-condition](https://github.com/flipbyte/when-condition) |                                                                                                                                                                             |
 |       | enabledWhen    |      String     | Check [when-condition](https://github.com/flipbyte/when-condition) |                                                                                                                                                                             |
 |       | fieldClass     |      String     | html class for the main html/3-rd party form field                 |                                                                                                                                                                             |
-|       | 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 |
 
 #### Field specific properties
 

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/demo/src/schema/basic.js b/demo/src/schema/basic.js
@@ -12,7 +12,14 @@ export default {
         renderer: "form",
         configSource: (formik, config) => {
             return new Promise((resolve, reject) => {
-                fetch('http://google.com') // Call the fetch function passing the url of the API as a parameter
+                fetch('https://jsonplaceholder.typicode.com/todos/1', 
+                {
+                    mode: 'cors',
+                    headers: {
+                        'Access-Control-Allow-Origin': '*'
+                    }
+                }
+                ) // Call the fetch function passing the url of the API as a parameter
                     .then(function(data) {
                         // Your code for handling the data you get from the API
                         console.log(data);

diff --git a/package.json b/package.json
@@ -28,8 +28,14 @@
     "dependencies": {
         "@flipbyte/when-condition": "^0.6.0",
         "@flipbyte/yup-schema": "^0.1.5",
+        "babel": "^6.23.0",
+        "babel-generator": "^6.26.1",
+        "babel-template": "^6.26.0",
+        "babel-types": "^6.26.0",
         "codemirror": "^5.41.0",
         "formik": "^1.5.2",
+        "jquery": "^3.4.1",
+        "popper.js": "^1.16.1",
         "react-autosuggest": "^9.4.3",
         "react-codemirror2": "^6.0.0",
         "react-dropzone": "^10.0.0",
@@ -40,11 +46,11 @@
         "shallowequal": "^1.1.0"
     },
     "peerDependencies": {
+        "@fortawesome/fontawesome-free": "^5.6.3",
         "lodash": "^4.17.13",
-        "react": "^16.8.6",
-        "react-dom": "^16.8.6",
         "prop-types": "^15.6.2",
-        "@fortawesome/fontawesome-free": "^5.6.3"
+        "react": "^16.8.6",
+        "react-dom": "^16.8.6"
     },
     "devDependencies": {
         "@fortawesome/fontawesome-free": "^5.6.3",

diff --git a/src/Container/EditableGrid.js b/src/Container/EditableGrid.js
@@ -115,7 +115,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) // FIXME: rowIndex error: rowIndex is not defined
                                                 : (
                                                     <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';
 
@@ -78,13 +78,13 @@ const Tabs = ({ config = {} }) => {
                                     const tabInvalid = tabValidations.next().value === true;
                                     return <a
                                         key={ key }
-                                        href="javascript:void(null)"
+                                        href={ null }
                                         className={
-                                            tabListItemClass + ( activeTab == key ? tabActiveClass : '' ) +
+                                            tabListItemClass + ( activeTab === key ? tabActiveClass : '' ) +
                                             ( tabInvalid ? ' is-invalid ' : '' )
                                         }
                                         style={ (tabInvalid
-                                            ? activeTab == key
+                                            ? activeTab === key
                                                 ? tabPaneActiveInvalid
                                                 : tabPaneInvalid
                                             : null
@@ -103,14 +103,14 @@ const Tabs = ({ config = {} }) => {
                                 <div
                                     key={ tabKey }
                                     className={
-                                        tabPaneClass + ' ' + ( activeTab == tabKey ? tabActiveClass : '' )
+                                        tabPaneClass + ' ' + ( activeTab === tabKey ? tabActiveClass : '' )
                                     }
                                 >
                                     { _.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,25 +1,23 @@
 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 [ , setHasLoadedData ] = useState(dataSource ? false : true);
     const [ hasMounted, setHasMounted ] = useState(update !== false);
-    const [ submitCount, setSubmitCount ] = useState();
     const [ loadedConfig, setLoadedConfig ] = useState(undefined);
 
     /**
      * After load data
      *
-     * @param  {mixed} value
+     * @param  {mixed} value // value is not used
      * @return {void}
      */
-    const loadDataAfter = (value) => setHasLoadedData(true);
+    const loadDataAfter = () => setHasLoadedData(true);
 
     /**
      * After load config

diff --git a/src/ErrorManager.js b/src/ErrorManager.js
@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { connect } from 'formik';
 
 /**

diff --git a/src/Field/Autocomplete.js b/src/Field/Autocomplete.js
@@ -50,10 +50,6 @@ class Autocomplete extends Component {
         const { config, formik, error, value } = this.props;
         const {
             name,
-            type,
-            attributes,
-            defaultValue,
-            options = {}
         } = config;
         const { setFieldValue, handleBlur } = formik;
 

diff --git a/src/Field/FileUploader.js b/src/Field/FileUploader.js
@@ -1,9 +1,5 @@
-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';
-
-const Thumb = ({ key, file }) => <div />
 
 const thumbsContainer = {
     display: 'flex',
@@ -69,17 +65,10 @@ const prepareFileUploderOptions = ({ onDrop, onDropAccepted, onDropRejected, ...
 
 const FileUploader = ({ config, formik, value, error }) => {
     const {
-        name,
         options,
-        placeholder,
-        disabledText,
-        zoneActiveText,
         hasThumbs = false
     } = config;
-    const { setFieldValue } = formik;
-    const selectedValue = value;
     const {
-        acceptedFiles,
         getRootProps,
         getInputProps,
         isDragActive,

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,4 +1,3 @@
-import _ from 'lodash';
 import React, { useState, useEffect } from 'react';
 import { Field } from 'formik';
 import withFormConfig from './withFormConfig';
@@ -49,7 +48,6 @@ const ElementRenderer = ({
     const { values } = formik;
     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
@@ -75,15 +73,17 @@ 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>
-                    )}
-                </ErrorManager>
-            )} />
+            ? <Field name={ name }>
+                {({ field: { value }}) => (
+                    <ErrorManager name={ name }>
+                        {(error) => (
+                            <Template disabled={ disabled } error={ error } { ...config }>
+                                { renderElement({ config, formik, value, error }) }
+                            </Template>
+                        )}
+                    </ErrorManager>
+                )}
+            </Field>
             : renderElement({ config, formik })
     );
 }

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 }) => (