diff --git a/components/cycle-day/symptoms/temperature.js b/components/cycle-day/symptoms/temperature.js index b9a3d5b1de1af5ebf9756465f40a3d0d57b0fc23..11961a9c151f2cf376c8f13a59b974e8bbb4730f 100644 --- a/components/cycle-day/symptoms/temperature.js +++ b/components/cycle-day/symptoms/temperature.js @@ -3,8 +3,10 @@ import { View, Text, TextInput, - Switch + Switch, + Keyboard } from 'react-native' +import DateTimePicker from 'react-native-modal-datetime-picker-nevo' import { getPreviousTemperature, saveSymptom } from '../../../db' import styles from '../../../styles' @@ -17,9 +19,11 @@ export default class Temp extends Component { this.makeActionButtons = props.makeActionButtons let initialValue - if (this.cycleDay.temperature) { - initialValue = this.cycleDay.temperature.value.toString() - this.time = this.cycleDay.temperature.time + const temp = this.cycleDay.temperature + + if (temp) { + initialValue = temp.value.toString() + this.time = temp.time } else { const prevTemp = getPreviousTemperature(this.cycleDay) initialValue = prevTemp ? prevTemp.toString() : '' @@ -27,7 +31,9 @@ export default class Temp extends Component { this.state = { currentValue: initialValue, - exclude: this.cycleDay.temperature ? this.cycleDay.temperature.exclude : false + exclude: temp ? temp.exclude : false, + time: this.time || LocalTime.now().truncatedTo(ChronoUnit.MINUTES).toString(), + isTimePickerVisible: false } } @@ -47,6 +53,28 @@ export default class Temp extends Component { value={this.state.currentValue} /> </View> + <View style={styles.symptomViewRowInline}> + <Text style={styles.symptomDayView}>Time</Text> + <TextInput + style={styles.temperatureTextInput} + onFocus={() => { + Keyboard.dismiss() + this.setState({isTimePickerVisible: true}) + }} + value={this.state.time} + /> + </View> + <DateTimePicker + mode="time" + isVisible={this.state.isTimePickerVisible} + onConfirm={jsDate => { + this.setState({ + time: `${jsDate.getHours()}:${jsDate.getMinutes()}`, + isTimePickerVisible: false + }) + }} + onCancel={() => this.setState({isTimePickerVisible: false})} + /> <View style={styles.symptomViewRowInline}> <Text style={styles.symptomDayView}>Exclude</Text> <Switch @@ -63,18 +91,24 @@ export default class Temp extends Component { saveAction: () => { const dataToSave = { value: Number(this.state.currentValue), - exclude: this.state.exclude - } - if (!cycleDay.temperature || cycleDay.temperature && !cycleDay.temperature.time) { - const now = LocalTime.now().truncatedTo(ChronoUnit.MINUTES).toString() - dataToSave.time = now + exclude: this.state.exclude, + time: this.state.time } saveSymptom('temperature', cycleDay, dataToSave) }, - saveDisabled: this.state.currentValue === '' + saveDisabled: this.state.currentValue === '' || isInvalidTime(this.state.time) })} </View> </View> ) } } + +function isInvalidTime(timeString) { + try { + LocalTime.parse(timeString) + } catch (err) { + return true + } + return false +} \ No newline at end of file diff --git a/db.js b/db.js index c0533bf307529a29f65c3f3aea2067d62eb76a29..e2cf94088a12b2db8b8d6167af47f9b5f83b471a 100644 --- a/db.js +++ b/db.js @@ -6,7 +6,11 @@ const TemperatureSchema = { name: 'Temperature', properties: { value: 'double', - exclude: 'bool' + exclude: 'bool', + time: { + type: 'string', + optional: true + }, } } diff --git a/package-lock.json b/package-lock.json index 9e923bfb79ea2ff82d88414ea810e0f4f3a505c6..763d5ec73af71059fb4ad3e7348e8689a1eab6d4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6250,6 +6250,14 @@ "yargs": "^9.0.0" } }, + "react-native-animatable": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/react-native-animatable/-/react-native-animatable-1.3.0.tgz", + "integrity": "sha512-GGYEYvderfzPZcPnw7xov4nlRmi9d6oqcIzx0fGkUUsMshOQEtq5IEzFp3np0uTB9n8/gZIZcdbUPggVlVydMg==", + "requires": { + "prop-types": "^15.5.10" + } + }, "react-native-calendars": { "version": "1.19.3", "resolved": "https://registry.npmjs.org/react-native-calendars/-/react-native-calendars-1.19.3.tgz", @@ -6282,6 +6290,47 @@ "react-native-drawer-layout": "1.3.2" } }, + "react-native-modal": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/react-native-modal/-/react-native-modal-3.1.0.tgz", + "integrity": "sha512-DsF4r8ScW0y+bn+7ThzBLP4az/hsi+e9ge79vExkjpw6uNFwNWQPY21BRE4uyip7PpsqEDSyvVb8GH3UXZIYcA==", + "requires": { + "prop-types": "15.5.10", + "react-native-animatable": "^1.2.3" + }, + "dependencies": { + "prop-types": { + "version": "15.5.10", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.5.10.tgz", + "integrity": "sha1-J5ffwxJhguOpXj37suiT3ddFYVQ=", + "requires": { + "fbjs": "^0.8.9", + "loose-envify": "^1.3.1" + } + } + } + }, + "react-native-modal-datetime-picker-nevo": { + "version": "4.11.0", + "resolved": "https://registry.npmjs.org/react-native-modal-datetime-picker-nevo/-/react-native-modal-datetime-picker-nevo-4.11.0.tgz", + "integrity": "sha512-nDUlHyUoRHO+fzt0cc2g+a8kYx+RZQZnjVY01jDIspAbRGTJuCt9x+LjTvhuDQpoXEJYvBEw1W7dz9mn3tNsoQ==", + "requires": { + "moment": "^2.19.0", + "prop-types": "15.5.10", + "react-native-modal": "3.1.0" + }, + "dependencies": { + "prop-types": { + "version": "15.5.10", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.5.10.tgz", + "integrity": "sha1-J5ffwxJhguOpXj37suiT3ddFYVQ=", + "requires": { + "fbjs": "^0.8.9", + "loose-envify": "^1.3.1" + } + } + } + }, "react-native-safe-area-view": { "version": "0.8.0", "resolved": "https://registry.npmjs.org/react-native-safe-area-view/-/react-native-safe-area-view-0.8.0.tgz", diff --git a/package.json b/package.json index 9ce4bc405838b264f0e7e8839ced11ead071dc38..1849fda2b4b2891fd1aa14169437562a041f788c 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "react": "16.3.1", "react-native": "0.55.4", "react-native-calendars": "^1.19.3", + "react-native-modal-datetime-picker-nevo": "^4.11.0", "react-native-simple-radio-button": "^2.7.1", "react-native-svg": "^6.3.1", "react-navigation": "^2.0.4",