2018-03-26 00:46:45 +05:30
|
|
|
// @flow
|
2017-08-23 00:19:50 +05:30
|
|
|
import React from 'react';
|
2016-05-02 12:45:42 +05:30
|
|
|
|
|
|
|
import classNames from 'classnames';
|
|
|
|
|
2018-03-26 00:46:45 +05:30
|
|
|
import { SKIN_DARK, COLOR_GREEN } from 'components/ui';
|
2016-07-29 22:44:52 +05:30
|
|
|
import { omit } from 'functions';
|
2016-05-30 10:10:59 +05:30
|
|
|
|
2016-05-02 12:45:42 +05:30
|
|
|
import styles from './form.scss';
|
2016-05-02 14:50:50 +05:30
|
|
|
import FormInputComponent from './FormInputComponent';
|
2016-05-02 12:45:42 +05:30
|
|
|
|
2018-03-26 00:46:45 +05:30
|
|
|
import type { Color, Skin } from 'components/ui';
|
|
|
|
import type { MessageDescriptor } from 'react-intl';
|
2016-05-02 12:45:42 +05:30
|
|
|
|
2018-03-26 00:46:45 +05:30
|
|
|
export default class Checkbox extends FormInputComponent<{
|
|
|
|
color: Color,
|
|
|
|
skin: Skin,
|
|
|
|
label: string | MessageDescriptor,
|
|
|
|
}> {
|
|
|
|
static displayName = 'Checkbox';
|
2016-05-02 12:45:42 +05:30
|
|
|
|
2016-05-30 10:10:59 +05:30
|
|
|
static defaultProps = {
|
|
|
|
color: COLOR_GREEN,
|
2018-03-26 00:46:45 +05:30
|
|
|
skin: SKIN_DARK,
|
2016-05-30 10:10:59 +05:30
|
|
|
};
|
|
|
|
|
2016-05-02 12:45:42 +05:30
|
|
|
render() {
|
2016-05-30 10:10:59 +05:30
|
|
|
const { color, skin } = this.props;
|
|
|
|
let { label } = this.props;
|
2016-05-02 12:45:42 +05:30
|
|
|
|
2016-05-02 14:50:50 +05:30
|
|
|
label = this.formatMessage(label);
|
2016-05-02 12:45:42 +05:30
|
|
|
|
2018-03-26 00:46:45 +05:30
|
|
|
const props = omit(this.props, ['color', 'skin', 'label']);
|
2016-07-29 22:44:52 +05:30
|
|
|
|
2016-05-02 12:45:42 +05:30
|
|
|
return (
|
2018-03-26 00:46:45 +05:30
|
|
|
<div className={classNames(styles[`${color}MarkableRow`], styles[`${skin}MarkableRow`])}>
|
|
|
|
<label className={styles.markableContainer}>
|
2017-08-23 00:27:35 +05:30
|
|
|
<input ref={this.setEl}
|
2018-03-26 00:46:45 +05:30
|
|
|
className={styles.markableInput}
|
2017-08-23 00:27:35 +05:30
|
|
|
type="checkbox"
|
|
|
|
{...props}
|
|
|
|
/>
|
2016-05-02 12:45:42 +05:30
|
|
|
<div className={styles.checkbox} />
|
|
|
|
{label}
|
|
|
|
</label>
|
2016-05-02 14:50:50 +05:30
|
|
|
{this.renderError()}
|
2016-05-02 12:45:42 +05:30
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
getValue() {
|
|
|
|
return this.el.checked ? 1 : 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
focus() {
|
|
|
|
this.el.focus();
|
|
|
|
}
|
|
|
|
}
|