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.',