RadioSelection.tsx 2.13 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 18 19 20 21 22 23 24 25 26 27 28
    '& > label': {
      flexBasis: '12%',
      [theme.breakpoints.down('md')]: {
        flexBasis: '24%',
      },
      [theme.breakpoints.down('sm')]: {
        flexBasis: '45%',
      },
      [theme.breakpoints.down('xs')]: {
        flexBasis: '100%',
      },
    },
  },
29 30 31
  label: {
    // just mock for overriding
  },
32 33 34
});
/* tslint:enable */

35 36
const RadioSelection = ({formLabel, singleColumn = false, options, renderOptionLabel, valueField, input, meta, handleChange, classes, required = false, t, ...rest}) => (
  <FormControl required={ required } className={ classes.root } fullWidth>
37 38 39 40 41
    <FormLabel className={ classes.formLabel }>{ formLabel }</FormLabel>
    <RadioGroup
      { ...input }
      { ...rest }
      value={ input.value }
42
      onChange={ handleChange ? handleChange(input) :
43 44 45 46 47 48 49 50 51 52 53
        (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/> }
Oleksii Savran's avatar
Oleksii Savran committed
54
              className="form-control-label-rtl"
55
              classes={ {label: classes.label} }
56
              { ...rest }
57 58 59 60 61 62 63 64
            />
        ))
      }
    </RadioGroup>
  </FormControl>
);

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