disable temperature slider when fertility or temperature turned off

2024-02-29 17:46:56 +01:00
parent ad47b4bee0
commit 3e8f15e04e
3 changed files with 81 additions and 27 deletions
@@ -0,0 +1,62 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import Slider from '@ptomasroos/react-native-multi-slider'
+
+import SliderLabel from './slider-label'
+
+import { scaleObservable } from '../../../local-storage'
+import { Colors, Sizes } from '../../../styles'
+
+import { TEMP_MIN, TEMP_MAX, TEMP_SLIDER_STEP } from '../../../config'
+
+const DisabledTemperatureSlider = () => {
+  const savedValue = scaleObservable.value
+  const minTemperature = savedValue.min
+  const maxTemperature = savedValue.max
+
+  return (
+    <View style={styles.container}>
+      <Slider
+        customLabel={SliderLabel}
+        enableLabel={true}
+        markerStyle={styles.marker}
+        markerOffsetY={Sizes.tiny}
+        max={TEMP_MAX}
+        min={TEMP_MIN}
+        selectedStyle={styles.sliderAccentBackground}
+        step={TEMP_SLIDER_STEP}
+        trackStyle={styles.slider}
+        unselectedStyle={styles.sliderBackground}
+        values={[minTemperature, maxTemperature]}
+        enabledOne={false}
+        enabledTwo={false}
+      />
+    </View>
+  )
+}
+
+export default DisabledTemperatureSlider
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    paddingTop: Sizes.base,
+  },
+  marker: {
+    backgroundColor: Colors.grey,
+    borderRadius: 50,
+    elevation: 4,
+    height: Sizes.subtitle,
+    width: Sizes.subtitle,
+  },
+  slider: {
+    borderRadius: 25,
+    height: Sizes.small,
+  },
+  sliderAccentBackground: {
+    backgroundColor: Colors.grey,
+  },
+  sliderBackground: {
+    backgroundColor: Colors.greyLight,
+  },
+})