@teamnhz/rn-ui-toolkit 1.0.7 → 1.0.8

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.
Files changed (3) hide show
  1. package/dist/components/DateTimePicker/index.d.ts +0 -4
  2. package/dist/components/DateTimePicker/index.js +280 -90
  3. package/package.json +5 -1
package/dist/components/DateTimePicker/index.d.ts CHANGED
@@ -8,20 +8,16 @@ interface DateTimePickerProps {
8
8
  intlType?: string;
9
9
  mode?: "date" | "time" | "datetime";
10
10
  disabled?: boolean;
11
- /** raw DatePicker props */
12
11
  minimumDate?: Date;
13
12
  maximumDate?: Date;
14
- modal?: boolean;
15
13
  confirmText?: string;
16
14
  cancelText?: string;
17
- /** style overrides */
18
15
  containerStyle?: StyleProp<ViewStyle>;
19
16
  pickerContainerStyle?: StyleProp<ViewStyle>;
20
17
  labelStyle?: StyleProp<TextStyle>;
21
18
  textStyle?: StyleProp<TextStyle>;
22
19
  leftImageStyle?: StyleProp<ImageStyle>;
23
20
  rightImageStyle?: StyleProp<ImageStyle>;
24
- /** icons */
25
21
  leftIcon?: ImageSourcePropType;
26
22
  rightIcon?: ImageSourcePropType;
27
23
  leftIconShow?: boolean;
package/dist/components/DateTimePicker/index.js CHANGED
@@ -1,93 +1,197 @@
1
- import React, { useState } from "react";
2
- import { View, TouchableOpacity, Text, StyleSheet, Image, } from "react-native";
3
- import DatePicker from "react-native-date-picker";
4
- import { useTranslation } from "react-i18next";
5
- import { Colors, Scale, Typography, Images } from "../../styles";
6
- const DateTimePicker = ({ value, onChange, label, placeholder, intlType, mode = "date", disabled = false, minimumDate, maximumDate, modal = true, confirmText, cancelText, containerStyle, pickerContainerStyle, labelStyle, textStyle, leftImageStyle, rightImageStyle, leftIcon, rightIcon, leftIconShow, onCancel, error, errorTextStyle, }) => {
7
- const { t } = useTranslation(["common", "validation", "address", "sell"]);
8
- const [open, setOpen] = useState(false);
9
- /** default icons based on mode */
10
- const defaultLeftIcon = mode === "time"
11
- ? Images.ic_time // ⏰ your clock asset
12
- : Images.ic_calendar; // 📅 your calendar asset
13
- const getTranslatedLabel = () => {
14
- if (intlType) {
15
- const translated = t(label, { ns: intlType });
16
- if (translated !== label)
17
- return translated;
18
- }
19
- return label;
20
- };
21
- return (React.createElement(View, { style: containerStyle },
22
- label ? (React.createElement(Text, { style: [styles.label, labelStyle] }, getTranslatedLabel())) : null,
23
- React.createElement(TouchableOpacity, { style: [
24
- styles.button,
25
- pickerContainerStyle,
26
- disabled && { backgroundColor: Colors.disabledGrey, borderWidth: 0 },
27
- ], disabled: disabled, onPress: () => setOpen(true) },
28
- leftIconShow && (React.createElement(Image, { source: leftIcon || defaultLeftIcon, style: [styles.icon, leftImageStyle] })),
29
- React.createElement(Text, { style: [styles.text, textStyle, !value && { color: Colors.textGrey }], numberOfLines: 1 }, value ? formatValue(value, mode) : placeholder || "Select"),
30
- rightIcon && (React.createElement(Image, { source: rightIcon, style: [styles.icon, rightImageStyle] }))),
31
- typeof error === "string" && error.length > 0 && (React.createElement(Text, { style: [styles.errorText, errorTextStyle] }, error)),
32
- React.createElement(DatePicker, { modal: modal, open: open, date: value || new Date(), mode: mode, minimumDate: minimumDate, maximumDate: maximumDate, confirmText: confirmText, cancelText: cancelText, onConfirm: (val) => {
33
- setOpen(false);
34
- onChange(val);
35
- }, onCancel: () => {
36
- setOpen(false);
37
- onCancel && onCancel();
38
- } })));
39
- };
40
- const formatValue = (date, mode) => {
41
- try {
42
- switch (mode) {
43
- case "time":
44
- return date.toLocaleTimeString([], {
45
- hour: "2-digit",
46
- minute: "2-digit",
47
- });
48
- case "datetime":
49
- return date.toLocaleString();
50
- default:
51
- return date.toLocaleDateString();
52
- }
53
- }
54
- catch {
55
- return "";
56
- }
57
- };
58
- const styles = StyleSheet.create({
59
- label: {
60
- ...Typography.style.standardU(),
61
- color: Colors.textColor,
62
- marginBottom: Scale.moderateScale(8),
63
- },
64
- button: {
65
- borderWidth: 1,
66
- borderColor: Colors.primaryColor,
67
- borderRadius: Scale.moderateScale(6),
68
- paddingVertical: Scale.moderateScale(12),
69
- paddingHorizontal: Scale.moderateScale(10),
70
- flexDirection: "row",
71
- alignItems: "center",
72
- },
73
- text: {
74
- flex: 1,
75
- ...Typography.style.standardU(),
76
- color: Colors.textColor,
77
- textTransform: "none",
78
- },
79
- icon: {
80
- width: Scale.moderateScale(20),
81
- height: Scale.moderateScale(20),
82
- resizeMode: "contain",
83
- },
84
- errorText: {
85
- color: Colors.dangerRed,
86
- fontSize: Scale.moderateScale(12),
87
- marginTop: 3,
88
- },
89
- });
90
- export default DateTimePicker;
1
+ // import React, { useState } from "react";
2
+ // import {
3
+ // View,
4
+ // TouchableOpacity,
5
+ // Text,
6
+ // StyleSheet,
7
+ // Image,
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;
91
195
  // import React, { useState } from 'react';
92
196
  // import {
93
197
  // View,
@@ -274,3 +378,89 @@ export default DateTimePicker;
274
378
  // },
275
379
  // });
276
380
  // export default DateTimePicker;
381
+ import React, { useState } from "react";
382
+ import { View, TouchableOpacity, Text, StyleSheet, Image, } from "react-native";
383
+ import DateTimePickerModal from "react-native-modal-datetime-picker";
384
+ import { useTranslation } from "react-i18next";
385
+ import { Colors, Scale, Typography, Images } from "../../styles";
386
+ const DateTimePicker = ({ value, onChange, label, placeholder, intlType, mode = "date", disabled = false, minimumDate, maximumDate, confirmText = "Confirm", cancelText = "Cancel", containerStyle, pickerContainerStyle, labelStyle, textStyle, leftImageStyle, rightImageStyle, leftIcon, rightIcon, leftIconShow, onCancel, error, errorTextStyle, }) => {
387
+ const { t } = useTranslation(["common", "validation", "address", "sell"]);
388
+ const [isVisible, setIsVisible] = useState(false);
389
+ const defaultLeftIcon = mode === "time" ? Images.ic_time : Images.ic_calendar;
390
+ const getTranslatedLabel = () => {
391
+ if (intlType) {
392
+ const translated = t(label, { ns: intlType });
393
+ if (translated !== label)
394
+ return translated;
395
+ }
396
+ return label;
397
+ };
398
+ const handleConfirm = (date) => {
399
+ setIsVisible(false);
400
+ onChange(date);
401
+ };
402
+ const handleCancel = () => {
403
+ setIsVisible(false);
404
+ onCancel?.();
405
+ };
406
+ return (React.createElement(View, { style: containerStyle },
407
+ label ? (React.createElement(Text, { style: [styles.label, labelStyle] }, getTranslatedLabel())) : null,
408
+ React.createElement(TouchableOpacity, { style: [
409
+ styles.button,
410
+ pickerContainerStyle,
411
+ disabled && { backgroundColor: Colors.disabledGrey, borderWidth: 0 },
412
+ ], onPress: () => !disabled && setIsVisible(true), disabled: disabled },
413
+ leftIconShow && (React.createElement(Image, { source: leftIcon || defaultLeftIcon, style: [styles.icon, leftImageStyle] })),
414
+ React.createElement(Text, { style: [styles.text, textStyle, !value && { color: Colors.textGrey }], numberOfLines: 1 }, value ? formatValue(value, mode) : placeholder || "Select"),
415
+ rightIcon && (React.createElement(Image, { source: rightIcon, style: [styles.icon, rightImageStyle] }))),
416
+ typeof error === "string" && error.length > 0 && (React.createElement(Text, { style: [styles.errorText, errorTextStyle] }, error)),
417
+ React.createElement(DateTimePickerModal, { isVisible: isVisible, mode: mode, date: value || new Date(), minimumDate: minimumDate, maximumDate: maximumDate, onConfirm: handleConfirm, onCancel: handleCancel, confirmTextIOS: confirmText, cancelTextIOS: cancelText, is24Hour: true })));
418
+ };
419
+ const formatValue = (date, mode) => {
420
+ try {
421
+ switch (mode) {
422
+ case "time":
423
+ return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
424
+ case "datetime":
425
+ return date.toLocaleString();
426
+ default:
427
+ return date.toLocaleDateString();
428
+ }
429
+ }
430
+ catch {
431
+ return "";
432
+ }
433
+ };
434
+ const styles = StyleSheet.create({
435
+ label: {
436
+ ...Typography.style.standardU(),
437
+ color: Colors.textColor,
438
+ marginBottom: Scale.moderateScale(8),
439
+ },
440
+ button: {
441
+ borderWidth: 1,
442
+ borderColor: Colors.primaryColor,
443
+ borderRadius: Scale.moderateScale(6),
444
+ paddingVertical: Scale.moderateScale(12),
445
+ paddingHorizontal: Scale.moderateScale(10),
446
+ flexDirection: "row",
447
+ alignItems: "center",
448
+ },
449
+ text: {
450
+ flex: 1,
451
+ ...Typography.style.standardU(),
452
+ color: Colors.textColor,
453
+ textTransform: "none",
454
+ },
455
+ icon: {
456
+ width: Scale.moderateScale(20),
457
+ height: Scale.moderateScale(20),
458
+ resizeMode: "contain",
459
+ },
460
+ errorText: {
461
+ color: Colors.dangerRed,
462
+ fontSize: Scale.moderateScale(12),
463
+ marginTop: 3,
464
+ },
465
+ });
466
+ export default DateTimePicker;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@teamnhz/rn-ui-toolkit",
3
- "version": "1.0.7",
3
+ "version": "1.0.8",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "files": [
@@ -38,5 +38,9 @@
38
38
  "cpx": "^1.5.0",
39
39
  "react-native-keyboard-aware-scroll-view": "^0.9.5",
40
40
  "typescript": "^5.9.2"
41
+ },
42
+ "dependencies": {
43
+ "@react-native-community/datetimepicker": "^8.5.0",
44
+ "react-native-modal-datetime-picker": "^18.0.0"
41
45
  }
42
46
  }