Merge pull request #438 from rvsia/muiFieldArray

fix(mui): add default field array

Author: Hyperkid123

packages/mui-component-mapper/demo/demo-schemas/field-array-schema.js

@@ -0,0 +1,78 @@
+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',
+      defaultItem: { name: 'enter a name', lastName: 'enter a last name' },
+      fields: [
+        {
+          component: 'text-field',
+          name: 'name',
+          label: 'Name',
+          placeholder: 'Borek',
+          isRequired: true,
+          validate: [
+            {
+              type: 'required'
+            }
+          ]
+        },
+        {
+          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', 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'
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+
+export default arraySchemaDDF;

packages/mui-component-mapper/demo/index.js

@@ -1,70 +1,58 @@
-/* eslint-disable */
-import React from "react";
-import ReactDOM from "react-dom";
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
 import FormRenderer, { componentTypes } from '@data-driven-forms/react-form-renderer';
 
 import Grid from '@material-ui/core/Grid';
-import { componentMapper, FormTemplate } from '../src'
+import { componentMapper, FormTemplate } from '../src';
 import { createMuiTheme } from '@material-ui/core/styles';
 import { ThemeProvider } from '@material-ui/styles';
 import Typography from '@material-ui/core/Typography';
 import demoSchema from '@data-driven-forms/common/src/demoschema';
+import fieldArraySchema from './demo-schemas/field-array-schema';
+
+import Button from '@material-ui/core/Button';
 
 const theme = createMuiTheme({
-    typography: {
-      useNextVariants: true,
-    },
-  });
+  typography: {
+    useNextVariants: true
+  }
+});
 
 const compositeMapper = {
-    ...componentMapper,
-    [componentTypes.SWITCH]: {
-        component: componentMapper[componentTypes.SWITCH],
-        FormControlLabelProps: {
-            labelPlacement: 'end'
-        }
+  ...componentMapper,
+  [componentTypes.SWITCH]: {
+    component: componentMapper[componentTypes.SWITCH],
+    FormControlLabelProps: {
+      labelPlacement: 'end'
     }
-}
-  
+  }
+};
 
-const schema = {
-    fields: [{
-        component: 'switch',
-        name: 'foo',
-        label: 'Foo'
-    }, {
-        component: 'text-field',
-        name: 'bar',
-        label: 'bar',
-        condition: {
-            when: 'foo',
-            is: true
-        }
-    }]
-}
+const App = () => {
+  const [schema, setSchema] = useState(fieldArraySchema);
 
-const App = () => (
-    <ThemeProvider theme={ theme }>
-        <Grid 
-            container
-            spacing={4}
-            justify="center"
-            alignItems="center"
-        >
-            <Grid item xs={12}>
-                <Typography variant="h3" >Material UI component mapper</Typography>
-            </Grid>
-            <Grid item xs={12}>
-                <FormRenderer
-                    onSubmit={console.log}
-                    componentMapper={compositeMapper}
-                    FormTemplate={props => <FormTemplate {...props} />}
-                    schema={schema}
-                    onCancel={() => console.log('canceling')}
-                />
-            </Grid>
+  return (
+    <ThemeProvider theme={theme}>
+      <Grid container spacing={4} justify="center" alignItems="center">
+        <Grid item xs={12}>
+          <Typography variant="h3">Material UI component mapper</Typography>
+        </Grid>
+        <Grid item xs={12}>
+          <Button onClick={() => setSchema(demoSchema)}>Demo schema</Button>
+          <Button onClick={() => setSchema(fieldArraySchema)}>Field array</Button>
+        </Grid>
+        <Grid item xs={12}>
+          <FormRenderer
+            onSubmit={console.log}
+            componentMapper={compositeMapper}
+            FormTemplate={(props) => <FormTemplate {...props} />}
+            schema={schema}
+            onCancel={() => console.log('canceling')}
+          />
         </Grid>
+      </Grid>
     </ThemeProvider>
-)
+  );
+};
 
 ReactDOM.render(<App />, document.getElementById('root'));

packages/mui-component-mapper/src/files/component-mapper.js

@@ -11,6 +11,7 @@ import PlainText from './plain-text';
 import Select from './select';
 import Radio from './radio';
 import Wizard from './wizard';
+import FieldArray from './field-array';
 
 export const components = {
   TextField,
@@ -38,7 +39,8 @@ const componentMapper = {
   [componentTypes.TIME_PICKER]: TimePicker,
   [componentTypes.SWITCH]: Switch,
   [componentTypes.PLAIN_TEXT]: PlainText,
-  [componentTypes.WIZARD]: Wizard
+  [componentTypes.WIZARD]: Wizard,
+  [componentTypes.FIELD_ARRAY]: FieldArray
 };
 
 export default componentMapper;