From a2f5e220dcb49cfdffd53447ec18c1c1b8a22692 Mon Sep 17 00:00:00 2001 From: "aman.singh" Date: Mon, 5 Dec 2022 12:49:01 +0530 Subject: [PATCH] rendering engine changes as per figma --- App.tsx | 1 + RN-UI-LIB | 2 +- src/components/form/components/Checkbox.tsx | 20 +-- .../form/components/ImageUpload.tsx | 88 ++++++++- .../form/components/RadioButton.tsx | 35 ++-- src/components/form/index.tsx | 168 +++++++++++------- src/components/formRenderingEngine/index.tsx | 32 ++-- src/data/templateData.json | 61 +++++-- src/reducer/caseReducre.ts | 11 +- src/store/store.ts | 6 +- 10 files changed, 294 insertions(+), 130 deletions(-) diff --git a/App.tsx b/App.tsx index 23ce4f9e..e3905a57 100644 --- a/App.tsx +++ b/App.tsx @@ -21,6 +21,7 @@ import {NavigationContainer} from '@react-navigation/native'; import {createNativeStackNavigator} from '@react-navigation/native-stack'; import Widget from './src/components/form'; import {navigationRef} from './src/components/utlis/navigationUtlis'; +import {GenericStyles} from './RN-UI-LIB/src/styles'; function HomeScreen() { return ( diff --git a/RN-UI-LIB b/RN-UI-LIB index 4f6b681f..3770aed7 160000 --- a/RN-UI-LIB +++ b/RN-UI-LIB @@ -1 +1 @@ -Subproject commit 4f6b681f2dd445a90654bd410bc204f5bf0b8171 +Subproject commit 3770aed759ae0059448604e79f657c659bf96fa1 diff --git a/src/components/form/components/Checkbox.tsx b/src/components/form/components/Checkbox.tsx index 8ae5e9d1..d8c523ed 100644 --- a/src/components/form/components/Checkbox.tsx +++ b/src/components/form/components/Checkbox.tsx @@ -1,14 +1,14 @@ -import { StyleSheet, Text, View } from 'react-native' -import React from 'react' +import {StyleSheet, Text, View} from 'react-native'; +import React from 'react'; const Checkbox = () => { - return ( - - Checkbox - - ) -} + return ( + + Checkbox + + ); +}; -export default Checkbox +export default Checkbox; -const styles = StyleSheet.create({}) \ No newline at end of file +const styles = StyleSheet.create({}); diff --git a/src/components/form/components/ImageUpload.tsx b/src/components/form/components/ImageUpload.tsx index c1f8fdfc..ec0806a7 100644 --- a/src/components/form/components/ImageUpload.tsx +++ b/src/components/form/components/ImageUpload.tsx @@ -1,10 +1,88 @@ -import {StyleSheet, Text, View} from 'react-native'; -import React from 'react'; +import {Image, StyleSheet, Text, View} from 'react-native'; +import React, { useEffect } from 'react'; +import {Control, Controller} from 'react-hook-form'; +import CameraClickPicture from '../../../../RN-UI-LIB/src/components/camera_click_picture/CameraClickPicture'; -const ImageUpload = () => { +import template from '../../../data/templateData.json'; +import {GenericStyles} from '../../../../RN-UI-LIB/src/styles'; +import {useState} from 'react'; +import {useSelector} from 'react-redux'; +import {RootState} from '../../../store/store'; + +interface IImageUpload { + questionType: string; + questionId: string; + widgetId: string; + journeyId: string; + caseId: string; + sectionId: string; + control: Control; + error: any; +} + +const ImageUpload: React.FC = props => { + const {questionId, error, sectionId, caseId, journeyId, widgetId} = props; + const [image, setImage] = useState(''); + const question = template.questions[questionId]; + const dataFromRedux = useSelector( + (state: RootState) => + state.case.caseForm?.[caseId]?.[journeyId]?.[widgetId]?.[ + sectionId + ]?.[questionId], + ); + + useEffect(() => { + if (dataFromRedux) { + setImage(dataFromRedux); + } + }, [dataFromRedux]); + + if (!question) { + return null; + } return ( - - ImageUpload + + + {question.text}{' '} + {question.type === 'mandatory' && ( + * + )} + + {!image ? ( + ( + { + const data = `data:image/jpeg;base64,${image}`; + setImage(data); + onChange(data); + }} + /> + )} + name={`${props.sectionId}.${questionId}`} + /> + ) : ( + + setImage('')}>delete + + + )} + {error?.[sectionId]?.[questionId] ? ( + This is mendatory field + ) : null} ); }; diff --git a/src/components/form/components/RadioButton.tsx b/src/components/form/components/RadioButton.tsx index 84577c59..3a1a4514 100644 --- a/src/components/form/components/RadioButton.tsx +++ b/src/components/form/components/RadioButton.tsx @@ -1,19 +1,17 @@ +import React, {useEffect} from 'react'; import {StyleSheet, View} from 'react-native'; -import React from 'react'; -import template from '../../../data/templateData.json'; -import {GenericStyles} from '../../../../RN-UI-LIB/src/styles'; -import RadioGroup from '../../../../RN-UI-LIB/src/components/radio_button/RadioGroup'; +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 {useDispatch, useSelector} from 'react-redux'; -import {decreaseByOne} from '../../../reducer/formData'; -import {updateInteraction} from '../../../reducer/caseReducre'; -import {RootState} from '../../../store/store'; -import {Control, Controller} from 'react-hook-form'; -import {useState} from 'react'; -import QuestionRenderingEngine from '../QuestionRenderingEngine'; +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 template from '../../../data/templateData.json'; +import {RootState} from '../../../store/store'; +import QuestionRenderingEngine from '../QuestionRenderingEngine'; interface IRadioButton { questionType: string; @@ -31,6 +29,21 @@ const RadioButton: React.FC = props => { const question = template.questions[questionId]; const options = template.options; const [associatedQuestions, setAssociatedQuestions] = useState([]); + + const dataFromRedux = useSelector( + (state: RootState) => + state.case.caseForm?.[caseId]?.[journeyId]?.[widgetId]?.[ + sectionId + ]?.[questionId], + ); + + useEffect(() => { + if (dataFromRedux) { + computeNextQuestion(dataFromRedux); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [dataFromRedux]); + // const dispatch = useDispatch(); // const answer = useSelector( // (state: RootState) => diff --git a/src/components/form/index.tsx b/src/components/form/index.tsx index 27958911..270e2c36 100644 --- a/src/components/form/index.tsx +++ b/src/components/form/index.tsx @@ -1,41 +1,35 @@ -import {ScrollView, StyleSheet, Text, View} from 'react-native'; -import React, {Component, useCallback} from 'react'; -import {navigateToScreen} from '../utlis/navigationUtlis'; -import template from '../../data/templateData.json'; -import Heading from '../../../RN-UI-LIB/src/components/Heading'; -import RenderQuestion from './RenderQuestion'; -import {GenericStyles} from '../../../RN-UI-LIB/src/styles'; -import {useSelector} from 'react-redux'; -import {RootState} from '../../store/store'; -import Button from '../../../RN-UI-LIB/src/components/Button'; -import {Operator} from '../formRenderingEngine/types'; +import React, {useState} from 'react'; import {useForm} from 'react-hook-form'; -import {useState} from 'react'; -import {useEffect} from 'react'; +import {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 {GenericStyles, getShadowStyle} from '../../../RN-UI-LIB/src/styles'; +import {COLORS} from '../../../RN-UI-LIB/src/styles/colors'; +import template from '../../data/templateData.json'; +import {updateInteraction} from '../../reducer/caseReducre'; +import {RootState} from '../../store/store'; +import {goBack, navigateToScreen} from '../utlis/navigationUtlis'; +import RenderQuestion from './RenderQuestion'; + const Widget = (props: any) => { const {name, params} = props.route; const {caseId, journey} = params; - const {sections, transitionRules} = template.widgets[name]; + const {sections, transitionRules, isLeaf} = template.widgets[name]; const sectionMap = template.sections; const {actions, conditions} = transitionRules; const [error, setError] = useState(); - - const { - control, - handleSubmit, - formState: {errors}, - } = useForm({}); + const dispatch = useDispatch(); const dataToBeValidated = useSelector( (state: RootState) => - state.counter.caseForm?.[caseId]?.[journey]?.[name], + state.case.caseForm?.[caseId]?.[journey]?.[name], ); - console.log('defaultValues', dataToBeValidated); - - // useEffect(() => { - // setValue('defaultValues', dataToBeValidated); - // }, [dataToBeValidated, setValue]); + const {control, handleSubmit} = useForm({ + defaultValues: dataToBeValidated, + }); const evaluateLeaf = (leaf: { left: string; @@ -75,62 +69,98 @@ const Widget = (props: any) => { return composite.operator === 'AND' ? left && right : left || right; }; - const handleValidation = (transitionRules: any) => { - if (transitionRules.condition_type === 'LEAF_NODE') { - // console.log(evaluateLeaf(transitionRules)); - const nextScreenName = actions[evaluateLeaf(transitionRules)]; + const handleValidation = (rules: any) => { + let nextScreenName = ''; + if (rules.condition_type === 'LEAF_NODE') { + nextScreenName = actions[evaluateLeaf(rules)]; } else { - // console.log(evaluateComposite(transitionRules)); - const answer = String(evaluateComposite(transitionRules)); - const nextScreenName = actions[answer]; - navigateToScreen(nextScreenName, { - journey: journey, - caseId, - }); - console.log({nextScreenName, actions}); + const answer = String(evaluateComposite(rules)); + nextScreenName = actions[answer]; } + navigateToScreen(nextScreenName, { + journey: journey, + caseId, + }); }; - const onSubmit = data => { - console.log(data, 'data'); + const onSubmit = (data: any) => { + dispatch( + updateInteraction({ + caseId, + journeyId: journey, + widgetId: name, + answer: data, + }), + ); + handleValidation(conditions); }; - const onError = data => { + const onError = (data: any) => { console.log(data); setError(data); }; return ( - - {sections.map((section: string, index: number) => ( - 0 ? GenericStyles.mt16 : null, - ]}> - - {sectionMap[section]?.label} - - - - ))} -