1/* eslint-disable */
2// @ts-nocheck
3import DateTimePicker from '@react-native-community/datetimepicker';
4import SegmentedControl from '@react-native-segmented-control/segmented-control';
5import moment from 'moment';
6import React, { useState } from 'react';
7import {
8  SafeAreaView,
9  ScrollView,
10  StyleSheet,
11  View,
12  Text,
13  StatusBar,
14  Button,
15  Platform,
16  TextInput,
17  useColorScheme,
18} from 'react-native';
19import { Colors } from 'react-native/Libraries/NewAppScreen';
20
21const ThemedText = props => {
22  const isDarkMode = useColorScheme() === 'dark';
23
24  const textColorByMode = { color: isDarkMode ? Colors.white : Colors.black };
25
26  const TextElement = React.createElement(Text, props);
27  return React.cloneElement(TextElement, {
28    style: [props.style, textColorByMode],
29  });
30};
31
32const MODE_VALUES = Platform.select({
33  ios: Object.values({
34    date: 'date',
35    time: 'time',
36    datetime: 'datetime',
37    countdown: 'countdown',
38  }),
39  android: Object.values({
40    date: 'date',
41    time: 'time',
42  }),
43});
44const DISPLAY_VALUES = Platform.select({
45  ios: Object.values({
46    default: 'default',
47    spinner: 'spinner',
48    compact: 'compact',
49    inline: 'inline',
50  }),
51  android: Object.values({
52    default: 'default',
53    spinner: 'spinner',
54    clock: 'clock',
55    calendar: 'calendar',
56  }),
57});
58const MINUTE_INTERVALS = [1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30];
59
60// This example is a refactored copy from https://github.com/react-native-community/react-native-datetimepicker/tree/master/example
61// Please try to keep it up to date when updating @react-native-community/datetimepicker package :)
62
63const DateTimePickerScreen = () => {
64  const [date, setDate] = useState(new Date(1598051730000));
65  const [mode, setMode] = useState(MODE_VALUES[0]);
66  const [show, setShow] = useState(false);
67  const [color, setColor] = useState();
68  const [display, setDisplay] = useState(DISPLAY_VALUES[0]);
69  const [interval, setMinInterval] = useState(1);
70
71  const onChange = (event, selectedDate) => {
72    const currentDate = selectedDate || date;
73
74    setShow(Platform.OS === 'ios');
75    setDate(currentDate);
76  };
77
78  const isDarkMode = useColorScheme() === 'dark';
79
80  const backgroundStyle = {
81    backgroundColor: isDarkMode ? Colors.dark : Colors.lighter,
82  };
83
84  return (
85    <ScrollView contentContainerStyle={backgroundStyle}>
86      {global.HermesInternal != null && (
87        <View style={styles.engine}>
88          <Text testID="hermesIndicator" style={styles.footer}>
89            Engine: Hermes
90          </Text>
91        </View>
92      )}
93      <View
94        testID="appRootView"
95        style={{
96          backgroundColor: isDarkMode ? Colors.black : Colors.white,
97        }}>
98        <View style={styles.header}>
99          <ThemedText style={styles.text}>Example DateTime Picker</ThemedText>
100        </View>
101        <ThemedText>mode prop:</ThemedText>
102        <SegmentedControl
103          values={MODE_VALUES}
104          selectedIndex={MODE_VALUES.indexOf(mode)}
105          onChange={event => {
106            setMode(MODE_VALUES[event.nativeEvent.selectedSegmentIndex]);
107          }}
108        />
109        <ThemedText>display prop:</ThemedText>
110        <SegmentedControl
111          values={DISPLAY_VALUES}
112          selectedIndex={DISPLAY_VALUES.indexOf(display)}
113          onChange={event => {
114            setDisplay(DISPLAY_VALUES[event.nativeEvent.selectedSegmentIndex]);
115          }}
116        />
117        <ThemedText>minute interval prop:</ThemedText>
118        <SegmentedControl
119          values={MINUTE_INTERVALS.map(String)}
120          selectedIndex={MINUTE_INTERVALS.indexOf(interval)}
121          onChange={event => {
122            setMinInterval(MINUTE_INTERVALS[event.nativeEvent.selectedSegmentIndex]);
123          }}
124        />
125        <View style={styles.header}>
126          <ThemedText style={{ margin: 10, flex: 1 }}>text color (iOS only)</ThemedText>
127          <TextInput
128            value={color}
129            style={{ height: 60, flex: 1 }}
130            onChangeText={text => {
131              setColor(text.toLowerCase());
132            }}
133            placeholder="color"
134          />
135        </View>
136        <View style={styles.button}>
137          <Button
138            testID="showPickerButton"
139            onPress={() => {
140              setShow(true);
141            }}
142            title="Show picker!"
143          />
144        </View>
145
146        <View style={styles.header}>
147          <ThemedText testID="dateText" style={styles.dateTimeText}>
148            {moment.utc(date).format('MM/DD/YYYY')}
149          </ThemedText>
150          <Text> </Text>
151          <ThemedText testID="timeText" style={styles.dateTimeText}>
152            {moment.utc(date).format('HH:mm')}
153          </ThemedText>
154          <Button testID="hidePicker" onPress={() => setShow(false)} title="hide picker" />
155        </View>
156        {Platform.OS === 'android' && (
157          <Text style={{ padding: 8, textAlign: 'center', color: 'grey' }}>
158            Please ensure that each of the displays are distinct. If not, it's likely that this
159            change must be applied: expo/expo PR #12563
160          </Text>
161        )}
162        {show && (
163          <DateTimePicker
164            testID="dateTimePicker"
165            timeZoneOffsetInMinutes={0}
166            minuteInterval={interval}
167            value={date}
168            mode={mode}
169            is24Hour
170            display={display}
171            onChange={onChange}
172            style={styles.iOsPicker}
173            textColor={color || undefined}
174          />
175        )}
176      </View>
177    </ScrollView>
178  );
179};
180
181const styles = StyleSheet.create({
182  scrollView: {
183    backgroundColor: Colors.lighter,
184  },
185  engine: {
186    position: 'absolute',
187    right: 0,
188  },
189  body: {
190    backgroundColor: Colors.white,
191  },
192  footer: {
193    color: Colors.dark,
194    fontSize: 12,
195    fontWeight: '600',
196    padding: 4,
197    paddingRight: 12,
198    textAlign: 'right',
199  },
200  container: {
201    marginTop: 32,
202    flex: 1,
203    justifyContent: 'center',
204    backgroundColor: '#F5FCFF',
205  },
206  containerWindows: {
207    marginTop: 32,
208    flex: 1,
209    justifyContent: 'center',
210    alignItems: 'center',
211    backgroundColor: '#F5FCFF',
212  },
213  header: {
214    justifyContent: 'center',
215    alignItems: 'center',
216    flexDirection: 'row',
217  },
218  button: {
219    alignItems: 'center',
220    marginBottom: 10,
221  },
222  resetButton: {
223    width: 150,
224  },
225  text: {
226    fontSize: 20,
227    fontWeight: 'bold',
228  },
229  dateTimeText: {
230    fontSize: 16,
231    fontWeight: 'normal',
232  },
233  iOsPicker: {
234    flex: 1,
235  },
236  windowsPicker: {
237    flex: 1,
238    paddingTop: 10,
239    width: 350,
240  },
241});
242
243DateTimePickerScreen.navigationOptions = {
244  title: 'DateTimePicker',
245};
246
247export default DateTimePickerScreen;
248