Merge pull request #157 from rvsia/subform-additionalprops

fix(subform): allow to receive other props

Author: Hyperkid123

packages/mui-component-mapper/src/form-fields/sub-form.js

@@ -8,8 +8,11 @@ const SubForm = ({
   fields,
   title,
   description,
+  FieldProvider: _FieldProvider,
+  validate: _validate,
+  ...rest
 }) => (
-  <Grid item xs={ 12 } container style={{ paddingRight: 0, paddingLeft: 0 }}>
+  <Grid item xs={ 12 } container style={{ paddingRight: 0, paddingLeft: 0 }} { ...rest }>
     { title && <Grid item xs={ 12 }><Typography variant="h5">{ title }</Typography></Grid> }
     { description && <Grid item xs={ 12 }><Typography paragraph>{ description }</Typography></Grid> }
     <Grid item xs={ 12 } container>
@@ -26,6 +29,8 @@ SubForm.propTypes = {
   ]).isRequired,
   title: PropTypes.string,
   description: PropTypes.string,
+  FieldProvider: PropTypes.any,
+  validate: PropTypes.any,
 };
 
 export default SubForm;

packages/pf3-component-mapper/src/form-fields/sub-form.js

@@ -1,17 +1,20 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 const SubForm = ({
   formOptions,
   fields,
   title,
   description,
+  FieldProvider: _FieldProvider,
+  validate: _validate,
+  ...rest
 }) => (
-  <Fragment>
+  <div { ...rest }>
     { title && <h3>{ title }</h3> }
     { description && <p>{ description }</p> }
     { formOptions.renderForm(fields, formOptions) }
-  </Fragment>
+  </div>
 );
 
 SubForm.propTypes = {
@@ -22,6 +25,8 @@ SubForm.propTypes = {
   ]).isRequired,
   title: PropTypes.string,
   description: PropTypes.string,
+  FieldProvider: PropTypes.any,
+  validate: PropTypes.any,
 };
 
 export default SubForm;

packages/pf3-component-mapper/src/tests/__snapshots__/sub-form.test.js.snap

@@ -1,29 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<SubForm /> should render sub form with description 1`] = `
-<Fragment>
+<div>
   <p>
     Bar
   </p>
   <div>
     Form item
   </div>
-</Fragment>
+</div>
 `;
 
 exports[`<SubForm /> should render sub form with title 1`] = `
-<Fragment>
+<div>
   <h3>
     Foo
   </h3>
   <div>
     Form item
   </div>
-</Fragment>
+</div>
 `;
 
 exports[`<SubForm /> should render sub form with title and description 1`] = `
-<Fragment>
+<div>
   <h3>
     Foo
   </h3>
@@ -33,5 +33,5 @@ exports[`<SubForm /> should render sub form with title and description 1`] = `
   <div>
     Form item
   </div>
-</Fragment>
+</div>
 `;

packages/pf4-component-mapper/src/form-fields/sub-form.js

@@ -1,14 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Title } from '@patternfly/react-core';
-import { TextContent, Text, TextVariants } from '@patternfly/react-core';
+import { TextContent, Text, TextVariants, Grid, GridItem } from '@patternfly/react-core';
 
-const SubForm = ({ fields, title, description, formOptions }) => (
-  <React.Fragment>
-    { title && <Title size="xl">{ title }</Title> }
-    { description && <TextContent><Text component={ TextVariants.small } style={{ marginBottom: 0 }}>{ description }</Text></TextContent> }
+const SubForm = ({
+  fields,
+  title,
+  description,
+  formOptions,
+  FieldProvider: _FieldProvider,
+  validate: _validate,
+  ...rest
+}) => (
+  <Grid gutter="md" { ...rest }>
+    { title && <GridItem sm={ 12 }><Title size="xl">{ title }</Title></GridItem> }
+    { description && <GridItem sm={ 12 }>
+      <TextContent>
+        <Text component={ TextVariants.small } style={{ marginBottom: 0 }}>{ description }
+        </Text>
+      </TextContent>
+    </GridItem> }
     { formOptions.renderForm(fields, formOptions) }
-  </React.Fragment>
+  </Grid>
 );
 
 SubForm.propTypes = {
@@ -19,6 +32,8 @@ SubForm.propTypes = {
   name: PropTypes.string,
   title: PropTypes.string,
   description: PropTypes.string,
+  FieldProvider: PropTypes.any,
+  validate: PropTypes.any,
 };
 
 export default SubForm;

packages/pf4-component-mapper/src/tests/__snapshots__/sub-form.test.js.snap

@@ -1,47 +1,68 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SubForm component should render SubForm correctly 1`] = `
-<Fragment>
-  <Title
-    size="xl"
+<Grid
+  gutter="md"
+  name="cosiName"
+>
+  <GridItem
+    sm={12}
   >
-    cosiTitle
-  </Title>
+    <Title
+      size="xl"
+    >
+      cosiTitle
+    </Title>
+  </GridItem>
   <div>
     Here would be form
   </div>
-</Fragment>
+</Grid>
 `;
 
 exports[`SubForm component should render SubForm with description correctly 1`] = `
-<Fragment>
-  <Title
-    size="xl"
+<Grid
+  gutter="md"
+  name="cosiName"
+>
+  <GridItem
+    sm={12}
   >
-    cosiTitle
-  </Title>
-  <TextContent>
-    <Text
-      component="small"
-      style={
-        Object {
-          "marginBottom": 0,
-        }
-      }
+    <Title
+      size="xl"
     >
-      description here!
-    </Text>
-  </TextContent>
+      cosiTitle
+    </Title>
+  </GridItem>
+  <GridItem
+    sm={12}
+  >
+    <TextContent>
+      <Text
+        component="small"
+        style={
+          Object {
+            "marginBottom": 0,
+          }
+        }
+      >
+        description here!
+      </Text>
+    </TextContent>
+  </GridItem>
   <div>
     Here would be form
   </div>
-</Fragment>
+</Grid>
 `;
 
 exports[`SubForm component should render SubForm without title correctly 1`] = `
-<Fragment>
+<Grid
+  gutter="md"
+  name="cosiName"
+>
   <div>
     Here would be form
   </div>
-</Fragment>
+</Grid>
 `;