All files / lib/ToggleSwitch index.js

100% Statements 9/9
50% Branches 1/2
100% Functions 3/3
100% Lines 9/9
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 127 128 129 130 131 132 133 134 135 136                                1x   1x 1x                         7x   7x                                   1x                       89x                                     89x                   89x                                                                                    
/**
 * @category controls
 * @component toggle-switch
 * @variations collab-ui-react
 */
 
import React from 'react';
import PropTypes from 'prop-types';
 
class ToggleSwitch extends React.PureComponent {
 
  state = {
    isToggleOn: this.props.checked
  };
 
  handleClick = event => {
    this.setState ({ isToggleOn: !this.state.isToggleOn });
 
    Eif (this.props.onChange) {
      this.props.onChange(event);
    }
  }
 
  render() {
    const {
      disabled,
      name,
      label,
      value,
      className,
      htmlId,
      onChange,
    } = this.props;
 
    return (
      <div
        className={
          `cui-input-group cui-toggle-switch` +
          ` ${className}`
        }
      >
        <input
          className="cui-input cui-toggle-switch__input"
          type="checkbox"
          disabled={disabled}
          aria-checked={this.state.isToggleOn}
          checked={this.state.isToggleOn}
          name={name}
          value={value}
          id={htmlId}
          onChange={onChange}
          tabIndex={0}
          onClick={event => this.handleClick(event)}
        />
 
        <label className="cui-toggle-switch__label" htmlFor={htmlId}>
          <span className="cui-toggle-switch__label__container" />
          <span className="cui-toggle-switch__label__text">{label}</span>
        </label>
      </div>
    );
  }
}
 
ToggleSwitch.propTypes = {
  /** @prop Set the toggle switch to checked | false */
  checked: PropTypes.bool,
  /** @prop Sets the className for the toggle switch | '' */
  className: PropTypes.string,
  /** @prop Set the toggle switch to disabled | false */
  disabled: PropTypes.bool,
  /** @prop Unique HTML ID used for tying label to HTML input for automated testing */
  htmlId: PropTypes.string.isRequired,
  /** @prop Sets the label string for the toggle switch | '' */
  label: PropTypes.string.isRequired,
  /** @prop Sets the name of the toggle switch | '' */
  name: PropTypes.string,
  /** @prop Callback function invoked when state is changed | null */
  onChange: PropTypes.func,
  /** @prop Sets the value of the toggle switch | '' */
  value: PropTypes.string,
};
 
ToggleSwitch.defaultProps = {
  checked: false,
  className: '',
  disabled: false,
  label: '',
  name: '',
  onChange: null,
  value: '',
};
 
ToggleSwitch.displayName = 'ToggleSwitch';
 
export default ToggleSwitch;
 
/**
* @component toggle-switch
* @section default
* @react
import { ToggleSwitch } from '@collab-ui/react';
 
export default class ToggleSwitchDefault extends React.PureComponent {
  render() {
    return (
      <ToggleSwitch
        checked={false}
        label='Toggle Switch'
        htmlId='testToggleSwitch1'
      />
    );
  }
}
 
**/
 
/**
* @component toggle-switch
* @section filled
* @react
import { ToggleSwitch } from '@collab-ui/react';
 
export default class ToggleSwitchFilled extends React.PureComponent {
  render() {
    return (
      <ToggleSwitch
        checked={true}
        label='Toggle Switch'
        htmlId='testToggleSwitch1'
      />
    );
  }
}
 
**/