Hannelore Meier
63 lines
1.8 KiB
JavaScript
63 lines
1.8 KiB
JavaScript
import React, { useState } from 'react'
|
|
import { View } from 'react-native'
|
|
import PropTypes from 'prop-types'
|
|
import Slider from '@ptomasroos/react-native-multi-slider'
|
|
|
|
import SliderLabel from './slider-label'
|
|
import { styles } from './slider-styles'
|
|
import alertError from '../common/alert-error'
|
|
import { scaleObservable, saveTempScale } from '../../../local-storage'
|
|
import labels from '../../../i18n/en/settings'
|
|
import { TEMP_MIN, TEMP_MAX, TEMP_SLIDER_STEP } from '../../../config'
|
|
|
|
const TemperatureSlider = ({ disabled }) => {
|
|
const savedValue = scaleObservable.value
|
|
const [minTemperature, setMinTemperature] = useState(savedValue.min)
|
|
const [maxTemperature, setMaxTemperature] = useState(savedValue.max)
|
|
|
|
const onTemperatureSliderChange = ([min, max]) => {
|
|
setMinTemperature(min)
|
|
setMaxTemperature(max)
|
|
try {
|
|
saveTempScale({ min, max })
|
|
} catch (err) {
|
|
alertError(labels.tempScale.saveError)
|
|
}
|
|
}
|
|
|
|
const sliderAccentBackground = disabled
|
|
? styles.disabledSliderAccentBackground
|
|
: styles.sliderAccentBackground
|
|
|
|
const sliderBackground = disabled
|
|
? styles.disabledSliderBackground
|
|
: styles.sliderBackground
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Slider
|
|
customLabel={SliderLabel}
|
|
enableLabel={true}
|
|
markerStyle={styles.marker}
|
|
markerOffsetY={styles.markerOffsetY}
|
|
max={TEMP_MAX}
|
|
min={TEMP_MIN}
|
|
onValuesChange={onTemperatureSliderChange}
|
|
step={TEMP_SLIDER_STEP}
|
|
trackStyle={styles.slider}
|
|
values={[minTemperature, maxTemperature]}
|
|
enabledOne={!disabled}
|
|
enabledTwo={!disabled}
|
|
selectedStyle={sliderAccentBackground}
|
|
unselectedStyle={sliderBackground}
|
|
/>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default TemperatureSlider
|
|
|
|
TemperatureSlider.propTypes = {
|
|
disabled: PropTypes.bool,
|
|
}
|