Set show more on homescreen to default and get rid of more/less switch
This commit is contained in:
+4
-39
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user