ItemsEditor.tsx

import * as React from 'react';
import {translate} from 'react-i18next';
import { FieldArray } from 'redux-form';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
import {log} from 'utilities/debug';

const renderMembers = ({ fields, itemLabel, itemEditor, addItem, removeItem, t }) => {

  const onAddMember = (e) => {
    const item = addItem();
    log(`Adding new ${itemLabel}`, item);
    fields.push(item);
  };

  const onRemoveMember = (member, index) => (e) => {
    log(`Removing ${itemLabel} #${index}`);
    fields.remove(index);
    removeItem(member);
  };

  if (! fields) {
    return null;
  }

  if (fields.length > 100) {
    return <div className="error">{ t('common:label.itemEditorWarn') }</div>;
  }

  return (
    <div>
      { fields && fields.map((member, index, fields) => (
        <div key={ index } className="items-editor-item">
          <Grid container justify="space-between" alignItems="baseline">
            <Grid item xs={ 10 } md={ 11 }>
              { itemEditor(member, index, fields, itemLabel) }
            </Grid>
            <Grid item xs={ 2 } md={ 1 }>
                <Button type="button" onClick={ onRemoveMember(member, index) }>{ t('common:action.remove') }</Button>
            </Grid>
          </Grid>
        </div>
      )) }
      <Grid container className="items-editor-additem">
        <Grid item xs={ 12 }>
          <Button variant="contained" type="button" onClick={ onAddMember }>{ t('common:action.add', {what: itemLabel }) }</Button>
        </Grid>
      </Grid>
    </div>
  );
};

const ItemsEditor = ({ name, itemLabel, addItem, removeItem, component, t }) => {
  return (
    <FieldArray name={ name } itemLabel={ t(itemLabel) } addItem={ addItem } removeItem={ removeItem } itemEditor={ component } component={ renderMembers } t={ t }/>
  );
};

export default translate()(ItemsEditor);