# All files / components/RadioGroup RadioButton.js

40% Statements 2/5
0% Branches 0/4
0% Functions 0/1
40% Lines 2/5

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126

    5x

    5x

     import React from 'react';
    import PropTypes from 'prop-types';
    import { withProps } from 'recompose';
    import RadioGroupButtonContainer from './styles/RadioGroupButtonContainer';
    import RadioGroupButtonContent from './styles/RadioGroupButtonContent';
    import RadioGroupButtonInput from './styles/RadioGroupButtonInput';
    import RadioGroupButtonLabel from './styles/RadioGroupButtonLabel';
    import RadioGroupButtonLabelText from './styles/RadioGroupButtonLabelText';

    class RadioButton extends React.Component {
      static propTypes = {
        /**
         * Whether or not the button is currently selected.
         * Use undefined to make this an 'uncontrolled' component
         */
        checked: PropTypes.bool,
        /**
         * Called when the checked state of the button changes.
         */
        onChange: PropTypes.func,
        /**
         * Text to render inside the button's label.
         */
        label: PropTypes.string.isRequired,
        /**
         * Content to render inside the main part of the button.
         */
        content: PropTypes.node,
        /**
         * A field name for the input.
         */
        name: PropTypes.string.isRequired,
        /**
         * The input value.
         */
        value: PropTypes.string.isRequired,
        /**
         * Adds a class name to the input element.
         */
        className: PropTypes.string,
        /**
         * Adds an id to the input element.
         */
        id: PropTypes.string,
        /**
         * A component to render the container around the button
         */
        Container: PropTypes.func,
        /**
         * A component to render the content inside the button (not the label)
         */
        Content: PropTypes.func,
        /**
         * A component to render the input for the button (usually hidden)
         */
        Input: PropTypes.func,
        /**
         * A component to render the label inside the button
         */
        Label: PropTypes.func,
        /**
         * A component to render the text inside the label
         */
        LabelText: PropTypes.func,
      };

      static defaultProps = {
        content: null,
        className: null,
        id: null,
        Container: RadioGroupButtonContainer,
        Content: RadioGroupButtonContent,
        Input: RadioGroupButtonInput,
        Label: RadioGroupButtonLabel,
        LabelText: RadioGroupButtonLabelText,
      };

      render() {
        const {
          checked,
          label,
          name,
          value,
          onChange,
          content,
          className,
          Container,
          Content,
          Input,
          Label,
          LabelText,
        } = this.props;

        const id = this.props.id || `radio-${name}>${value}`;

        return (
          <Container>
            <Input
              type="radio"
              id={id}
              value={value}
              name={name}
              checked={checked}
              onChange={onChange}
              className={className}
            />
            <Label htmlFor={id} active={checked}>
              <LabelText>{label}</LabelText>
              {content !== null ? (
                <Content active={checked}>{content}</Content>
              ) : null}
            </Label>
          </Container>
        );
      }
    }

    RadioButton.Small = withProps({
      Label: RadioGroupButtonLabel.Small,
    })(RadioButton);
    RadioButton.Large = withProps({
      Label: RadioGroupButtonLabel.Large,
    })(RadioButton);

    export default RadioButton;