From b48fc75a09ab36e09122854187ac8b4ffc217d60 Mon Sep 17 00:00:00 2001
From: "aman.singh" <aman.singh@navi.com>
Date: Tue, 6 Dec 2022 15:31:10 +0530
Subject: [PATCH] added error component and ts error removed

---
 RN-UI-LIB                                     |  2 +-
 src/components/form/components/Checkbox.tsx   | 11 +++++--
 .../form/components/CheckboxGroup.tsx         | 30 +++++++++++++++++++
 .../form/components/ErrorMessage.tsx          | 27 +++++++++++++++++
 .../form/components/ImageUpload.tsx           |  7 ++---
 .../form/components/RadioButton.tsx           | 17 ++---------
 src/components/form/components/Rating.tsx     | 12 ++++----
 src/components/form/components/TextArea.tsx   | 14 ++++-----
 src/components/form/components/TextInput.tsx  | 10 +++----
 9 files changed, 85 insertions(+), 45 deletions(-)
 create mode 100644 src/components/form/components/CheckboxGroup.tsx
 create mode 100644 src/components/form/components/ErrorMessage.tsx

diff --git a/RN-UI-LIB b/RN-UI-LIB
index f2529f8e..ea27d7d6 160000
--- a/RN-UI-LIB
+++ b/RN-UI-LIB
@@ -1 +1 @@
-Subproject commit f2529f8eaefed5696cb0b1c488dfe90cacf9ed26
+Subproject commit ea27d7d612b47279cd647978d7cf8b4a7ee8799d
diff --git a/src/components/form/components/Checkbox.tsx b/src/components/form/components/Checkbox.tsx
index d8c523ed..7212aba9 100644
--- a/src/components/form/components/Checkbox.tsx
+++ b/src/components/form/components/Checkbox.tsx
@@ -1,10 +1,15 @@
-import {StyleSheet, Text, View} from 'react-native';
+import {StyleSheet, View} from 'react-native';
 import React from 'react';
+import RNCheckbox from '../../../../RN-UI-LIB/src/components/chechbox/Checkbox';
 
-const Checkbox = () => {
+interface ICheckbox {
+    onSelectionChange: (val: boolean) => void;
+}
+
+const Checkbox = ({onSelectionChange}: ICheckbox) => {
     return (
         <View>
-            <Text>Checkbox</Text>
+            <RNCheckbox onSelectionChange={onSelectionChange} />
         </View>
     );
 };
diff --git a/src/components/form/components/CheckboxGroup.tsx b/src/components/form/components/CheckboxGroup.tsx
new file mode 100644
index 00000000..5dc034f9
--- /dev/null
+++ b/src/components/form/components/CheckboxGroup.tsx
@@ -0,0 +1,30 @@
+import {StyleSheet, View} from 'react-native';
+import React from 'react';
+import RNCheckboxGroup from '../../../../RN-UI-LIB/src/components/chechbox/CheckboxGroup';
+import {ICheckboxOption} from '../../../../RN-UI-LIB/src/components/chechbox/types';
+
+interface ICheckboxGroup {
+    onSelectionChange: (val: ICheckboxOption[] | null) => void;
+    options: ICheckboxOption[];
+    showCheckboxAll?: boolean;
+}
+
+const CheckboxGroup = ({
+    onSelectionChange,
+    options,
+    showCheckboxAll,
+}: ICheckboxGroup) => {
+    return (
+        <View>
+            <RNCheckboxGroup
+                onSelectionChange={onSelectionChange}
+                options={options}
+                showCheckAll={showCheckboxAll}
+            />
+        </View>
+    );
+};
+
+export default CheckboxGroup;
+
+const styles = StyleSheet.create({});
diff --git a/src/components/form/components/ErrorMessage.tsx b/src/components/form/components/ErrorMessage.tsx
new file mode 100644
index 00000000..f0b1403a
--- /dev/null
+++ b/src/components/form/components/ErrorMessage.tsx
@@ -0,0 +1,27 @@
+import {Text, View} from 'react-native';
+import React from 'react';
+import {GenericStyles} from '../../../../RN-UI-LIB/src/styles';
+import InfoIcon from '../../../../RN-UI-LIB/src/Icons/InfoIcon';
+
+interface IError {
+    show: any;
+}
+
+const ErrorMessage: React.FC<IError> = props => {
+    const {show} = props;
+    if (!show) {
+        return null;
+    }
+    return (
+        <View style={GenericStyles.mt12}>
+            <Text style={GenericStyles.alignCenter}>
+                <InfoIcon color={'red'} />{' '}
+                <Text style={[GenericStyles.ml10, GenericStyles.redText]}>
+                    This is mandatory field
+                </Text>
+            </Text>
+        </View>
+    );
+};
+
+export default ErrorMessage;
diff --git a/src/components/form/components/ImageUpload.tsx b/src/components/form/components/ImageUpload.tsx
index 4d0e0608..eb524217 100644
--- a/src/components/form/components/ImageUpload.tsx
+++ b/src/components/form/components/ImageUpload.tsx
@@ -8,6 +8,7 @@ import {GenericStyles} from '../../../../RN-UI-LIB/src/styles';
 import {useState} from 'react';
 import {useSelector} from 'react-redux';
 import {RootState} from '../../../store/store';
+import ErrorMessage from './ErrorMessage';
 
 interface IImageUpload {
     questionType: string;
@@ -72,11 +73,7 @@ const ImageUpload: React.FC<IImageUpload> = props => {
                     <Image style={styles.image} source={{uri: image}} />
                 </View>
             )}
-            {error?.[sectionId]?.[questionId] ? (
-                <Text style={GenericStyles.redText}>
-                    This is mendatory field
-                </Text>
-            ) : null}
+            <ErrorMessage show={error?.[sectionId]?.[questionId]} />
         </View>
     );
 };
