Skip to content
Snippets Groups Projects
Commit ac0690ec authored by emelko's avatar emelko
Browse files

Set show more on homescreen to default and get rid of more/less switch

parent 43b98ed9
No related branches found
No related tags found
No related merge requests found
import { ChronoUnit, LocalDate } from 'js-joda'
import React, { Component } from 'react'
import { Dimensions, ScrollView, TouchableHighlight, View } from 'react-native'
import Icon from 'react-native-vector-icons/Entypo'
import { ScrollView, View } from 'react-native'
import DripHomeIcon from '../assets/drip-home-icons'
import { getCycleDay } from '../db'
import {
bleedingPrediction as predictLabels,
home as labels,
shared,
home as labels
} from '../i18n/en/labels'
import links from '../i18n/en/links'
import cycleModule from '../lib/cycle'
import { getFertilityStatusForDay } from '../lib/sympto-adapter'
import styles, { cycleDayColor, periodColor, secondaryColor } from '../styles'
import AppText from './app-text'
import Button from './button'
import { formatDateForShortText } from './helpers/format-date'
const ShowMoreToggler = ({ isShowingMore, onToggle }) => {
const {height, width} = Dimensions.get('window')
const leftPosition = isShowingMore ? 10 : width - 40
const style = isShowingMore ? styles.showLess : styles.showMore
const topPosition = height / 2 - styles.header.height - 30
return (
<TouchableHighlight
onPress={onToggle}
style={[style, { top: topPosition, left: leftPosition}]}
>
<View style={{alignItems: 'center'}}>
<AppText>{isShowingMore ? shared.less : shared.more}</AppText>
<Icon name='chevron-thin-down' />
</View>
</TouchableHighlight>
)
}
const IconText = ({ children, wrapperStyles }) => {
return (
<View style={[styles.homeIconTextWrapper, wrapperStyles]}>
......@@ -75,7 +55,6 @@ export default class Home extends Component {
const fertilityStatus = getFertilityStatusForDay(this.todayDateString)
this.state = {
isShowingMore: false,
cycleDayNumber: this.getCycleDayNumber(this.todayDateString),
predictionText: determinePredictionText(prediction),
bleedingPredictionRange: getBleedingPredictionRange(prediction),
......@@ -91,12 +70,8 @@ export default class Home extends Component {
})
}
toggleShowingMore = () => {
this.setState({ isShowingMore: !this.state.isShowingMore })
}
render() {
const { isShowingMore, cycleDayNumber, phase, status } = this.state
const { cycleDayNumber, phase, status } = this.state
const { navigate } = this.props
const cycleDayMoreText = cycleDayNumber ?
labels.cycleDayKnown(cycleDayNumber) :
......@@ -121,9 +96,7 @@ export default class Home extends Component {
{cycleDayNumber || labels.unknown}
</IconText>
{ isShowingMore &&
<AppText style={styles.paragraph}>{cycleDayMoreText}</AppText>
}
<AppText style={styles.paragraph}>{cycleDayMoreText}</AppText>
</HomeElement>
<HomeElement
......@@ -139,11 +112,9 @@ export default class Home extends Component {
{this.state.bleedingPredictionRange}
</IconText>
{ isShowingMore &&
<AppText style={styles.paragraph}>
{this.state.predictionText}
</AppText>
}
<AppText style={styles.paragraph}>
{this.state.predictionText}
</AppText>
</HomeElement>
<HomeElement
......@@ -160,20 +131,14 @@ export default class Home extends Component {
{ phase &&
<AppText>{`${labels.phase(phase)} (${status})`}</AppText>
}
{ isShowingMore &&
<View>
<AppText styles={styles.paragraph}>
{ `${statusText} ${links.wiki.url}.` }
</AppText>
</View>
}
<View>
<AppText styles={styles.paragraph}>
{ `${statusText} ${links.wiki.url}.` }
</AppText>
</View>
</HomeElement>
</View>
</ScrollView>
<ShowMoreToggler
isShowingMore={isShowingMore}
onToggle={this.toggleShowingMore}
/>
</View>
)
}
......
......@@ -15,8 +15,6 @@ export const shared = {
date: 'Date',
cycleDayWithLinebreak: 'Cycle\nday',
loading: 'Loading ...',
more: 'more',
less: 'less',
enter: 'Enter'
}
......
......@@ -157,14 +157,6 @@ export default StyleSheet.create({
iconText: {
fontSize: 25
},
showMore: {
transform: [{rotate: '90deg'}],
position: 'absolute',
},
showLess: {
transform: [{rotate: '270deg'}],
position: 'absolute'
},
cycleDayNumber: {
fontSize: 15,
color: fontOnPrimaryColor,
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment