Merge pull request #6 from easeq/master

v0.1.5

demo/src/css/styles.css

@@ -11,7 +11,7 @@
 }
 
 div.scrollmenu {
-    background-color: #f8f9fa !important;
+    background-color: #f8f9fa;
     overflow: auto;
     white-space: nowrap;
 }

demo/src/schema/basic.js

@@ -34,7 +34,7 @@ export default {
                     ['required'],
                     ['email']
                 ],
-                condition: ['or', ['name', undefined, 'is'], ['name', '', 'is']]
+                condition: ['or', ['is', 'name', undefined], ['is', 'name', '']]
             },
             telephone: {
                 name: "telephone",
@@ -44,7 +44,11 @@ export default {
                 fieldType: "telephone",
                 validation: [
                     ['string'],
-                    ['matches', /^\d{3}-\d{3}-\d{4}$/]
+                    ['matches', /^\d{3}-\d{3}-\d{4}$/],
+                    ['when', 'email', {
+                        is: undefined,
+                        then: [['string'], ['required']]
+                    }]
                 ]
             },
             message: {

nwb.config.js

@@ -7,7 +7,7 @@ module.exports = {
             externals: {
                 react: 'React',
                 'react-dom': 'ReactDOM',
-                formik: 'Formik',
+                lodash: '_',
             }
         }
     }

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@flipbyte/formik-json",
-    "version": "0.1.4",
+    "version": "0.1.5",
     "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",
@@ -26,7 +26,7 @@
         "publish-demo": "npm run build && gh-pages -d demo/dist"
     },
     "dependencies": {
-        "@flipbyte/when-condition": "^0.1.2",
+        "@flipbyte/when-condition": "^0.2.0",
         "@flipbyte/yup-schema": "^0.1.3",
         "codemirror": "^5.41.0",
         "formik": "^1.5.0",
@@ -38,22 +38,25 @@
         "react-sortable-hoc": "^0.8.4"
     },
     "peerDependencies": {
-        "react": "^16.7.0",
-        "react-dom": "^16.7.0",
+        "lodash": "^4.17.11",
+        "react": "^16.8.0",
+        "react-dom": "^16.8.0",
         "prop-types": "^15.6.2",
         "@fortawesome/fontawesome-free": "^5.6.3"
     },
     "devDependencies": {
         "@fortawesome/fontawesome-free": "^5.6.3",
+        "bootstrap": "^4.1.1",
         "axios": "^0.18.0",
-        "bootstrap": "^4.2.1",
+        "babel-plugin-transform-import-styles": "0.0.11",
         "enzyme": "^3.8.0",
         "enzyme-adapter-react-16": "^1.7.1",
         "gh-pages": "^2.0.1",
         "inferno": "^5.0.0",
+        "load-styles": "^2.0.0",
         "nwb": "0.23.x",
-        "react": "^16.5.2",
-        "react-dom": "^16.5.2",
+        "react": "^16.8.0",
+        "react-dom": "^16.8.0",
         "remark-lint": "^6.0.4"
     },
     "author": "",

src/Element.js

@@ -30,7 +30,7 @@ class Element extends Component {
         }
     }
 
-    // Experimental - need thorough testing
+    // Experimental - needs thorough testing
     shouldComponentUpdate(nextProps, nextState) {
         if(nextState !== this.state) {
             return true;
@@ -80,8 +80,7 @@ class Element extends Component {
         const { loadedConfig, submitCountToValidate } = this.state;
         const config = loadedConfig || initialConfig;
         const rendererProps = { config, submitCountToValidate, ...rest }
-        return this.state.hasMounted //&& renderElement(config, formik, submitCountToValidate, rest);
-            && <ElementRenderer { ...rendererProps } />
+        return this.state.hasMounted && <ElementRenderer { ...rendererProps } />
     }
 }
 

src/Field/Autocomplete.js

@@ -4,7 +4,7 @@ import Autosuggest from 'react-autosuggest';
 import React, { Component } from 'react';
 import ErrorMessage from './ErrorMessage';
 import { hasError, changeHandler, joinNames, setFieldValueWrapper } from '../utils';
-import '../css/autocomplete.css';
+// import '../css/autocomplete.css';
 
 class Autocomplete extends Component {
     static autosuggestCallbackKeys = [

src/Field/Wysiwyg.js

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import React from 'react';
 import Label from './Label';
 import ReactQuill from 'react-quill';
-import 'react-quill/dist/quill.snow.css';
+// import 'react-quill/dist/quill.snow.css';
 import ErrorMessage from './ErrorMessage';
 import { hasError, changeHandler, setFieldValueWrapper, joinNames } from '../utils';
 

src/Form.js

@@ -12,10 +12,8 @@ class Form extends React.Component {
     }
 
     getContextValue() {
-        this.validationSchema = new Rules([[
-            'object',
-            prepareValidationSchema(this.props.schema) || {}
-        ]]).toYup();
+        const validationSchema = prepareValidationSchema(this.props.schema);
+        this.validationSchema = validationSchema ? new Rules([[ 'object', validationSchema ]]).toYup() : null;
 
         return {
             validationSchema: this.validationSchema,
@@ -30,12 +28,15 @@ class Form extends React.Component {
             ...rest
         } = this.props;
 
+        const formProps = { ...rest, initialValues };
+        if(null !== this.validationSchema) {
+            formProps.validationSchema = this.validationSchema;
+        }
+
         return (
             <SchemaProvider value={ this.getContextValue() }>
                 <Formik
-                    { ...rest }
-                    initialValues={ initialValues }
-                    validationSchema={ this.validationSchema }
+                    { ...formProps }
                     render={ props =>
                         <Element config={ schema } />
                     } />

src/Renderer.js

@@ -14,9 +14,9 @@ class ElementRenderer extends Component {
     }
 
     // Experimental - Needs thorough testing
-    shouldComponentUpdate(nextProps) {
-        return nextProps.formik !== this.props.formik
-    }
+    // shouldComponentUpdate(nextProps) {
+    //     return nextProps.formik !== this.props.formik
+    // }
 
     makeRendererComponent(props) {
         let currentRegistry = containers;