mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-12-13 08:49:01 +05:30
66 lines
1.5 KiB
TypeScript
66 lines
1.5 KiB
TypeScript
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();
|
|
}
|
|
}
|