Skip to content

Instantly share code, notes, and snippets.

@nnarhinen
Last active March 5, 2017 10:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nnarhinen/3f833cdbe8a492b1f132ea7a44e4cce1 to your computer and use it in GitHub Desktop.
Save nnarhinen/3f833cdbe8a492b1f132ea7a44e4cce1 to your computer and use it in GitHub Desktop.
const TeamForm = ({ handleSubmit, i18n, array }) => (
<form onSubmit={handleSubmit}>
{ /* Other form inputs */ }
<Field name="persons" component={renderRows(i18n)} array={array} />
{ /* Other form inputs */ }
</form>
);
const renderPersons = i18n => props => {
let {
input: {
value: rows
},
array
} = props;
let change = (idx, property) => ev => {
array.splice('rows', idx, 1, {
...rows[idx],
[property]: ev.target.value
});
};
return (
<Table responsive className="input-table">
<thead>
<tr>
<th>#</th>
<th className="fill">{ i18n.gettext('Name') }</th>
<th>{ i18n.gettext('Year of birth') }</th>
<th>{ i18n.gettext('E-mail') }</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
{ rows.map((row, idx) => (
<tr key={idx}>
<td>{idx + 1}</td>
<td><input style={{minWidth: '8em'}} type="text" value={row.name} onChange={change(idx, 'name')} /></td>
<td><input type="number" value={row.birth_year} onChange={change(idx, 'birth_year')} /></td>
<td><input type="email" value={row.email} onChange={change(idx, 'email')} /></td>
<td>
<Button onClick={() => array.swap('rows', idx - 1, idx)} disabled={!idx} bsStyle="link" bsSize="xsmall"><Icon name="arrow-up" /></Button>
<Button onClick={() => array.swap('rows', idx + 1, idx)} disabled={idx === rows.length - 1} bsStyle="link" bsSize="xsmall"><Icon name="arrow-down" /></Button>
<Button onClick={() => array.splice('rows', idx, 1)} bsStyle="link" bsSize="xsmall"><Icon name="trash" /></Button>
</td>
</tr>
)) }
</tbody>
<tfoot>
<tr>
<td colSpan={7}>
<Button onClick={() => array.push('rows', {name: '', birth_year: '', email: ''})}><Icon name="plus" /> { i18n.gettext('New row') }</Button>
</td>
</tr>
</tfoot>
</Table>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment