checkbox variant - outline (#1067)

* add outline prop to checkbox * Bugfixes, Revisions from Feedback, create DEFAULT_BORDER_RADIUS and DEFAULT_BORDER_WIDTH * change getTintColor to use iconColor Co-authored-by: Mackenzie Browne <[email protected]>
wix · Dec 15, 2020 · 68471e8 · 68471e8
1 parent c2a7654
commit 68471e8
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 10 deletions.
diff --git a/generatedTypes/components/checkbox/index.d.ts b/generatedTypes/components/checkbox/index.d.ts
@@ -17,6 +17,10 @@ export interface CheckboxProps extends TouchableOpacityProps {
      * The Checkbox color
      */
     color?: string;
+    /**
+     * alternative Checkbox outline style
+     */
+    outline?: boolean;
     /**
      * The size of the checkbox. affect both width and height
      */

diff --git a/src/components/checkbox/index.tsx b/src/components/checkbox/index.tsx
@@ -15,6 +15,9 @@ const DEFAULT_COLOR = Colors.blue30;
 const DEFAULT_ICON_COLOR = Colors.white;
 const DEFAULT_DISABLED_COLOR = Colors.grey50;
 
+const DEFAULT_BORDER_WIDTH = 2;
+const DEFAULT_BORDER_RADIUS = 8;
+
 export interface CheckboxProps extends TouchableOpacityProps {
   /**
    * The value of the Checkbox. If true the switch will be turned on. Default value is false.
@@ -32,6 +35,10 @@ export interface CheckboxProps extends TouchableOpacityProps {
    * The Checkbox color
    */
   color?: string;
+  /**
+   * alternative Checkbox outline style
+   */
+  outline?: boolean;
   /**
    * The size of the checkbox. affect both width and height
    */
@@ -158,14 +165,24 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
     }
   };
 
-  getColor() {
-    const {color, disabled} = this.props;
-    return disabled ? DEFAULT_DISABLED_COLOR : color || DEFAULT_COLOR;
-  }
+  getColor = () => (this.props.disabled ? DEFAULT_DISABLED_COLOR : this.props.color || DEFAULT_COLOR);
+
+  getBackgroundColor = () => (this.props.outline ? 'transparent' : this.getColor());
+
+  getTintColor = () => {
+    const {outline, disabled, iconColor} = this.props;
+    if (outline) {
+      if (disabled) return DEFAULT_DISABLED_COLOR;
+      else return iconColor || DEFAULT_COLOR;
+    } else {
+      if (disabled) return Colors.white;
+      else return iconColor || Colors.white;
+    }
+  };
 
   getBorderStyle() {
     const borderColor = {borderColor: this.getColor()};
-    const borderStyle = [this.styles.container, {borderWidth: 2}, borderColor];
+    const borderStyle = [this.styles.container, {borderWidth: DEFAULT_BORDER_WIDTH}, borderColor];
 
     return borderStyle;
   }
@@ -185,14 +202,17 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
       >
         {
           <Animated.View
-            style={[this.styles.container, {backgroundColor: this.getColor()}, {opacity: this.animationStyle.opacity}]}
+            style={[
+              this.styles.container,
+              {opacity: this.animationStyle.opacity},
+              {backgroundColor: this.getBackgroundColor()}
+            ]}
           >
             <Animated.Image
               style={[
                 this.styles.selectedIcon,
-                color && {tintColor: iconColor},
                 {transform: this.animationStyle.transform},
-                disabled && {tintColor: DEFAULT_ICON_COLOR}
+                {tintColor: this.getTintColor()}
               ]}
               source={selectedIcon || Assets.icons.checkSmall}
               testID={`${testID}.selected`}
@@ -219,13 +239,18 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
 }
 
 function createStyles(props: CheckboxProps) {
-  const {color = DEFAULT_COLOR, iconColor = DEFAULT_ICON_COLOR, size = DEFAULT_SIZE, borderRadius} = props;
+  const {
+    color = DEFAULT_COLOR,
+    iconColor = DEFAULT_ICON_COLOR,
+    size = DEFAULT_SIZE,
+    borderRadius = DEFAULT_BORDER_RADIUS
+  } = props;
 
   return StyleSheet.create({
     container: {
       width: size,
       height: size,
-      borderRadius: borderRadius || 8,
+      borderRadius: borderRadius,
       alignItems: 'center',
       justifyContent: 'center',
       borderColor: color