From a761090b62bb38f0c45280850a67f048be316762 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Thu, 16 May 2019 18:16:48 +0300
Subject: [PATCH] Checkbox props refactored

---
 src/common/Checkbox/Checkbox.js | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/common/Checkbox/Checkbox.js b/src/common/Checkbox/Checkbox.js
index 856b33f77..07a66f063 100644
--- a/src/common/Checkbox/Checkbox.js
+++ b/src/common/Checkbox/Checkbox.js
@@ -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;