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        {show && (
157          <DateTimePicker
158            testID="dateTimePicker"
159            timeZoneOffsetInMinutes={0}
160            minuteInterval={interval}
161            value={date}
162            mode={mode}
163            is24Hour
164            display={display}
165            onChange={onChange}
166            style={styles.iOsPicker}
167            textColor={color || undefined}
168          />
169        )}
170      </View>
171    </ScrollView>
172  );
173};
174
175const styles = StyleSheet.create({
176  scrollView: {
177    backgroundColor: Colors.lighter,
178  },
179  engine: {
180    position: 'absolute',
181    right: 0,
182  },
183  body: {
184    backgroundColor: Colors.white,
185  },
186  footer: {
187    color: Colors.dark,
188    fontSize: 12,
189    fontWeight: '600',
190    padding: 4,
191    paddingRight: 12,
192    textAlign: 'right',
193  },
194  container: {
195    marginTop: 32,
196    flex: 1,
197    justifyContent: 'center',
198    backgroundColor: '#F5FCFF',
199  },
200  containerWindows: {
201    marginTop: 32,
202    flex: 1,
203    justifyContent: 'center',
204    alignItems: 'center',
205    backgroundColor: '#F5FCFF',
206  },
207  header: {
208    justifyContent: 'center',
209    alignItems: 'center',
210    flexDirection: 'row',
211  },
212  button: {
213    alignItems: 'center',
214    marginBottom: 10,
215  },
216  resetButton: {
217    width: 150,
218  },
219  text: {
220    fontSize: 20,
221    fontWeight: 'bold',
222  },
223  dateTimeText: {
224    fontSize: 16,
225    fontWeight: 'normal',
226  },
227  iOsPicker: {
228    flex: 1,
229  },
230  windowsPicker: {
231    flex: 1,
232    paddingTop: 10,
233    width: 350,
234  },
235});
236
237DateTimePickerScreen.navigationOptions = {
238  title: 'DateTimePicker',
239};
240
241export default DateTimePickerScreen;
242