ItemsEditor.tsx 1.86 KB
Newer Older
Maxym Borodenko's avatar
Maxym Borodenko committed
1
import * as React from 'react';
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
2
import {translate} from 'react-i18next';
Maxym Borodenko's avatar
Maxym Borodenko committed
3
import { FieldArray } from 'redux-form';
Matija Obreza's avatar
Matija Obreza committed
4
5
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
Maxym Borodenko's avatar
Maxym Borodenko committed
6
7
import {log} from 'utilities/debug';

Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
8
const renderMembers = ({ fields, itemLabel, itemEditor, addItem, removeItem, t }) => {
Maxym Borodenko's avatar
Maxym Borodenko committed
9

Matija Obreza's avatar
Matija Obreza committed
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
  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) {
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
27
    return <div className="error">{ t('common:label.itemEditorWarn') }</div>;
Matija Obreza's avatar
Matija Obreza committed
28
29
30
31
32
33
  }

  return (
    <div>
      { fields && fields.map((member, index, fields) => (
        <div key={ index } className="items-editor-item">
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
34
          <Grid container justify="space-between" alignItems="center">
Matija Obreza's avatar
Matija Obreza committed
35
36
            <Grid item xs={ 10 } md={ 11 }>
              { itemEditor(member, index, fields, itemLabel) }
Maxym Borodenko's avatar
Maxym Borodenko committed
37
            </Grid>
Matija Obreza's avatar
Matija Obreza committed
38
            <Grid item xs={ 2 } md={ 1 }>
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
39
                <Button type="button" onClick={ onRemoveMember(member, index) }>{ t('common:action.remove') }</Button>
Matija Obreza's avatar
Matija Obreza committed
40
41
            </Grid>
          </Grid>
Maxym Borodenko's avatar
Maxym Borodenko committed
42
        </div>
Matija Obreza's avatar
Matija Obreza committed
43
44
45
      )) }
      <Grid container className="items-editor-additem">
        <Grid item xs={ 12 }>
46
          <Button variant="contained" type="button" onClick={ onAddMember }>{ t('common:action.add', {what: itemLabel }) }</Button>
Matija Obreza's avatar
Matija Obreza committed
47
48
49
50
        </Grid>
      </Grid>
    </div>
  );
Maxym Borodenko's avatar
Maxym Borodenko committed
51
52
};

Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
53
const ItemsEditor = ({ name, itemLabel, addItem, removeItem, component, t }) => {
Matija Obreza's avatar
Matija Obreza committed
54
  return (
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
55
    <FieldArray name={ name } itemLabel={ t(itemLabel) } addItem={ addItem } removeItem={ removeItem } itemEditor={ component } component={ renderMembers } t={ t }/>
Matija Obreza's avatar
Matija Obreza committed
56
  );
Maxym Borodenko's avatar
Maxym Borodenko committed
57
58
};

Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
59
export default translate()(ItemsEditor);