refactor(ui): apply checkbox mappings

akveo · Apr 8, 2019 · a1f1255 · a1f1255
1 parent db1161d
commit a1f1255
Show file tree

Hide file tree

Showing 5 changed files with 229 additions and 114 deletions.
diff --git a/src/framework/ui/checkbox/checkbox.component.tsx b/src/framework/ui/checkbox/checkbox.component.tsx
@@ -157,7 +157,7 @@ export class CheckBox extends React.Component<Props> {
   };
 
   public render(): React.ReactElement<TouchableOpacityProps> {
-    const { style, themedStyle, text, ...derivedProps } = this.props;
+    const { style, themedStyle, disabled, text, ...derivedProps } = this.props;
 
     const {
       container,
@@ -170,21 +170,28 @@ export class CheckBox extends React.Component<Props> {
     const [iconElement, textElement] = this.renderComponentChildren(componentStyle);
 
     return (
-      <View style={container}>
+      <TouchableOpacity
+        style={container}
+        activeOpacity={1.0}
+        disabled={disabled}
+        onPress={this.onPress}
+        onPressIn={this.onPressIn}
+        onPressOut={this.onPressOut}>
         <View style={highlightContainer}>
           <View style={highlight}/>
           <TouchableOpacity
+            activeOpacity={1.0}
             {...derivedProps}
+            disabled={disabled}
             style={selectContainer}
-            activeOpacity={1.0}
             onPress={this.onPress}
             onPressIn={this.onPressIn}
             onPressOut={this.onPressOut}>
             {iconElement}
           </TouchableOpacity>
         </View>
         {textElement}
-      </View>
+      </TouchableOpacity>
     );
   }
 }

diff --git a/src/framework/ui/checkbox/checkbox.spec.tsx.snap b/src/framework/ui/checkbox/checkbox.spec.tsx.snap
@@ -1,7 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`@checkbox matches snapshots * active 1`] = `
-<View
+<TouchableOpacity
+  activeOpacity={1}
+  onPress={[Function]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
   style={
     Object {
       "alignItems": "center",
@@ -20,7 +24,7 @@ exports[`@checkbox matches snapshots * active 1`] = `
     <View
       style={
         Object {
-          "backgroundColor": "#DDE1EB",
+          "backgroundColor": "#EDF0F5",
           "borderRadius": 6,
           "height": 40,
           "position": "absolute",
@@ -35,12 +39,13 @@ exports[`@checkbox matches snapshots * active 1`] = `
       onPress={[Function]}
       onPressIn={[Function]}
       onPressOut={[Function]}
+      size="medium"
       status="primary"
       style={
         Object {
           "alignItems": "center",
-          "backgroundColor": "#284DE0",
-          "borderColor": "#284DE0",
+          "backgroundColor": "#D9E4FF",
+          "borderColor": "#2541CC",
           "borderRadius": 3,
           "borderWidth": 1,
           "height": 24,
@@ -168,11 +173,15 @@ exports[`@checkbox matches snapshots * active 1`] = `
       />
     </TouchableOpacity>
   </View>
-</View>
+</TouchableOpacity>
 `;
 
 exports[`@checkbox matches snapshots * active: default 1`] = `
-<View
+<TouchableOpacity
+  activeOpacity={1}
+  onPress={[Function]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
   style={
     Object {
       "alignItems": "center",
@@ -206,6 +215,7 @@ exports[`@checkbox matches snapshots * active: default 1`] = `
       onPress={[Function]}
       onPressIn={[Function]}
       onPressOut={[Function]}
+      size="medium"
       status="primary"
       style={
         Object {
@@ -339,11 +349,16 @@ exports[`@checkbox matches snapshots * active: default 1`] = `
       />
     </TouchableOpacity>
   </View>
-</View>
+</TouchableOpacity>
 `;
 
 exports[`@checkbox matches snapshots * checked.disabled 1`] = `
-<View
+<TouchableOpacity
+  activeOpacity={1}
+  disabled={true}
+  onPress={[Function]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
   style={
     Object {
       "alignItems": "center",
@@ -379,6 +394,7 @@ exports[`@checkbox matches snapshots * checked.disabled 1`] = `
       onPress={[Function]}
       onPressIn={[Function]}
       onPressOut={[Function]}
+      size="medium"
       status="primary"
       style={
         Object {
@@ -512,11 +528,15 @@ exports[`@checkbox matches snapshots * checked.disabled 1`] = `
       />
     </TouchableOpacity>
   </View>
-</View>
+</TouchableOpacity>
 `;
 
 exports[`@checkbox matches snapshots * default 1`] = `
-<View
+<TouchableOpacity
+  activeOpacity={1}
+  onPress={[Function]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
   style={
     Object {
       "alignItems": "center",
@@ -550,6 +570,7 @@ exports[`@checkbox matches snapshots * default 1`] = `
       onPress={[Function]}
       onPressIn={[Function]}
       onPressOut={[Function]}
+      size="medium"
       status="primary"
       style={
         Object {
@@ -683,11 +704,15 @@ exports[`@checkbox matches snapshots * default 1`] = `
       />
     </TouchableOpacity>
   </View>
-</View>
+</TouchableOpacity>
 `;
 
 exports[`@checkbox matches snapshots * with text 1`] = `
-<View
+<TouchableOpacity
+  activeOpacity={1}
+  onPress={[Function]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
   style={
     Object {
       "alignItems": "center",
@@ -722,6 +747,7 @@ exports[`@checkbox matches snapshots * with text 1`] = `
       onPress={[Function]}
       onPressIn={[Function]}
       onPressOut={[Function]}
+      size="medium"
       status="primary"
       style={
         Object {
@@ -859,14 +885,14 @@ exports[`@checkbox matches snapshots * with text 1`] = `
     style={
       Object {
         "color": "#0D1C2E",
-        "fontSize": 14,
+        "fontSize": 13,
         "fontWeight": "600",
-        "lineHeight": 16,
+        "lineHeight": 24,
         "marginHorizontal": 12,
       }
     }
   >
     Text
   </ForwardRef(WrappingElement)>
-</View>
+</TouchableOpacity>
 `;