Merge pull request #16 from easeq/optimized-fields

0.2.0
flipbyte · Mar 11, 2019 · 0d0e602 · 0d0e602
2 parents 0c82c56 + 4852c9c
commit 0d0e602
Show file tree

Hide file tree

Showing 34 changed files with 705 additions and 410 deletions.
diff --git a/README.md b/README.md
@@ -173,6 +173,8 @@ Each container or field requires a renderer which can be set using "renderer": "
 | | name | String | html field name attribute |
 | | label | String | the label for the field |
 | | type | String | "field" |
+| | labelClass | String | html class for the label html element |
+| | formGroupClass | String | html class for the div that wraps the form field |
 | | validation | String | Check [yup-schema](https://github.com/flipbyte/yup-schema) |
 | | conditional | String | Check [when-condition](https://github.com/flipbyte/when-condition) |
 
@@ -186,26 +188,20 @@ Each container or field requires a renderer which can be set using "renderer": "
 | |  type | String | "field" |
 | | attributes |  {} | is an object that can hold other html field related attributes (if any). Only ones that are not defined using any other key will be used. For example: name already has it's own key and hence "name" key inside the attributes object will do nothing. |
 | | options | Array | Array of objects with keys "value" and "label" |
-| | labelClass | String | html class for the label html element |
 | | fieldClass | String | html class for the main html/3-rd party form field |
-| | formGroupClass | String | html class for the div that wraps the form field |
 | code-editor | renderer | String | code-editor |
 | | name | String | html field name attribute |
 | |  label | String | the label for the field |
 | | options | {} | |
 | | defaultValue | String | default field value (untested) |
 | | attributes | {} | is an object that can hold other html field related attributes (if any). Only ones that are not defined using any other key will be used. For example: name already has it's own key and hence "name" key inside the attributes object will do nothing. |
-| |  labelClass | String | html class for the label html element |
 | | fieldClass | String | html class for the main html/3-rd party form field |
-| | formGroupClass | String | html class for the div that wraps the form field |
 | radio | renderer | String | radio |
 | | name | String | html field name attribute |
 | | label | String | the label for the field |
 | | options | {} | |
 | | attributes | {}  | is an object that can hold other html field related attributes (if any). Only ones that are not defined using any other key will be used. For example: name already has it's own key and hence "name" key inside the attributes object will do nothing. |
-| | labelClass | String | html class for the label html element |
 | | fieldClass | String | html class for the main html/3-rd party form field |
-| | formGroupClass | String  | html class for the div that wraps the form field |
 | react-select | renderer | String | react-select |
 | | name | String | html field name attribute |
 | | label | String | the label for the field |
@@ -215,58 +211,33 @@ Each container or field requires a renderer which can be set using "renderer": "
 | | isClearable | Bool | displays a clear select button on the select which will clear the selected options |
 | | isDisabled | Bool | disables the select when set to true |
 | | noOptionsMessage | Function | refer [ReactSelect Props](https://react-select.com/props) |
-| | labelClass | String | html class for the label html element |
 | | fieldClass | String  | html class for the main html/3-rd party form field |
-| | formGroupClass | String | html class for the div that wraps the form field |
 | switch | renderer | String | switch |
-| | name | String | html field name attribute |
-| | label | String | the label for the field |
-| | attributes |  {} | is an object that can hold other html field related attributes (if any). Only ones that are not defined using any other key will be used. For example: name already has it's own key and hence "name" key inside the attributes object will do nothing. |
-| | dataOn | String | label for On. Example: in a yes/no option this would be Yes |
-| | dataOff | String | label for Off. In the above example "No" |
-| | labelClass | String  | html class for the label html element |
 | | fieldClass | String | html class for the main html/3-rd party form field |
-| | formGroupClass | String | html class for the div that wraps the form field |
 | text | renderer | String | text |
-| | name | String | html field name attribute |
-| | label | String | the label for the field |
-| | type | String | either "container" or "field" |
 | | attributes | {} | is an object that can hold other html field related attributes (if any). Only ones that are not defined using any other key will be used. For example: name already has it's own key and hence "name" key inside the attributes object will do nothing. |
 | | fieldType | String | HTML input type. The value that goes into <input type="{this value here}" /> |
 | | defaultValue | String | default field value (untested) |
 | | icon | String | fontawesome icon class |
-| | labelClass | String | html class for the label html element |
 | | fieldClass | String | html class for the main html/3-rd party form field |
-| | formGroupClass | String | html class for the div that wraps the form field |
 | | inputGroupClass | String | html class for the div that wraps an icon and an input element together |
 | textarea | renderer | String | textarea |
-| | name | String | html field name attribute |
-| | label | String | the label for the field |
-| | type | String | either "container" or "field" |
 | | attributes | {} | is an object that can hold other html field related attributes (if any). Only ones that are not defined using any other key will be used. For example: name already has it's own key and hence "name" key inside the attributes object will do nothing. |
 | | rows | Number | Number of rows that the text-area container should show by default |
-| | labelClass | String | html class for the label html element |
 | | fieldClass | String | html class for the main html/3-rd party form field |
-| | formGroupClass | String | html class for the div that wraps the form field |
 | wysiwyg | renderer | String | wysiwyg |
-| | name | String | html field name attribute |
-| |  label | String | the label for the field |
-| | type | String | either "container" or "field" |
 | | attributes | {} | is an object that can hold other html field related attributes (if any). Only ones that are not defined using any other key will be used. For example: name already has it's own key and hence "name" key inside the attributes object will do nothing. |
 | | options | {} | [React-quill wysiwyg options](https://github.com/zenoamaro/react-quill) |
 | | rows | Number | Number of rows that the wysiwyg container should show by default |
-| | labelClass | String | html class for the label html element |
 | | fieldClass | String | html class for the main html/3-rd party form field |
-| | formGroupClass | String | html class for the div that wraps the form field |
 | | textareaClass | String |  the class for the textarea that will show the raw html for the content entered in the wysiwyg |
 | autocomplete | renderer | String | autcomplete |
-| | name | String | html field name attribute |
-| | label | String | the label for the field |
-| | type | String | either "container" or "field" |
 | | attributes | {} | is an object that can hold other html field related attributes (if any). Only ones that are not defined using any other key will be used. For example: name already has it's own key and hence "name" key inside the attributes object will do nothing. |
 | | defaultValue | String | default field value (untested) |
 | | options | {} | Options available in [react-autosuggest plugin](https://github.com/moroshko/react-autosuggest) |
-| | labelClass | String | html class for the label html element |
+| | fieldClass | String | html class for the main html/3-rd party form field |
+| file-uploader | renderer | String | autcomplete |
+| | options | {} | Options available in [react-dropzone plugin](https://react-dropzone.js.org/) |
 | | fieldClass | String | html class for the main html/3-rd party form field |
 | | formGroupClass | String | html class for the div that wraps the form field |
 

diff --git a/demo/src/components/CustomText.js b/demo/src/components/CustomText.js
@@ -2,9 +2,9 @@ import _ from 'lodash';
 import React from 'react';
 import Label from '../../../src/Field/Label';
 import ErrorMessage from '../../../src/Field/ErrorMessage';
-import { hasError, changeHandler, joinNames } from '../../../src/utils';
+import { changeHandler, joinNames } from '../../../src/utils';
 
-const CustomText = ({ config, formik, submitCountToValidate }) => {
+const CustomText = ({ config, formik, value = '', error }) => {
     const {
         name,
         label,
@@ -18,10 +18,9 @@ const CustomText = ({ config, formik, submitCountToValidate }) => {
         formGroupClass = 'form-group'
     } = config;
 
-    const { values, setFieldValue, handleChange, handleBlur } = formik;
+    const { setFieldValue, handleChange, handleBlur } = formik;
     const isInputGroup = icon ? true : false;
-    const error = hasError(name, submitCountToValidate, formik);
-    const currentValue = _.get(values, name, '');
+    const currentValue = value;
     return (
         <div className={ formGroupClass }>
             <Label htmlFor={ name } className={ labelClass }>{ label }</Label>
@@ -31,11 +30,13 @@ const CustomText = ({ config, formik, submitCountToValidate }) => {
                 type={ fieldType }
                 className={ fieldClass + ( error ? ' is-invalid ' : '' ) }
                 value={ currentValue }
-                onChange={ changeHandler.bind(this, handleChange, formik, config) } />
+                onChange={ changeHandler.bind(this, handleChange, formik, config) }
+                onBlur={ handleBlur }
+            />
             { currentValue && <div className="mt-2">
                 Your unique id for <strong>{ currentValue }</strong> is <strong>{ _.uniqueId() }</strong>
             </div> }
-            <ErrorMessage name={ name } submitCountToValidate={ submitCountToValidate } />
+            <ErrorMessage name={ name } />
         </div>
     );
 }

diff --git a/demo/src/schema/all-available-fields.js b/demo/src/schema/all-available-fields.js
@@ -74,7 +74,8 @@ export default {
                     value: 'vanilla',
                     label: 'Vanilla'
                 }],
-                formGroupClass: "form-group mb-4"
+                formGroupClass: "form-group mb-4",
+                validation: [['array'], ['of', [['string']]]]
             },
             textarea: {
                 name: "description",
@@ -138,9 +139,7 @@ export default {
                 name: "switch",
                 label: "Switch",
                 type: "field",
-                renderer: "switch",
-                dataOn: "Yes",
-                dataOff: "No"
+                renderer: "switch"
             },
             wysiwyg: {
                 name: "wysiwyg",
@@ -152,7 +151,8 @@ export default {
                     style: {
                         height: 200
                     }
-                }
+                },
+                validation: [['string'], ['required'], ['min', 100]]
             },
             codeeditor: {
                 name: "codeeditor",
@@ -164,6 +164,20 @@ export default {
                 options: {
                     mode: "xml",
                     lineNumbers: true
+                },
+                validation: [['string'], ['required'], ['min', 100]]
+            },
+            fileUploader: {
+                name: "fileUploader",
+                label: "File Uploader",
+                type: "field",
+                renderer: "file-uploader",
+                options: {
+                    accept: ['image/*', 'text/*'],
+                    multiple: true,
+                    onDrop: (formik, config, acceptedFiles) => {
+                        console.log(formik, config, acceptedFiles);
+                    }
                 }
             },
             buttonsGroup: {

diff --git a/demo/src/schema/basic.js b/demo/src/schema/basic.js
@@ -33,15 +33,15 @@ export default {
                     ['string'],
                     ['required'],
                     ['email']
-                ],
-                condition: ['or', ['is', 'name', undefined], ['is', 'name', '']]
+                ]
             },
             telephone: {
                 name: "telephone",
                 label: "Telephone",
                 type: "field",
                 renderer: "text",
-                fieldType: "telephone"
+                fieldType: "telephone",
+                condition: ['or', ['is', 'email', undefined], ['is', 'email', '']]
             },
             message: {
                 name: "message",

diff --git a/demo/src/schema/containers.js b/demo/src/schema/containers.js
@@ -308,13 +308,16 @@ export default {
                                 type: "container",
                                 renderer: "div",
                                 htmlClass: "border p-3",
+                                name: "div",
+                                prefixNameToElement: true,
                                 elements: {
                                     title: {
                                         name: "title",
                                         label: "Title",
                                         type: "field",
                                         renderer: "text",
-                                        fieldType: "text"
+                                        fieldType: "text",
+                                        validation: [['string'], ['required']]
                                     },
                                     reactSelect: {
                                         type: "field",