-
Notifications
You must be signed in to change notification settings - Fork 2.8k
/
TimezoneInitialPage.tsx
69 lines (62 loc) · 3.14 KB
/
TimezoneInitialPage.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import React from 'react';
import {View} from 'react-native';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
import ScreenWrapper from '@components/ScreenWrapper';
import Switch from '@components/Switch';
import Text from '@components/Text';
import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
import Navigation from '@libs/Navigation/Navigation';
import * as PersonalDetails from '@userActions/PersonalDetails';
import CONST from '@src/CONST';
import ROUTES from '@src/ROUTES';
import type {SelectedTimezone, Timezone} from '@src/types/onyx/PersonalDetails';
type TimezoneInitialPageProps = WithCurrentUserPersonalDetailsProps;
function TimezoneInitialPage({currentUserPersonalDetails}: TimezoneInitialPageProps) {
const styles = useThemeStyles();
const timezone: Timezone = currentUserPersonalDetails?.timezone ?? CONST.DEFAULT_TIME_ZONE;
const {translate} = useLocalize();
/**
* Updates setting for automatic timezone selection.
* Note: If we are updating automatically, we'll immediately calculate the user's timezone.
*/
const updateAutomaticTimezone = (isAutomatic: boolean) => {
PersonalDetails.updateAutomaticTimezone({
automatic: isAutomatic,
selected: isAutomatic ? (Intl.DateTimeFormat().resolvedOptions().timeZone as SelectedTimezone) : timezone.selected,
});
};
return (
<ScreenWrapper testID={TimezoneInitialPage.displayName}>
<HeaderWithBackButton
title={translate('timezonePage.timezone')}
onBackButtonPress={() => Navigation.goBack()}
/>
<View style={styles.flex1}>
<View style={[styles.ph5]}>
<Text style={[styles.mb5]}>{translate('timezonePage.isShownOnProfile')}</Text>
<View style={[styles.flexRow, styles.mb5, styles.mr2, styles.alignItemsCenter, styles.justifyContentBetween]}>
<Text>{translate('timezonePage.getLocationAutomatically')}</Text>
<Switch
accessibilityLabel={translate('timezonePage.getLocationAutomatically')}
isOn={!!timezone.automatic}
onToggle={updateAutomaticTimezone}
/>
</View>
</View>
<MenuItemWithTopDescription
title={timezone.selected}
description={translate('timezonePage.timezone')}
shouldShowRightIcon
disabled={timezone.automatic}
onPress={() => Navigation.navigate(ROUTES.SETTINGS_TIMEZONE_SELECT)}
/>
</View>
</ScreenWrapper>
);
}
TimezoneInitialPage.displayName = 'TimezoneInitialPage';
export default withCurrentUserPersonalDetails(TimezoneInitialPage);