Rename nfp-settings into customization

components/settings/customization/index.js

@@ -0,0 +1,73 @@
+import React, { useState } from 'react'
+import { Platform, StyleSheet, View } from 'react-native'
+
+import AppIcon from '../../common/app-icon'
+import AppPage from '../../common/app-page'
+import AppSwitch from '../../common/app-switch'
+import AppText from '../../common/app-text'
+import TemperatureSlider from './temperature-slider'
+import Segment from '../../common/segment'
+
+import { useCervixObservable, saveUseCervix } from '../../../local-storage'
+import { Colors, Spacing, Typography } from '../../../styles'
+import labels from '../../../i18n/en/settings'
+
+const Settings = () => {
+  const [shouldUseCervix, setShouldUseCervix] = useState(
+    useCervixObservable.value
+  )
+
+  const onCervixToggle = (value) => {
+    setShouldUseCervix(value)
+    saveUseCervix(value)
+  }
+
+  const cervixText = shouldUseCervix
+    ? labels.useCervix.cervixModeOn
+    : labels.useCervix.cervixModeOff
+
+  return (
+    <AppPage>
+      <Segment title={labels.useCervix.title}>
+        <AppSwitch
+          onToggle={onCervixToggle}
+          text={cervixText}
+          value={shouldUseCervix}
+        />
+      </Segment>
+      {/* for iOS disabled temporarily, TODO https://gitlab.com/bloodyhealth/drip/-/issues/545 */}
+      {Platform.OS !== 'ios' && (
+        <Segment title={labels.tempScale.segmentTitle}>
+          <AppText>{labels.tempScale.segmentExplainer}</AppText>
+          <TemperatureSlider />
+        </Segment>
+      )}
+      <Segment last>
+        <View style={styles.line}>
+          <AppIcon
+            color={Colors.purple}
+            name="info-with-circle"
+            style={styles.icon}
+          />
+          <AppText style={styles.title}>{labels.preOvu.title}</AppText>
+        </View>
+        <AppText>{labels.preOvu.note}</AppText>
+      </Segment>
+    </AppPage>
+  )
+}
+
+export default Settings
+
+const styles = StyleSheet.create({
+  icon: {
+    marginRight: Spacing.base,
+  },
+  line: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  title: {
+    ...Typography.subtitle,
+  },
+})

components/settings/customization/slider-label.js

@@ -0,0 +1,54 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet } from 'react-native'
+
+import AppText from '../../common/app-text'
+
+import { Fonts, Sizes } from '../../../styles'
+
+const sliderRadius = 5
+const width = 50
+
+const getMarkerCoordinate = (position) => {
+  return position - width / 2 + sliderRadius
+}
+
+const SliderLabel = ({
+  oneMarkerValue,
+  twoMarkerValue,
+  oneMarkerLeftPosition,
+  twoMarkerLeftPosition,
+}) => {
+  const minCoordinate = getMarkerCoordinate(oneMarkerLeftPosition)
+  const maxCoordinate = getMarkerCoordinate(twoMarkerLeftPosition)
+  const isMinNumber =
+    Number.isFinite(oneMarkerLeftPosition) && Number.isFinite(oneMarkerValue)
+  const isMaxNumber =
+    Number.isFinite(twoMarkerLeftPosition) && Number.isFinite(twoMarkerValue)
+  const minStyle = [styles.label, { left: minCoordinate }]
+  const maxStyle = [styles.label, { left: maxCoordinate }]
+
+  return (
+    <React.Fragment>
+      {isMinNumber && <AppText style={minStyle}>{oneMarkerValue}</AppText>}
+      {isMaxNumber && <AppText style={maxStyle}>{twoMarkerValue}</AppText>}
+    </React.Fragment>
+  )
+}
+
+SliderLabel.propTypes = {
+  oneMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  twoMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  oneMarkerLeftPosition: PropTypes.number,
+  twoMarkerLeftPosition: PropTypes.number,
+}
+
+const styles = StyleSheet.create({
+  label: {
+    fontFamily: Fonts.bold,
+    position: 'absolute',
+    marginTop: -1 * Sizes.base,
+  },
+})
+
+export default SliderLabel

components/settings/customization/temperature-slider.js

@@ -0,0 +1,72 @@
+import React, { useState } from 'react'
+import { StyleSheet, View } from 'react-native'
+import Slider from '@ptomasroos/react-native-multi-slider'
+
+import alertError from '../common/alert-error'
+import SliderLabel from './slider-label'
+
+import { scaleObservable, saveTempScale } from '../../../local-storage'
+import { Colors, Sizes } from '../../../styles'
+import labels from '../../../i18n/en/settings'
+import { TEMP_MIN, TEMP_MAX, TEMP_SLIDER_STEP } from '../../../config'
+
+const TemperatureSlider = () => {
+  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)
+    }
+  }
+
+  return (
+    <View style={styles.container}>
+      <Slider
+        customLabel={SliderLabel}
+        enableLabel={true}
+        markerStyle={styles.marker}
+        markerOffsetY={Sizes.tiny}
+        max={TEMP_MAX}
+        min={TEMP_MIN}
+        onValuesChange={onTemperatureSliderChange}
+        selectedStyle={styles.sliderAccentBackground}
+        step={TEMP_SLIDER_STEP}
+        trackStyle={styles.slider}
+        unselectedStyle={styles.sliderBackground}
+        values={[minTemperature, maxTemperature]}
+      />
+    </View>
+  )
+}
+
+export default TemperatureSlider
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    paddingTop: Sizes.base,
+  },
+  marker: {
+    backgroundColor: Colors.turquoiseDark,
+    borderRadius: 50,
+    elevation: 4,
+    height: Sizes.subtitle,
+    width: Sizes.subtitle,
+  },
+  slider: {
+    borderRadius: 25,
+    height: Sizes.small,
+  },
+  sliderAccentBackground: {
+    backgroundColor: Colors.turquoiseDark,
+  },
+  sliderBackground: {
+    backgroundColor: Colors.turquoise,
+  },
+})