Checkbox - add validation state invoked by validate()

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, Button, Checkbox, CheckboxRef} from 'react-native-ui-lib'; //eslint-disable-line
 
 export default class CheckboxScreen extends Component {
   state = {
@@ -9,8 +9,11 @@ export default class CheckboxScreen extends Component {
     value3: true,
     value4: true,
     value5: false,
-    value6: false
+    value6: false,
+    value7: false
   };
+  checkbox = React.createRef<CheckboxRef>();
+  checkbox1 = React.createRef<CheckboxRef>();
 
   render() {
     return (
@@ -67,6 +70,32 @@ export default class CheckboxScreen extends Component {
             iconColor={Colors.green10}
           />
         </View>
+
+        <View marginT-20>
+          <Text text60 $textDefault marginB-10>
+            Validation
+          </Text>
+          <View row spread marginB-10>
+            <Checkbox
+              ref={this.checkbox}
+              value={this.state.value7}
+              onValueChange={value7 => this.setState({value7})}
+              label={'This is a checkbox'}
+            />
+            <Button size={'small'} label={'Validate'} onPress={() => this.checkbox.current?.validate()}/>
+          </View>
+          <View row spread>
+            <Checkbox
+              disabled
+              ref={this.checkbox1}
+              value={this.state.value7}
+              onValueChange={value7 => this.setState({value7})}
+              iconColor={Colors.green10}
+              label={'This is disabled checkbox'}
+            />
+            <Button disabled size={'small'} label={'Validate'} onPress={() => this.checkbox1.current?.validate()}/>
+          </View>
+        </View>
       </View>
     );
   }

src/components/checkbox/index.tsx

@@ -85,8 +85,16 @@ export interface CheckboxProps extends TouchableOpacityProps {
   containerStyle?: StyleProp<ViewStyle>;
 }
 
+interface CheckboxMethods {
+  validate: () => void;
+  isValid: () => boolean;
+}
+
+export type CheckboxRef = Checkbox & CheckboxMethods;
+
 interface CheckboxState {
   isChecked: Animated.Value;
+  valid?: boolean;
 }
 
 /**
@@ -122,7 +130,8 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
     super(props);
 
     this.state = {
-      isChecked: new Animated.Value(this.props.value ? 1 : 0)
+      isChecked: new Animated.Value(this.props.value ? 1 : 0),
+      valid: true
     };
 
     this.styles = createStyles(props);
@@ -139,6 +148,7 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
       ]
     };
   }
+  validationState = false;
 
   componentDidUpdate(prevProps: CheckboxProps) {
     const {value} = this.props;
@@ -174,6 +184,9 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
     const {disabled} = this.props;
 
     if (!disabled) {
+      if (this.validationState) {
+        this.setState({valid: !this.props.value});
+      }
       this.props.onValueChange?.(!this.props.value);
     }
   };
@@ -198,12 +211,19 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
   };
 
   getBorderStyle() {
-    const borderColor = {borderColor: this.getColor()};
+    const borderColor = {borderColor: this.state.valid ? this.getColor() : Colors.$outlineDanger};
     const borderStyle = [this.styles.container, {borderWidth: DEFAULT_BORDER_WIDTH}, borderColor];
 
     return borderStyle;
   }
 
+  getLabelStyle = () => {
+    return {
+      color: 
+        this.props.disabled ? Colors.$textDisabled : this.state.valid ? Colors.$textDefault : Colors.$textDangerLight
+    };
+  };
+
   renderCheckbox() {
     const {selectedIcon, label, testID, style, containerStyle, ...others} = this.props;
     return (
@@ -241,14 +261,26 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
     return label ? (
       <View row centerV style={containerStyle}>
         {this.renderCheckbox()}
-        <Text flexS style={[this.styles.checkboxLabel, labelStyle]} recorderTag={'unmask'} {...labelProps} onPress={this.onPress}>
+        <Text flexS style={[this.styles.checkboxLabel, this.getLabelStyle(), labelStyle]} recorderTag={'unmask'} {...labelProps} onPress={this.onPress}>
           {label}
         </Text>
       </View>
     ) : (
       this.renderCheckbox()
     );
   }
+
+  validate() {
+    this.validationState = true;
+    // Validation: value must be true (checked)
+    if (!this.props.disabled && !this.props.value) {
+      this.setState({valid: false});
+    }
+  }
+
+  isValid() {
+    return this.state.valid;
+  }
 }
 
 function createStyles(props: CheckboxProps) {
@@ -275,8 +307,7 @@ function createStyles(props: CheckboxProps) {
     },
     checkboxLabel: {
       marginLeft: Spacings.s3,
-      alignSelf: 'center',
-      color: Colors.$textDefault
+      alignSelf: 'center'
     }
   });
 }

src/index.ts

@@ -59,7 +59,7 @@ export {default as BaseInput} from './components/baseInput';
 export {default as Button, ButtonProps, ButtonSize, ButtonAnimationDirection} from './components/button';
 export {default as Card, CardProps, CardSectionProps, CardSelectionOptions} from './components/card';
 export {default as Carousel, CarouselProps, PageControlPosition} from './components/carousel';
-export {default as Checkbox, CheckboxProps} from './components/checkbox';
+export {default as Checkbox, CheckboxProps, CheckboxRef} from './components/checkbox';
 export {default as ChipsInput, ChipsInputProps, ChipsInputChipProps} from './components/chipsInput';
 export {default as Chip, ChipProps} from './components/chip';
 export {default as ColorPicker, ColorPickerProps} from './components/colorPicker';