All files / Radio Radio.js

83.33% Statements 10/12
96.87% Branches 62/64
66.66% Functions 2/3
83.33% Lines 10/12

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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                      34x 34x                                                       34x 34x 34x 34x                 34x 34x                                                                                                             1x 1x  
/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium'] }] */
import React from 'react';
import { defaultProps } from './props/defaultProps';
import { propTypes } from './props/propTypes';
import Label from '../Label/Label';
import { Container, Box } from '../Layout';
 
import style from './Radio.module.css';
 
export default class Radio extends React.Component {
  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
  }
 
  onChange(e) {
    let { onChange, value } = this.props;
    onChange && onChange(value, e);
  }
 
  render() {
    let {
      id,
      name,
      value,
      checked,
      disabled,
      isReadOnly,
      palette,
      disabledTitle,
      title,
      text,
      labelPalette,
      size,
      labelSize,
      variant,
      active,
      isFilled,
      customClass,
      a11y
    } = this.props;
    let { customRadioWrap = '', customRadio = '', customLabel = '' } = customClass;
    let accessMode = isReadOnly ? style.readonly : disabled ? style.disabled : style.pointer;
    let toolTip = disabled ? disabledTitle : title ? title : null;
 
    let {
      ariaHidden,
      role = 'radio',
      ariaChecked = checked,
      ariaLabel,
      ariaLabelledby,
      ariaReadonly = isReadOnly || disabled ? true : false
    } = a11y;
    return (
      <Container
        dataId={value ? value.toLowerCase() : 'RadioComp'}
        isCover={false}
        isInline={text ? false : true}
        alignBox='row'
        align='both'
        className={`${style.container} ${active && !disabled ? style.active : ''} ${accessMode} ${
          isReadOnly || disabled ? '' : style.hoverEfffect
        } ${checked ? style.checked : ''} ${customRadioWrap}`}
        data-title={toolTip}
        onClick={!isReadOnly && !disabled ? this.onChange : ''}
        aria-checked={ariaChecked}
        tabindex={isReadOnly || disabled || ariaHidden ? '-1' : '0'}
        role={role}
        aria-Hidden={ariaHidden}
        aria-label={ariaLabel}
        aria-labelledby={ariaLabelledby}
        aria-readonly={ariaReadonly}
      >
        <Box
          className={`${style.radio} ${checked ? `${style[`rdBox${palette}`]}` : ''} 
            ${isReadOnly || disabled ? '' : `${style[`hover${palette}`]}`} ${style[size]} ${
            isFilled ? style.filled : ''
          } ${style[`centerPath${palette}`]} ${customRadio}`}
        >
          <input type='hidden' id={id} name={name} value={value} />
          <label className={`${style.radioLabel} ${accessMode}`}>
            <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'>
              <circle cx='20' cy='20' r='19' className={`${style.rdBox}`} />
              {checked ? <circle cx='20' cy='20' r='11.03' className={`${style.centerPath}`} /> : null}
            </svg>
          </label>
        </Box>
        {text && (
          <Box flexible className={style.text}>
            <Label
              text={text}
              palette={disabled ? 'disable' : labelPalette}
              size={labelSize}
              type='title'
              clipped
              dataId={`${text}_label`}
              variant={variant}
              title={toolTip ? toolTip : text}
              customClass={`${checked && active && !disabled ? `${style[`${palette}checkedActive`]}` : ''} 
              ${style[`${palette}Label`]} ${accessMode} ${customLabel}`}
            />
          </Box>
        )}
      </Container>
    );
  }
}
 
Radio.defaultProps = defaultProps;
Radio.propTypes = propTypes;