Feat/add label support to checkbox (#959)

* label support in checkbox

* generetedTypes

* typescript

* typeScript

* change View to uilib's View

* generatedTypes

* support pressing the label

* remove View import

* fix checkbox bug

* checkbox label fixes

* add containerStyle prop to checkbox

Author: lidord-wix

demo/src/screens/componentScreens/CheckboxScreen.tsx

@@ -1,14 +1,14 @@
 import React, {Component} from 'react';
-import {Checkbox, Assets, Text, View, Colors} from 'react-native-ui-lib'; //eslint-disable-line
-
+import {Checkbox, Assets, Text, View, Colors, Spacings} from 'react-native-ui-lib'; //eslint-disable-line
 
 class CheckboxScreen extends Component {
   state = {
     value1: false,
     value2: false,
     value3: true,
     value4: true,
-    value5: false
+    value5: false,
+    value6: false
   };
 
   render() {
@@ -21,6 +21,13 @@ class CheckboxScreen extends Component {
               onValueChange={value1 => this.setState({value1})}
               style={{marginBottom: 20}}
             />
+            <Checkbox
+              value={this.state.value6}
+              label={'With label'}
+              color={Colors.green20}
+              onValueChange={value6 => this.setState({value6})}
+              containerStyle={{marginBottom: 20, marginLeft: 75}}
+            />
             <Checkbox
               value={this.state.value2}
               onValueChange={value2 => this.setState({value2})}
@@ -40,7 +47,9 @@ class CheckboxScreen extends Component {
               style={{marginBottom: 20}}
             />
             <View row marginB-20>
-              <Text text70 centerV>Disabled: </Text>
+              <Text text70 centerV>
+                Disabled:{' '}
+              </Text>
               <Checkbox
                 disabled
                 value={this.state.value5}

generatedTypes/components/checkbox/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleProp, TouchableOpacityProps, ViewStyle } from 'react-native';
+import { StyleProp, TouchableOpacityProps, ViewStyle, TextStyle } from 'react-native';
 export interface CheckboxPropTypes extends TouchableOpacityProps {
     /**
      * The value of the Checkbox. If true the switch will be turned on. Default value is false.
@@ -33,10 +33,22 @@ export interface CheckboxPropTypes extends TouchableOpacityProps {
      * The selected icon color
      */
     iconColor?: string;
+    /**
+     * The label of the checkbox
+     */
+    label?: string;
+    /**
+     * The style of the label
+     */
+    labelStyle?: StyleProp<TextStyle>;
     /**
      * Additional styling
      */
     style?: StyleProp<ViewStyle>;
+    /**
+     * Additional styling for checkbox and label container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
 }
 declare const _default: React.ComponentClass<CheckboxPropTypes & {
     useCustomTheme?: boolean | undefined;

src/components/checkbox/index.tsx

@@ -1,11 +1,22 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
-import {Animated, Easing, StyleSheet, StyleProp, TouchableOpacityProps, ViewStyle} from 'react-native';
+import {
+  Animated,
+  Easing,
+  StyleSheet,
+  StyleProp,
+  TouchableOpacityProps,
+  ViewStyle,
+  TextStyle
+} from 'react-native';
 import {Colors} from '../../style';
 //@ts-ignore
 import Assets from '../../assets';
 import {asBaseComponent} from '../../commons/new';
 import TouchableOpacity from '../touchableOpacity';
+import Text from '../text';
+import View from '../view';
+import {Spacings} from '../../style';
 
 const DEFAULT_SIZE = 24;
 const DEFAULT_COLOR = Colors.blue30;
@@ -45,15 +56,28 @@ export interface CheckboxPropTypes extends TouchableOpacityProps {
    * The selected icon color
    */
   iconColor?: string;
+  /**
+   * The label of the checkbox
+   */
+  label?: string;
+  /**
+   * The style of the label
+   */
+  labelStyle?: StyleProp<TextStyle>;
   /**
    * Additional styling
    */
-  style?: StyleProp<ViewStyle>
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Additional styling for checkbox and label container
+   */
+  containerStyle?: StyleProp<ViewStyle>;
+
 }
 
 interface CheckboxState {
   isChecked: Animated.Value;
-};
+}
 
 /**
  * @description: Checkbox component for toggling boolean value related to some context
@@ -68,6 +92,7 @@ class Checkbox extends Component<CheckboxPropTypes, CheckboxState> {
   styles: {
     container: StyleProp<ViewStyle>;
     selectedIcon: StyleProp<ViewStyle>;
+    checkboxLabel: StyleProp<TextStyle>;
   };
 
   animationStyle: {
@@ -155,34 +180,45 @@ class Checkbox extends Component<CheckboxPropTypes, CheckboxState> {
   }
 
   render() {
-    const {selectedIcon, color, iconColor, disabled, testID, style, ...others} = this.props;
+    const {selectedIcon, color, iconColor, disabled, testID, label, labelStyle, style, containerStyle, ...others} = this.props;
     return (
-      // @ts-ignore
-      <TouchableOpacity
-        {...this.getAccessibilityProps()}
-        activeOpacity={1}
-        testID={testID}
-        {...others}
-        style={[this.getBorderStyle(), style]}
-        onPress={this.onPress}
-      >
-        {
-          <Animated.View
-            style={[this.styles.container, {backgroundColor: this.getColor()}, {opacity: this.animationStyle.opacity}]}
-          >
-            <Animated.Image
+      <View row style={containerStyle}>
+        {/*@ts-ignore*/}
+        <TouchableOpacity
+          {...this.getAccessibilityProps()}
+          activeOpacity={1}
+          testID={testID}
+          {...others}
+          style={[this.getBorderStyle(), style]}
+          onPress={this.onPress}
+        >
+          {
+            <Animated.View
               style={[
-                this.styles.selectedIcon,
-                color && {tintColor: iconColor},
-                {transform: this.animationStyle.transform},
-                disabled && {tintColor: DEFAULT_ICON_COLOR}
+                this.styles.container,
+                {backgroundColor: this.getColor()},
+                {opacity: this.animationStyle.opacity}
               ]}
-              source={selectedIcon || Assets.icons.checkSmall}
-              testID={`${testID}.selected`}
-            />
-          </Animated.View>
-        }
-      </TouchableOpacity>
+            >
+              <Animated.Image
+                style={[
+                  this.styles.selectedIcon,
+                  color && {tintColor: iconColor},
+                  {transform: this.animationStyle.transform},
+                  disabled && {tintColor: DEFAULT_ICON_COLOR}
+                ]}
+                source={selectedIcon || Assets.icons.checkSmall}
+                testID={`${testID}.selected`}
+              />
+            </Animated.View>
+          }
+        </TouchableOpacity>
+        {label && (
+          <Text style={[this.styles.checkboxLabel, labelStyle]} onPress={this.onPress}>
+            {label}
+          </Text>
+        )}
+      </View>
     );
   }
 }
@@ -203,6 +239,10 @@ function createStyles(props: CheckboxPropTypes) {
       tintColor: iconColor,
       alignItems: 'center',
       justifyContent: 'center'
+    },
+    checkboxLabel: {
+      marginLeft: Spacings.s3,
+      alignSelf: 'center'
     }
   });
 }