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