Splits the temperature view to simplify it

2019-08-22 23:01:54 +02:00
parent 525defa1c9
commit 2f25c5cffe
3 changed files with 198 additions and 102 deletions
@@ -0,0 +1,103 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import { View } from 'react-native'
+import AppText from '../../app-text'
+import AppTextInput from '../../app-text-input'
+
+import { temperature as labels } from '../../../i18n/en/cycle-day'
+
+import styles from '../../../styles'
+
+import { getPreviousTemperature } from '../../../db'
+import { scaleObservable } from '../../../local-storage'
+import config from '../../../config'
+
+export default class TemperatureInput extends Component {
+
+  static propTypes = {
+    temperature: PropTypes.string,
+    handleTemperatureChange: PropTypes.func,
+    date: PropTypes.string,
+  }
+
+  constructor(props) {
+    super(props)
+
+    let shouldShowSuggestion = false
+    let suggestedTemperature = null
+
+    if (!props.temperature) {
+      const prevTemp = getPreviousTemperature(props.date)
+      if (prevTemp) {
+        shouldShowSuggestion = true
+        suggestedTemperature = prevTemp.toString()
+      }
+    }
+
+    this.state = {
+      temperature: props.temperature,
+      shouldShowSuggestion,
+      suggestedTemperature
+    }
+  }
+
+  setTemperature = (temperature) => {
+    this.setState({
+      shouldShowSuggestion: false,
+      temperature
+    })
+    this.props.handleTemperatureChange(Number(temperature))
+  }
+
+  render () {
+    const {
+      shouldShowSuggestion,
+      suggestedTemperature,
+      temperature
+    } = this.state
+    const inputStyle = [
+      styles.temperatureTextInput,
+      shouldShowSuggestion ? styles.temperatureTextInputSuggestion : null
+    ]
+    return (
+      <React.Fragment>
+        <View style={styles.framedSegmentInlineChildren}>
+          <AppTextInput
+            style={inputStyle}
+            autoFocus={true}
+            value={shouldShowSuggestion ? suggestedTemperature : temperature}
+            onChangeText={this.setTemperature}
+            keyboardType='numeric'
+            maxLength={5}
+          />
+          <AppText style={{ marginLeft: 5 }}>°C</AppText>
+        </View>
+        <OutOfRangeWarning temperature={this.props.temperature} />
+      </React.Fragment>
+    )
+  }
+}
+
+const OutOfRangeWarning = ({ temperature }) => {
+  if (temperature === '') {
+    return false
+  }
+
+  const value = Number(temperature)
+  const { min, max } = config.temperatureScale
+  const range = { min, max }
+  const scale = scaleObservable.value
+
+  let warningMsg
+
+  if (value < range.min || value > range.max) {
+    warningMsg = labels.outOfAbsoluteRangeWarning
+  } else if (value < scale.min || value > scale.max) {
+    warningMsg = labels.outOfRangeWarning
+  } else {
+    warningMsg = null
+  }
+
+  return <AppText style={styles.hint}>{warningMsg}</AppText>
+}