CropChips.tsx 1.56 KB
Newer Older
Valeriy Panov's avatar
Valeriy Panov committed
1
import * as React from 'react';
2
import {connect} from 'react-redux';
Valeriy Panov's avatar
Valeriy Panov committed
3
import { withStyles } from 'material-ui/styles';
4
5
6

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

Valeriy Panov's avatar
Valeriy Panov committed
7
8
interface ICropChipsProps extends React.ClassAttributes<any> {
    crops: string[];
9
    availableCrops: Crop[];
Valeriy Panov's avatar
Valeriy Panov committed
10
11
12
13
    classes?: any;
}

const styles = (theme) => ({
14
15
16
17
    chipHolder: {
      display: 'inline-block',
      position: 'relative' as 'relative',
      height: '1em',
Valeriy Panov's avatar
Valeriy Panov committed
18
19
    },
    chip: {
20
        display: 'inline-block',
21
        marginRight: theme.spacing.unit,
22
23
24
25
26
27
28
        padding: '.2em .5em',
        position: 'relative' as 'relative',
        top: '-.2em',
        border: 'solid 1px Gray',
        borderRadius: '.2em',
        backgroundColor: '#e2e2e2',
        color: 'Black',
Valeriy Panov's avatar
Valeriy Panov committed
29
30
31
    },
});

32
33
34
35
36
37
38
39
40
41
42
43
44
const CropChips = ({crops, availableCrops, classes}: ICropChipsProps) => crops && crops.length > 0 && crops.filter((c) => c !== null).length > 0 && (
    <div className={ classes.chipHolder }>
        { crops.map((c) => availableCrops ? availableCrops.find((crop) => crop.code === c) || c : c).map((crop) => {
          if (! crop) {
            console.log('Null crop in', crops);
            return null;
          } else if (typeof crop === 'string') {
            return <div key={ crop } className={ classes.chip }>{ crop }</div>;
          } else {
            return <div key={ crop.code } className={ classes.chip }>{ crop.title }</div>;
          }
        }) }
    </div>
Valeriy Panov's avatar
Valeriy Panov committed
45
46
);

47
48
49
50
51
const mapStateToProps = (state) => ({
	availableCrops: state.crop.list,
});

export default connect(mapStateToProps, null)(withStyles(styles)(CropChips));