From 94940238a6a9dfd1e2a09b32a13880c7428a4ae1 Mon Sep 17 00:00:00 2001
From: mashazyu <mariya.z@gmail.com>
Date: Mon, 7 Jan 2019 22:20:10 +0100
Subject: [PATCH] Reuse of SettingsSegment component in the Reminders section
---
components/settings/reminders/index.js | 11 ++-
.../settings/reminders/period-reminder.js | 26 +++---
.../reminders/temp-reminder-picker.js | 87 +++++++++----------
3 files changed, 62 insertions(+), 62 deletions(-)
diff --git a/components/settings/reminders/index.js b/components/settings/reminders/index.js
index ca234d13..e21a0dd4 100644
--- a/components/settings/reminders/index.js
+++ b/components/settings/reminders/index.js
@@ -2,9 +2,12 @@ import React, { Component } from 'react'
import {
ScrollView,
} from 'react-native'
+import SettingsSegment from '../settings-segment'
import TempReminderPicker from './temp-reminder-picker'
import PeriodReminderPicker from './period-reminder'
+import labels from '../../../i18n/en/settings'
+
export default class Settings extends Component {
constructor(props) {
super(props)
@@ -14,8 +17,12 @@ export default class Settings extends Component {
render() {
return (
<ScrollView>
- <TempReminderPicker/>
- <PeriodReminderPicker/>
+ <SettingsSegment title={labels.tempReminder.title}>
+ <TempReminderPicker/>
+ </SettingsSegment>
+ <SettingsSegment title={labels.periodReminder.title}>
+ <PeriodReminderPicker/>
+ </SettingsSegment>
</ScrollView>
)
}
diff --git a/components/settings/reminders/period-reminder.js b/components/settings/reminders/period-reminder.js
index 3c07c102..f7e177c6 100644
--- a/components/settings/reminders/period-reminder.js
+++ b/components/settings/reminders/period-reminder.js
@@ -8,7 +8,6 @@ import {
periodReminderObservable,
savePeriodReminder
} from '../../../local-storage'
-import styles from '../../../styles/index'
import labels from '../../../i18n/en/settings'
export default class PeriodReminderPicker extends Component {
@@ -19,22 +18,17 @@ export default class PeriodReminderPicker extends Component {
render() {
return (
- <View style={styles.settingsSegment}>
- <AppText style={styles.settingsSegmentTitle}>
- {labels.periodReminder.title}
- </AppText>
- <View style={{ flexDirection: 'row', alignItems: 'center' }}>
- <View style={{ flex: 1 }}>
- <AppText>{labels.periodReminder.reminderText}</AppText>
- </View>
- <Switch
- value={this.state.enabled}
- onValueChange={switchOn => {
- this.setState({ enabled: switchOn })
- savePeriodReminder({enabled: switchOn})
- }}
- />
+ <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+ <View style={{ flex: 1 }}>
+ <AppText>{labels.periodReminder.reminderText}</AppText>
</View>
+ <Switch
+ value={this.state.enabled}
+ onValueChange={switchOn => {
+ this.setState({ enabled: switchOn })
+ savePeriodReminder({enabled: switchOn})
+ }}
+ />
</View>
)
}
diff --git a/components/settings/reminders/temp-reminder-picker.js b/components/settings/reminders/temp-reminder-picker.js
index 09dda425..a481d61f 100644
--- a/components/settings/reminders/temp-reminder-picker.js
+++ b/components/settings/reminders/temp-reminder-picker.js
@@ -10,64 +10,63 @@ import {
tempReminderObservable,
saveTempReminder
} from '../../../local-storage'
-import styles from '../../../styles/index'
import labels from '../../../i18n/en/settings'
import padWithZeros from '../../helpers/pad-time-with-zeros'
export default class TempReminderPicker extends Component {
constructor(props) {
super(props)
- this.state = Object.assign({}, tempReminderObservable.value)
+ const { time, enabled } = tempReminderObservable.value
+ this.state = {
+ time,
+ enabled,
+ isTimePickerVisible: false
+ }
}
render() {
return (
<TouchableOpacity
- style={styles.settingsSegment}
+ style={{ flexDirection: 'row', alignItems: 'center' }}
onPress={() => this.setState({ isTimePickerVisible: true })}
>
- <AppText style={styles.settingsSegmentTitle}>
- {labels.tempReminder.title}
- </AppText>
- <View style={{ flexDirection: 'row', alignItems: 'center' }}>
- <View style={{ flex: 1 }}>
- {this.state.time && this.state.enabled ?
- <AppText>{labels.tempReminder.timeSet(this.state.time)}</AppText>
- :
- <AppText>{labels.tempReminder.noTimeSet}</AppText>
- }
- </View>
- <Switch
- value={this.state.enabled}
- onValueChange={switchOn => {
- this.setState({ enabled: switchOn })
- if (switchOn && !this.state.time) {
- this.setState({ isTimePickerVisible: true })
- }
- if (!switchOn) saveTempReminder({ enabled: false })
- }}
- />
- <DateTimePicker
- mode="time"
- isVisible={this.state.isTimePickerVisible}
- onConfirm={jsDate => {
- const time = padWithZeros(jsDate)
- this.setState({
- time,
- isTimePickerVisible: false,
- enabled: true
- })
- saveTempReminder({
- time,
- enabled: true
- })
- }}
- onCancel={() => {
- this.setState({ isTimePickerVisible: false })
- if (!this.state.time) this.setState({enabled: false})
- }}
- />
+ <View style={{ flex: 1 }}>
+ {this.state.time && this.state.enabled ?
+ <AppText>{labels.tempReminder.timeSet(this.state.time)}</AppText>
+ :
+ <AppText>{labels.tempReminder.noTimeSet}</AppText>
+ }
</View>
+ <Switch
+ value={this.state.enabled}
+ onValueChange={switchOn => {
+ this.setState({ enabled: switchOn })
+ if (switchOn && !this.state.time) {
+ this.setState({ isTimePickerVisible: true })
+ }
+ if (!switchOn) saveTempReminder({ enabled: false })
+ }}
+ />
+ <DateTimePicker
+ mode="time"
+ isVisible={this.state.isTimePickerVisible}
+ onConfirm={jsDate => {
+ const time = padWithZeros(jsDate)
+ this.setState({
+ time,
+ isTimePickerVisible: false,
+ enabled: true
+ })
+ saveTempReminder({
+ time,
+ enabled: true
+ })
+ }}
+ onCancel={() => {
+ this.setState({ isTimePickerVisible: false })
+ if (!this.state.time) this.setState({enabled: false})
+ }}
+ />
</TouchableOpacity>
)
}
--
GitLab