2016-10-26 16:04:32 +03:00
|
|
|
const classNames = require('classnames');
|
|
|
|
const React = require('react');
|
2016-12-08 14:41:37 +02:00
|
|
|
const constants = require('../../shared/constants');
|
|
|
|
const fns = require('../../shared/functions');
|
|
|
|
const match = require('../../shared/match');
|
|
|
|
const Styled = require('styled-components');
|
|
|
|
|
|
|
|
const {
|
|
|
|
colors,
|
|
|
|
boxes
|
|
|
|
} = constants;
|
|
|
|
|
|
|
|
const {
|
|
|
|
remcalc
|
|
|
|
} = fns;
|
|
|
|
|
|
|
|
const {
|
|
|
|
default: styled,
|
|
|
|
css
|
|
|
|
} = Styled;
|
|
|
|
|
|
|
|
const styles = {
|
|
|
|
...colors
|
|
|
|
};
|
|
|
|
|
|
|
|
const StyledInput = styled.input`
|
|
|
|
`;
|
|
|
|
|
|
|
|
const StyledLabel = styled.label`
|
|
|
|
color: #646464;
|
|
|
|
`;
|
2016-10-26 16:04:32 +03:00
|
|
|
|
|
|
|
const Checkbox = ({
|
|
|
|
checked = false,
|
|
|
|
children,
|
2016-10-31 18:02:33 +02:00
|
|
|
className,
|
2016-10-26 16:04:32 +03:00
|
|
|
disabled = false,
|
2016-10-31 18:02:33 +02:00
|
|
|
form,
|
2016-10-26 16:44:17 +03:00
|
|
|
id,
|
2016-10-31 18:02:33 +02:00
|
|
|
name,
|
2016-10-26 16:04:32 +03:00
|
|
|
onChange,
|
2016-10-31 18:02:33 +02:00
|
|
|
readOnly,
|
|
|
|
required,
|
|
|
|
selectionDirection,
|
|
|
|
style,
|
|
|
|
tabIndex
|
2016-10-26 16:04:32 +03:00
|
|
|
}) => {
|
|
|
|
const cn = classNames(
|
|
|
|
className,
|
|
|
|
styles.checkbox,
|
|
|
|
checked ? styles.checked : '',
|
|
|
|
disabled ? styles.disabled : ''
|
|
|
|
);
|
|
|
|
|
|
|
|
return (
|
2016-12-08 14:41:37 +02:00
|
|
|
<StyledLabel className={styles.label} htmlFor={id}>
|
|
|
|
<StyledInput
|
2016-10-26 16:04:32 +03:00
|
|
|
checked={checked}
|
2016-10-26 16:44:17 +03:00
|
|
|
className={cn}
|
2016-10-26 16:04:32 +03:00
|
|
|
disabled={disabled}
|
2016-10-31 18:02:33 +02:00
|
|
|
form={form}
|
2016-10-26 16:44:17 +03:00
|
|
|
id={id}
|
2016-10-31 18:02:33 +02:00
|
|
|
name={name}
|
2016-10-26 16:44:17 +03:00
|
|
|
onChange={onChange}
|
2016-10-31 18:02:33 +02:00
|
|
|
readOnly={readOnly}
|
|
|
|
required={required}
|
2016-10-26 16:44:17 +03:00
|
|
|
style={style}
|
2016-10-31 18:02:33 +02:00
|
|
|
tabIndex={tabIndex}
|
2016-10-26 16:04:32 +03:00
|
|
|
type='checkbox'
|
|
|
|
/>
|
|
|
|
<span>{children}</span>
|
2016-12-08 14:41:37 +02:00
|
|
|
</StyledLabel>
|
2016-10-26 16:04:32 +03:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
Checkbox.propTypes = {
|
2016-10-26 16:44:17 +03:00
|
|
|
checked: React.PropTypes.bool,
|
2016-10-26 16:04:32 +03:00
|
|
|
children: React.PropTypes.node,
|
|
|
|
className: React.PropTypes.string,
|
|
|
|
disabled: React.PropTypes.bool,
|
2016-10-31 18:02:33 +02:00
|
|
|
form: React.PropTypes.string,
|
2016-10-26 16:44:17 +03:00
|
|
|
id: React.PropTypes.string,
|
2016-10-31 18:02:33 +02:00
|
|
|
name: React.PropTypes.string,
|
2016-10-26 16:04:32 +03:00
|
|
|
onChange: React.PropTypes.func,
|
2016-10-31 18:02:33 +02:00
|
|
|
readOnly: React.PropTypes.bool,
|
|
|
|
required: React.PropTypes.bool,
|
|
|
|
selectionDirection: React.PropTypes.string,
|
|
|
|
style: React.PropTypes.object,
|
|
|
|
tabIndex: React.PropTypes.string
|
2016-10-26 16:04:32 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
module.exports = Checkbox;
|