All files / Switch Switch.js

81.81% Statements 9/11
84.37% Branches 27/32
66.66% Functions 2/3
81.81% Lines 9/11

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                  22x 22x                                                   22x 22x 22x 22x   22x                                                                                             1x   1x                
import React from 'react';
import { defaultProps } from './props/defaultProps';
import { propTypes } from './props/propTypes';
import { Container, Box } from '../Layout';
import Label from '../Label/Label';
import style from './Switch.module.css';
 
export default class Switch extends React.Component {
  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
  }
 
  onChange(e) {
    let { onChange, checked } = this.props;
    onChange && onChange(!checked, e);
  }
 
  render() {
    let {
      id,
      name,
      value,
      checked,
      disabled,
      isReadOnly,
      size,
      text,
      labelSize,
      labelPalette,
      title,
      disableTitle,
      dataId,
      dataSelectorId,
      customClass,
      customProps
    } = this.props;
    let { SwitchProps = {}, LabelProps = {} } = customProps;
    let { customSwitchWrap = '', customSwitch = '', customSwitchSize = '', customLabel = '' } = customClass;
    size !== 'small' ? (size = 'switch_medium') : (size = 'switch_small');
 
    return (
      <Container
        align='vertical'
        isCover={false}
        alignBox='row'
        isInline
        className={`${style.container} ${customSwitchWrap} ${
          disabled ? style.disabled : isReadOnly ? style.readonly : style.effect
        }`}
        data-title={disabled ? disableTitle : title}
        aria-checked={checked}
        role='switch'
        tabIndex={isReadOnly || disabled ? '-1' : '0'}
        dataSelectorId={dataSelectorId}
        {...SwitchProps}
      >
        <Box className={`${style[size]} ${customSwitchSize}`}>
          <input
            type='checkbox'
            id={id}
            className={`${style.input} ${checked ? style.checked : ''}`}
            name={name}
            value={value}
            checked={checked}
            disabled={disabled}
            readOnly={isReadOnly}
            onClick={!disabled || !isReadOnly ? this.onChange : null}
          />
          <label htmlFor={id} data-id={dataId} data-test-id={dataId} className={`${style.label} ${style[`${size}Label`]} ${customSwitch}`} />
        </Box>
        {text && (
          <Label
            text={text}
            palette={labelPalette}
            id={id}
            size={labelSize}
            type='subtitle'
            onClick={!disabled || !isReadOnly ? this.onChange : null}
            customClass={customLabel}
            {...LabelProps}
          />
        )}
      </Container>
    );
  }
}
 
Switch.defaultProps = defaultProps;
 
Switch.propTypes = propTypes;
 
// if (__DOCS__) {
//   Switch.docs = {
//     componentGroup: 'Form Elements',
//     folderName: 'Style Guide'
//   };
// }