# All files / react/Toggle index.jsx

100% Statements 5/5
75% Branches 3/4
100% Functions 2/2
100% Lines 5/5

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

    2x
    2x

    6x
    6x

    2x

     import styles from './styles.styl'

    import React, { Component } from 'react'
    import PropTypes from 'prop-types'

    class Toggle extends Component {
      onChange(e) {
        Eif (this.props.onToggle) {
          this.props.onToggle(e.target.checked)
        }
      }
      render() {
        const { id, checked = false, disabled = false } = this.props
        return (
          <span className={styles['toggle']}>
            <input
              type="checkbox"
              id={id}
              className={styles['checkbox']}
              checked={checked}
              disabled={disabled}
              onChange={this.onChange.bind(this)}
            />
            <label htmlFor={id} className={styles['label']} />
          </span>
        )
      }
    }

    Toggle.propTypes = {
      id: PropTypes.string.isRequired, // A unique id for the toggle, used internally.
      checked: PropTypes.bool, // The state of the toggle
      disabled: PropTypes.bool, // Guess what...
      onToggle: PropTypes.func // A callback when the state of the toggle changes. Called with the new state as argument.
    }

    export default Toggle