{"size": 3733, "ext": "js", "max_stars_repo_path": "src/Checkbox.js", "max_stars_repo_name": "bjnortier/minimui", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/Checkbox.js", "max_issues_repo_name": "bjnortier/minimui", "max_issues_repo_issues_event_min_datetime": "2018-09-26T14:23:02.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T05:36:04.000Z", "max_forks_repo_path": "src/Checkbox.js", "max_forks_repo_name": "bjnortier/minimui", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 5, "max_forks_count": null, "avg_line_length": 28.7153846154, "max_line_length": 101, "alphanum_fraction": 0.6214840611}
import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'

import ValueComponent from './ValueComponent'
import ErrorDecorator from './ErrorDecorator'
import Spinner, { Pad } from './Spinner'

const Label = styled.span`
  padding-left: 4px;
  padding-right: 2px;
  color: ${({ disabled, inProgress }) => (disabled || inProgress) ? '#999' : 'inherit'};
`

const Outer = styled.div`
  display: inline-block;
  cursor: ${({ disabled, inProgress }) => (disabled || inProgress) ? 'not-allowed' : 'pointer'};
  color: ${({ disabled, inProgress }) => (disabled || inProgress) ? '#999' : 'inherit'};
  user-select: none;
`

const Check = styled.div`
  display: inline-block;
  position: relative;
  top: -2px;
  width: 14px;
  height: 14px;
  border: solid 1px ${({ disabled, inProgress, value, theme }) => (value && !disabled && !inProgress)
    ? theme.primary ? theme.primary.background : '#113577'
    : disabled || inProgress
      ? '#dedede'
      : 'white'};
  border-radius: 4px;
  vertical-align: middle;
  cursor: ${({ disabled, inProgress }) => (disabled || inProgress) ? 'not-allowed' : 'pointer'};
  background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14'>
      <path fill='${({ disabled, inProgress, theme, value }) =>
    value
      ? (disabled || inProgress)
        ? 'gray'
        : 'white'
      : 'transparent'
}' d='M3,7L6,12L11,3L10,2L6,9L4,6L3,7' /></svg>");
  background-repeat: no-repeat;
  background-color: ${({ disabled, inProgress, theme, value }) =>
    (disabled || inProgress)
      ? '#e6e6e6'
      : value
        ? theme.primary ? theme.primary.background : '#113577'
        : '#fff'};
  box-shadow: 0px 0px 8px 2px #0000000d;
  :focus {
    outline: none;
    border: solid 1px ${({ theme }) => theme.primary ? theme.primary.outline : '#3f8ed4'};
    box-shadow: 0 0 4px 1px ${({ theme }) => theme.primary ? theme.primary.outline : '#3f8ed4'};
  }
`

class Checkbox extends ValueComponent {
  constructor (props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.handleKeyUp = this.handleKeyUp.bind(this)
    this.handleKeyDown = this.handleKeyDown.bind(this)
  }

  handleChange (event) {
    super.handleChange(event, !this.props.value)
  }

  /**
   * Prevent the default window scrolling behaviour when Checkbox has focus
   */
  /**
   * Prevent the default window scrolling behaviour when Switch has focus
   */
  handleKeyDown (event) {
    if (event.keyCode === 32) {
      event.preventDefault()
    }
  }

  handleKeyUp (event) {
    if (event.keyCode === 32) {
      this.handleChange(event)
    }
  }

  render () {
    const { label, id, disabled, value, error, inProgress } = this.props
    return (
      <Outer
        {...{ disabled, error, inProgress }}
        onClick={this.handleChange}
      >
        <ErrorDecorator error={error}>
          <Check
            tabIndex={disabled || inProgress ? null : 0}
            {...{ id, value, disabled, inProgress }}
            onKeyDown={this.handleKeyDown}
            onKeyUp={this.handleKeyUp}
          />
          {label ? <Label {...{ inProgress, disabled }}>{label}</Label> : null}
          {inProgress ? <><Pad /><Spinner /></> : null}
        </ErrorDecorator>
      </Outer>
    )
  }
}

Checkbox.propTypes = {
  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  id: PropTypes.string,
  value: PropTypes.bool.isRequired,
  onChange: PropTypes.func.isRequired,
  disabled: PropTypes.bool,
  error: PropTypes.bool,
  inProgress: PropTypes.bool
}

Checkbox.defaultProps = {
  value: false,
  disabled: false,
  error: false,
  inProgress: false
}

export default Checkbox
