Improvements (#82)

* Changed div to a generic container with prop "as" that can use a custom tag instead of default "div"

* Div exists now, but may be removed in the future in favour of the new Html component
* Html component should be used from now on

* Added new field renderer "inner-text" that shows value set in the values object or default value.

* Used for general HTML text instead of a specific field
* For read-only values

* Fixed incorrect export

* Added prop "wrapAs" to define a wrapper or set React.Fragement when "wrapAs" is null

* Wrapper doesn't need to be 'div' everytime
* Setting null removes the wrapper entirely

* Avoid passing "wrapAs" to the field and thus avoid triggering invalid dom attribute attribute

* Added bootstrap input-group demo

Author: easeq

demo/src/schema/all-available-fields.js

@@ -28,6 +28,58 @@ export default {
                 fieldType: "text",
                 comment: "This is a field comment. You can add your text here."
             },
+            inputGroup: {
+                type: 'container',
+                renderer: 'div',
+                htmlClass: 'input-group',
+                elements: {
+                    prepend: {
+                        type: 'container',
+                        renderer: 'div',
+                        htmlClass: 'input-group-prepend',
+                        elements: {
+                            innerText: {
+                                type: 'field',
+                                renderer: 'inner-text',
+                                name: 'prependInnerText',
+                                htmlClass: 'input-group-text',
+                                defaultValue: '@',
+                                wrapAs: null
+                            }
+                        }
+                    },
+                    text: {
+                        name: "text",
+                        type: "field",
+                        renderer: "text",
+                        fieldType: "text",
+                        wrapAs: null
+                    },
+                    append: {
+                        type: 'container',
+                        renderer: 'div',
+                        htmlClass: 'input-group-append',
+                        elements: {
+                            innerText: {
+                                type: 'field',
+                                renderer: 'inner-text',
+                                name: 'appendInnerText',
+                                htmlClass: 'input-group-text',
+                                defaultValue: 'pixels',
+                                wrapAs: null
+                            }
+                        }
+                    }
+                }
+            },
+            innerText: {
+                type: 'field',
+                renderer: 'inner-text',
+                name: 'innerText',
+                as: 'small',
+                htmlClass: 'text-muted d-block mb-3 mt-1',
+                defaultValue: 'This is a field comment. You can add your text here'
+            },
             autocomplete: {
                 name: "autocomplete",
                 label: "Autocomplete",

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@flipbyte/formik-json",
-    "version": "0.4.8",
+    "version": "0.5.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",

package.json

@@ -4,26 +4,33 @@ import Element from '../Element';
 import PropTypes from 'prop-types';
 import { joinNames } from '../utils';
 
-const Div = ({
-    config: { name: containerName = '', elements, htmlClass, comment, commentClass = 'text-muted d-block mb-3' }
+const HtmlTag = ({
+    config: {
+        name: containerName = '',
+        as: Component = 'div',
+        elements,
+        htmlClass,
+        comment,
+        commentClass = 'text-muted d-block mb-3'
+    }
 }) => (
-    <div className={ htmlClass }>
+    <Component className={ htmlClass }>
         { comment && <small className={ commentClass }>{ comment }</small> }
         { _.map(elements, ({ name, ...rest }, key) => (
             <Element
                 key={ key }
                 config={{ ...rest, name: joinNames(containerName, name) }}
             />
         ))}
-    </div>
+    </Component>
 );
 
-Div.propTypes = {
+HtmlTag.propTypes = {
     config: PropTypes.shape({
         name: PropTypes.string,
         elements: PropTypes.object.isRequired,
         htmlClass: PropTypes.string
     })
 }
 
-export default Div;
+export default HtmlTag;

src/Container/Div.js src/Container/HtmlTag.jssrc/Container/Div.js renamed to src/Container/HtmlTag.js

@@ -1,13 +1,14 @@
 import { registerContainer } from '../registry';
 
-import Div from './Div';
+import HtmlTag from './HtmlTag';
 import Form from './Form';
 import Tabs from './Tabs';
 import Fieldset from './Fieldset';
 import ButtonGroup from './ButtonGroup';
 import EditableGrid from './EditableGrid';
 
-registerContainer('div', Div);
+registerContainer('div', HtmlTag);
+registerContainer('html-tag', HtmlTag);
 registerContainer('form', Form);
 registerContainer('tabs', Tabs);
 registerContainer('fieldset', Fieldset);

src/Container/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const InnerText = ({ config, formik, value, error }) => {
+    const {
+        name,
+        as: Component = 'span',
+        htmlClass,
+        defaultValue = '',
+        ...attributes
+    } = config;
+
+    return (
+        <Component className={ htmlClass } { ...attributes }>
+            { value || defaultValue }
+        </Component>
+    );
+};
+
+export default React.memo(InnerText);

src/Field/InnerText.js

@@ -7,6 +7,7 @@ import Switch from './Switch';
 import Wysiwyg from './Wysiwyg';
 import Textarea from './Textarea';
 import Checkbox from './Checkbox';
+import InnerText from './InnerText';
 import CodeEditor from './CodeEditor';
 import ReactSelect from './ReactSelect';
 import FileUploader from './FileUploader';
@@ -27,6 +28,7 @@ registerField('switch', Switch);
 registerField('wysiwyg', Wysiwyg);
 registerField('textarea', Textarea);
 registerField('checkbox', Checkbox);
+registerField('inner-text', InnerText);
 registerField('code-editor', CodeEditor);
 registerField('react-select', ReactSelect);
 registerField('autocomplete', Autocomplete);

src/Field/index.js

@@ -13,14 +13,12 @@ import ErrorManager from './ErrorManager';
  * @param  {object} props
  * @return {Component}
  */
-const renderElement = ( props ) => {
-    const {
-        config: { type, renderer }
-    } = props;
+const renderElement = ({ config, formik, value, error }) => {
+    const { type, renderer, wrapAs, ...rest } = config;
     const registry = type === FIELD ? fields : containers;
     const Renderer = typeof renderer === 'string' ? registry.get(renderer) : renderer;
 
-    return <Renderer { ...props } />
+    return <Renderer config={{ type, ...rest }} formik={ formik } value={ value } error={ error } />
 }
 
 /**
@@ -44,7 +42,7 @@ const ElementRenderer = ({
         name,
         showWhen,
         enabledWhen,
-        template,
+        template
     } = config;
     const { values } = formik;
     const [ canShow, setCanShow ] = useState(showWhen ? false : true);

src/Renderer.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import Label from '../Field/Label';
 import ErrorMessage from '../Field/ErrorMessage';
 
@@ -11,16 +11,25 @@ const Default = ({
     comment,
     error,
     labelClass = '',
-    formGroupClass = 'form-group',
+    wrapAs = 'div',
+    htmlClass = 'form-group',
     commentClass = 'text-muted',
     children
-}) => (
-    <div className={ formGroupClass } style={ styles(disabled) }>
-        { label && <Label htmlFor={ name } className={ labelClass }>{ label }</Label> }
-        { children }
-        { comment && <small className={ commentClass }>{ comment }</small> }
-        <ErrorMessage name={ name } error={ error } />
-    </div>
-);
+}) => {
+    const Component = !wrapAs ? Fragment : wrapAs;
+    const componentProps = !wrapAs ? {} : {
+        className: htmlClass,
+        style: styles(disabled)
+    };
+
+    return (
+        <Component { ...componentProps }>
+            { label && <Label htmlFor={ name } className={ labelClass }>{ label }</Label> }
+            { children }
+            { comment && <small className={ commentClass }>{ comment }</small> }
+            <ErrorMessage name={ name } error={ error } />
+        </Component>
+    );
+};
 
 export default Default;