Separate checkbox single and checkbox with text styling (#850)

react-native-elements · Jan 26, 2018 · 7f86fbe · 7f86fbe
1 parent 2593e33
commit 7f86fbe
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 71 deletions.
diff --git a/src/checkbox/CheckBox.js b/src/checkbox/CheckBox.js
@@ -53,7 +53,11 @@ const CheckBox = props => {
       {...attributes}
       onLongPress={onLongPress}
       onPress={onPress}
-      style={[styles.container, containerStyle && containerStyle]}
+      style={[
+        styles.container,
+        title && styles.containerHasTitle,
+        containerStyle && containerStyle,
+      ]}
     >
       <View
         style={[
@@ -62,35 +66,39 @@ const CheckBox = props => {
           center && { justifyContent: 'center' },
         ]}
       >
-        {!iconRight &&
+        {!iconRight && (
           <Icon
             color={checked ? checkedColor : uncheckedColor}
             name={iconName}
             size={size || 24}
             onLongPress={onLongIconPress}
             onPress={onIconPress}
-          />}
+          />
+        )}
 
         {React.isValidElement(title)
           ? title
-          : <TextElement
-              style={[
-                styles.text,
-                textStyle && textStyle,
-                fontFamily && { fontFamily },
-              ]}
-            >
-              {checked ? checkedTitle || title : title}
-            </TextElement>}
+          : title && (
+              <TextElement
+                style={[
+                  styles.text,
+                  textStyle && textStyle,
+                  fontFamily && { fontFamily },
+                ]}
+              >
+                {checked ? checkedTitle || title : title}
+              </TextElement>
+            )}
 
-        {iconRight &&
+        {iconRight && (
           <Icon
             color={checked ? checkedColor : uncheckedColor}
             name={iconName}
             size={size || 24}
             onLongPress={onLongIconPress}
             onPress={onIconPress}
-          />}
+          />
+        )}
       </View>
     </Component>
   );
@@ -140,11 +148,13 @@ const styles = StyleSheet.create({
     margin: 5,
     marginLeft: 10,
     marginRight: 10,
-    backgroundColor: '#fafafa',
-    borderColor: '#ededed',
-    borderWidth: 1,
     padding: 10,
+  },
+  containerHasTitle: {
+    borderWidth: 1,
     borderRadius: 3,
+    backgroundColor: '#fafafa',
+    borderColor: '#ededed',
   },
   text: {
     marginLeft: 10,

diff --git a/src/checkbox/__tests__/__snapshots__/CheckBox.js.snap b/src/checkbox/__tests__/__snapshots__/CheckBox.js.snap
@@ -7,15 +7,12 @@ exports[`CheckBox Component should render with icon and checked 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#fafafa",
-        "borderColor": "#ededed",
-        "borderRadius": 3,
-        "borderWidth": 1,
         "margin": 5,
         "marginLeft": 10,
         "marginRight": 10,
         "padding": 10,
       },
+      undefined,
       Object {
         "backgroundColor": "red",
       },
@@ -40,20 +37,6 @@ exports[`CheckBox Component should render with icon and checked 1`] = `
       name="square-o"
       size={24}
     />
-    <TextElement
-      style={
-        Array [
-          Object {
-            "color": "#43484d",
-            "fontWeight": "bold",
-            "marginLeft": 10,
-            "marginRight": 10,
-          },
-          undefined,
-          undefined,
-        ]
-      }
-    />
   </View>
 </TouchableOpacity>
 `;
@@ -66,16 +49,13 @@ exports[`CheckBox Component should render with icon and iconRight 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#fafafa",
-        "borderColor": "#ededed",
-        "borderRadius": 3,
-        "borderWidth": 1,
         "margin": 5,
         "marginLeft": 10,
         "marginRight": 10,
         "padding": 10,
       },
       undefined,
+      undefined,
     ]
   }
 >
@@ -93,20 +73,6 @@ exports[`CheckBox Component should render with icon and iconRight 1`] = `
       ]
     }
   >
-    <TextElement
-      style={
-        Array [
-          Object {
-            "color": "#43484d",
-            "fontWeight": "bold",
-            "marginLeft": 10,
-            "marginRight": 10,
-          },
-          undefined,
-          undefined,
-        ]
-      }
-    />
     <Icon
       allowFontScaling={false}
       color="blue"
@@ -124,16 +90,13 @@ exports[`CheckBox Component should render without issues 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#fafafa",
-        "borderColor": "#ededed",
-        "borderRadius": 3,
-        "borderWidth": 1,
         "margin": 5,
         "marginLeft": 10,
         "marginRight": 10,
         "padding": 10,
       },
       undefined,
+      undefined,
     ]
   }
 >
@@ -155,20 +118,6 @@ exports[`CheckBox Component should render without issues 1`] = `
       name="square-o"
       size={24}
     />
-    <TextElement
-      style={
-        Array [
-          Object {
-            "color": "#43484d",
-            "fontWeight": "bold",
-            "marginLeft": 10,
-            "marginRight": 10,
-          },
-          undefined,
-          undefined,
-        ]
-      }
-    />
   </View>
 </TouchableOpacity>
 `;