Merge pull request #147 from data-driven-forms/field-visibility

Field visibility

Author: rvsia

packages/react-form-renderer/demo/sandbox.js

@@ -17,6 +17,7 @@ const output = {
       title: 'Text Box with help',
       helperText: 'Helper text',
       component: components.TEXT_FIELD,
+      hideField: true,
     },
     {
       name: 'text_box_3',

packages/react-form-renderer/src/form-renderer/render-form.js

@@ -7,24 +7,39 @@ import Condition from './condition';
 import { memoize } from '../validators/helpers';
 import FieldWrapper from './field-wrapper';
 
+const FormFieldHideWrapper = ({ hideField, children }) => hideField ? (
+  <div hidden>{ children }</div>
+) : children;
+
+FormFieldHideWrapper.propTypes = {
+  hideField: PropTypes.bool,
+  children: PropTypes.oneOfType([ PropTypes.node, PropTypes.arrayOf(PropTypes.node) ]).isRequired,
+};
+
+FormFieldHideWrapper.defaultProps = {
+  hideField: false,
+};
+
 const FormConditionWrapper = ({ condition, children }) => (condition ? (
   <Condition { ...condition }>
     { children }
   </Condition>
 ) : children);
 
-const renderSingleField = ({ component, condition, ...rest }) => (
+const renderSingleField = ({ component, condition, hideField, ...rest }) => (
   <Fragment key={ rest.key || rest.name }>
     <RendererContext.Consumer>
       { ({ formFieldsMapper, formOptions }) => (
         <FormConditionWrapper condition={ condition }>
-          <FieldWrapper
-            componentType={ component }
-            component={ formFieldsMapper[component] }
-            formOptions={ formOptions }
-            name={ rest.name || rest.key }
-            { ...rest }
-          />
+          <FormFieldHideWrapper hideField={ hideField }>
+            <FieldWrapper
+              componentType={ component }
+              component={ formFieldsMapper[component] }
+              formOptions={ formOptions }
+              name={ rest.name || rest.key }
+              { ...rest }
+            />
+          </FormFieldHideWrapper>
         </FormConditionWrapper>
       ) }
     </RendererContext.Consumer>