fleet/frontend/components/forms/fields/Checkbox/Checkbox.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { noop, pick } from 'lodash';

import FormField from 'components/forms/FormField';

const baseClass = 'kolide-checkbox';

class Checkbox extends Component {
  static propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    disabled: PropTypes.bool,
    name: PropTypes.string,
    onChange: PropTypes.func,
    value: PropTypes.bool,
    wrapperClassName: PropTypes.string,
  };

  static defaultProps = {
    disabled: false,
    onChange: noop,
  };

  handleChange = () => {
    const { onChange, value } = this.props;

    return onChange(!value);
  };

  render () {
    const { handleChange } = this;
    const { children, className, disabled, name, value, wrapperClassName } = this.props;
    const checkBoxClass = classnames(baseClass, className);
    const formFieldProps = pick(this.props, ['hint', 'label', 'error', 'name']);

    const checkBoxTickClass = classnames(`${checkBoxClass}__tick`, {
      [`${checkBoxClass}__tick--disabled`]: disabled,
    });

    return (
      <FormField {...formFieldProps} className={wrapperClassName} type="checkbox">
        <label htmlFor={name} className={checkBoxClass}>
          <input
            checked={value}
            className={`${checkBoxClass}__input`}
            disabled={disabled}
            id={name}
            name={name}
            onChange={handleChange}
            type="checkbox"
          />
          <span className={checkBoxTickClass} />
          <span className={`${checkBoxClass}__label`}>{children}</span>
        </label>
      </FormField>
    );
  }
}

export default Checkbox;