diff --git a/src/components/form/components/RadioButton.tsx b/src/components/form/components/RadioButton.tsx
index 080a1e94..ded2e3db 100644
--- a/src/components/form/components/RadioButton.tsx
+++ b/src/components/form/components/RadioButton.tsx
@@ -1,5 +1,5 @@
 import React, {useEffect} from 'react';
-import {StyleSheet, View} from 'react-native';
+import {View} from 'react-native';
 
 import {useState} from 'react';
 import {Control, Controller} from 'react-hook-form';
@@ -9,10 +9,10 @@ import RadioChip from '../../../../RN-UI-LIB/src/components/radio_button/RadioCh
 import RadioGroup from '../../../../RN-UI-LIB/src/components/radio_button/RadioGroup';
 import Text from '../../../../RN-UI-LIB/src/components/Text';
 import {GenericStyles} from '../../../../RN-UI-LIB/src/styles';
-import {COLORS} from '../../../../RN-UI-LIB/src/styles/colors';
 import template from '../../../data/templateData.json';
 import {RootState} from '../../../store/store';
 import QuestionRenderingEngine from '../QuestionRenderingEngine';
+import ErrorMessage from './ErrorMessage';
 
 interface IRadioButton {
     questionType: string;
@@ -126,12 +126,7 @@ const RadioButton: React.FC<IRadioButton> = props => {
                 )}
                 name={`${sectionId}.${questionId}`}
             />
