accounts-frontend/packages/app/components/ui/form/Checkbox.tsx

import React from 'react';
import { MessageDescriptor } from 'react-intl';
import clsx from 'clsx';
import { SKIN_DARK, COLOR_GREEN, Color, Skin } from 'app/components/ui';
import { omit } from 'app/functions';

import styles from './form.scss';
import FormInputComponent from './FormInputComponent';

export default class Checkbox extends FormInputComponent<
    React.InputHTMLAttributes<HTMLInputElement> & {
        color: Color;
        skin: Skin;
        label: string | MessageDescriptor | React.ReactElement;
    }
> {
    static defaultProps = {
        color: COLOR_GREEN,
        skin: SKIN_DARK,
    };

    elRef = React.createRef<HTMLInputElement>();

    render() {
        const { color, skin } = this.props;
        let { label } = this.props;

        label = React.isValidElement(label) ? label : this.formatMessage(label);

        const props = omit(this.props, ['color', 'skin', 'label']);

        return (
            <div className={clsx(styles[`${color}MarkableRow`], styles[`${skin}MarkableRow`])}>
                <label className={styles.markableContainer}>
                    <input ref={this.elRef} className={styles.markableInput} type="checkbox" {...props} />
                    <div className={styles.checkbox} />
                    {label}
                </label>
                {this.renderError()}
            </div>
        );
    }

    getValue() {
        const { current: el } = this.elRef;

        return el && el.checked ? 1 : 0;
    }

    focus() {
        const { current: el } = this.elRef;

        el && el.focus();
    }
}