Checkbox props refactored

This commit is contained in:
NikolaBorislavovHristov 2019-05-16 18:16:48 +03:00
parent 22cc957bd7
commit a761090b62

View file

@ -5,7 +5,7 @@ const Icon = require('stremio-icons/dom');
const { Input } = require('stremio-navigation');
const styles = require('./styles');
const Checkbox = React.forwardRef((props, ref) => {
const Checkbox = React.forwardRef(({ className, disabled = false, checked = false, children, ...props }, ref) => {
const onClick = React.useCallback((event) => {
event.preventDefault();
if (typeof props.onClick === 'function') {
@ -31,16 +31,16 @@ const Checkbox = React.forwardRef((props, ref) => {
}
}, [props.onMouseOut]);
return (
<label className={classnames(props.className, styles['checkbox-container'], { 'checked': props.checked }, { 'disabled': props.disabled })} onClick={onClick} onDrag={onDrag} onMouseOut={onMouseOut}>
<label className={classnames(className, styles['checkbox-container'], { 'checked': checked }, { 'disabled': disabled })} onClick={onClick} onDrag={onDrag} onMouseOut={onMouseOut}>
<Input
ref={ref}
className={styles['native-checkbox']}
type={'checkbox'}
disabled={props.disabled}
defaultChecked={props.checked}
disabled={disabled}
defaultChecked={checked}
/>
<Icon className={styles['icon']} icon={props.checked ? 'ic_check' : 'ic_box_empty'} />
{React.Children.only(props.children)}
<Icon className={styles['icon']} icon={checked ? 'ic_check' : 'ic_box_empty'} />
{React.isValidElement(children) ? React.Children.only(children) : null}
</label>
);
});
@ -49,17 +49,12 @@ Checkbox.displayName = 'Checkbox';
Checkbox.propTypes = {
className: PropTypes.string,
disabled: PropTypes.bool.isRequired,
checked: PropTypes.bool.isRequired,
disabled: PropTypes.bool,
checked: PropTypes.bool,
onClick: PropTypes.func,
onDrag: PropTypes.func,
onMouseOut: PropTypes.func,
children: PropTypes.node
};
Checkbox.defaultProps = {
disabled: false,
checked: false
};
module.exports = Checkbox;