fix(mui): add default field array

Author: rvsia

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',
+      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'
+            }
+          ]
+        },
+        {
+          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;

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

@@ -0,0 +1,183 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useFormApi, FieldArray } 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';
+import FormControl from '@material-ui/core/FormControl';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import { makeStyles } from '@material-ui/core/styles';
+
+import { useFieldApi } from '@data-driven-forms/react-form-renderer';
+
+import FormFieldGrid from '../common/form-field-grid';
+import clsx from 'clsx';
+
+const useFielArrayStyles = makeStyles({
+  formControl: {
+    width: '100%'
+  },
+  centerText: {
+    display: 'flex',
+    justifyContent: 'center'
+  },
+  buttonsToEnd: {
+    display: 'flex',
+    justifyContent: 'flex-end'
+  },
+  header: {
+    display: 'flex'
+  },
+  label: {
+    flexGrow: 1
+  },
+  fieldArrayGroup: {
+    marginBottom: 32
+  }
+});
+
+const ArrayItem = ({ fields, fieldIndex, name, remove, length, minItems, removeLabel }) => {
+  const { renderForm } = useFormApi();
+  const classes = useFielArrayStyles();
+
+  const editedFields = fields.map((field, index) => {
+    const computedName = field.name ? `${name}.${field.name}` : name;
+    return { ...field, name: computedName, key: `${computedName}-${index}` };
+  });
+
+  return (
+    <Grid container spacing={3}>
+      <Grid item xs={12}>
+        <Grid container spacing={3}>
+          {renderForm([editedFields])}
+        </Grid>
+      </Grid>
+      <Grid item xs={12} className={classes.buttonsToEnd}>
+        <Button color="secondary" onClick={() => remove(fieldIndex)} disabled={length <= minItems}>
+          {removeLabel}
+        </Button>
+      </Grid>
+    </Grid>
+  );
+};
+
+ArrayItem.propTypes = {
+  name: PropTypes.string,
+  fieldIndex: PropTypes.number.isRequired,
+  fields: PropTypes.arrayOf(PropTypes.object),
+  remove: PropTypes.func.isRequired,
+  length: PropTypes.number,
+  minItems: PropTypes.number,
+  removeLabel: PropTypes.node.isRequired
+};
+
+const defaultButtonLabels = {
+  add: 'ADD',
+  remove: 'REMOVE'
+};
+
+const DynamicArray = ({ ...props }) => {
+  const {
+    arrayValidator,
+    label,
+    description,
+    fields: formFields,
+    defaultItem,
+    meta,
+    minItems,
+    maxItems,
+    noItemsMessage,
+    FormFieldGridProps,
+    FormControlProps,
+    buttonLabels,
+    ...rest
+  } = useFieldApi(props);
+
+  const combinedButtonLabels = {
+    ...defaultButtonLabels,
+    ...buttonLabels
+  };
+
+  const classes = useFielArrayStyles();
+
+  const { dirty, submitFailed, error } = meta;
+  const isError = (dirty || submitFailed) && error && typeof error === 'string';
+
+  return (
+    <FormFieldGrid {...FormFieldGridProps} className={clsx(classes.fieldArrayGroup, FormFieldGridProps.classname)}>
+      <FormControl component="fieldset" error={isError} {...FormControlProps} className={clsx(classes.formControl, FormControlProps.className)}>
+        <FieldArray key={rest.input.name} name={rest.input.name} validate={arrayValidator}>
+          {({ fields: { map, value = [], push, remove } }) => (
+            <Grid container spacing={3}>
+              {label && (
+                <Grid item xs={12} className={classes.header}>
+                  <Typography variant="h6" className={classes.label}>
+                    {label}
+                  </Typography>
+                  <Button color="primary" onClick={() => push(defaultItem)} disabled={value.length >= maxItems}>
+                    {combinedButtonLabels.add}
+                  </Button>
+                </Grid>
+              )}
+              {description && (
+                <Grid item xs={12}>
+                  <Typography variant="subtitle1">{description}</Typography>
+                </Grid>
+              )}
+              {value.length <= 0 && (
+                <Grid item xs={12}>
+                  <Typography variant="body1" gutterBottom className={classes.centerText}>
+                    {noItemsMessage}
+                  </Typography>
+                </Grid>
+              )}
+              <Grid item xs={12}>
+                {map((name, index) => (
+                  <ArrayItem
+                    key={`${name}-${index}`}
+                    fields={formFields}
+                    name={name}
+                    fieldIndex={index}
+                    remove={remove}
+                    length={value.length}
+                    minItems={minItems}
+                    removeLabel={combinedButtonLabels.remove}
+                  />
+                ))}
+                {isError && (
+                  <Grid item xs={12}>
+                    <FormHelperText>{error}</FormHelperText>
+                  </Grid>
+                )}
+              </Grid>
+            </Grid>
+          )}
+        </FieldArray>
+      </FormControl>
+    </FormFieldGrid>
+  );
+};
+
+DynamicArray.propTypes = {
+  label: PropTypes.node,
+  description: PropTypes.node,
+  fields: PropTypes.arrayOf(PropTypes.object).isRequired,
+  defaultItem: PropTypes.any,
+  minItems: PropTypes.number,
+  maxItems: PropTypes.number,
+  noItemsMessage: PropTypes.node,
+  FormControlProps: PropTypes.object,
+  FormFieldGridProps: PropTypes.object,
+  buttonLabels: PropTypes.object
+};
+
+DynamicArray.defaultProps = {
+  maxItems: Infinity,
+  minItems: 0,
+  noItemsMessage: 'No items added',
+  FormControlProps: {},
+  FormFieldGridProps: {}
+};
+
+export default DynamicArray;