|
@@ -1,39 +1,47 @@
|
1
|
1
|
// @flow
|
2
|
2
|
|
3
|
3
|
import * as React from 'react';
|
4
|
|
-import {ScrollView} from "react-native";
|
|
4
|
+import {ScrollView, View} from "react-native";
|
|
5
|
+import type {CustomTheme} from "../../managers/ThemeManager";
|
5
|
6
|
import ThemeManager from '../../managers/ThemeManager';
|
6
|
7
|
import i18n from "i18n-js";
|
7
|
8
|
import AsyncStorageManager from "../../managers/AsyncStorageManager";
|
8
|
|
-import {Card, List, Switch, ToggleButton} from 'react-native-paper';
|
|
9
|
+import {Card, List, Switch, ToggleButton, withTheme} from 'react-native-paper';
|
9
|
10
|
import {Appearance} from "react-native-appearance";
|
10
|
|
-import AnimatedAccordion from "../../components/Animations/AnimatedAccordion";
|
|
11
|
+import CustomSlider from "../../components/Overrides/CustomSlider";
|
11
|
12
|
|
12
|
13
|
type Props = {
|
13
|
|
- navigation: Object,
|
|
14
|
+ theme: CustomTheme,
|
14
|
15
|
};
|
15
|
16
|
|
16
|
17
|
type State = {
|
17
|
18
|
nightMode: boolean,
|
18
|
19
|
nightModeFollowSystem: boolean,
|
19
|
|
- proxiwashNotifPickerSelected: string,
|
|
20
|
+ notificationReminderSelected: number,
|
20
|
21
|
startScreenPickerSelected: string,
|
21
|
22
|
};
|
22
|
23
|
|
23
|
24
|
/**
|
24
|
25
|
* Class defining the Settings screen. This screen shows controls to modify app preferences.
|
25
|
26
|
*/
|
26
|
|
-export default class SettingsScreen extends React.Component<Props, State> {
|
27
|
|
- state = {
|
28
|
|
- nightMode: ThemeManager.getNightMode(),
|
29
|
|
- nightModeFollowSystem: AsyncStorageManager.getInstance().preferences.nightModeFollowSystem.current === '1' &&
|
30
|
|
- Appearance.getColorScheme() !== 'no-preference',
|
31
|
|
- proxiwashNotifPickerSelected: AsyncStorageManager.getInstance().preferences.proxiwashNotifications.current,
|
32
|
|
- startScreenPickerSelected: AsyncStorageManager.getInstance().preferences.defaultStartScreen.current,
|
33
|
|
- };
|
|
27
|
+class SettingsScreen extends React.Component<Props, State> {
|
|
28
|
+
|
|
29
|
+ savedNotificationReminder: number;
|
34
|
30
|
|
35
|
31
|
constructor() {
|
36
|
32
|
super();
|
|
33
|
+ let notifReminder = AsyncStorageManager.getInstance().preferences.proxiwashNotifications.current;
|
|
34
|
+ this.savedNotificationReminder = parseInt(notifReminder);
|
|
35
|
+ if (isNaN(this.savedNotificationReminder))
|
|
36
|
+ this.savedNotificationReminder = 0;
|
|
37
|
+
|
|
38
|
+ this.state = {
|
|
39
|
+ nightMode: ThemeManager.getNightMode(),
|
|
40
|
+ nightModeFollowSystem: AsyncStorageManager.getInstance().preferences.nightModeFollowSystem.current === '1' &&
|
|
41
|
+ Appearance.getColorScheme() !== 'no-preference',
|
|
42
|
+ notificationReminderSelected: this.savedNotificationReminder,
|
|
43
|
+ startScreenPickerSelected: AsyncStorageManager.getInstance().preferences.defaultStartScreen.current,
|
|
44
|
+ };
|
37
|
45
|
}
|
38
|
46
|
|
39
|
47
|
/**
|
|
@@ -41,14 +49,10 @@ export default class SettingsScreen extends React.Component<Props, State> {
|
41
|
49
|
*
|
42
|
50
|
* @param value The value to store
|
43
|
51
|
*/
|
44
|
|
- onProxiwashNotifPickerValueChange = (value: string) => {
|
45
|
|
- if (value != null) {
|
46
|
|
- let key = AsyncStorageManager.getInstance().preferences.proxiwashNotifications.key;
|
47
|
|
- AsyncStorageManager.getInstance().savePref(key, value);
|
48
|
|
- this.setState({
|
49
|
|
- proxiwashNotifPickerSelected: value
|
50
|
|
- });
|
51
|
|
- }
|
|
52
|
+ onProxiwashNotifPickerValueChange = (value: number) => {
|
|
53
|
+ let key = AsyncStorageManager.getInstance().preferences.proxiwashNotifications.key;
|
|
54
|
+ AsyncStorageManager.getInstance().savePref(key, value.toString());
|
|
55
|
+ this.setState({notificationReminderSelected: value})
|
52
|
56
|
};
|
53
|
57
|
|
54
|
58
|
/**
|
|
@@ -73,15 +77,16 @@ export default class SettingsScreen extends React.Component<Props, State> {
|
73
|
77
|
*/
|
74
|
78
|
getProxiwashNotifPicker() {
|
75
|
79
|
return (
|
76
|
|
- <ToggleButton.Row
|
|
80
|
+ <CustomSlider
|
|
81
|
+ style={{flex: 1, marginHorizontal: 10, height: 50}}
|
|
82
|
+ minimumValue={0}
|
|
83
|
+ maximumValue={10}
|
|
84
|
+ step={1}
|
|
85
|
+ value={this.savedNotificationReminder}
|
77
|
86
|
onValueChange={this.onProxiwashNotifPickerValueChange}
|
78
|
|
- value={this.state.proxiwashNotifPickerSelected}
|
79
|
|
- style={{marginLeft: 'auto', marginRight: 'auto'}}
|
80
|
|
- >
|
81
|
|
- <ToggleButton icon="close" value="never"/>
|
82
|
|
- <ToggleButton icon="numeric-2" value="2"/>
|
83
|
|
- <ToggleButton icon="numeric-5" value="5"/>
|
84
|
|
- </ToggleButton.Row>
|
|
87
|
+ thumbTintColor={this.props.theme.colors.primary}
|
|
88
|
+ minimumTrackTintColor={this.props.theme.colors.primary}
|
|
89
|
+ />
|
85
|
90
|
);
|
86
|
91
|
}
|
87
|
92
|
|
|
@@ -133,6 +138,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
|
133
|
138
|
* @param icon The icon name to display on the list item
|
134
|
139
|
* @param title The text to display as this list item title
|
135
|
140
|
* @param subtitle The text to display as this list item subtitle
|
|
141
|
+ * @param state The current state of the switch
|
136
|
142
|
* @returns {React.Node}
|
137
|
143
|
*/
|
138
|
144
|
getToggleItem(onPressCallback: Function, icon: string, title: string, subtitle: string, state: boolean) {
|
|
@@ -141,7 +147,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
|
141
|
147
|
title={title}
|
142
|
148
|
description={subtitle}
|
143
|
149
|
left={props => <List.Icon {...props} icon={icon}/>}
|
144
|
|
- right={props =>
|
|
150
|
+ right={() =>
|
145
|
151
|
<Switch
|
146
|
152
|
value={state}
|
147
|
153
|
onValueChange={onPressCallback}
|
|
@@ -177,28 +183,31 @@ export default class SettingsScreen extends React.Component<Props, State> {
|
177
|
183
|
this.state.nightMode
|
178
|
184
|
) : null
|
179
|
185
|
}
|
180
|
|
- <AnimatedAccordion
|
|
186
|
+ <List.Item
|
181
|
187
|
title={i18n.t('settingsScreen.startScreen')}
|
182
|
188
|
subtitle={i18n.t('settingsScreen.startScreenSub')}
|
183
|
189
|
left={props => <List.Icon {...props} icon="power"/>}
|
184
|
|
- >
|
185
|
|
- {this.getStartScreenPicker()}
|
186
|
|
- </AnimatedAccordion>
|
|
190
|
+ />
|
|
191
|
+ {this.getStartScreenPicker()}
|
187
|
192
|
</List.Section>
|
188
|
193
|
</Card>
|
189
|
194
|
<Card style={{margin: 5}}>
|
190
|
195
|
<Card.Title title="Proxiwash"/>
|
191
|
196
|
<List.Section>
|
192
|
|
- <AnimatedAccordion
|
|
197
|
+ <List.Item
|
193
|
198
|
title={i18n.t('settingsScreen.proxiwashNotifReminder')}
|
194
|
199
|
description={i18n.t('settingsScreen.proxiwashNotifReminderSub')}
|
195
|
200
|
left={props => <List.Icon {...props} icon="washing-machine"/>}
|
196
|
|
- >
|
|
201
|
+ opened={true}
|
|
202
|
+ />
|
|
203
|
+ <View style={{marginLeft: 30}}>
|
197
|
204
|
{this.getProxiwashNotifPicker()}
|
198
|
|
- </AnimatedAccordion>
|
|
205
|
+ </View>
|
199
|
206
|
</List.Section>
|
200
|
207
|
</Card>
|
201
|
208
|
</ScrollView>
|
202
|
209
|
);
|
203
|
210
|
}
|
204
|
211
|
}
|
|
212
|
+
|
|
213
|
+export default withTheme(SettingsScreen);
|