mashazyu
115 lines
3.2 KiB
JavaScript
115 lines
3.2 KiB
JavaScript
import React, { Component } from 'react'
|
|
import { StyleSheet, View } from 'react-native'
|
|
import Slider from '@ptomasroos/react-native-multi-slider'
|
|
|
|
import alertError from '../shared/alert-error'
|
|
import AppPage from '../../common/app-page'
|
|
import AppSwitch from '../../common/app-switch'
|
|
import AppText from '../../common/app-text'
|
|
import Label from './label'
|
|
import Segment from '../../common/segment'
|
|
|
|
import { useCervixObservable,
|
|
saveUseCervix,
|
|
scaleObservable,
|
|
saveTempScale
|
|
} from '../../../local-storage'
|
|
import { Colors, Sizes } from '../../../styles/redesign'
|
|
import labels from '../../../i18n/en/settings'
|
|
import config from '../../../config'
|
|
|
|
export default class Settings extends Component {
|
|
constructor(props) {
|
|
super(props)
|
|
|
|
this.state = {
|
|
useCervix: useCervixObservable.value,
|
|
temperatureScale: { ...scaleObservable.value }
|
|
}
|
|
}
|
|
|
|
onCervixToggle = (value) => {
|
|
this.setState({ useCervix: value })
|
|
saveUseCervix(value)
|
|
}
|
|
|
|
onSliderChange = (values) => {
|
|
this.setState({ min: values[0], max: values[1] })
|
|
}
|
|
|
|
onSliderChangeFinish = (values) => {
|
|
this.setState({ min: values[0], max: values[1] })
|
|
|
|
try {
|
|
saveTempScale({ min: values[0], max: values[1] })
|
|
} catch(err) {
|
|
alertError(labels.tempScale.saveError)
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { useCervix } = this.state
|
|
const cervixText = useCervix ?
|
|
labels.useCervix.cervixModeOn : labels.useCervix.cervixModeOff
|
|
const { min, max } = this.state.temperatureScale
|
|
return (
|
|
<AppPage>
|
|
<Segment title={labels.useCervix.title}>
|
|
<AppSwitch
|
|
onToggle={this.onCervixToggle}
|
|
text={cervixText}
|
|
value={useCervix}
|
|
/>
|
|
</Segment>
|
|
<Segment title={labels.tempScale.segmentTitle}>
|
|
<AppText>{labels.tempScale.segmentExplainer}</AppText>
|
|
<View style={styles.container}>
|
|
<Slider
|
|
customLabel={Label}
|
|
enableLabel={true}
|
|
markerStyle={styles.marker}
|
|
markerOffsetY={Sizes.tiny}
|
|
max={config.temperatureScale.max}
|
|
min={config.temperatureScale.min}
|
|
onValuesChange={this.onSliderChange}
|
|
onValuesChangeFinish={this.onSliderChangeFinish}
|
|
selectedStyle={styles.sliderAccentBackground}
|
|
step={config.temperatureScale.step}
|
|
trackStyle={styles.slider}
|
|
unselectedStyle={styles.sliderBackground}
|
|
values={[min, max]}
|
|
/>
|
|
</View>
|
|
</Segment>
|
|
<Segment icon="info-with-circle" last title={labels.preOvu.title}>
|
|
<AppText>{labels.preOvu.note}</AppText>
|
|
</Segment>
|
|
</AppPage>
|
|
)
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
alignItems: 'center',
|
|
paddingTop: Sizes.base
|
|
},
|
|
marker: {
|
|
backgroundColor: Colors.tourquiseDark,
|
|
borderRadius: 50,
|
|
elevation: 4,
|
|
height: Sizes.subtitle,
|
|
width: Sizes.subtitle
|
|
},
|
|
slider: {
|
|
borderRadius: 25,
|
|
height: Sizes.small
|
|
},
|
|
sliderAccentBackground: {
|
|
backgroundColor: Colors.tourquiseDark
|
|
},
|
|
sliderBackground: {
|
|
backgroundColor: Colors.tourquise
|
|
},
|
|
})
|