Separates TemperatureSlider component, adds minor post-review changes

2020-03-30 17:13:47 +02:00
parent 42bc91d9c2
commit 45cff710c8
6 changed files with 171 additions and 139 deletions
@@ -0,0 +1,80 @@
+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 SliderLabel from './slider-label'
+
+import { scaleObservable, saveTempScale } from '../../../local-storage'
+import { Colors, Sizes } from '../../../styles/redesign'
+import labels from '../../../i18n/en/settings'
+import config from '../../../config'
+
+export default class TemperatureSlider extends Component {
+  constructor(props) {
+    super(props)
+
+    const { min, max } = scaleObservable.value
+    this.state = { minTemperature: min, maxTemperature: max }
+  }
+
+  onTemperatureSliderChange = (values) => {
+    this.setState({
+      minTemperature: values[0],
+      maxTemperature: values[1]
+    })
+
+    try {
+      saveTempScale({ min: values[0], max: values[1] })
+    } catch(err) {
+      alertError(labels.tempScale.saveError)
+    }
+  }
+
+  render() {
+    const { minTemperature, maxTemperature } = this.state
+
+    return (
+      <View style={styles.container}>
+        <Slider
+          customLabel={SliderLabel}
+          enableLabel={true}
+          markerStyle={styles.marker}
+          markerOffsetY={Sizes.tiny}
+          max={config.temperatureScale.max}
+          min={config.temperatureScale.min}
+          onValuesChange={this.onTemperatureSliderChange}
+          selectedStyle={styles.sliderAccentBackground}
+          step={config.temperatureScale.step}
+          trackStyle={styles.slider}
+          unselectedStyle={styles.sliderBackground}
+          values={[minTemperature, maxTemperature]}
+        />
+      </View>
+    )
+  }
+}
+
+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
+  },
+})