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

TP-33958 | Feedback Questions to Bottom

Browse Source
This commit is contained in:
yashmantri
2023-08-21 17:50:00 +05:30
parent 4937a9f375
commit 74fde54134
12 changed files with 64 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/form/components/AddressSelection.tsx
View File

@@ -63,7 +63,13 @@ const AddressSelection: React.FC<IAddressSelection> = (props) => {
orientation="vertical"
>
{currentCase?.addresses?.map((address) => {
return <RNRadioButton id={address.referenceId} value={getAddressString(address)} />;
return (
<RNRadioButton
id={address.referenceId}
value={getAddressString(address)}
containerStyle={GenericStyles.containerStyle}
/>
);
})}
</RadioGroup>
)}

6
src/components/form/components/Checkbox.tsx
View File

@@ -1,6 +1,7 @@
import { StyleSheet, View } from 'react-native';
import React from 'react';
import RNCheckbox from '../../../../RN-UI-LIB/src/components/chechbox/Checkbox';
import { GenericStyles } from '../../../../RN-UI-LIB/src/styles';
interface ICheckbox {
onSelectionChange: (val: boolean) => void;
@@ -9,7 +10,10 @@ interface ICheckbox {
const Checkbox = ({ onSelectionChange }: ICheckbox) => {
return (
<View>
<RNCheckbox onSelectionChange={onSelectionChange} />
<RNCheckbox
onSelectionChange={onSelectionChange}
checkboxStyle={GenericStyles.containerStyle}
/>
</View>
);
};

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

@@ -99,6 +99,7 @@ const CheckBoxGroup: React.FC<ICheckBoxGroup> = (props) => {
onSelectionChange={(change) => handleChange(change, onChange)}
defaultValue={value?.answer}
options={optiosList}
checkboxStyle={GenericStyles.containerStyle}
/>
);
}}

2
src/components/form/components/DateInput.tsx
View File

