CropSelector.tsx 1.83 KB
Newer Older
Valeriy Panov's avatar
Valeriy Panov committed
1
import * as React from 'react';
2
import { connect } from 'react-redux';
Matija Obreza's avatar
Matija Obreza committed
3
4
import { translate } from 'react-i18next';

Valeriy Panov's avatar
Valeriy Panov committed
5
import Grid from 'material-ui/Grid';
Matija Obreza's avatar
Matija Obreza committed
6
import { FormControlLabel, FormLabel, FormControl, FormHelperText } from 'material-ui/Form';
Valeriy Panov's avatar
Valeriy Panov committed
7
8
9
10
11
import Checkbox from 'material-ui/Checkbox';

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

interface ICropSelectorProps extends React.ClassAttributes<any> {
Matija Obreza's avatar
Matija Obreza committed
12
    t: any;
Valeriy Panov's avatar
Valeriy Panov committed
13
14
15
16
17
    crops: Crop[];
    fields: any;
    label: string;
}

Maxym Borodenko's avatar
Maxym Borodenko committed
18
19
const handleChange = (fields, code) => () => {
    const index = fields.getAll() ? fields.getAll().indexOf(code) : -1;
Valeriy Panov's avatar
Valeriy Panov committed
20
21
22
23
24
25
26
27

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

Maxym Borodenko's avatar
Maxym Borodenko committed
28
const CropSelector = ({t, fields, crops, label}: ICropSelectorProps) => crops && (
Valeriy Panov's avatar
Valeriy Panov committed
29
30
    <FormControl fullWidth>
        <FormLabel>{ label }</FormLabel>
Matija Obreza's avatar
Matija Obreza committed
31
        <FormHelperText>{ t('m.crop.helper') }</FormHelperText>
Valeriy Panov's avatar
Valeriy Panov committed
32
33
        <Grid container>
            {
Maxym Borodenko's avatar
Maxym Borodenko committed
34
35
                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 }>
Valeriy Panov's avatar
Valeriy Panov committed
36
37
38
                        <FormControlLabel
                            control={
                                <Checkbox
Maxym Borodenko's avatar
Maxym Borodenko committed
39
                                    checked={ fields.getAll() && fields.getAll().indexOf(crop.code) !== -1 }
Maxym Borodenko's avatar
Maxym Borodenko committed
40
                                    onChange={ handleChange(fields, crop.code) }
Maxym Borodenko's avatar
Maxym Borodenko committed
41
                                    value={ crop.code }
Valeriy Panov's avatar
Valeriy Panov committed
42
43
                                />
                            }
Maxym Borodenko's avatar
Maxym Borodenko committed
44
                            label={ crop.title }
Valeriy Panov's avatar
Valeriy Panov committed
45
46
47
48
49
50
51
52
                        />
                    </Grid>
                ))
            }
        </Grid>
    </FormControl>
);

53
54
55
56
57
58
59

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


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