From 20c08674225e9b7e3edb9f770da2f68ceac1b870 Mon Sep 17 00:00:00 2001
From: tina <lt-bloody@riox.eu>
Date: Fri, 14 Sep 2018 16:41:27 +0200
Subject: [PATCH] shows predicted bleeding with red circles, also sets up today
formatting
---
components/calendar.js | 55 +++++++++++++++++++++++++++++++++---------
styles/index.js | 8 +++++-
2 files changed, 51 insertions(+), 12 deletions(-)
diff --git a/components/calendar.js b/components/calendar.js
index af213ddf..13c466c0 100644
--- a/components/calendar.js
+++ b/components/calendar.js
@@ -1,8 +1,10 @@
import React, { Component } from 'react'
import { CalendarList } from 'react-native-calendars'
+import {LocalDate} from 'js-joda'
import { getOrCreateCycleDay, bleedingDaysSortedByDate } from '../db'
import cycleModule from '../lib/cycle'
-import {shadesOfRed, shadesOfGrey} from '../styles/index'
+import {shadesOfRed} from '../styles/index'
+import styles from '../styles/index'
export default class CalendarView extends Component {
constructor(props) {
@@ -10,7 +12,8 @@ export default class CalendarView extends Component {
const predictedMenses = cycleModule().getPredictedMenses()
this.state = {
bleedingDaysInCalFormat: toCalFormat(bleedingDaysSortedByDate),
- predictedBleedingDaysInCalFormat: predictionToCalFormat(predictedMenses)
+ predictedBleedingDaysInCalFormat: predictionToCalFormat(predictedMenses),
+ todayInCalFormat: todayToCalFormat()
}
this.setStateWithCalFormattedDays = (function (CalendarComponent) {
@@ -18,7 +21,8 @@ export default class CalendarView extends Component {
const predictedMenses = cycleModule().getPredictedMenses()
CalendarComponent.setState({
bleedingDaysInCalFormat: toCalFormat(bleedingDaysSortedByDate),
- predictedBleedingDaysInCalFormat: predictionToCalFormat(predictedMenses)
+ predictedBleedingDaysInCalFormat: predictionToCalFormat(predictedMenses),
+ todayInCalFormat: todayToCalFormat()
})
}
})(this)
@@ -35,7 +39,6 @@ export default class CalendarView extends Component {
const navigate = this.props.navigate
navigate('CycleDay', { cycleDay })
}
-
render() {
return (
<CalendarList
@@ -43,11 +46,12 @@ export default class CalendarView extends Component {
markedDates={
Object.assign(
{},
+ this.state.todayInCalFormat,
this.state.bleedingDaysInCalFormat,
this.state.predictedBleedingDaysInCalFormat
)
}
- markingType={'period'}
+ markingType={'custom'}
/>
)
}
@@ -56,9 +60,14 @@ export default class CalendarView extends Component {
function toCalFormat(bleedingDaysSortedByDate) {
return bleedingDaysSortedByDate.reduce((acc, day) => {
acc[day.date] = {
- startingDay: true,
- endingDay: true,
- color: shadesOfRed[day.bleeding.value]
+ customStyles: {
+ container: {
+ backgroundColor: shadesOfRed[day.bleeding.value],
+ }
+ }
+ }
+ if (day.date === LocalDate.now().toString()) {
+ acc[day.date].customStyles.text = styles.calendarToday
}
return acc
}, {})
@@ -70,12 +79,36 @@ function predictionToCalFormat(predictedDays) {
return predictedDays.reduce((acc, setOfDays) => {
setOfDays.reduce((accSet, day, i) => {
accSet[day] = {
- startingDay: true,
- endingDay: true,
- color: (i === middleIndex) ? shadesOfGrey[1] : shadesOfGrey[0]
+ customStyles: {
+ container: {
+ borderColor: (i === middleIndex) ? shadesOfRed[3] : shadesOfRed[2],
+ borderWidth: 3,
+ },
+ text: {
+ marginTop: 1,
+ }
+ }
+ }
+ if (day === LocalDate.now().toString()) {
+ accSet[day].customStyles.text = Object.assign(
+ {},
+ styles.calendarToday,
+ {marginTop: -2}
+ )
}
return accSet
}, acc)
return acc
}, {})
+}
+
+function todayToCalFormat() {
+ const todayDateString = LocalDate.now().toString()
+ const todayFormated = {}
+ todayFormated[todayDateString] = {
+ customStyles: {
+ text: styles.calendarToday
+ }
+ }
+ return todayFormated
}
\ No newline at end of file
diff --git a/styles/index.js b/styles/index.js
index c0fec243..629533a3 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -2,9 +2,9 @@ import { StyleSheet } from 'react-native'
export const primaryColor = '#ff7e5f'
export const secondaryColor = '#351c4d'
+export const secondaryColorLight = '#91749d'
export const fontOnPrimaryColor = 'white'
export const shadesOfRed = ['#ffcbbf', '#ffb19f', '#ff977e', '#ff7e5f'] // light to dark
-export const shadesOfGrey = ['#e5e5e5', '#cccccc'] // [lighter, darker]
const defaultBottomMargin = 5
const defaultIndentation = 10
@@ -243,6 +243,12 @@ export default StyleSheet.create({
},
page: {
marginHorizontal: 10
+ },
+ calendarToday: {
+ fontWeight: 'bold',
+ fontSize: 20,
+ color: secondaryColor,
+ marginTop: 1
}
})
--
GitLab