CropSelector.tsx

import * as React from 'react';
import { connect } from 'react-redux';
import { translate } from 'react-i18next';

import Grid from 'material-ui/Grid';
import { FormControlLabel, FormLabel, FormControl, FormHelperText } from 'material-ui/Form';
import Checkbox from 'material-ui/Checkbox';

import {Crop} from 'model/crop.model';

interface ICropSelectorProps extends React.ClassAttributes<any> {
    t: any;
    crops: Crop[];
    fields: any;
    label: string;
}

const handleChange = (fields, code) => () => {
    const index = fields.getAll() ? fields.getAll().indexOf(code) : -1;

    if (index === -1) {
        fields.push(code);
    } else {
        fields.remove(index);
    }
};

const CropSelector = ({t, fields, crops, label}: ICropSelectorProps) => crops && (
    <FormControl fullWidth>
        <FormLabel>{ label }</FormLabel>
        <FormHelperText>{ t('m.crop.helper') }</FormHelperText>
        <Grid container>
            {
                crops.sort((a, b) => a.title.localeCompare(b.title)).map((crop: Crop) => (
                    <Grid item key={ crop.uuid } xs={ 6 } md={ 4 } lg={ 3 } xl={ 2 }>
                        <FormControlLabel
                            control={
                                <Checkbox
                                    checked={ fields.getAll() && fields.getAll().indexOf(crop.code) !== -1 }
                                    onChange={ handleChange(fields, crop.code) }
                                    value={ crop.code }
                                />
                            }
                            label={ crop.title }
                        />
                    </Grid>
                ))
            }
        </Grid>
    </FormControl>
);


const mapStateToProps = (state) => ({
	crops: state.crop.list,
});


export default connect(mapStateToProps, null)(translate()(CropSelector));