Merge pull request #63 from rvsia/field-array-pf4

FieldArray make it works

Author: Hyperkid123

README.md

@@ -20,6 +20,7 @@ Data Driven Forms is a React library used for rendering and managing forms with
 - Asynchronous validation supported!
 - Supporting Wizard forms!
 - Supporting Mozzila form schema!
+- Supporting [Final Form Field Array](https://github.com/final-form/react-final-form-arrays)!
 - ... and a lot more!
 
 :book: For more information please visit the [documentation](https://data-driven-forms.org/). :book:

__mocks__/mock-layout-mapper.js

@@ -4,12 +4,7 @@ import { layoutComponents } from "../packages/react-form-renderer/src/constants"
 export const layoutMapper = {
   [layoutComponents.FORM_WRAPPER]: ({ children }) => <div>{ children }</div>,
   [layoutComponents.BUTTON]: ({ label, ...rest }) =>  <button { ...rest }>{ label }</button>,
-  [layoutComponents.COL]: ({ children }) => <div>{ children }</div>,
-  [layoutComponents.FORM_GROUP]: ({ children }) => <div>{ children }</div>,
   [layoutComponents.BUTTON_GROUP]: ({ children }) => <div>{ children }</div>,
-  [layoutComponents.ICON]: props => <div>Icon</div>,
-  [layoutComponents.ARRAY_FIELD_WRAPPER]: ({ children }) => <div>{ children }</div>,
-  [layoutComponents.HELP_BLOCK]: ({ children }) => <div>{ children }</div>,
   [layoutComponents.TITLE]: ({ children }) => <div>{ children }</div>,
   [layoutComponents.DESCRIPTION]: ({ children }) => <div>{ children }</div>,
 };

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

@@ -207,6 +207,7 @@ const FieldInterface = ({
   condition,
   componentType,
   initialKey,
+  FieldArrayProvider, // eslint-disable-line react/prop-types
   ...props
 }) => (
   <Grid xs={ 12 } item style={{ marginBottom: 16, padding: 0 }}>

packages/mui-component-mapper/src/form-fields/layout-components.js

@@ -1,30 +1,16 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { layoutComponents } from '@data-driven-forms/react-form-renderer';
 import Grid from '@material-ui/core/Grid';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
-const ArrayFieldWrapper = ({ children }) => (
-  <div style={{
-    display: 'inline-block',
-    width: '100%',
-  }}>
-    { children }
-  </div>
-);
-
 const layoutMapper = {
   [layoutComponents.FORM_WRAPPER]: ({ children, ...props }) => <form { ...props }>{ children }</form>,
   [layoutComponents.BUTTON]: ({ label, variant, children, ...props }) => <Button color={ variant } variant="contained" { ...props }>{ label || children }</Button>,
-  [layoutComponents.COL]: ({ children, xs, ...rest }) => <div key={ rest.key || rest.name }>{ children }</div>,
-  [layoutComponents.FORM_GROUP]: ({ children }) => <Fragment>{ children }</Fragment>,
   [layoutComponents.BUTTON_GROUP]: ({ children }) => (
     <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
       { children }
     </div>),
-  [layoutComponents.ICON]: props => <div>Icon</div>,
-  [layoutComponents.ARRAY_FIELD_WRAPPER]: props => <div>Array field</div>,
-  [layoutComponents.HELP_BLOCK]: props => <div>Help block</div>,
   [layoutComponents.TITLE]: ({ children }) => <Grid item xs={ 12 }>
     <Typography variant="h3" gutterBottom>
       { children }

packages/pf3-component-mapper/README.md

@@ -1,2 +1 @@
-# react-starter
-Used to create new react libs for data-driven-forms
+## Documentation: http://data-driven-forms.org/

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

@@ -130,6 +130,7 @@ const FieldInterface = ({
   condition,
   componentType,
   initialKey,
+  FieldArrayProvider, // eslint-disable-line
   ...props
 }) => (
   fieldMapper(componentType)({

packages/pf3-component-mapper/src/form-fields/layout-components.js

@@ -1,18 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { layoutComponents } from '@data-driven-forms/react-form-renderer';
-import { Button, FormGroup, Icon, HelpBlock, Form } from 'patternfly-react';
+import { Button, Form } from 'patternfly-react';
 import './layout-components.scss';
 
-const ArrayFieldWrapper = ({ children }) => (
-  <div style={{
-    display: 'inline-block',
-    width: '100%',
-  }}>
-    { children }
-  </div>
-);
-
 const FormWapper = ({ children, ...props }) => <Form { ...props } >{ children }</Form>;
 
 FormWapper.propTypes = {
@@ -58,12 +49,7 @@ DescriptionWrapper.propTypes = {
 const layoutMapper = {
   [layoutComponents.FORM_WRAPPER]: FormWapper,
   [layoutComponents.BUTTON]: FormButton,
-  [layoutComponents.COL]: ({ children, xs, ...rest }) => <div key={ rest.key || rest.name }>{ children }</div>, // TO BE removed
-  [layoutComponents.FORM_GROUP]: FormGroup,
   [layoutComponents.BUTTON_GROUP]: ButtonGroupWrapper,
-  [layoutComponents.ICON]: props => <Icon { ...props } />, // TO BE removed
-  [layoutComponents.ARRAY_FIELD_WRAPPER]: ArrayFieldWrapper, // TO BE removed
-  [layoutComponents.HELP_BLOCK]: HelpBlock,
   [layoutComponents.TITLE]: TitleWrapper,
   [layoutComponents.DESCRIPTION]: DescriptionWrapper,
 };

packages/pf3-component-mapper/src/tests/layout-components.test.js

@@ -1,13 +1,9 @@
 import { mount } from 'enzyme';
-import { FormGroup, Button, Icon, HelpBlock, Form } from 'patternfly-react';
+import { Button, Form } from 'patternfly-react';
 import { layoutComponents } from '@data-driven-forms/react-form-renderer';
 import layoutMapper from '../form-fields/layout-components';
 
 describe('Layout mapper', () => {
-  it('should return PF3 Col', () => {
-    expect(mount(layoutMapper[layoutComponents.COL]({})).find('div')).toHaveLength(1);
-  });
-
   it('should return PF3 Button', () => {
     expect(mount(layoutMapper[layoutComponents.BUTTON]({})).find(Button)).toHaveLength(1);
   });
@@ -16,18 +12,6 @@ describe('Layout mapper', () => {
     expect(mount(layoutMapper[layoutComponents.FORM_WRAPPER]({})).find(Form)).toHaveLength(1);
   });
 
-  it('should return PF3 FormGroup', () => {
-    expect(layoutMapper[layoutComponents.FORM_GROUP]).toEqual(FormGroup);
-  });
-
-  it('should return PF3 Icon', () => {
-    expect(mount(layoutMapper[layoutComponents.ICON]({ name: 'Foo' })).find(Icon)).toHaveLength(1);
-  });
-
-  it('should return PF3 HelpBlock', () => {
-    expect(layoutMapper[layoutComponents.HELP_BLOCK]).toEqual(HelpBlock);
-  });
-
   it('should return PF3 Title', () => {
     expect(mount(layoutMapper[layoutComponents.TITLE]({})).find('h3')).toHaveLength(1);
   });

packages/pf4-component-mapper/README.md

@@ -1,2 +1 @@
-# react-starter
-Used to create new react libs for data-driven-forms
+## Documentation: http://data-driven-forms.org/

packages/pf4-component-mapper/demo/demo-schemas/widget-schema.js

@@ -380,6 +380,97 @@ export const arraySchema = {
   },
 };
 
+export const array1Schema = {
+  definitions: {
+    Thing: {
+      type: 'string',
+      properties: {
+        name: {
+          type: 'string',
+          default: 'Default name',
+        },
+      },
+    },
+  },
+  type: 'object',
+  properties: {
+    minItemsList: {
+      type: 'array',
+      title: 'A list with a minimal number of items',
+      minItems: 3,
+      items: {
+        title: 'A string',
+        type: 'string',
+        default: 'lorem ipsum',
+      },
+    },
+  },
+};
+
+export const arraySchemaDDF = {
+  title: 'FieldArray',
+  fields: [
+    {
+      component: 'field-array',
+      name: 'nicePeople',
+      fieldKey: 'field_array',
+      label: 'Nice people',
+      description: 'This allow you to add nice people to the list dynamically',
+      itemDefault: { name: 'enter a name', lastName: 'enter a last name' },
+      fields: [{
+        component: 'text-field',
+        name: 'name',
+        label: 'Name',
+        placeholder: 'Borek',
+        isRequired: true,
+        validate: [{
+          type: 'required-validator',
+        }],
+      }, {
+        component: 'text-field',
+        name: 'lastName',
+        label: 'Last Name',
+        placeholder: 'Stavitel',
+      }],
+    },
+    {
+      component: 'field-array',
+      name: 'minItems',
+      label: 'A list with a minimal number of items',
+      validate: [{ type: 'min-items-validator', threshold: 3 }],
+      fields: [{
+        component: 'text-field',
+        label: 'Item',
+      }],
+    },
+    {
+      component: 'field-array',
+      name: 'number',
+      defaultItem: 5,
+      label: 'Default value with initialValues set',
+      fields: [{
+        component: 'text-field',
+        label: 'Item',
+        type: 'number',
+      }],
+    },
+    {
+      component: 'field-array',
+      name: 'minMax',
+      minItems: 4,
+      maxItems: 6,
+      label: 'Min 4 item, max 6 items without validators',
+      fields: [{
+        component: 'text-field',
+        isRequired: true,
+        validate: [{
+          type: 'required-validator',
+        }],
+      }],
+    },
+  ],
+};
+
 export const uiArraySchema = {
   listOfStrings: {
     items: {