RadioSelection.tsx 2.22 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14
import * as React from 'react';
import { translate } from 'react-i18next';

import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormLabel from '@material-ui/core/FormLabel';
import FormControl from '@material-ui/core/FormControl';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import { withStyles } from '@material-ui/core/styles';

/* tslint:disable */
const styles = (theme) =>({
  radioGroupMultiColumn: {
    flexDirection: 'row' as 'row',
15
    justifyContent: 'flex-start' as 'flex-start',
16 17
    '& > label': {
      flexBasis: '12%',
Oleksii Savran's avatar
Oleksii Savran committed
18 19 20 21 22 23
      'html[dir="ltr"] &' : {
        marginRight: '16px',
      },
      'html[dir="rtl"] &' : {
        marginLeft: '16px',
      },
24 25 26 27 28 29 30 31 32 33 34
      [theme.breakpoints.down('md')]: {
        flexBasis: '24%',
      },
      [theme.breakpoints.down('sm')]: {
        flexBasis: '45%',
      },
      [theme.breakpoints.down('xs')]: {
        flexBasis: '100%',
      },
    },
  },
35 36 37
  label: {
    // just mock for overriding
  },
38 39 40
});
/* tslint:enable */

41 42
const RadioSelection = ({formLabel, singleColumn = false, options, renderOptionLabel, valueField, input, meta, handleChange, classes, required = false, t, ...rest}) => (
  <FormControl required={ required } className={ classes.root } fullWidth>
43 44 45 46 47
    <FormLabel className={ classes.formLabel }>{ formLabel }</FormLabel>
    <RadioGroup
      { ...input }
      { ...rest }
      value={ input.value }
48
      onChange={ handleChange ? handleChange(input) :
49 50 51 52 53 54 55 56 57 58 59
        (event, value) => input.onChange(value) // tslint:disable-line
      }
      className={ singleColumn ? classes.radioGroupSingleColumn : classes.radioGroupMultiColumn }
    >
      { options && options.length > 0 &&
        options.map((option, i) => (
           <FormControlLabel
              key={ `radio_option_${i}` }
              value={ valueField ? option[valueField] : option }
              label={ renderOptionLabel ? renderOptionLabel(option) : valueField ? option[valueField] : option }
              control={ <Radio/> }
60
              classes={ {label: classes.label} }
61
              { ...rest }
62 63 64 65 66 67 68 69
            />
        ))
      }
    </RadioGroup>
  </FormControl>
);

export default withStyles(styles)(translate()(RadioSelection));