Radio button (CheckBox)

import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types'
import _ from 'lodash'
import classnames from 'classnames'

import './index.less'

function CheckBox(props) {
  const {
    style, checked: propsChecked, content, onChange, theme,
  } = props
  const wrapperStyle = _.assign({}, style)

  const [checked, setChecked] = useState(propsChecked === true)

  useEffect(() => {
    setChecked(propsChecked)
  }, [propsChecked])

  return (
    <div
      className={classnames({
        'single-checkbox-component-wrap': true,
        'theme-dark': theme === 'dark',
        checked: checked === true,
      })}
      onClick={() => {
        const nextState = !checked
        setChecked(nextState)
        onChange(nextState)
      }}
      role="button"
      tabIndex={0}
      style={wrapperStyle}
    >
      <span className="icon" />
      <span className="tip">{ content }</span>
    </div>
  )
}

CheckBox.propTypes = {
  style: PropTypes.object,
  checked: PropTypes.bool,
  content: PropTypes.string.isRequired,
  onChange: PropTypes.func,
  theme: PropTypes.string,
}

CheckBox.defaultProps = {
  style: {},
  checked: false,
  onChange: _.noop,
  theme: 'normal',
}

export default CheckBox

.single-checkbox-component-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;

  &.checked {
    .icon {
      background-image: url(~ROOT/shared/assets/image/icon-checkbox-checked-30-30.png);
    }
  }

  .icon {
    display: inline-block;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-image: url(~ROOT/shared/assets/image/icon-checkbox-unchecked-30-30.png);
    background-size: 10px;
  }

  .tip {
    font-size: 12px;
    color: #364152;
    opacity: 0.4;
    line-height: 18px;
    margin-left: 3px;
  }
}

.single-checkbox-component-wrap {
  &.theme-dark {
    &.checked {
      .icon {
        background-image: url(~ROOT/shared/assets/image/icon-checkbox-checked-white-30-30.png);
      }
    }

    .icon {
      background-image: url(~ROOT/shared/assets/image/icon-checkbox-unchecked-white-30-30.png);
    }

    .tip {
      color: #ffffff;
    }
  }
}