{"size": 1170, "ext": "js", "max_stars_repo_path": "packages/checkbox/src/index.js", "max_stars_repo_name": "LeoKnight/poseidon", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "packages/checkbox/src/index.js", "max_issues_repo_name": "LeoKnight/poseidon", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "packages/checkbox/src/index.js", "max_forks_repo_name": "LeoKnight/poseidon", "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": 22.0754716981, "max_line_length": 69, "alphanum_fraction": 0.5700854701}
import React, { useState } from 'react'
import styled from 'styled-components'
import theme from '@zcool/theme'
// import { T } from '@zcool/util'
import Icon from '@zcool/icon'

const Label = styled.label`
  cursor: ${props => `${props.disable ? 'not-allowed' : 'pointer'}`};
`

function Checkbox({ width, disable, onCheck, value }) {
  const [checked, setChecked] = useState(value)

  const handleChange = () => {
    if (disable) {
      return false
    }
    onCheck(!checked)
    setChecked(!checked)
  }

  return (
    <div>
      <Label onClick={handleChange} disable={disable}>
        {checked ? (
          disable ? (
            <Icon glyph="checkbox-checked-disabled" size={width} />
          ) : (
            <Icon glyph="checkbox-checked" size={width} />
          )
        ) : disable ? (
          <Icon glyph="checkbox-disabled" size={width} />
        ) : (
          <Icon glyph="checkbox" size={width} />
        )}
      </Label>
    </div>
  )
}

Checkbox.displayName = 'Checkbox'

Checkbox.defaultProps = {
  theme,
  width: 16,
  // width: T('icon.size.md'),
  disable: false,
  onCheck: () => {},
  value: false
}

export default Checkbox
