Skip to content

Commit

Permalink
fix: card styling of forms for form gallery
Browse files Browse the repository at this point in the history
  • Loading branch information
@hopetambala
hopetambala committed Nov 26, 2020
1 parent a5e6d2b commit 7ba6d89
Show file tree
Hide file tree
Showing 5 changed files with 135 additions and 146 deletions.
137 changes: 62 additions & 75 deletions components/Cards/SmallCardsCarousel/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {
View, StyleSheet, ScrollView
} from 'react-native';
import {
Card, Button, Text
Card, Text
} from 'react-native-paper';

import I18n from '../../../modules/i18n';
Expand All @@ -13,8 +13,6 @@ import NewRecordSVG from '../../../assets/icons/New-Record-icon.svg';
import EnvSVG from '../../../assets/icons/Home-icon.svg';
import MedEvalSVG from '../../../assets/icons/Heart-Icon.svg';



/**
* Carousel of Forms that are used for Form Navigation
*
Expand All @@ -36,65 +34,65 @@ import MedEvalSVG from '../../../assets/icons/Heart-Icon.svg';
const SmallCardsCarousel = ({
puenteForms, navigateToNewRecord, setView, surveyee, setUser
}) => (
<ScrollView horizontal>
{puenteForms.map((form) => (
<Card
key={form.tag}
style={styles.cardSmallStyle}
onPress={() => {
if (setUser) {
setView('Forms');
navigateToNewRecord(form.tag, surveyee);
} else {
navigateToNewRecord(form.tag);
}
}}
>
{form.tag === 'id' && (
<View style={styles.cardContainer}>
<NewRecordSVG height={40} style={styles.svg} />
<View style={styles.textContainer}>
<Text style={styles.text}>
{I18n.t('cards.smallCards.residentID')}
</Text>
</View>
</View>
)}
<ScrollView horizontal>
{puenteForms.map((form) => (
<Card
key={form.tag}
style={styles.cardSmallStyle}
onPress={() => {
if (setUser) {
setView('Forms');
navigateToNewRecord(form.tag, surveyee);
} else {
navigateToNewRecord(form.tag);
}
}}
>
{form.tag === 'id' && (
<View style={styles.cardContainer}>
<NewRecordSVG height={40} style={styles.svg} />
<View style={styles.textContainer}>
<Text style={styles.text}>
{I18n.t('cards.smallCards.residentID')}
</Text>
</View>
</View>
)}

{form.tag === 'env' && (
<View style={styles.cardContainer}>
<EnvSVG height={40} style={styles.svg} />
<View style={styles.textContainer}>
<Text style={styles.text}>
{`${I18n.t('cards.smallCards.environmental')} ${I18n.t('cards.smallCards.history')}`}
</Text>
</View>
</View>
)}
{form.tag === 'med-eval' && (
<View style={styles.cardContainer}>
<MedEvalSVG height={40} style={styles.svg} />
<View style={styles.textContainer}>
<Text style={styles.text}>
{`${I18n.t('cards.smallCards.medical')} ${I18n.t('cards.smallCards.evaluation')}`}
</Text>
</View>
</View>
)}
{form.tag === 'vitals' && (
<View style={styles.cardContainer}>
<NewRecordSVG height={40} style={styles.svg} />
<View style={styles.textContainer}>
<Text style={styles.text}>
{I18n.t('cards.smallCards.vitals')}
</Text>
</View>
</View>
)}
</Card>
))}
</ScrollView>
);
{form.tag === 'env' && (
<View style={styles.cardContainer}>
<EnvSVG height={40} style={styles.svg} />
<View style={styles.textContainer}>
<Text style={styles.text}>
{`${I18n.t('cards.smallCards.environmental')} ${I18n.t('cards.smallCards.history')}`}
</Text>
</View>
</View>
)}
{form.tag === 'med-eval' && (
<View style={styles.cardContainer}>
<MedEvalSVG height={40} style={styles.svg} />
<View style={styles.textContainer}>
<Text style={styles.text}>
{`${I18n.t('cards.smallCards.medical')} ${I18n.t('cards.smallCards.evaluation')}`}
</Text>
</View>
</View>
)}
{form.tag === 'vitals' && (
<View style={styles.cardContainer}>
<NewRecordSVG height={40} style={styles.svg} />
<View style={styles.textContainer}>
<Text style={styles.text}>
{I18n.t('cards.smallCards.vitals')}
</Text>
</View>
</View>
)}
</Card>
))}
</ScrollView>
);

const styles = StyleSheet.create({
cardSmallStyle: {
Expand All @@ -108,7 +106,7 @@ const styles = StyleSheet.create({
marginRight: 'auto',
},
cardContainer: {
alignItems: "center",
alignItems: 'center',
marginHorizontal: 14,
marginVertical: 14,
},
Expand All @@ -117,21 +115,10 @@ const styles = StyleSheet.create({
},
text: {
flexShrink: 1,
textAlign: "center",
textAlign: 'center',
color: theme.colors.primary,
fontWeight: "bold",
fontWeight: 'bold',
marginVertical: 7,
},
topButton: {
marginTop: 10,
marginBottom: 0,
padding: 0,
flexWrap: "wrap"
},
bottomButton: {
marginTop: 0,
marginBottom: 0,
padding: 0
}
});

Expand Down
4 changes: 2 additions & 2 deletions components/FormikFields/PaperInputPicker/AutoFill/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,8 +97,8 @@ export default class AutoFill extends Component {
{fields.length > 0 ? (
<Text style={styles.infoText}>{query}</Text>
) : (
<Text style={styles.infoText}>{placeholder}</Text>
)}
<Text style={styles.infoText}>{placeholder}</Text>
)}
</View>
</View>
);
Expand Down
96 changes: 48 additions & 48 deletions components/FormikFields/PaperInputPicker/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,16 @@ import {
TextInput, Button, Headline
} from 'react-native-paper';

import AutoFill from './AutoFill';
import HouseholdManager from './HouseholdManager';

import getLocation from '../../../modules/geolocation';
import I18n from '../../../modules/i18n';
import { theme, layout } from '../../../modules/theme';

import PaperButton from '../../Button';
import AutoFill from './AutoFill';
import HouseholdManager from './HouseholdManager';

import { theme, layout } from '../../../modules/theme';
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,
customForm, ...rest
Expand Down Expand Up @@ -55,11 +53,10 @@ const PaperInputPicker = ({
<>
{fieldType === 'input' && (
<View style={stylesDefault.container} key={formikKey}>
{translatedLabel.length > 40 &&
<Text style={stylesDefault.label}>{translatedLabel}</Text>
}
{translatedLabel.length > 40
&& <Text style={stylesDefault.label}>{translatedLabel}</Text>}
<TextInput
label={translatedLabel.length > 40 ? "" : translatedLabel}
label={translatedLabel.length > 40 ? '' : translatedLabel}
onChangeText={handleChange(formikKey)}
onBlur={handleBlur(formikKey)}
{...rest} //eslint-disable-line
Expand All @@ -74,11 +71,17 @@ const PaperInputPicker = ({
)}
{fieldType === 'numberInput' && (
<View style={stylesDefault.container} key={formikKey}>
{translatedLabel.length > 40 &&
<Text style={[stylesDefault.label, { bottom: -15, zIndex: 1, left: 5, padding: 5 }]}>{translatedLabel}</Text>
}
{translatedLabel.length > 40
&& (
<Text style={[stylesDefault.label, {
bottom: -15, zIndex: 1, left: 5, padding: 5
}]}
>
{translatedLabel}
</Text>
)}
<TextInput
label={translatedLabel.length > 40 ? "" : translatedLabel}
label={translatedLabel.length > 40 ? '' : translatedLabel}
onChangeText={handleChange(formikKey)}
onBlur={handleBlur(formikKey)}
{...rest} //eslint-disable-line
Expand Down Expand Up @@ -299,7 +302,7 @@ const PaperInputPicker = ({
{errors[result.textKey]}
</Text>
</View>
)}
)}
</View>
))}
<Text style={{ color: 'red' }}>
Expand Down Expand Up @@ -372,28 +375,28 @@ const PaperInputPicker = ({
</View>
)}
{fieldType === 'multiInputRow' && (
<View style={stylesDefault.container} >
<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={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))}
<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>
)}
Expand All @@ -407,22 +410,22 @@ const PaperInputPicker = ({
<Text style={styleX.textSplit}>{result.label}</Text>
</View>
) : (
<View key={result.value} style={stylesDefault.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 @@ -431,7 +434,4 @@ const PaperInputPicker = ({
);
};




export default PaperInputPicker;
3 changes: 1 addition & 2 deletions components/FormikFields/PaperInputPicker/index.style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import {

import { theme } from '../../../modules/theme';


const stylesDefault = StyleSheet.create({
horizontalLine: {
borderBottomColor: '#D0D0D0',
Expand All @@ -30,7 +29,7 @@ const stylesDefault = StyleSheet.create({
marginTop: 10
},
label: {
fontWeight: "bold",
fontWeight: 'bold',
color: theme.colors.black,
backgroundColor: theme.colors.background
}
Expand Down
Loading

0 comments on commit 7ba6d89

Please sign in to comment.