varnitgoyal95/address-verification-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

form types added

Browse Source
This commit is contained in:
aman.singh
2022-12-20 18:47:58 +05:30
parent 8efef00523
commit d2fa7b8d41
10 changed files with 129 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/form/components/CheckboxGroup.tsx
View File

@@ -13,6 +13,8 @@ import { RootState } from '../../../store/store';
import QuestionRenderingEngine from '../QuestionRenderingEngine';
import ErrorMessage from './ErrorMessage';
import RNCheckboxGroup from '../../../../RN-UI-LIB/src/components/chechbox/CheckboxGroup';
import { ICheckboxOption } from '../../../../RN-UI-LIB/src/components/chechbox/types';
import { AnswerType } from '../interface';
interface ICheckBoxGroup {
questionType: string;
@@ -48,26 +50,6 @@ const CheckBoxGroup: React.FC<ICheckBoxGroup> = props => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [dataFromRedux]);
// const dispatch = useDispatch();
// const answer = useSelector(
// (state: RootState) =>
// state.counter.caseForm?.[caseId]?.[journeyId]?.[widgetId]?.[
// sectionId
// ]?.[questionId] || 'not_found',
// );
// const registerValue = (id: string) => {
// dispatch(
// updateInteraction({
// caseId,
// journeyId,
// widgetId,
// questionId,
// answer: id,
// sectionId,
// }),
// );
// };
const computeNextQuestion = (optionId: keyof typeof options) => {
if (options[optionId]?.associateQuestions.length < 1) {
@@ -79,6 +61,14 @@ const CheckBoxGroup: React.FC<ICheckBoxGroup> = props => {
const optiosList = question.options.map(option =>({label: options[option].text, value: option}));
const handleChange = (change : Array<ICheckboxOption> | null, onChange : (...event: any[]) => void) => {
const values = change?.map(item=>item.value)
onChange({
answer: values,
type: AnswerType.array
})
}
return (
<View style={GenericStyles.mt12}>
{question.text ?<Text dark bold>
@@ -95,7 +85,7 @@ const CheckBoxGroup: React.FC<ICheckBoxGroup> = props => {
render={({field: {onChange, value}}) => {
console.log(value)
return(
<RNCheckboxGroup onSelectionChange={(cange => {const values = cange?.map(item=>item.value); onChange(values)})} defaultValue={value} options={optiosList} />
<RNCheckboxGroup onSelectionChange={(change => handleChange(change, onChange))} defaultValue={value?.answer} options={optiosList} />
)
}}
name={`${sectionId}.${questionId}`}

46
src/components/form/components/Dropdown.tsx
View File

@@ -4,17 +4,15 @@ import {View} from 'react-native';
import {useState} from 'react';
import {Control, Controller} from 'react-hook-form';
import {useSelector} from 'react-redux';
import RNRadioButton from '../../../../RN-UI-LIB/src/components/radio_button/RadioButton';
import RadioChip from '../../../../RN-UI-LIB/src/components/radio_button/RadioChip';
import RadioGroup from '../../../../RN-UI-LIB/src/components/radio_button/RadioGroup';
import RNDropDown from '../../../../RN-UI-LIB/src/components/dropdown/Dropdown';
import RNOptions from '../../../../RN-UI-LIB/src/components/dropdown/Options';
import Text from '../../../../RN-UI-LIB/src/components/Text';
import {GenericStyles} from '../../../../RN-UI-LIB/src/styles';
import template from '../../../data/RealTemplateData.json';
import {RootState} from '../../../store/store';
import QuestionRenderingEngine from '../QuestionRenderingEngine';
import ErrorMessage from './ErrorMessage';
import RNDropDown from '../../../../RN-UI-LIB/src/components/dropdown/Dropdown';
import RNOptions from '../../../../RN-UI-LIB/src/components/dropdown/Options';
import {AnswerType} from '../interface';
interface IDropDown {
questionType: string;
@@ -79,6 +77,16 @@ const DropDown: React.FC<IDropDown> = props => {
setAssociatedQuestions(options[optionId]?.associateQuestions);
};
const handleChange = (
change: string | null,
onChange: (...event: any[]) => void,
) => {
onChange({
answer: change,
type: AnswerType.option,
});
};
return (
<View style={GenericStyles.mt12}>
<Text dark bold style={GenericStyles.mb12}>
@@ -93,19 +101,21 @@ const DropDown: React.FC<IDropDown> = props => {
required: question.type === 'mandatory',
}}
render={({field: {onChange, value}}) => (
<RNDropDown bottomSheetHeight={question.options.length -1 * 10} onValueChange={onChange} value={value}>
{question.options.map(option => {
return(
<RNOptions
id={option}
label={
options[
option as keyof typeof options
]?.text
}
/>
)})}
<RNDropDown
bottomSheetHeight={question.options.length - 1 * 10}
onValueChange={change => handleChange(change, onChange)}
value={value?.answer}>
{question.options.map(option => {
return (
<RNOptions
id={option}
label={
options[option as keyof typeof options]
?.text
}
/>
);
})}
</RNDropDown>
)}
name={`${sectionId}.${questionId}`}

20
src/components/form/components/ImageUpload.tsx
View File

@@ -18,6 +18,7 @@ import ErrorMessage from './ErrorMessage';
import DeleteIcon from '../../../../RN-UI-LIB/src/Icons/DeleteIcon';
import {COLORS} from '../../../../RN-UI-LIB/src/styles/colors';
import Text from '../../../../RN-UI-LIB/src/components/Text';
import { AnswerType } from '../interface';
interface IImageUpload {
questionType: string;
@@ -51,6 +52,19 @@ const ImageUpload: React.FC<IImageUpload> = props => {
if (!question) {
return null;
}
const handleChange = (
clickedImage: string | null,
onChange: (...event: any[]) => void,
) => {
const data = `data:image/jpeg;base64,${clickedImage}`;
setImage(data);
onChange({
answer: data,
type: AnswerType.text,
});
};
return (
<View style={[GenericStyles.mt12]}>
<Text dark bold style={GenericStyles.mb12}>
@@ -67,11 +81,7 @@ const ImageUpload: React.FC<IImageUpload> = props => {
}}
render={({field: {onChange}}) => (
<CameraClickPicture
onPictureClickSuccess={clickedImage => {
const data = `data:image/jpeg;base64,${clickedImage}`;
setImage(data);
onChange(data);
}}
onPictureClickSuccess={clickedImage => handleChange(clickedImage, onChange)}
/>
)}
name={`${props.sectionId}.${questionId}`}

22
src/components/form/components/RadioButton.tsx
View File

@@ -13,6 +13,7 @@ import template from '../../../data/RealTemplateData.json';
import {RootState} from '../../../store/store';
import QuestionRenderingEngine from '../QuestionRenderingEngine';
import ErrorMessage from './ErrorMessage';
import { AnswerType } from '../interface';
interface IRadioButton {
questionType: string;
@@ -77,6 +78,17 @@ const RadioButton: React.FC<IRadioButton> = props => {
setAssociatedQuestions(options[optionId]?.associateQuestions);
};
const handleChange = (change : string | null, onChange : (...event: any[]) => void) => {
computeNextQuestion(change as keyof typeof options);
onChange({
answer: change,
type: AnswerType.option
})
}
return (
<View style={GenericStyles.mt12}>
<Text dark bold>
@@ -92,12 +104,8 @@ const RadioButton: React.FC<IRadioButton> = props => {
}}
render={({field: {onChange, value}}) => (
<RadioGroup
value={value}
onValueChange={change => {
onChange(change);
computeNextQuestion(change as keyof typeof options);
// registerValue(change);
}}
value={value?.answer}
onValueChange={change => handleChange(change, onChange)}
orientation={
question.metadata.orientation || 'verticle'
}>
@@ -128,7 +136,7 @@ const RadioButton: React.FC<IRadioButton> = props => {
name={`${sectionId}.${questionId}`}
/>
<ErrorMessage show={error?.[sectionId]?.[questionId]} />
{associatedQuestions.map((nextQuestion: string, index) => {
{associatedQuestions?.map((nextQuestion: string, index) => {
if (
template.questions[
nextQuestion as keyof typeof template.questions

14
src/components/form/components/Rating.tsx
View File

@@ -6,6 +6,7 @@ import StarRating from '../../../../RN-UI-LIB/src/components/star_rating/StarRat
import template from '../../../data/RealTemplateData.json';
import ErrorMessage from './ErrorMessage';
import Text from '../../../../RN-UI-LIB/src/components/Text';
import { AnswerType } from '../interface';
interface IRating {
questionType: string;
questionId: string;
@@ -25,6 +26,15 @@ const Rating: React.FC<IRating> = props => {
if (!question) {
return null;
}
const handleChange = (text : number, onChange : (...event: any[]) => void) => {
onChange({
answer: text,
type: AnswerType.number
})
}
return (
<View style={[GenericStyles.mt12]}>
<Text dark bold style={GenericStyles.mb12}>
@@ -40,8 +50,8 @@ const Rating: React.FC<IRating> = props => {
}}
render={({field: {onChange, value}}) => (
<StarRating
onSelectionChange={onChange}
defaultValue={value}
onSelectionChange={(value)=> handleChange(value,onChange)}
defaultValue={value?.answer}
maxRating={5}
/>
)}

13
src/components/form/components/TextArea.tsx
View File

@@ -7,6 +7,7 @@ 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';
import { AnswerType } from '../interface';
interface ITextArea {
questionType: string;
@@ -27,6 +28,14 @@ const TextArea: React.FC<ITextArea> = props => {
if (!question) {
return null;
}
const handleChange = (text : string, onChange : (...event: any[]) => void) => {
onChange({
answer: text,
type: AnswerType.text
})
}
return (
<View style={[GenericStyles.mt12]}>
<Text dark bold>
@@ -42,8 +51,8 @@ const TextArea: React.FC<ITextArea> = props => {
}}
render={({field: {onChange, value}}) => (
<RNTextArea
onChangeText={onChange}
value={value}
onChangeText={(text)=> handleChange(text, onChange)}
value={value?.answer}
containerStyle={[GenericStyles.mt12]}
numberOfLines={3}
title=""

13
src/components/form/components/TextInput.tsx
View File

@@ -7,6 +7,7 @@ import {Control, Controller} from 'react-hook-form';
import template from '../../../data/RealTemplateData.json';
import Text from '../../../../RN-UI-LIB/src/components/Text';
import ErrorMessage from './ErrorMessage';
import { AnswerType } from '../interface';
interface ITextInput {
questionType: string;
@@ -27,6 +28,14 @@ const TextInput: React.FC<ITextInput> = props => {
if (!question) {
return null;
}
const handleChange = (text : string, onChange : (...event: any[]) => void) => {
onChange({
answer: text,
type: AnswerType.text
})
}
return (
<View style={[GenericStyles.mt12]}>
<Text dark bold>
@@ -42,8 +51,8 @@ const TextInput: React.FC<ITextInput> = props => {
}}
render={({field: {onChange, value}}) => (
<RNTextInput
onChangeText={onChange}
value={value}
onChangeText={(text) => handleChange(text, onChange)}
value={value?.answer}
containerStyle={[GenericStyles.mt12]}
/>
)}

32
src/components/form/index.tsx
View File

@@ -1,24 +1,21 @@
import React, {useState} from 'react';
import {useForm} from 'react-hook-form';
import {Pressable, ScrollView, StyleSheet, View} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import {useDispatch, useSelector} from 'react-redux';
import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { Pressable, ScrollView, StyleSheet, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useDispatch, useSelector } from 'react-redux';
import Button from '../../../RN-UI-LIB/src/components/Button';
import Heading from '../../../RN-UI-LIB/src/components/Heading';
import Text from '../../../RN-UI-LIB/src/components/Text';
import CloseIcon from '../../../RN-UI-LIB/src/Icons/CloseIcon';
import {GenericStyles, getShadowStyle} from '../../../RN-UI-LIB/src/styles';
import {COLORS} from '../../../RN-UI-LIB/src/styles/colors';
import { GenericStyles, getShadowStyle } from '../../../RN-UI-LIB/src/styles';
import { COLORS } from '../../../RN-UI-LIB/src/styles/colors';
import Realjson from '../../data/RealTemplateData.json';
import {updateInteraction} from '../../reducer/caseReducre';
import {RootState} from '../../store/store';
import {goBack, navigateToScreen} from '../utlis/navigationUtlis';
import { updateInteraction } from '../../reducer/caseReducre';
import { RootState } from '../../store/store';
import { goBack, navigateToScreen } from '../utlis/navigationUtlis';
import {
ConditionType,
IDecision,
IEvaluateLeaf,
IEvaluateLeafJourney,
ILeaf,
IDecision, ILeaf
} from './interface';
import RenderQuestion from './RenderQuestion';
@@ -35,7 +32,7 @@ interface IWidget {
const Widget: React.FC<IWidget> = props => {
const {name, params} = props.route;
const {caseId, journey} = params;
const {sections, transitionRules, isLeaf, isNoBrainer} =
const {sections, transitionRules, isLeaf} =
Realjson.widget[name as keyof typeof Realjson.widget];
const sectionMap = Realjson.sections;
const {actions, conditions} = transitionRules;
@@ -58,7 +55,7 @@ const Widget: React.FC<IWidget> = props => {
const evaluateLeaf = (leaf: ILeaf, data: any): boolean => {
switch (leaf.operator) {
case 'MATCHES':
return leaf.right === data[leaf.section][leaf.left];
return leaf.right === data[leaf.section][leaf.left]?.answer;
default:
return false;
}
@@ -99,7 +96,7 @@ const Widget: React.FC<IWidget> = props => {
const handleValidation = (rules: any, data: any) => {
let nextScreenName = '';
if (!isNoBrainer) {
if (rules !== null) {
if (rules.conditionType === 'LEAF_NODE') {
const answer = String(evaluateLeaf(rules, data));
nextScreenName = actions[answer as keyof typeof actions];
@@ -117,6 +114,7 @@ const Widget: React.FC<IWidget> = props => {
};
const onSubmit = (data: any) => {
console.log(data)
dispatch(
updateInteraction({
caseId,

8
src/components/form/interface.ts
View File

@@ -50,3 +50,11 @@ export interface ILeaf {
section: string;
widgetId: string;
}
export enum AnswerType {
text = 'text',
option = 'option',
number = 'number',
array = 'array'
}

9
src/data/RealTemplateData.json
View File

@@ -105,9 +105,8 @@
"isLeaf": true
},
"w4": {
"isNoBrainer": true,
"transitionRules": {
"conditions":{},
"conditions":null,
"actions": {
"true": "w6",
"false": "w6"
@@ -122,9 +121,8 @@
"isLeaf": false
},
"w5": {
"isNoBrainer": true,
"transitionRules": {
"conditions":{},
"conditions":null,
"actions": {
"true": "w4",
"false": "w4"
@@ -136,9 +134,8 @@
"isLeaf": false
},
"w6":{
"isNoBrainer": true,
"transitionRules": {
"conditions":{},
"conditions":null,
"actions": {
"true": "w6",
"false": "w6"