@teamnhz/rn-ui-toolkit 1.4.9 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { StyleProp, TextStyle, ViewStyle, ImageStyle, ImageSourcePropType } from
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { StyleProp, TextStyle, ViewStyle, ImageStyle, ImageSourcePropType } from 'react-native';
|
|
3
3
|
interface DateTimePickerProps {
|
|
4
4
|
value: Date | null;
|
|
5
5
|
onChange: (date: Date) => void;
|
|
6
6
|
label?: string;
|
|
7
7
|
placeholder?: string;
|
|
8
8
|
intlType?: string;
|
|
9
|
-
mode?:
|
|
9
|
+
mode?: 'date' | 'time' | 'datetime';
|
|
10
10
|
disabled?: boolean;
|
|
11
11
|
minimumDate?: Date;
|
|
12
12
|
maximumDate?: Date;
|
|
@@ -1,394 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
// ImageSourcePropType,
|
|
9
|
-
// StyleProp,
|
|
10
|
-
// TextStyle,
|
|
11
|
-
// ViewStyle,
|
|
12
|
-
// ImageStyle,
|
|
13
|
-
// } from "react-native";
|
|
14
|
-
// import DatePicker from "react-native-date-picker";
|
|
15
|
-
// import { useTranslation } from "react-i18next";
|
|
16
|
-
// import { Colors, Scale, Typography, Images } from "../../styles";
|
|
17
|
-
// interface DateTimePickerProps {
|
|
18
|
-
// value: Date | null;
|
|
19
|
-
// onChange: (date: Date) => void;
|
|
20
|
-
// label?: string;
|
|
21
|
-
// placeholder?: string;
|
|
22
|
-
// intlType?: string;
|
|
23
|
-
// mode?: "date" | "time" | "datetime";
|
|
24
|
-
// disabled?: boolean;
|
|
25
|
-
// /** raw DatePicker props */
|
|
26
|
-
// minimumDate?: Date;
|
|
27
|
-
// maximumDate?: Date;
|
|
28
|
-
// modal?: boolean;
|
|
29
|
-
// confirmText?: string;
|
|
30
|
-
// cancelText?: string;
|
|
31
|
-
// /** style overrides */
|
|
32
|
-
// containerStyle?: StyleProp<ViewStyle>;
|
|
33
|
-
// pickerContainerStyle?: StyleProp<ViewStyle>;
|
|
34
|
-
// labelStyle?: StyleProp<TextStyle>;
|
|
35
|
-
// textStyle?: StyleProp<TextStyle>;
|
|
36
|
-
// leftImageStyle?: StyleProp<ImageStyle>;
|
|
37
|
-
// rightImageStyle?: StyleProp<ImageStyle>;
|
|
38
|
-
// /** icons */
|
|
39
|
-
// leftIcon?: ImageSourcePropType;
|
|
40
|
-
// rightIcon?: ImageSourcePropType;
|
|
41
|
-
// leftIconShow?: boolean;
|
|
42
|
-
// onCancel?: () => void;
|
|
43
|
-
// error?: string | boolean;
|
|
44
|
-
// errorTextStyle?: StyleProp<TextStyle>;
|
|
45
|
-
// }
|
|
46
|
-
// const DateTimePicker: React.FC<DateTimePickerProps> = ({
|
|
47
|
-
// value,
|
|
48
|
-
// onChange,
|
|
49
|
-
// label,
|
|
50
|
-
// placeholder,
|
|
51
|
-
// intlType,
|
|
52
|
-
// mode = "date",
|
|
53
|
-
// disabled = false,
|
|
54
|
-
// minimumDate,
|
|
55
|
-
// maximumDate,
|
|
56
|
-
// modal = true,
|
|
57
|
-
// confirmText,
|
|
58
|
-
// cancelText,
|
|
59
|
-
// containerStyle,
|
|
60
|
-
// pickerContainerStyle,
|
|
61
|
-
// labelStyle,
|
|
62
|
-
// textStyle,
|
|
63
|
-
// leftImageStyle,
|
|
64
|
-
// rightImageStyle,
|
|
65
|
-
// leftIcon,
|
|
66
|
-
// rightIcon,
|
|
67
|
-
// leftIconShow,
|
|
68
|
-
// onCancel,
|
|
69
|
-
// error,
|
|
70
|
-
// errorTextStyle,
|
|
71
|
-
// }) => {
|
|
72
|
-
// const { t } = useTranslation(["common", "validation", "address", "sell"]);
|
|
73
|
-
// const [open, setOpen] = useState(false);
|
|
74
|
-
// /** default icons based on mode */
|
|
75
|
-
// const defaultLeftIcon =
|
|
76
|
-
// mode === "time"
|
|
77
|
-
// ? Images.ic_time // ⏰ your clock asset
|
|
78
|
-
// : Images.ic_calendar; // 📅 your calendar asset
|
|
79
|
-
// const getTranslatedLabel = () => {
|
|
80
|
-
// if (intlType) {
|
|
81
|
-
// const translated = t(label, { ns: intlType });
|
|
82
|
-
// if (translated !== label) return translated;
|
|
83
|
-
// }
|
|
84
|
-
// return label;
|
|
85
|
-
// };
|
|
86
|
-
// return (
|
|
87
|
-
// <View style={containerStyle}>
|
|
88
|
-
// {/* Top label */}
|
|
89
|
-
// {label ? (
|
|
90
|
-
// <Text style={[styles.label, labelStyle]}>{getTranslatedLabel()}</Text>
|
|
91
|
-
// ) : null}
|
|
92
|
-
// <TouchableOpacity
|
|
93
|
-
// style={[
|
|
94
|
-
// styles.button,
|
|
95
|
-
// pickerContainerStyle,
|
|
96
|
-
// disabled && { backgroundColor: Colors.disabledGrey, borderWidth: 0 },
|
|
97
|
-
// ]}
|
|
98
|
-
// disabled={disabled}
|
|
99
|
-
// onPress={() => setOpen(true)}
|
|
100
|
-
// >
|
|
101
|
-
// {/* Left icon */}
|
|
102
|
-
// {leftIconShow && (
|
|
103
|
-
// <Image
|
|
104
|
-
// source={leftIcon || defaultLeftIcon}
|
|
105
|
-
// style={[styles.icon, leftImageStyle]}
|
|
106
|
-
// />
|
|
107
|
-
// )}
|
|
108
|
-
// {/* Text / Placeholder */}
|
|
109
|
-
// <Text
|
|
110
|
-
// style={[styles.text, textStyle, !value && { color: Colors.textGrey }]}
|
|
111
|
-
// numberOfLines={1}
|
|
112
|
-
// >
|
|
113
|
-
// {value ? formatValue(value, mode) : placeholder || "Select"}
|
|
114
|
-
// </Text>
|
|
115
|
-
// {/* Right icon (mandatory) */}
|
|
116
|
-
// {rightIcon && (
|
|
117
|
-
// <Image source={rightIcon} style={[styles.icon, rightImageStyle]} />
|
|
118
|
-
// )}
|
|
119
|
-
// </TouchableOpacity>
|
|
120
|
-
// {/* Error text */}
|
|
121
|
-
// {typeof error === "string" && error.length > 0 && (
|
|
122
|
-
// <Text style={[styles.errorText, errorTextStyle]}>{error}</Text>
|
|
123
|
-
// )}
|
|
124
|
-
// <DatePicker
|
|
125
|
-
// modal={modal}
|
|
126
|
-
// open={open}
|
|
127
|
-
// date={value || new Date()}
|
|
128
|
-
// mode={mode}
|
|
129
|
-
// minimumDate={minimumDate}
|
|
130
|
-
// maximumDate={maximumDate}
|
|
131
|
-
// confirmText={confirmText}
|
|
132
|
-
// cancelText={cancelText}
|
|
133
|
-
// onConfirm={(val) => {
|
|
134
|
-
// setOpen(false);
|
|
135
|
-
// onChange(val);
|
|
136
|
-
// }}
|
|
137
|
-
// onCancel={() => {
|
|
138
|
-
// setOpen(false);
|
|
139
|
-
// onCancel && onCancel();
|
|
140
|
-
// }}
|
|
141
|
-
// />
|
|
142
|
-
// </View>
|
|
143
|
-
// );
|
|
144
|
-
// };
|
|
145
|
-
// const formatValue = (date: Date, mode: "date" | "time" | "datetime") => {
|
|
146
|
-
// try {
|
|
147
|
-
// switch (mode) {
|
|
148
|
-
// case "time":
|
|
149
|
-
// return date.toLocaleTimeString([], {
|
|
150
|
-
// hour: "2-digit",
|
|
151
|
-
// minute: "2-digit",
|
|
152
|
-
// });
|
|
153
|
-
// case "datetime":
|
|
154
|
-
// return date.toLocaleString();
|
|
155
|
-
// default:
|
|
156
|
-
// return date.toLocaleDateString();
|
|
157
|
-
// }
|
|
158
|
-
// } catch {
|
|
159
|
-
// return "";
|
|
160
|
-
// }
|
|
161
|
-
// };
|
|
162
|
-
// const styles = StyleSheet.create({
|
|
163
|
-
// label: {
|
|
164
|
-
// ...Typography.style.standardU(),
|
|
165
|
-
// color: Colors.textColor,
|
|
166
|
-
// marginBottom: Scale.moderateScale(8),
|
|
167
|
-
// },
|
|
168
|
-
// button: {
|
|
169
|
-
// borderWidth: 1,
|
|
170
|
-
// borderColor: Colors.primaryColor,
|
|
171
|
-
// borderRadius: Scale.moderateScale(6),
|
|
172
|
-
// paddingVertical: Scale.moderateScale(12),
|
|
173
|
-
// paddingHorizontal: Scale.moderateScale(10),
|
|
174
|
-
// flexDirection: "row",
|
|
175
|
-
// alignItems: "center",
|
|
176
|
-
// },
|
|
177
|
-
// text: {
|
|
178
|
-
// flex: 1,
|
|
179
|
-
// ...Typography.style.standardU(),
|
|
180
|
-
// color: Colors.textColor,
|
|
181
|
-
// textTransform: "none",
|
|
182
|
-
// },
|
|
183
|
-
// icon: {
|
|
184
|
-
// width: Scale.moderateScale(20),
|
|
185
|
-
// height: Scale.moderateScale(20),
|
|
186
|
-
// resizeMode: "contain",
|
|
187
|
-
// },
|
|
188
|
-
// errorText: {
|
|
189
|
-
// color: Colors.dangerRed,
|
|
190
|
-
// fontSize: Scale.moderateScale(12),
|
|
191
|
-
// marginTop: 3,
|
|
192
|
-
// },
|
|
193
|
-
// });
|
|
194
|
-
// export default DateTimePicker;
|
|
195
|
-
// // import React, { useState } from 'react';
|
|
196
|
-
// // import {
|
|
197
|
-
// // View,
|
|
198
|
-
// // TouchableOpacity,
|
|
199
|
-
// // Text,
|
|
200
|
-
// // StyleSheet,
|
|
201
|
-
// // Image,
|
|
202
|
-
// // ImageSourcePropType,
|
|
203
|
-
// // StyleProp,
|
|
204
|
-
// // TextStyle,
|
|
205
|
-
// // ViewStyle,
|
|
206
|
-
// // ImageStyle,
|
|
207
|
-
// // } from 'react-native';
|
|
208
|
-
// // import DatePicker from 'react-native-date-picker';
|
|
209
|
-
// // import { useTranslation } from 'react-i18next';
|
|
210
|
-
// // import { Colors, Scale, Typography, Images } from '../../styles';
|
|
211
|
-
// // interface DateTimePickerProps {
|
|
212
|
-
// // value: Date | null;
|
|
213
|
-
// // onChange: (date: Date) => void;
|
|
214
|
-
// // label?: string;
|
|
215
|
-
// // placeholder?: string;
|
|
216
|
-
// // intlType?: string;
|
|
217
|
-
// // mode?: 'date' | 'time' | 'datetime';
|
|
218
|
-
// // disabled?: boolean;
|
|
219
|
-
// // /** raw DatePicker props */
|
|
220
|
-
// // minimumDate?: Date;
|
|
221
|
-
// // maximumDate?: Date;
|
|
222
|
-
// // modal?: boolean;
|
|
223
|
-
// // confirmText?: string;
|
|
224
|
-
// // cancelText?: string;
|
|
225
|
-
// // /** style overrides */
|
|
226
|
-
// // containerStyle?: StyleProp<ViewStyle>;
|
|
227
|
-
// // pickerContainerStyle?: StyleProp<ViewStyle>;
|
|
228
|
-
// // labelStyle?: StyleProp<TextStyle>;
|
|
229
|
-
// // textStyle?: StyleProp<TextStyle>;
|
|
230
|
-
// // leftImageStyle?: StyleProp<ImageStyle>;
|
|
231
|
-
// // rightImageStyle?: StyleProp<ImageStyle>;
|
|
232
|
-
// // /** icons */
|
|
233
|
-
// // leftIcon?: ImageSourcePropType;
|
|
234
|
-
// // rightIcon?: ImageSourcePropType;
|
|
235
|
-
// // leftIconShow?: boolean;
|
|
236
|
-
// // onCancel?: () => void;
|
|
237
|
-
// // }
|
|
238
|
-
// // const DateTimePicker: React.FC<DateTimePickerProps> = ({
|
|
239
|
-
// // value,
|
|
240
|
-
// // onChange,
|
|
241
|
-
// // label,
|
|
242
|
-
// // placeholder,
|
|
243
|
-
// // intlType,
|
|
244
|
-
// // mode = 'date',
|
|
245
|
-
// // disabled = false,
|
|
246
|
-
// // minimumDate,
|
|
247
|
-
// // maximumDate,
|
|
248
|
-
// // modal = true,
|
|
249
|
-
// // confirmText,
|
|
250
|
-
// // cancelText,
|
|
251
|
-
// // containerStyle,
|
|
252
|
-
// // pickerContainerStyle,
|
|
253
|
-
// // labelStyle,
|
|
254
|
-
// // textStyle,
|
|
255
|
-
// // leftImageStyle,
|
|
256
|
-
// // rightImageStyle,
|
|
257
|
-
// // leftIcon,
|
|
258
|
-
// // rightIcon,
|
|
259
|
-
// // leftIconShow,
|
|
260
|
-
// // onCancel,
|
|
261
|
-
// // }) => {
|
|
262
|
-
// // const { t } = useTranslation(['common', 'validation', 'address', 'sell']);
|
|
263
|
-
// // const [open, setOpen] = useState(false);
|
|
264
|
-
// // /** default icons based on mode */
|
|
265
|
-
// // const defaultLeftIcon =
|
|
266
|
-
// // mode === 'time'
|
|
267
|
-
// // ? Images.ic_time // ⏰ your clock asset
|
|
268
|
-
// // : Images.ic_calendar; // 📅 your calendar asset
|
|
269
|
-
// // const getTranslatedLabel = () => {
|
|
270
|
-
// // if (intlType) {
|
|
271
|
-
// // const translated = t(label, { ns: intlType });
|
|
272
|
-
// // if (translated !== label) return translated;
|
|
273
|
-
// // }
|
|
274
|
-
// // return label;
|
|
275
|
-
// // };
|
|
276
|
-
// // return (
|
|
277
|
-
// // <View style={[styles.container, containerStyle]}>
|
|
278
|
-
// // {/* Top label */}
|
|
279
|
-
// // {label ? (
|
|
280
|
-
// // <Text style={[styles.label, labelStyle]}>{getTranslatedLabel()}</Text>
|
|
281
|
-
// // ) : null}
|
|
282
|
-
// // <TouchableOpacity
|
|
283
|
-
// // style={[
|
|
284
|
-
// // styles.button,
|
|
285
|
-
// // pickerContainerStyle,
|
|
286
|
-
// // disabled && { backgroundColor: Colors.disabledGrey, borderWidth: 0 },
|
|
287
|
-
// // ]}
|
|
288
|
-
// // disabled={disabled}
|
|
289
|
-
// // onPress={() => setOpen(true)}
|
|
290
|
-
// // >
|
|
291
|
-
// // {/* Left icon */}
|
|
292
|
-
// // {leftIconShow &&
|
|
293
|
-
// // <Image
|
|
294
|
-
// // source={leftIcon || defaultLeftIcon}
|
|
295
|
-
// // style={[styles.icon, leftImageStyle]}
|
|
296
|
-
// // />}
|
|
297
|
-
// // {/* Text / Placeholder */}
|
|
298
|
-
// // <Text
|
|
299
|
-
// // style={[
|
|
300
|
-
// // styles.text,
|
|
301
|
-
// // textStyle,
|
|
302
|
-
// // !value && { color: Colors.textGrey },
|
|
303
|
-
// // ]}
|
|
304
|
-
// // numberOfLines={1}
|
|
305
|
-
// // >
|
|
306
|
-
// // {value ? formatValue(value, mode) : placeholder || 'Select'}
|
|
307
|
-
// // </Text>
|
|
308
|
-
// // {/* Right icon (mandatory) */}
|
|
309
|
-
// // {rightIcon &&
|
|
310
|
-
// // <Image
|
|
311
|
-
// // source={rightIcon}
|
|
312
|
-
// // style={[styles.icon, rightImageStyle]}
|
|
313
|
-
// // />}
|
|
314
|
-
// // </TouchableOpacity>
|
|
315
|
-
// // <DatePicker
|
|
316
|
-
// // modal={modal}
|
|
317
|
-
// // open={open}
|
|
318
|
-
// // date={value || new Date()}
|
|
319
|
-
// // mode={mode}
|
|
320
|
-
// // minimumDate={minimumDate}
|
|
321
|
-
// // maximumDate={maximumDate}
|
|
322
|
-
// // confirmText={confirmText}
|
|
323
|
-
// // cancelText={cancelText}
|
|
324
|
-
// // onConfirm={(val) => {
|
|
325
|
-
// // setOpen(false);
|
|
326
|
-
// // onChange(val);
|
|
327
|
-
// // }}
|
|
328
|
-
// // onCancel={() => {
|
|
329
|
-
// // setOpen(false);
|
|
330
|
-
// // onCancel && onCancel();
|
|
331
|
-
// // }}
|
|
332
|
-
// // />
|
|
333
|
-
// // </View>
|
|
334
|
-
// // );
|
|
335
|
-
// // };
|
|
336
|
-
// // const formatValue = (date: Date, mode: 'date' | 'time' | 'datetime') => {
|
|
337
|
-
// // try {
|
|
338
|
-
// // switch (mode) {
|
|
339
|
-
// // case 'time':
|
|
340
|
-
// // return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
341
|
-
// // case 'datetime':
|
|
342
|
-
// // return date.toLocaleString();
|
|
343
|
-
// // default:
|
|
344
|
-
// // return date.toLocaleDateString();
|
|
345
|
-
// // }
|
|
346
|
-
// // } catch {
|
|
347
|
-
// // return '';
|
|
348
|
-
// // }
|
|
349
|
-
// // };
|
|
350
|
-
// // const styles = StyleSheet.create({
|
|
351
|
-
// // container: {
|
|
352
|
-
// // marginVertical: Scale.moderateScale(8),
|
|
353
|
-
// // },
|
|
354
|
-
// // label: {
|
|
355
|
-
// // ...Typography.style.standardU(),
|
|
356
|
-
// // color: Colors.textColor,
|
|
357
|
-
// // marginBottom: Scale.moderateScale(8),
|
|
358
|
-
// // },
|
|
359
|
-
// // button: {
|
|
360
|
-
// // borderWidth: 1,
|
|
361
|
-
// // borderColor: Colors.primaryColor,
|
|
362
|
-
// // borderRadius: Scale.moderateScale(6),
|
|
363
|
-
// // paddingVertical: Scale.moderateScale(12),
|
|
364
|
-
// // paddingHorizontal: Scale.moderateScale(10),
|
|
365
|
-
// // flexDirection: 'row',
|
|
366
|
-
// // alignItems: 'center',
|
|
367
|
-
// // },
|
|
368
|
-
// // text: {
|
|
369
|
-
// // flex: 1,
|
|
370
|
-
// // ...Typography.style.standardU(),
|
|
371
|
-
// // color: Colors.textColor,
|
|
372
|
-
// // textTransform: "none",
|
|
373
|
-
// // },
|
|
374
|
-
// // icon: {
|
|
375
|
-
// // width: Scale.moderateScale(20),
|
|
376
|
-
// // height: Scale.moderateScale(20),
|
|
377
|
-
// // resizeMode: 'contain',
|
|
378
|
-
// // },
|
|
379
|
-
// // });
|
|
380
|
-
// // export default DateTimePicker;
|
|
381
|
-
import React, { useState } from "react";
|
|
382
|
-
import { View, TouchableOpacity, Text, StyleSheet, Image, Platform, } from "react-native";
|
|
383
|
-
import DateTimePicker from "@react-native-community/datetimepicker";
|
|
384
|
-
import { useTranslation } from "react-i18next";
|
|
385
|
-
import { Colors, Scale, Typography, Images } from "../../styles";
|
|
386
|
-
const DateTimePickerComponent = ({ value, onChange, label, placeholder, intlType, mode = "date", disabled = false, minimumDate, maximumDate, containerStyle, pickerContainerStyle, labelStyle, textStyle, leftImageStyle, rightImageStyle, leftIcon, rightIcon, leftIconShow, onCancel, error, errorTextStyle, }) => {
|
|
387
|
-
const { t } = useTranslation(["common", "validation", "address", "sell"]);
|
|
1
|
+
import React, { useEffect, useState } from 'react';
|
|
2
|
+
import { View, TouchableOpacity, Text, StyleSheet, Image, Platform, Modal, } from 'react-native';
|
|
3
|
+
import DateTimePicker from '@react-native-community/datetimepicker';
|
|
4
|
+
import { useTranslation } from 'react-i18next';
|
|
5
|
+
import { Colors, Scale, Typography, Images } from '../../styles';
|
|
6
|
+
const DateTimePickerComponent = ({ value, onChange, label, placeholder, intlType, mode = 'date', disabled = false, minimumDate, maximumDate, containerStyle, pickerContainerStyle, labelStyle, textStyle, leftImageStyle, rightImageStyle, leftIcon, rightIcon, leftIconShow = true, onCancel, error, errorTextStyle, }) => {
|
|
7
|
+
const { t } = useTranslation(['common', 'validation', 'address', 'sell']);
|
|
388
8
|
const [show, setShow] = useState(false);
|
|
389
|
-
const [step, setStep] = useState(
|
|
9
|
+
const [step, setStep] = useState('date');
|
|
390
10
|
const [tempDate, setTempDate] = useState(value || new Date());
|
|
391
|
-
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
if (value) {
|
|
13
|
+
setTempDate(value);
|
|
14
|
+
}
|
|
15
|
+
}, [value]);
|
|
16
|
+
const defaultLeftIcon = mode === 'time' ? Images.ic_time : Images.ic_calendar;
|
|
392
17
|
const getTranslatedLabel = () => {
|
|
393
18
|
if (intlType && label) {
|
|
394
19
|
const translated = t(label, { ns: intlType });
|
|
@@ -398,24 +23,24 @@ const DateTimePickerComponent = ({ value, onChange, label, placeholder, intlType
|
|
|
398
23
|
return label;
|
|
399
24
|
};
|
|
400
25
|
const onChangeHandler = (event, selectedDate) => {
|
|
401
|
-
if (event.type ===
|
|
26
|
+
if (event.type === 'dismissed') {
|
|
402
27
|
setShow(false);
|
|
403
28
|
onCancel?.();
|
|
404
29
|
return;
|
|
405
30
|
}
|
|
406
|
-
if (mode ===
|
|
407
|
-
if (step ===
|
|
31
|
+
if (mode === 'datetime') {
|
|
32
|
+
if (step === 'date') {
|
|
408
33
|
if (selectedDate) {
|
|
409
34
|
setTempDate(selectedDate);
|
|
410
|
-
if (Platform.OS ===
|
|
35
|
+
if (Platform.OS === 'android') {
|
|
411
36
|
// open time picker after date
|
|
412
|
-
setStep(
|
|
37
|
+
setStep('time');
|
|
413
38
|
}
|
|
414
39
|
}
|
|
415
|
-
if (Platform.OS ===
|
|
40
|
+
if (Platform.OS === 'ios') {
|
|
416
41
|
// iOS can combine date+time with spinner, so just update temp
|
|
417
42
|
if (selectedDate)
|
|
418
|
-
|
|
43
|
+
setTempDate(selectedDate);
|
|
419
44
|
}
|
|
420
45
|
}
|
|
421
46
|
else {
|
|
@@ -424,13 +49,19 @@ const DateTimePickerComponent = ({ value, onChange, label, placeholder, intlType
|
|
|
424
49
|
onChange(finalDate);
|
|
425
50
|
}
|
|
426
51
|
setShow(false);
|
|
427
|
-
setStep(
|
|
52
|
+
setStep('date');
|
|
428
53
|
}
|
|
429
54
|
}
|
|
430
55
|
else {
|
|
431
|
-
if (selectedDate)
|
|
432
|
-
|
|
433
|
-
|
|
56
|
+
if (selectedDate) {
|
|
57
|
+
if (Platform.OS === 'ios') {
|
|
58
|
+
setTempDate(selectedDate);
|
|
59
|
+
}
|
|
60
|
+
else {
|
|
61
|
+
onChange(selectedDate);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
setShow(Platform.OS === 'ios');
|
|
434
65
|
}
|
|
435
66
|
};
|
|
436
67
|
const mergeDateAndTime = (datePart, timePart) => {
|
|
@@ -445,31 +76,44 @@ const DateTimePickerComponent = ({ value, onChange, label, placeholder, intlType
|
|
|
445
76
|
setShow(true);
|
|
446
77
|
};
|
|
447
78
|
return (React.createElement(View, { style: containerStyle },
|
|
448
|
-
label && React.createElement(Text, { style: [styles.label, labelStyle] }, getTranslatedLabel()),
|
|
79
|
+
label && (React.createElement(Text, { style: [styles.label, labelStyle] }, getTranslatedLabel())),
|
|
449
80
|
React.createElement(TouchableOpacity, { style: [
|
|
450
81
|
styles.button,
|
|
451
82
|
pickerContainerStyle,
|
|
452
83
|
disabled && { backgroundColor: Colors.disabledGrey, borderWidth: 0 },
|
|
453
84
|
], disabled: disabled, onPress: handlePress },
|
|
454
|
-
leftIconShow && (React.createElement(Image, { source: leftIcon || defaultLeftIcon, style: [styles.icon, leftImageStyle] })),
|
|
455
|
-
React.createElement(Text, { style: [styles.text, textStyle, !value && { color: Colors.textGrey }], numberOfLines: 1 }, value ? formatValue(value, mode) : placeholder ||
|
|
456
|
-
rightIcon && React.createElement(Image, { source: rightIcon, style: [styles.icon, rightImageStyle] })),
|
|
457
|
-
typeof error ===
|
|
458
|
-
show && (React.createElement(DateTimePicker, { value: value || new Date(), mode: mode ===
|
|
85
|
+
leftIconShow && (React.createElement(Image, { source: leftIcon || defaultLeftIcon, style: [styles.icon, styles.leftIcon, leftImageStyle] })),
|
|
86
|
+
React.createElement(Text, { style: [styles.text, textStyle, !value && { color: Colors.textGrey }], numberOfLines: 1 }, value ? formatValue(value, mode) : placeholder || 'Select'),
|
|
87
|
+
rightIcon && (React.createElement(Image, { source: rightIcon, style: [styles.icon, styles.rightIcon, rightImageStyle] }))),
|
|
88
|
+
typeof error === 'string' && error.length > 0 && (React.createElement(Text, { style: [styles.errorText, errorTextStyle] }, error)),
|
|
89
|
+
show && Platform.OS === 'android' && (React.createElement(DateTimePicker, { value: value || new Date(), mode: mode === 'datetime' ? step : mode, minimumDate: minimumDate, maximumDate: maximumDate, onChange: onChangeHandler })),
|
|
90
|
+
Platform.OS === 'ios' && (React.createElement(Modal, { transparent: true, animationType: "slide", visible: show, onRequestClose: () => setShow(false) },
|
|
91
|
+
React.createElement(View, { style: styles.overlay },
|
|
92
|
+
React.createElement(View, { style: styles.container },
|
|
93
|
+
React.createElement(TouchableOpacity, { style: styles.doneBtn, onPress: () => {
|
|
94
|
+
setShow(false);
|
|
95
|
+
if (tempDate)
|
|
96
|
+
onChange(tempDate);
|
|
97
|
+
} },
|
|
98
|
+
React.createElement(Text, { style: styles.doneText }, "Done")),
|
|
99
|
+
React.createElement(DateTimePicker, { value: tempDate, mode: mode, minimumDate: minimumDate, maximumDate: maximumDate, display: "spinner", onChange: (e, d) => d && setTempDate(d) })))))));
|
|
459
100
|
};
|
|
460
101
|
const formatValue = (date, mode) => {
|
|
461
102
|
try {
|
|
462
103
|
switch (mode) {
|
|
463
|
-
case
|
|
464
|
-
return date.toLocaleTimeString([], {
|
|
465
|
-
|
|
104
|
+
case 'time':
|
|
105
|
+
return date.toLocaleTimeString([], {
|
|
106
|
+
hour: '2-digit',
|
|
107
|
+
minute: '2-digit',
|
|
108
|
+
});
|
|
109
|
+
case 'datetime':
|
|
466
110
|
return date.toLocaleString();
|
|
467
111
|
default:
|
|
468
112
|
return date.toLocaleDateString();
|
|
469
113
|
}
|
|
470
114
|
}
|
|
471
115
|
catch {
|
|
472
|
-
return
|
|
116
|
+
return '';
|
|
473
117
|
}
|
|
474
118
|
};
|
|
475
119
|
const styles = StyleSheet.create({
|
|
@@ -480,28 +124,52 @@ const styles = StyleSheet.create({
|
|
|
480
124
|
},
|
|
481
125
|
button: {
|
|
482
126
|
borderWidth: 1,
|
|
483
|
-
borderColor: Colors.
|
|
127
|
+
borderColor: Colors.black,
|
|
484
128
|
borderRadius: Scale.moderateScale(6),
|
|
485
129
|
paddingVertical: Scale.moderateScale(12),
|
|
486
130
|
paddingHorizontal: Scale.moderateScale(10),
|
|
487
|
-
flexDirection:
|
|
488
|
-
alignItems:
|
|
131
|
+
flexDirection: 'row',
|
|
132
|
+
alignItems: 'center',
|
|
489
133
|
},
|
|
490
134
|
text: {
|
|
491
135
|
flex: 1,
|
|
492
136
|
...Typography.style.standardU(),
|
|
493
137
|
color: Colors.textColor,
|
|
494
|
-
textTransform:
|
|
138
|
+
textTransform: 'none',
|
|
495
139
|
},
|
|
496
140
|
icon: {
|
|
497
141
|
width: Scale.moderateScale(20),
|
|
498
142
|
height: Scale.moderateScale(20),
|
|
499
|
-
resizeMode:
|
|
143
|
+
resizeMode: 'contain',
|
|
144
|
+
},
|
|
145
|
+
leftIcon: {
|
|
146
|
+
marginRight: Scale.moderateScale(8),
|
|
147
|
+
},
|
|
148
|
+
rightIcon: {
|
|
149
|
+
marginLeft: Scale.moderateScale(8),
|
|
500
150
|
},
|
|
501
151
|
errorText: {
|
|
502
152
|
color: Colors.dangerRed,
|
|
503
153
|
fontSize: Scale.moderateScale(12),
|
|
504
154
|
marginTop: 3,
|
|
505
155
|
},
|
|
156
|
+
overlay: {
|
|
157
|
+
flex: 1,
|
|
158
|
+
justifyContent: 'flex-end',
|
|
159
|
+
backgroundColor: 'rgba(0,0,0,0.3)',
|
|
160
|
+
},
|
|
161
|
+
container: {
|
|
162
|
+
backgroundColor: Colors.white,
|
|
163
|
+
paddingBottom: 20,
|
|
164
|
+
},
|
|
165
|
+
doneBtn: {
|
|
166
|
+
alignSelf: 'flex-end',
|
|
167
|
+
padding: 12,
|
|
168
|
+
},
|
|
169
|
+
doneText: {
|
|
170
|
+
color: Colors.primaryColor,
|
|
171
|
+
fontSize: 16,
|
|
172
|
+
fontWeight: '600',
|
|
173
|
+
},
|
|
506
174
|
});
|
|
507
175
|
export default DateTimePickerComponent;
|