Skip to content

Commit

Permalink
fix: text wrapping with inputs
Browse files Browse the repository at this point in the history
  • Loading branch information
@hopetambala
hopetambala committed Nov 25, 2020
1 parent c3e09d0 commit f05af02
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 81 deletions.
151 changes: 73 additions & 78 deletions components/FormikFields/PaperInputPicker/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import {
View, Text, StyleSheet
View, Text
} from 'react-native';
import {
TextInput, Button, Headline
Expand All @@ -13,9 +13,10 @@ import getLocation from '../../../modules/geolocation';
import PaperButton from '../../Button';

import { theme, layout } from '../../../modules/theme';
import styles from './index.style';
import { stylesDefault, stylesPaper, styleX } from './index.style';

import I18n from '../../../modules/i18n';
import styles from '../../ResidentIdSearchbar/index.styles';

const PaperInputPicker = ({
data, formikProps, scrollViewScroll, setScrollViewScroll, surveyingOrganization,
Expand Down Expand Up @@ -53,38 +54,46 @@ const PaperInputPicker = ({
return (
<>
{fieldType === 'input' && (
<View style={styles}>
<View style={stylesDefault.container} key={formikKey}>
{translatedLabel.length > 20 &&
<Text style={stylesDefault.label}>{translatedLabel}</Text>
}
<TextInput
label={translatedLabel}
label={translatedLabel.length > 20 ? "" : translatedLabel}
onChangeText={handleChange(formikKey)}
onBlur={handleBlur(formikKey)}
{...rest} //eslint-disable-line
mode="outlined"
theme={{ colors: { placeholder: theme.colors.primary }, text: 'black' }}
theme={stylesPaper}
style={stylesDefault.label}
/>
<Text style={{ color: 'red' }}>
{errors[formikKey]}
</Text>
</View>
)}
{fieldType === 'numberInput' && (
<View style={styles}>
<View style={stylesDefault.container} key={formikKey}>
{translatedLabel.length > 20 &&
<Text style={stylesDefault.label}>{translatedLabel}</Text>
}
<TextInput
label={translatedLabel}
label={translatedLabel.length > 20 ? "" : translatedLabel}
onChangeText={handleChange(formikKey)}
onBlur={handleBlur(formikKey)}
{...rest} //eslint-disable-line
mode="outlined"
keyboardType="numeric"
theme={{ colors: { placeholder: theme.colors.primary }, text: 'black' }}
theme={stylesPaper}
style={stylesDefault.label}
/>
<Text style={{ color: 'red' }}>
{errors[formikKey]}
</Text>
</View>
)}
{fieldType === 'inputSideLabel' && (
<View style={styles}>
<View style={stylesDefault} key={formikKey}>
<View style={{ flexDirection: 'row' }}>
<TextInput
label={translatedLabel}
Expand All @@ -103,7 +112,7 @@ const PaperInputPicker = ({
</View>
)}
{fieldType === 'inputSideLabelNum' && (
<View style={styles}>
<View style={stylesDefault} key={formikKey}>
<View style={{ flexDirection: 'row' }}>
<TextInput
label={translatedLabel}
Expand All @@ -112,7 +121,7 @@ const PaperInputPicker = ({
{...rest} //eslint-disable-line
mode="outlined"
keyboardType="numeric"
theme={{ colors: { placeholder: theme.colors.primary }, text: 'black' }}
theme={stylesPaper}
style={{ flex: 1 }}
/>
<Text style={styleX.sideLabel}>{translatedLabelSide}</Text>
Expand All @@ -123,8 +132,8 @@ const PaperInputPicker = ({
</View>
)}
{fieldType === 'inputSideLabelTextQuestNumber' && (
<View style={styles}>
<Text>{translatedLabel}</Text>
<View style={stylesDefault} key={formikKey}>
<Text style={stylesDefault.label}>{translatedLabel}</Text>
<View style={{ flexDirection: 'row' }}>
<TextInput
onChangeText={handleChange(formikKey)}
Expand All @@ -143,7 +152,7 @@ const PaperInputPicker = ({
</View>
)}
{fieldType === 'inputSideBySideLabel' && (
<View style={styles}>
<View style={stylesDefault} key={formikKey}>
<View style={{ flexDirection: 'row' }}>
<TextInput
label={translatedLabel}
Expand Down Expand Up @@ -171,8 +180,8 @@ const PaperInputPicker = ({
</View>
)}
{fieldType === 'select' && (
<View>
<Text style={layout.selectLabel}>{translatedLabel}</Text>
<View key={formikKey} style={stylesDefault.container}>
<Text style={[layout.selectLabel, stylesDefault.label]}>{translatedLabel}</Text>
<View style={layout.buttonGroupContainer}>
{data.options.map((result) => (
<View key={result.value}>
Expand All @@ -191,7 +200,7 @@ const PaperInputPicker = ({
)}
{/* non-selected value */}
{result.value !== values[formikKey] && (
<View style={styles}>
<View style={stylesDefault}>
<Button
style={layout.buttonGroupButtonStyle}
key={result.value}
Expand All @@ -211,7 +220,7 @@ const PaperInputPicker = ({
{data.options.map((result) => (
<View key={result.value}>
{result.text === true && result.value === values[formikKey] && (
<View style={styles} key={result.textKey}>
<View style={stylesDefault} key={result.textKey}>
<TextInput
label={customForm ? result.label : I18n.t(result.label)}
onChangeText={handleChange(result.textKey)}
Expand All @@ -233,7 +242,7 @@ const PaperInputPicker = ({
</View>
)}
{fieldType === 'selectMulti' && (
<View>
<View key={formikKey}>
<Text style={layout.selectLabel}>{translatedLabel}</Text>
<View style={layout.buttonGroupContainer}>
{data.options.map((result) => (
Expand All @@ -256,7 +265,7 @@ const PaperInputPicker = ({
)}
{/* non-selected value */}
{(!values[formikKey] || !(values[formikKey]).includes(result.value)) && (
<View style={styles}>
<View style={stylesDefault}>
<Button
style={layout.buttonGroupButtonStyle}
key={result.value}
Expand All @@ -277,7 +286,7 @@ const PaperInputPicker = ({
<View key={result.value}>
{result.text === true && values[formikKey]
&& values[formikKey].includes(result.value) && (
<View style={styles} key={result.textKey}>
<View style={stylesDefault} key={result.textKey}>
<TextInput
label={customForm ? result.label : I18n.t(result.label)}
onChangeText={handleChange(result.textKey)}
Expand All @@ -290,7 +299,7 @@ const PaperInputPicker = ({
{errors[result.textKey]}
</Text>
</View>
)}
)}
</View>
))}
<Text style={{ color: 'red' }}>
Expand All @@ -299,7 +308,7 @@ const PaperInputPicker = ({
</View>
)}
{fieldType === 'autofill' && (
<View>
<View key={formikKey}>
<AutoFill
parameter={data.parameter}
formikProps={formikProps}
Expand All @@ -314,7 +323,7 @@ const PaperInputPicker = ({
</View>
)}
{fieldType === 'geolocation' && (
<View>
<View key={formikKey}>
{location === null && (
<PaperButton
onPressEvent={handleLocation}
Expand Down Expand Up @@ -345,7 +354,7 @@ const PaperInputPicker = ({
</View>
)}
{fieldType === 'household' && (
<View>
<View key={formikKey}>
<HouseholdManager
formikProps={formikProps}
formikKey={formikKey}
Expand All @@ -355,65 +364,65 @@ const PaperInputPicker = ({
</View>
)}
{fieldType === 'header' && (
<View>
<Headline style={styles.header}>{translatedLabel}</Headline>
<View key={translatedLabel} style={stylesDefault.container}>
<Headline style={stylesDefault.header}>{translatedLabel}</Headline>
<View
style={styles.horizontalLine}
style={stylesDefault.horizontalLine}
/>
</View>
)}
{fieldType === 'multiInputRow' && (
<View style={styles.container}>
<Text>{translatedLabel}</Text>
<View style={styles.multiInputContainer}>
<View style={stylesDefault.container} >
<Text style={stylesDefault.label}>{translatedLabel}</Text>
<View style={stylesDefault.multiInputContainer}>
{data.options.map((result) => (result.textSplit ? (
<View key={`${result}`} style={{ flex: 1 }}>
<Text style={styleX.textSplit}>{result.label}</Text>
</View>
) : (
<View key={result.value} style={styles.inputItem}>
<TextInput
label={customForm ? result.label : I18n.t(result.label)}
onChangeText={handleChange(customForm ? result.label : I18n.t(result.label))}
onBlur={handleBlur(customForm ? result.label : I18n.t(result.label))}
<View key={result.value} style={stylesDefault.inputItem}>
<TextInput
label={customForm ? result.label : I18n.t(result.label)}
onChangeText={handleChange(customForm ? result.label : I18n.t(result.label))}
onBlur={handleBlur(customForm ? result.label : I18n.t(result.label))}
{...rest} //eslint-disable-line
mode="outlined"
theme={{ colors: { placeholder: theme.colors.primary }, text: 'black' }}
/>
<Text style={{ color: 'red' }}>
{errors[customForm ? result.label : I18n.t(result.label)]}
</Text>
</View>
)))}
mode="outlined"
theme={{ colors: { placeholder: theme.colors.primary }, text: 'black' }}
/>
<Text style={{ color: 'red' }}>
{errors[customForm ? result.label : I18n.t(result.label)]}
</Text>
</View>
)))}
</View>
</View>
)}
{
fieldType === 'multiInputRowNum' && (
<View style={styles.container}>
<Text>{translatedLabel}</Text>
<View style={styles.multiInputContainer}>
<View style={stylesDefault.container}>
<Text style={stylesDefault.label}>{translatedLabel}</Text>
<View style={stylesDefault.multiInputContainer}>
{data.options.map((result) => (result.textSplit ? (
<View key={`${result}`} style={{ flex: 1 }}>
<Text style={styleX.textSplit}>{result.label}</Text>
</View>
) : (
<View key={result.value} style={styles.inputItem}>
<TextInput
label={customForm ? result.label : I18n.t(result.label)}
onChangeText={handleChange(result.value)}
onBlur={handleBlur(result.value)}
<View key={result.value} style={stylesDefault.inputItem}>
<TextInput
label={customForm ? result.label : I18n.t(result.label)}
onChangeText={handleChange(result.value)}
onBlur={handleBlur(result.value)}
{...rest} //eslint-disable-line
mode="outlined"
keyboardType="numeric"
maxLength={result.maxLength ? result.maxLength : null}
theme={{ colors: { placeholder: theme.colors.primary }, text: 'black' }}
/>
<Text style={{ color: 'red' }}>
{errors[result.value]}
</Text>
</View>
)))}
mode="outlined"
keyboardType="numeric"
maxLength={result.maxLength ? result.maxLength : null}
theme={{ colors: { placeholder: theme.colors.primary }, text: 'black' }}
/>
<Text style={{ color: 'red' }}>
{errors[result.value]}
</Text>
</View>
)))}
</View>
</View>
)
Expand All @@ -422,21 +431,7 @@ const PaperInputPicker = ({
);
};

const styleX = StyleSheet.create({
sideLabel: {
flex: 1,
marginTop: 'auto',
marginBottom: 'auto',
padding: 10,
fontSize: 15
},
textSplit: {
fontSize: 35,
marginLeft: 'auto',
marginRight: 'auto',
marginTop: 'auto',
marginBottom: 25,
}
});



export default PaperInputPicker;
40 changes: 37 additions & 3 deletions components/FormikFields/PaperInputPicker/index.style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@ import {
StyleSheet
} from 'react-native';

const styles = StyleSheet.create({
import { theme } from '../../../modules/theme';


const stylesDefault = StyleSheet.create({
horizontalLine: {
borderBottomColor: '#D0D0D0',
borderBottomWidth: 1,
Expand All @@ -18,12 +21,43 @@ const styles = StyleSheet.create({
flexDirection: 'row'
},
container: {
flexDirection: 'column'
flex: 1,
justifyContent: 'center',
padding: 10,
},
header: {
fontWeight: 'bold',
marginTop: 10
},
label: {
fontWeight: "bold",
color: theme.colors.primary
}

});

const stylesPaper = {
colors: {
placeholder: theme.colors.primary
},
text: 'black',
};

const styleX = StyleSheet.create({
sideLabel: {
flex: 1,
marginTop: 'auto',
marginBottom: 'auto',
padding: 10,
fontSize: 15
},
textSplit: {
fontSize: 35,
marginLeft: 'auto',
marginRight: 'auto',
marginTop: 'auto',
marginBottom: 25,
}
});

export default styles;
export { stylesDefault, stylesPaper, styleX };

0 comments on commit f05af02

Please sign in to comment.