diff --git a/components/cycle-day/select-tab-group.js b/components/cycle-day/select-tab-group.js index 3800fa4..9794561 100644 --- a/components/cycle-day/select-tab-group.js +++ b/components/cycle-day/select-tab-group.js @@ -21,7 +21,7 @@ export default function SelectTabGroup({ // Disable is only used for secondarySymptom in customization, if more come up maybe consider more tidy solution const showDisableAlert = (label) => { - if (label === 'cervix' || 'mucus') { + if (label === 'cervix' || label === 'mucus') { Alert.alert( labels.secondarySymptom.disabled.title, labels.secondarySymptom.disabled.message @@ -68,6 +68,7 @@ SelectTabGroup.propTypes = { activeButton: PropTypes.number, buttons: PropTypes.array.isRequired, onSelect: PropTypes.func.isRequired, + disabled: PropTypes.bool, } const styles = StyleSheet.create({ diff --git a/components/settings/customization/disabled-temperature-slider.js b/components/settings/customization/disabled-temperature-slider.js deleted file mode 100644 index 44e8147..0000000 --- a/components/settings/customization/disabled-temperature-slider.js +++ /dev/null @@ -1,62 +0,0 @@ -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 ( - - - - ) -} - -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, - }, -}) diff --git a/components/settings/customization/index.js b/components/settings/customization/index.js index f147a41..ddb2db9 100644 --- a/components/settings/customization/index.js +++ b/components/settings/customization/index.js @@ -35,7 +35,6 @@ import { } from '../../../local-storage' import labels from '../../../i18n/en/settings' import { SYMPTOMS } from '../../../config' -import DisabledTemperatureSlider from './disabled-temperature-slider' const Settings = () => { const { t } = useTranslation(null, { keyPrefix: 'symptoms' }) @@ -81,6 +80,7 @@ const Settings = () => { const [isFertilityTrackingEnabled, setFertilityTrackingEnabled] = useState( fertilityTrackingObservable.value ) + const fertilityTrackingToggle = (value) => { setFertilityTrackingEnabled(value) saveFertilityTrackingEnabled(value) @@ -203,14 +203,17 @@ const Settings = () => { : labels.secondarySymptom.cervixModeOff const sliderDisabledPrompt = () => { - if (!isFertilityTrackingEnabled) { + if (!isTemperatureTrackingCategoryEnabled) { Alert.alert(labels.tempScale.disabled, labels.tempScale.disabledMessage) } } const fertilityDisabledPrompt = () => { - if (!isFertilityTrackingEnabled) { - Alert.alert(labels.disabled.title, labels.fertilityTracking.disabled) + if (!manageFertilityFeature) { + Alert.alert( + labels.fertilityTracking.disabledTitle, + labels.fertilityTracking.disabled + ) } } @@ -273,19 +276,11 @@ const Settings = () => { /> - {/* Not ideal to have a extra DisabledTemperatureSlider but right now hard to have always the correct state of fertilityTrackingObservable in TemperatureSlider */} + {labels.tempScale.segmentExplainer} - {isTemperatureTrackingCategoryEnabled & isFertilityTrackingEnabled ? ( - <> - - - ) : ( - <> - - - )} + diff --git a/components/settings/customization/temperature-slider.js b/components/settings/customization/temperature-slider.js index 2019d55..7d91f7a 100644 --- a/components/settings/customization/temperature-slider.js +++ b/components/settings/customization/temperature-slider.js @@ -1,5 +1,6 @@ import React, { useState } from 'react' import { StyleSheet, View } from 'react-native' +import PropTypes from 'prop-types' import Slider from '@ptomasroos/react-native-multi-slider' import alertError from '../common/alert-error' @@ -10,7 +11,7 @@ import { Colors, Sizes } from '../../../styles' import labels from '../../../i18n/en/settings' import { TEMP_MIN, TEMP_MAX, TEMP_SLIDER_STEP } from '../../../config' -const TemperatureSlider = () => { +const TemperatureSlider = ({ disabled }) => { const savedValue = scaleObservable.value const [minTemperature, setMinTemperature] = useState(savedValue.min) const [maxTemperature, setMaxTemperature] = useState(savedValue.max) @@ -25,6 +26,14 @@ const TemperatureSlider = () => { } } + const sliderAccentBackground = disabled + ? styles.disabledSliderAccentBackground + : styles.sliderAccentBackground + + const sliderBackground = disabled + ? styles.disabledSliderBackground + : styles.sliderBackground + return ( { max={TEMP_MAX} min={TEMP_MIN} onValuesChange={onTemperatureSliderChange} - selectedStyle={styles.sliderAccentBackground} step={TEMP_SLIDER_STEP} trackStyle={styles.slider} - unselectedStyle={styles.sliderBackground} values={[minTemperature, maxTemperature]} + enabledOne={!disabled} + enabledTwo={!disabled} + selectedStyle={sliderAccentBackground} + unselectedStyle={sliderBackground} /> ) @@ -47,6 +58,10 @@ const TemperatureSlider = () => { export default TemperatureSlider +TemperatureSlider.propTypes = { + disabled: PropTypes.bool, +} + const styles = StyleSheet.create({ container: { alignItems: 'center', @@ -54,6 +69,7 @@ const styles = StyleSheet.create({ }, marker: { backgroundColor: Colors.turquoiseDark, + borderRadius: 50, elevation: 4, height: Sizes.subtitle, @@ -66,7 +82,13 @@ const styles = StyleSheet.create({ sliderAccentBackground: { backgroundColor: Colors.turquoiseDark, }, + disabledSliderAccentBackground: { + backgroundColor: Colors.grey, + }, sliderBackground: { backgroundColor: Colors.turquoise, }, + disabledSliderBackground: { + backgroundColor: Colors.greyLight, + }, }) diff --git a/i18n/en/settings.js b/i18n/en/settings.js index 119f887..fdd3a88 100644 --- a/i18n/en/settings.js +++ b/i18n/en/settings.js @@ -43,7 +43,7 @@ export default { saveError: 'Could not save temperature scale settings', disabled: 'Disabled', disabledMessage: - 'To use the temperature scale please first enable both temperature tracking and fertility phase calculation above.', + 'To use the temperature scale please first enable temperature tracking above.', }, tempReminder: { @@ -71,8 +71,9 @@ export default { }, fertilityTracking: { title: 'Fertility phases calculation', + disabledTitle: 'Disabled', disabled: - 'To use this feature please enable temperature tracking and cervical mucus or cervix tracking.', + 'To use fertility phases calculation please enable temperature tracking and cervical mucus or cervix tracking above.', message: 'If you enter menstrual bleeding, temperature and cervical mucus or cervix data according to the sympto-thermal rules, drip will calculate cycle phases with the provided data.', on: 'If you switch this off, drip will not show fertility related information.',