lori/drip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Align grid

Browse Source
This commit is contained in:
Julia Friesel
2018-08-16 21:32:55 +02:00
parent 29a82fca9f
commit ff60db089c
2 changed files with 66 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/cycle-day/cycle-day-overview.js
+64 -49
View File
@@ -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()}
/>
)
}
}