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