2017-08-23 00:19:50 +05:30
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import React from 'react';
|
2016-05-02 12:45:42 +05:30
|
|
|
|
|
|
|
import classNames from 'classnames';
|
|
|
|
|
2016-05-30 10:10:59 +05:30
|
|
|
import { colors, skins, 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
|
|
|
|
2016-05-02 14:50:50 +05:30
|
|
|
export default class Checkbox extends FormInputComponent {
|
2016-05-02 12:45:42 +05:30
|
|
|
static displayName = 'Checkbox';
|
|
|
|
|
|
|
|
static propTypes = {
|
2016-05-30 10:10:59 +05:30
|
|
|
color: PropTypes.oneOf(colors),
|
|
|
|
skin: PropTypes.oneOf(skins),
|
2016-05-02 12:45:42 +05:30
|
|
|
label: PropTypes.oneOfType([
|
|
|
|
PropTypes.shape({
|
|
|
|
id: PropTypes.string
|
|
|
|
}),
|
|
|
|
PropTypes.string
|
|
|
|
]).isRequired
|
|
|
|
};
|
|
|
|
|
2016-05-30 10:10:59 +05:30
|
|
|
static defaultProps = {
|
|
|
|
color: COLOR_GREEN,
|
|
|
|
skin: SKIN_DARK
|
|
|
|
};
|
|
|
|
|
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
|
|
|
|
2016-07-29 22:44:52 +05:30
|
|
|
const props = omit(this.props, Object.keys(Checkbox.propTypes));
|
|
|
|
|
2016-05-02 12:45:42 +05:30
|
|
|
return (
|
|
|
|
<div className={classNames(styles[`${color}CheckboxRow`], styles[`${skin}CheckboxRow`])}>
|
|
|
|
<label className={styles.checkboxContainer}>
|
2017-08-23 00:27:35 +05:30
|
|
|
<input ref={this.setEl}
|
|
|
|
className={styles.checkboxInput}
|
|
|
|
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();
|
|
|
|
}
|
|
|
|
}
|