Checkbox - indeterminate state (#2703)

* NestedCheckbox - new component

* other unfinished stuff

* Checkbox - adding indeterminate state

* adding example to screen

Author: Inbal-Tish

demo/src/screens/componentScreens/CheckboxScreen.tsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
-import {Checkbox, Assets, Text, View, Colors} from 'react-native-ui-lib'; //eslint-disable-line
+import {Assets, Colors, View, Text, Checkbox} from 'react-native-ui-lib'; //eslint-disable-line
 
 export default class CheckboxScreen extends Component {
   state = {
@@ -9,17 +9,19 @@ export default class CheckboxScreen extends Component {
     value3: true,
     value4: true,
     value5: false,
-    value6: false
+    value6: false,
+    value7: true
   };
-
+  
   render() {
     return (
       <View flex padding-page>
         <Text text40 $textDefault marginB-20>
           Checkbox
         </Text>
 
-        <Text marginB-s4>Customizable UI</Text>
+        <Text marginV-s4>Customizable UI</Text>
+
         <View row marginB-s5 centerV>
           <Checkbox value={this.state.value1} onValueChange={value1 => this.setState({value1})}/>
           <Checkbox
@@ -50,10 +52,18 @@ export default class CheckboxScreen extends Component {
           containerStyle={styles.checkbox}
         />
 
+        <Checkbox
+          value={this.state.value7}
+          onValueChange={value7 => this.setState({value7})}
+          indeterminate
+          label={'Indeterminate state'}
+          color={Colors.green20}
+          containerStyle={styles.checkbox}
+        />
+
         <View row style={styles.row}>
-          <Text $textDefault marginR-10>
-            Disabled States
-          </Text>
+          <Text $textDefault marginR-10>Disabled States</Text>
+
           <Checkbox
             disabled
             value={this.state.value5}

src/assets/icons/index.js

@@ -5,6 +5,9 @@ export const icons = {
   get checkSmall() {
     return require('./check-small.png');
   },
+  get minusSmall() {
+    return require('./minusSmall.png');
+  },
   get plusSmall() {
     return require('./plusSmall.png');
   },

src/assets/icons/minusSmall.png

@@ -83,6 +83,7 @@ export interface CheckboxProps extends TouchableOpacityProps {
    * Additional styling for checkbox and label container
    */
   containerStyle?: StyleProp<ViewStyle>;
+  indeterminate?: boolean;
 }
 
 interface CheckboxState {
@@ -205,7 +206,7 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
   }
 
   renderCheckbox() {
-    const {selectedIcon, label, testID, style, containerStyle, ...others} = this.props;
+    const {selectedIcon, label, testID, style, containerStyle, indeterminate, ...others} = this.props;
     return (
       //@ts-ignore
       <TouchableOpacity
@@ -226,7 +227,7 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
           >
             <AnimatedIcon
               style={[this.styles.selectedIcon, {transform: this.animationStyle.transform}]}
-              source={selectedIcon || Assets.icons.checkSmall}
+              source={indeterminate ? Assets.icons.minusSmall : selectedIcon || Assets.icons.checkSmall}
               testID={`${testID}.selected`}
               tintColor={this.getTintColor()}
             />
@@ -238,6 +239,7 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
 
   render() {
     const {label, labelStyle, containerStyle, labelProps} = this.props;
+    
     return label ? (
       <View row centerV style={containerStyle}>
         {this.renderCheckbox()}