diff --git a/components/cycle-day/cycle-day-overview.js b/components/cycle-day/cycle-day-overview.js index dee8a9ebe2a221096951bc1df21d75df38149d4d..31e54d5090b603d8d74ea03b2abf69f877632074 100644 --- a/components/cycle-day/cycle-day-overview.js +++ b/components/cycle-day/cycle-day-overview.js @@ -3,7 +3,8 @@ import { View, Text, Image, - TouchableOpacity + TouchableOpacity, + Dimensions } from 'react-native' import styles from '../../styles' import { @@ -48,51 +49,52 @@ export default class DayView extends Component { render() { const cycleDay = this.cycleDay return ( - <View style={styles.symptomEditView}> - <View style={styles.symptomBoxesView}> - <SymptomBox - title='Bleeding' - icon={require('./assets/placeholder.png')} - onPress={() => this.showView('BleedingEditView')} - data={getLabel('bleeding', cycleDay.bleeding)} - /> - <SymptomBox - title='Temperature' - icon={require('./assets/placeholder.png')} - onPress={() => this.showView('TemperatureEditView')} - data={getLabel('temperature', cycleDay.temperature)} - /> - <SymptomBox - title='Mucus' - icon={require('./assets/placeholder.png')} - onPress={() => this.showView('MucusEditView')} - data={getLabel('mucus', cycleDay.mucus)} - /> - <SymptomBox - title='Cervix' - icon={require('./assets/placeholder.png')} - onPress={() => this.showView('CervixEditView')} - data={getLabel('cervix', cycleDay.cervix)} - /> - <SymptomBox - title='Note' - icon={require('./assets/placeholder.png')} - onPress={() => this.showView('NoteEditView')} - data={getLabel('note', cycleDay.note)} - /> - <SymptomBox - title='Desire' - icon={require('./assets/placeholder.png')} - onPress={() => this.showView('DesireEditView')} - data={getLabel('desire', cycleDay.desire)} - /> - <SymptomBox - title='Sex' - icon={require('./assets/placeholder.png')} - onPress={() => this.showView('SexEditView')} - data={getLabel('sex', cycleDay.sex)} - /> - </View > + <View style={styles.symptomBoxesView}> + <SymptomBox + title='Bleeding' + icon={require('./assets/placeholder.png')} + onPress={() => this.showView('BleedingEditView')} + data={getLabel('bleeding', cycleDay.bleeding)} + /> + <SymptomBox + title='Temperature' + icon={require('./assets/placeholder.png')} + onPress={() => this.showView('TemperatureEditView')} + data={getLabel('temperature', cycleDay.temperature)} + /> + <SymptomBox + title='Mucus' + icon={require('./assets/placeholder.png')} + onPress={() => this.showView('MucusEditView')} + data={getLabel('mucus', cycleDay.mucus)} + /> + <SymptomBox + title='Cervix' + icon={require('./assets/placeholder.png')} + onPress={() => this.showView('CervixEditView')} + data={getLabel('cervix', cycleDay.cervix)} + /> + <SymptomBox + title='Note' + icon={require('./assets/placeholder.png')} + onPress={() => this.showView('NoteEditView')} + data={getLabel('note', cycleDay.note)} + /> + <SymptomBox + title='Desire' + icon={require('./assets/placeholder.png')} + onPress={() => this.showView('DesireEditView')} + data={getLabel('desire', cycleDay.desire)} + /> + <SymptomBox + title='Sex' + icon={require('./assets/placeholder.png')} + onPress={() => this.showView('SexEditView')} + data={getLabel('sex', cycleDay.sex)} + /> + {/* this is just to make the last row adhere to the grid + (and) because there are no pseudo properties in RN */} + <FillerBoxes/> </View > ) } @@ -160,12 +162,12 @@ function getLabel(symptomName, symptom) { sex.patch || sex.ring || sex.implant || sex.other) { sexLabel += 'Contraceptive' } - return sexLabel ? sexLabel : 'edit' + return sexLabel ? sexLabel : undefined } } - if (!symptom) return 'edit' - return labels[symptomName](symptom) || 'edit' + if (!symptom) return + return labels[symptomName](symptom) } class SymptomBox extends Component { @@ -183,4 +185,17 @@ class SymptomBox extends Component { </TouchableOpacity> ) } +} + +class FillerBoxes extends Component { + render() { + const n = Dimensions.get('window').width / styles.symptomBox.minHeight + return Array(Math.ceil(n)).fill( + <View + width={styles.symptomBox.minHeight} + height={0} + key={Math.random().toString()} + /> + ) + } } \ No newline at end of file diff --git a/styles/index.js b/styles/index.js index 9197f310dc08a22c2b1ea7743f651abb232bdd30..88b76cb684e94049b98ddd588f8569de1bb8273c 100644 --- a/styles/index.js +++ b/styles/index.js @@ -53,8 +53,9 @@ export default StyleSheet.create({ justifyContent: 'center', alignItems: 'center', marginTop: '20%', + marginHorizontal: 1, minWidth: 100, - minHeight: 100 + minHeight: 100, }, symptomEditRow: { justifyContent: 'space-between',