@eureca/eureca-ui/src/components/Radio/index.js

UI component library of Eureca's user and admin apps

import React from 'react';
import PropTypes from 'prop-types';

import { colors } from '../../theme/colors';

import { makeStyles } from '@material-ui/core/styles';
import { FormControlLabel, Radio as MaterialRadio } from '@material-ui/core';

const useStyles = makeStyles({
  radio: {
    color: colors.gray3,
    alignSelf: 'flex-start',
    '&:hover': {
      backgroundColor: 'transparent',
    },
    '&$checked': {
      '&:hover': {
        backgroundColor: 'transparent',
      },
    },
    '&$disabled': {
      color: colors.gray3,
    },
  },
  label: {
    color: colors.gray2,
    fontSize: '.875rem',

    '&$disabled': {
      color: colors.gray3,
    },
  },
  checked: {},
  disabled: {},
});

function Radio({
  checked,
  value,
  name,
  label = '',
  color = 'primary',
  onChange = () => {},
  ...props
}) {
  const classes = useStyles();
  const handleChange = event => {
    onChange(event.target.checked, value, label);
  };

  return (
    <FormControlLabel
      control={
        <MaterialRadio
          color={color}
          classes={{
            root: classes.radio,
            checked: classes.checked,
            disabled: classes.disabled,
          }}
          disableRipple
          data-testid={`radio-${name}`}
          {...props}
        />
      }
      name={name}
      classes={{ label: classes.label, disabled: classes.disabled }}
      checked={checked}
      value={value}
      label={label}
      onChange={handleChange}
    />
  );
}

Radio.propTypes = {
  checked: PropTypes.bool,
  value: PropTypes.any.isRequired,
  name: PropTypes.string.isRequired,
  label: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
  color: PropTypes.oneOf(['default', 'primary', 'secondary']),
  onChange: PropTypes.func,
};

export { Radio };