{"size": 1636, "ext": "js", "max_stars_repo_path": "src/components/Switch.js", "max_stars_repo_name": "odama626/web-toolkit", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Switch.js", "max_issues_repo_name": "odama626/web-toolkit", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Switch.js", "max_forks_repo_name": "odama626/web-toolkit", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 19.4761904762, "max_line_length": 76, "alphanum_fraction": 0.5256723716}
/*
 * Switch.js
 */


import React from 'react'
import prop from 'prop-types'
import cx from 'clsx'

const noop = () => {}

const DEFAULT_LABELS = ['On', 'Off']

let nextId = 1

class Switch extends React.Component {
  static propTypes = {
    label: prop.string,
    labels: prop.oneOfType([prop.bool, prop.arrayOf(prop.string)]),
    size: prop.oneOf(['mini', 'small', 'medium', 'large', 'huge']),
    value: prop.bool,
    defaultValue: prop.bool,
    onChange: prop.func,
  }

  static defaultProps = {
    size: 'medium',
    onChange: noop,
  }

  constructor(props) {
    super(props)
    this.id = `switch_${nextId++}`
  }

  onChange = ev => {
    this.props.onChange(ev.target.checked, ev)
  }

  render() {
    const {
      id,
      label,
      labels: labelsValue,
      children,
      className,
      size,
      value,
      defaultValue,
      disabled,
      onChange,
      ...rest
    } = this.props
    const labels = Array.isArray(labelsValue) ? labelsValue : DEFAULT_LABELS

    return (
      <div className={cx('Switch', className, size, { disabled })}>
        <input
          type='checkbox'
          id={id || this.id}
          checked={value}
          defaultChecked={defaultValue}
          disabled={disabled}
          onChange={this.onChange}
          {...rest}
        />
        <label
          htmlFor={id || this.id}
        >
          {labelsValue &&
            <>
              <span>{labels[0]}</span>
              <em className='sr-only'>{label}</em>
              <span>{labels[1]}</span>
            </>
          }
        </label>
      </div>
    )
  }
}

export default Switch