-            {error?.[sectionId]?.[questionId] ? (
-                <Text style={GenericStyles.redText}>
-                    This is mendatory field
-                </Text>
-            ) : null}
-
+            <ErrorMessage show={error?.[sectionId]?.[questionId]} />
             {associatedQuestions.map((nextQuestion: string, index) => {
                 if (
                     template.questions[
@@ -162,10 +157,4 @@ const RadioButton: React.FC<IRadioButton> = props => {
     );
 };
 
-const styles = StyleSheet.create({
-    redText: {
-        color: COLORS.TEXT.RED,
-    },
-});
-
 export default RadioButton;
diff --git a/src/components/form/components/Rating.tsx b/src/components/form/components/Rating.tsx
index 61e594fe..83ead934 100644
--- a/src/components/form/components/Rating.tsx
+++ b/src/components/form/components/Rating.tsx
@@ -4,6 +4,7 @@ import {Control, Controller} from 'react-hook-form';
 import {GenericStyles} from '../../../../RN-UI-LIB/src/styles';
 import StarRating from '../../../../RN-UI-LIB/src/components/star_rating/StarRating';
 import template from '../../../data/templateData.json';
+import ErrorMessage from './ErrorMessage';
 interface IRating {
     questionType: string;
     questionId: string;
@@ -18,13 +19,14 @@ interface IRating {
 const Rating: React.FC<IRating> = props => {
     const {questionId, error, sectionId} = props;
 
-    const question = template.questions[questionId];
+    const question =
+        template.questions[questionId as keyof typeof template.questions];
     if (!question) {
         return null;
     }
     return (
         <View style={[GenericStyles.mt12]}>
-            <Text>
+            <Text style={GenericStyles.mb12}>
                 {question.text}{' '}
                 {question.type === 'mandatory' && (
                     <Text style={GenericStyles.redText}>*</Text>
@@ -44,11 +46,7 @@ const Rating: React.FC<IRating> = props => {
                 )}
                 name={`${props.sectionId}.${questionId}`}
             />
-            {error?.[sectionId]?.[questionId] ? (
-                <Text style={GenericStyles.redText}>
-                    This is mendatory field
-                </Text>
-            ) : null}
+            <ErrorMessage show={error?.[sectionId]?.[questionId]} />
         </View>
     );
 };
diff --git a/src/components/form/components/TextArea.tsx b/src/components/form/components/TextArea.tsx
index 2e4ebee9..d5966bbc 100644
--- a/src/components/form/components/TextArea.tsx
+++ b/src/components/form/components/TextArea.tsx
@@ -1,4 +1,4 @@
-import {StyleSheet, View} from 'react-native';
+import {View} from 'react-native';
 import React from 'react';
 import {Control, Controller} from 'react-hook-form';
 
@@ -6,6 +6,7 @@ import template from '../../../data/templateData.json';
 import RNTextArea from '../../../../RN-UI-LIB/src/components/TextArea';
 import Text from '../../../../RN-UI-LIB/src/components/Text';
 import {GenericStyles} from '../../../../RN-UI-LIB/src/styles';
+import ErrorMessage from './ErrorMessage';
 
 interface ITextArea {
     questionType: string;
@@ -21,7 +22,8 @@ interface ITextArea {
 const TextArea: React.FC<ITextArea> = props => {
     const {questionId, error, sectionId} = props;
 
-    const question = template.questions[questionId];
+    const question =
+        template.questions[questionId as keyof typeof template.questions];
     if (!question) {
         return null;
     }
@@ -49,15 +51,9 @@ const TextArea: React.FC<ITextArea> = props => {
                 )}
                 name={`${props.sectionId}.${questionId}`}
             />
-            {error?.[sectionId]?.[questionId] ? (
-                <Text style={GenericStyles.redText}>
-                    This is mendatory field
-                </Text>
-            ) : null}
+            <ErrorMessage show={error?.[sectionId]?.[questionId]} />
         </View>
     );
 };
 
 export default TextArea;
-
-const styles = StyleSheet.create({});
diff --git a/src/components/form/components/TextInput.tsx b/src/components/form/components/TextInput.tsx
index 46d88ca7..023ea7d9 100644
--- a/src/components/form/components/TextInput.tsx
+++ b/src/components/form/components/TextInput.tsx
@@ -6,6 +6,7 @@ import {Control, Controller} from 'react-hook-form';
 
 import template from '../../../data/templateData.json';
 import Text from '../../../../RN-UI-LIB/src/components/Text';
+import ErrorMessage from './ErrorMessage';
 
 interface ITextInput {
     questionType: string;
@@ -21,7 +22,8 @@ interface ITextInput {
 const TextInput: React.FC<ITextInput> = props => {
     const {questionId, error, sectionId} = props;
 
-    const question = template.questions[questionId];
+    const question =
+        template.questions[questionId as keyof typeof template.questions];
     if (!question) {
         return null;
     }
@@ -47,11 +49,7 @@ const TextInput: React.FC<ITextInput> = props => {
                 )}
                 name={`${props.sectionId}.${questionId}`}
             />
-            {error?.[sectionId]?.[questionId] ? (
-                <Text style={GenericStyles.redText}>
-                    This is mendatory field
-                </Text>
-            ) : null}
+            <ErrorMessage show={error?.[sectionId]?.[questionId]} />
         </View>
     );
 };