@@ -86,7 +86,7 @@ const DateInput: React.FC<IDateInput> = (props) => {
<WebBasedDatePicker
displayFormat="DD-MM-YYYY"
min={new Date().toString()}
containerStyle={GenericStyles.mt8}
containerStyle={GenericStyles.containerStyle}
type="date"
onChange={(text) => handleChange(text, onChange)}
outputFormat="DD-MM-YYYY"

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

@@ -98,6 +98,7 @@ const DropDown: React.FC<IDropDown> = (props) => {
onValueChange={(change) => handleChange(change, onChange)}
placeholder={question.metadata?.placeholder}
value={value?.answer}
containerStyle={GenericStyles.containerStyle}
>
{question.options.map((option: keyof typeof options) => {
return <RNOptions id={option as string} label={options[option]?.text} />;

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

@@ -124,7 +124,7 @@ const ImageUpload: React.FC<IImageUpload> = (props) => {
// TODO : add the validator back when firestore is fixed.
return (
<View style={[GenericStyles.mt12]}>
<Text dark bold style={GenericStyles.mb12}>
<Text dark bold style={GenericStyles.mb4}>
{question.text}{' '}
{isQuestionMandatory(question) && <Text style={GenericStyles.redText}>*</Text>}
</Text>
@@ -136,6 +136,7 @@ const ImageUpload: React.FC<IImageUpload> = (props) => {
<PhotoUpload
onPictureClickSuccess={(clickedImage) => handleChange(clickedImage, onChange)}
showUploadFromGalleryOption={true}
containerStyle={GenericStyles.containerStyle}
/>
)}
name={`widgetContext.${widgetId}.sectionContext.${props.sectionId}.questionContext.${questionId}`}

6
src/components/form/components/PhoneNumberSelection.tsx
View File

@@ -64,7 +64,11 @@ const PhoneNumberSelection: React.FC<IPhoneNumberSelection> = (props) => {
>
{currentCase.phoneNumbers?.map((phoneNumber, index) => {
return (
<RNRadioButton id={phoneNumber.number} value={getPhoneNumberString(phoneNumber)} />
<RNRadioButton
id={phoneNumber.number}
value={getPhoneNumberString(phoneNumber)}
containerStyle={GenericStyles.containerStyle}
/>
);
})}
</RadioGroup>

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

@@ -113,10 +113,20 @@ const RadioButton: React.FC<IRadioButton> = (props) => {
>
{question?.metadata.buttonType === 'button'
? question.options.map((option: keyof typeof options) => {
return <RNRadioButton id={option as string} value={options[option]?.text} />;
return (
<RNRadioButton
id={option as string}
value={options[option]?.text}
containerStyle={GenericStyles.containerStyle}
/>
);
})
: question.options.map((option: keyof typeof options) => (
<RadioChip id={option as string} value={options[option]?.text} />
<RadioChip
id={option as string}
value={options[option]?.text}
containerStyle={GenericStyles.whiteBackground}
/>
))}
</RadioGroup>
)}

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

@@ -55,7 +55,7 @@ const Rating: React.FC<IRating> = (props) => {
return (
<View style={[GenericStyles.mt12]}>
<Text dark bold style={GenericStyles.mb12}>
<Text dark bold style={GenericStyles.mb4}>
{question.text}{' '}
{isQuestionMandatory(question) && <Text style={GenericStyles.redText}>*</Text>}
</Text>
@@ -63,13 +63,15 @@ const Rating: React.FC<IRating> = (props) => {
control={props.control}
rules={{ validate: (data) => validateInput(data, question.metadata.validators) }}
render={({ field: { onChange, value } }) => (
<StarRating
minText={'Unhappy'}
maxText={'Happy'}
onSelectionChange={(value) => handleChange(value, onChange)}
defaultValue={value?.answer}
maxRating={5}
/>
<View style={GenericStyles.containerStyle}>
<StarRating
minText={'Unhappy'}
maxText={'Happy'}
onSelectionChange={(value) => handleChange(value, onChange)}
defaultValue={value?.answer}
maxRating={5}
/>
</View>
)}
name={`widgetContext.${widgetId}.sectionContext.${props.sectionId}.questionContext.${questionId}`}
/>

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

@@ -1,4 +1,4 @@
import { View } from 'react-native';
import { StyleSheet, View } from 'react-native';
import React from 'react';
import RNTextInput from '../../../../RN-UI-LIB/src/components/TextInput';
import { GenericStyles } from '../../../../RN-UI-LIB/src/styles';
@@ -73,6 +73,7 @@ const TextInput: React.FC<ITextInput> = (props) => {
value={value?.answer || ''}
containerStyle={[GenericStyles.mt12]}
placeholder={'Enter here'}
inputContainerStyle={styles.inputContainerStyle}
/>
)}
name={`widgetContext.${widgetId}.sectionContext.${props.sectionId}.questionContext.${questionId}`}
@@ -88,4 +89,12 @@ const TextInput: React.FC<ITextInput> = (props) => {
);
};
const styles = StyleSheet.create({
inputContainerStyle: {
...GenericStyles.containerStyle,
padding: 0,
marginTop: 0,
},
});
export default TextInput;

2
src/components/form/components/TimeInput.tsx
View File

@@ -82,7 +82,7 @@ const TimeInput: React.FC<ITimeInput> = (props) => {
render={({ field: { onChange, value } }) => (
<WebBasedDatePicker
value={value}
containerStyle={GenericStyles.mt8}
containerStyle={GenericStyles.containerStyle}
type="time"
onChange={(text) => {
handleChange(text, onChange);

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

@@ -382,7 +382,7 @@ const Widget: React.FC<IWidget> = (props) => {
return (
<Layout>
<SafeAreaView style={[GenericStyles.whiteBackground, GenericStyles.fill]}>
<SafeAreaView style={[GenericStyles.silverBackground, GenericStyles.fill]}>
<View style={[styles.header, GenericStyles.row, { alignItems: 'center' }]}>
<TouchableHighlight
style={styles.iconContainer}
@@ -409,8 +409,9 @@ const Widget: React.FC<IWidget> = (props) => {
<ScrollView
contentContainerStyle={[
GenericStyles.p16,
GenericStyles.whiteBackground,
GenericStyles.silverBackground,
name === CommonCaseWidgetId.END && GenericStyles.fill,
name !== CommonCaseWidgetId.END && styles.questionsToBottom,
]}
>
{name === CommonCaseWidgetId.END ? (
@@ -419,16 +420,7 @@ const Widget: React.FC<IWidget> = (props) => {
<>
{sections?.map((section: any, index: number) => {
return (
<View
key={section + index}
style={[
GenericStyles.p16,
GenericStyles.pt12,
GenericStyles.whiteBackground,
getShadowStyle(5),
styles.br8,
]}
>
<View key={section + index} style={[GenericStyles.pt12, styles.br8]}>
<RenderQuestion
questionMap={sectionMap[section].questions}
journeyId={journey}
@@ -517,6 +509,11 @@ const styles = StyleSheet.create({
paddingVertical: 22,
paddingHorizontal: 16,
},
questionsToBottom: {
flexGrow: 1,
justifyContent: 'flex-end',
paddingTop: 0,
},
});
export default Widget;