123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251 |
- // @flow
-
- import * as React from 'react';
- import {ScrollView, View} from "react-native";
- import type {CustomTheme} from "../../managers/ThemeManager";
- import ThemeManager from '../../managers/ThemeManager';
- import i18n from "i18n-js";
- import AsyncStorageManager from "../../managers/AsyncStorageManager";
- import {Card, List, Switch, ToggleButton, withTheme} from 'react-native-paper';
- import {Appearance} from "react-native-appearance";
- import CustomSlider from "../../components/Overrides/CustomSlider";
- import {StackNavigationProp} from "@react-navigation/stack";
-
- type Props = {
- navigation: StackNavigationProp,
- theme: CustomTheme,
- };
-
- type State = {
- nightMode: boolean,
- nightModeFollowSystem: boolean,
- notificationReminderSelected: number,
- startScreenPickerSelected: string,
- isDebugUnlocked: boolean,
- };
-
- /**
- * Class defining the Settings screen. This screen shows controls to modify app preferences.
- */
- class SettingsScreen extends React.Component<Props, State> {
-
- savedNotificationReminder: number;
-
- constructor() {
- super();
- let notifReminder = AsyncStorageManager.getInstance().preferences.proxiwashNotifications.current;
- this.savedNotificationReminder = parseInt(notifReminder);
- if (isNaN(this.savedNotificationReminder))
- this.savedNotificationReminder = 0;
-
- this.state = {
- nightMode: ThemeManager.getNightMode(),
- nightModeFollowSystem: AsyncStorageManager.getInstance().preferences.nightModeFollowSystem.current === '1' &&
- Appearance.getColorScheme() !== 'no-preference',
- notificationReminderSelected: this.savedNotificationReminder,
- startScreenPickerSelected: AsyncStorageManager.getInstance().preferences.defaultStartScreen.current,
- isDebugUnlocked: AsyncStorageManager.getInstance().preferences.debugUnlocked.current === '1'
- };
- }
-
- /**
- * Unlocks debug mode
- */
- unlockDebugMode = () => {
- this.setState({isDebugUnlocked: true});
- let key = AsyncStorageManager.getInstance().preferences.debugUnlocked.key;
- AsyncStorageManager.getInstance().savePref(key, '1');
- }
-
- /**
- * Saves the value for the proxiwash reminder notification time
- *
- * @param value The value to store
- */
- onProxiwashNotifPickerValueChange = (value: number) => {
- let key = AsyncStorageManager.getInstance().preferences.proxiwashNotifications.key;
- AsyncStorageManager.getInstance().savePref(key, value.toString());
- this.setState({notificationReminderSelected: value})
- };
-
- /**
- * Saves the value for the proxiwash reminder notification time
- *
- * @param value The value to store
- */
- onStartScreenPickerValueChange = (value: string) => {
- if (value != null) {
- let key = AsyncStorageManager.getInstance().preferences.defaultStartScreen.key;
- AsyncStorageManager.getInstance().savePref(key, value);
- this.setState({
- startScreenPickerSelected: value
- });
- }
- };
-
- /**
- * Returns a picker allowing the user to select the proxiwash reminder notification time
- *
- * @returns {React.Node}
- */
- getProxiwashNotifPicker() {
- return (
- <CustomSlider
- style={{flex: 1, marginHorizontal: 10, height: 50}}
- minimumValue={0}
- maximumValue={10}
- step={1}
- value={this.savedNotificationReminder}
- onValueChange={this.onProxiwashNotifPickerValueChange}
- thumbTintColor={this.props.theme.colors.primary}
- minimumTrackTintColor={this.props.theme.colors.primary}
- />
- );
- }
-
- /**
- * Returns a picker allowing the user to select the start screen
- *
- * @returns {React.Node}
- */
- getStartScreenPicker() {
- return (
- <ToggleButton.Row
- onValueChange={this.onStartScreenPickerValueChange}
- value={this.state.startScreenPickerSelected}
- style={{marginLeft: 'auto', marginRight: 'auto'}}
- >
- <ToggleButton icon="account-circle" value="services"/>
- <ToggleButton icon="tshirt-crew" value="proxiwash"/>
- <ToggleButton icon="triangle" value="home"/>
- <ToggleButton icon="calendar-range" value="planning"/>
- <ToggleButton icon="clock" value="planex"/>
- </ToggleButton.Row>
- );
- }
-
- /**
- * Toggles night mode and saves it to preferences
- */
- onToggleNightMode = () => {
- ThemeManager.getInstance().setNightMode(!this.state.nightMode);
- this.setState({nightMode: !this.state.nightMode});
- };
-
- onToggleNightModeFollowSystem = () => {
- const value = !this.state.nightModeFollowSystem;
- this.setState({nightModeFollowSystem: value});
- let key = AsyncStorageManager.getInstance().preferences.nightModeFollowSystem.key;
- AsyncStorageManager.getInstance().savePref(key, value ? '1' : '0');
- if (value) {
- const nightMode = Appearance.getColorScheme() === 'dark';
- ThemeManager.getInstance().setNightMode(nightMode);
- this.setState({nightMode: nightMode});
- }
- };
-
- /**
- * Gets a list item using a checkbox control
- *
- * @param onPressCallback The callback when the checkbox state changes
- * @param icon The icon name to display on the list item
- * @param title The text to display as this list item title
- * @param subtitle The text to display as this list item subtitle
- * @param state The current state of the switch
- * @returns {React.Node}
- */
- getToggleItem(onPressCallback: Function, icon: string, title: string, subtitle: string, state: boolean) {
- return (
- <List.Item
- title={title}
- description={subtitle}
- left={props => <List.Icon {...props} icon={icon}/>}
- right={() =>
- <Switch
- value={state}
- onValueChange={onPressCallback}
- />}
- />
- );
- }
-
- render() {
- return (
- <ScrollView>
- <Card style={{margin: 5}}>
- <Card.Title title={i18n.t('settingsScreen.generalCard')}/>
- <List.Section>
- {Appearance.getColorScheme() !== 'no-preference' ? this.getToggleItem(
- this.onToggleNightModeFollowSystem,
- 'theme-light-dark',
- i18n.t('settingsScreen.nightModeAuto'),
- this.state.nightMode ?
- i18n.t('settingsScreen.nightModeSubOn') :
- i18n.t('settingsScreen.nightModeSubOff'),
- this.state.nightModeFollowSystem
- ) : null}
- {
- Appearance.getColorScheme() === 'no-preference' || !this.state.nightModeFollowSystem ?
- this.getToggleItem(
- this.onToggleNightMode,
- 'theme-light-dark',
- i18n.t('settingsScreen.nightMode'),
- this.state.nightMode ?
- i18n.t('settingsScreen.nightModeSubOn') :
- i18n.t('settingsScreen.nightModeSubOff'),
- this.state.nightMode
- ) : null
- }
- <List.Item
- title={i18n.t('settingsScreen.startScreen')}
- subtitle={i18n.t('settingsScreen.startScreenSub')}
- left={props => <List.Icon {...props} icon="power"/>}
- />
- {this.getStartScreenPicker()}
- </List.Section>
- </Card>
- <Card style={{margin: 5}}>
- <Card.Title title="Proxiwash"/>
- <List.Section>
- <List.Item
- title={i18n.t('settingsScreen.proxiwashNotifReminder')}
- description={i18n.t('settingsScreen.proxiwashNotifReminderSub')}
- left={props => <List.Icon {...props} icon="washing-machine"/>}
- opened={true}
- />
- <View style={{marginLeft: 30}}>
- {this.getProxiwashNotifPicker()}
- </View>
- </List.Section>
- </Card>
- <Card style={{margin: 5}}>
- <Card.Title title={i18n.t('settingsScreen.information')}/>
- <List.Section>
- {this.state.isDebugUnlocked
- ? <List.Item
- title={i18n.t('screens.debug')}
- left={props => <List.Icon {...props} icon="bug-check"/>}
- onPress={() => this.props.navigation.navigate("debug")}
- />
- :null}
- <List.Item
- title={i18n.t('screens.about')}
- description={i18n.t('aboutScreen.buttonDesc')}
- left={props => <List.Icon {...props} icon="information"/>}
- onPress={() => this.props.navigation.navigate("about")}
- onLongPress={this.unlockDebugMode}
- />
- <List.Item
- title={i18n.t('feedbackScreen.homeButtonTitle')}
- description={i18n.t('feedbackScreen.homeButtonSubtitle')}
- left={props => <List.Icon {...props} icon="bug"/>}
- onPress={() => this.props.navigation.navigate("feedback")}
- />
- </List.Section>
- </Card>
- </ScrollView>
- );
- }
- }
-
- export default withTheme(SettingsScreen);
|