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

This commit is contained in:
emelko
2019-05-22 17:27:31 +02:00
parent 43b98ed9a5
commit ac0690ec9f
3 changed files with 13 additions and 58 deletions
+4 -39
View File
@@ -1,42 +1,22 @@
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>
}
</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>
}
</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>
}
</HomeElement>
</View>
</ScrollView>
<ShowMoreToggler
isShowingMore={isShowingMore}
onToggle={this.toggleShowingMore}
/>
</View>
)
}
-2
View File
@@ -15,8 +15,6 @@ export const shared = {
date: 'Date',
cycleDayWithLinebreak: 'Cycle\nday',
loading: 'Loading ...',
more: 'more',
less: 'less',
enter: 'Enter'
}
-8
View File
@@ -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,