Cultivation/src/ui/components/common/Checkbox.tsx

import React from 'react'
import checkmark from '../../../resources/icons/check.svg'

import './Checkbox.css'

interface IProps {
  label?: string
  checked: boolean
  onChange: () => void
  id?: string
}

interface IState {
  checked: boolean
}

export default class Checkbox extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props)

    this.state = {
      checked: props.checked,
    }
  }

  static getDerivedStateFromProps(props: IProps, state: IState) {
    if (props.checked !== state.checked) {
      return {
        checked: props.checked,
      }
    }

    return { checked: props.checked }
  }

  handleChange = () => {
    this.setState({ checked: !this.state.checked })
    this.props.onChange()
  }

  render() {
    return (
      <div className="Checkbox">
        <input type="checkbox" id={this.props.id} checked={this.state.checked} onChange={this.handleChange} />
        <label htmlFor={this.props.id}>
          <div className="CheckboxDisplay">{this.state.checked ? <img src={checkmark} alt="Checkmark" /> : null}</div>
          <span>{this.props.label || ''}</span>
        </label>
      </div>
    )
  }
}