2016-10-28 16:59:28 +03:00
|
|
|
const classNames = require('classnames');
|
|
|
|
const React = require('react');
|
|
|
|
const styles = require('./style.css');
|
|
|
|
|
|
|
|
const Widget = ({
|
2016-10-28 18:01:23 +03:00
|
|
|
checked = false,
|
2016-10-28 16:59:28 +03:00
|
|
|
children,
|
|
|
|
className,
|
2016-10-28 18:01:23 +03:00
|
|
|
disabled = false,
|
|
|
|
name,
|
|
|
|
selectable = 'single',
|
|
|
|
style,
|
|
|
|
value = name
|
2016-10-28 16:59:28 +03:00
|
|
|
}) => {
|
|
|
|
|
|
|
|
const cn = classNames(
|
|
|
|
className,
|
|
|
|
styles.widget
|
|
|
|
);
|
|
|
|
|
|
|
|
const type = selectable === 'single' ? 'radio' : 'checkbox';
|
|
|
|
|
|
|
|
return (
|
2016-10-28 18:01:23 +03:00
|
|
|
<label className={cn} htmlFor={value}>
|
2016-10-28 16:59:28 +03:00
|
|
|
<input
|
2016-10-28 18:01:23 +03:00
|
|
|
checked={checked}
|
2016-10-28 16:59:28 +03:00
|
|
|
className={styles.input}
|
2016-10-28 18:01:23 +03:00
|
|
|
disabled={disabled}
|
|
|
|
id={value}
|
2016-10-28 16:59:28 +03:00
|
|
|
name={name}
|
|
|
|
type={type}
|
2016-10-28 18:01:23 +03:00
|
|
|
value={value}
|
2016-10-28 16:59:28 +03:00
|
|
|
/>
|
|
|
|
<div className={styles.content}>
|
|
|
|
{children}
|
|
|
|
</div>
|
|
|
|
</label>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
Widget.propTypes = {
|
2016-10-28 18:01:23 +03:00
|
|
|
checked: React.PropTypes.bool,
|
2016-10-28 16:59:28 +03:00
|
|
|
children: React.PropTypes.object,
|
|
|
|
className: React.PropTypes.string,
|
2016-10-28 18:01:23 +03:00
|
|
|
disabled: React.PropTypes.bool,
|
2016-10-28 16:59:28 +03:00
|
|
|
name: React.PropTypes.string,
|
|
|
|
selectable: React.PropTypes.string,
|
2016-10-28 18:01:23 +03:00
|
|
|
style: React.PropTypes.object,
|
|
|
|
value: React.PropTypes.string
|
2016-10-28 16:59:28 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
module.exports = Widget;
|