Checkbox - add validation state invoked by validate() (#2672)

* Checkbox - add validation state invoked by validate()

* fix error colors

* change conditions

* Add comment

* Adding 'isValid' method

* add 'required' and 'onChangeValidity' props

* fix isValid()

* tests

* isValid initial value and adding tests

* eslint ignore unused driver

* Move 'validationState' out of state. isValid - clearer condition

* Revert "Move 'validationState' out of state. isValid - clearer condition"

This reverts commit 27cecd2.

* format tests file

* removing driver unused const

* moving validationState out of state

* isValid - clear condition.
onValidityChange - invoke if required, but only if validate invoked

* fix pr comments

* set validation on value prop change

Author: Inbal-Tish

demo/src/screens/componentScreens/CheckboxScreen.tsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
-import {Assets, Colors, View, Text, Checkbox} from 'react-native-ui-lib'; //eslint-disable-line
+import {Assets, Colors, View, Text, Button, Checkbox, CheckboxRef} from 'react-native-ui-lib'; //eslint-disable-line
 
 export default class CheckboxScreen extends Component {
   state = {
@@ -10,7 +10,28 @@ export default class CheckboxScreen extends Component {
     value4: true,
     value5: false,
     value6: false,
-    value7: true
+    value7: false,
+    validationText: '',
+    validationColor: Colors.$textDefault
+  };
+
+  checkbox = React.createRef<CheckboxRef>();
+
+  onPress = () => {
+    this.checkbox.current?.validate();
+  };
+
+  onValueChange = (value: boolean) => {
+    this.setState({value7: value}, () => {
+      console.log('onValueChange: ', value);
+    });
+  };
+
+  onChangeValidity = (value?: boolean) => {
+    this.setState({
+      validationText: String(value),
+      validationColor: value === true ? Colors.$textSuccess : Colors.$textDangerLight
+    });
   };
 
   render() {
@@ -77,6 +98,24 @@ export default class CheckboxScreen extends Component {
             iconColor={Colors.green10}
           />
         </View>
+
+        <View marginT-20>
+          <Text text60 $textDefault marginB-10>
+            Validation
+          </Text>
+          <Text marginB-4 color={this.state.validationColor}>{this.state.validationText}</Text>
+          <View row centerV spread marginB-10>
+            <Checkbox
+              required
+              onChangeValidity={this.onChangeValidity}
+              ref={this.checkbox}
+              value={this.state.value7}
+              onValueChange={this.onValueChange}
+              label={'This is a checkbox'}
+            />
+            <Button size={'small'} label={'Validate'} onPress={this.onPress}/>
+          </View>
+        </View>
       </View>
     );
   }