@teamnhz/rn-ui-toolkit 1.1.1 → 1.1.3
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.
|
@@ -8,16 +8,20 @@ interface DateTimePickerProps {
|
|
|
8
8
|
intlType?: string;
|
|
9
9
|
mode?: "date" | "time" | "datetime";
|
|
10
10
|
disabled?: boolean;
|
|
11
|
+
/** raw DatePicker props */
|
|
11
12
|
minimumDate?: Date;
|
|
12
13
|
maximumDate?: Date;
|
|
14
|
+
modal?: boolean;
|
|
13
15
|
confirmText?: string;
|
|
14
16
|
cancelText?: string;
|
|
17
|
+
/** style overrides */
|
|
15
18
|
containerStyle?: StyleProp<ViewStyle>;
|
|
16
19
|
pickerContainerStyle?: StyleProp<ViewStyle>;
|
|
17
20
|
labelStyle?: StyleProp<TextStyle>;
|
|
18
21
|
textStyle?: StyleProp<TextStyle>;
|
|
19
22
|
leftImageStyle?: StyleProp<ImageStyle>;
|
|
20
23
|
rightImageStyle?: StyleProp<ImageStyle>;
|
|
24
|
+
/** icons */
|
|
21
25
|
leftIcon?: ImageSourcePropType;
|
|
22
26
|
rightIcon?: ImageSourcePropType;
|
|
23
27
|
leftIconShow?: boolean;
|
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
import React, { useState } from "react";
|
|
2
2
|
import { View, TouchableOpacity, Text, StyleSheet, Image, } from "react-native";
|
|
3
|
-
import
|
|
3
|
+
import DatePicker from "react-native-date-picker";
|
|
4
4
|
import { useTranslation } from "react-i18next";
|
|
5
5
|
import { Colors, Scale, Typography, Images } from "../../styles";
|
|
6
|
-
const DateTimePicker = ({ value, onChange, label, placeholder, intlType, mode = "date", disabled = false, minimumDate, maximumDate,
|
|
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
7
|
const { t } = useTranslation(["common", "validation", "address", "sell"]);
|
|
8
|
-
const [
|
|
9
|
-
|
|
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
|
|
10
13
|
const getTranslatedLabel = () => {
|
|
11
14
|
if (intlType) {
|
|
12
15
|
const translated = t(label, { ns: intlType });
|
|
@@ -15,32 +18,33 @@ const DateTimePicker = ({ value, onChange, label, placeholder, intlType, mode =
|
|
|
15
18
|
}
|
|
16
19
|
return label;
|
|
17
20
|
};
|
|
18
|
-
const handleConfirm = (date) => {
|
|
19
|
-
setIsVisible(false);
|
|
20
|
-
onChange(date);
|
|
21
|
-
};
|
|
22
|
-
const handleCancel = () => {
|
|
23
|
-
setIsVisible(false);
|
|
24
|
-
onCancel?.();
|
|
25
|
-
};
|
|
26
21
|
return (React.createElement(View, { style: containerStyle },
|
|
27
22
|
label ? (React.createElement(Text, { style: [styles.label, labelStyle] }, getTranslatedLabel())) : null,
|
|
28
23
|
React.createElement(TouchableOpacity, { style: [
|
|
29
24
|
styles.button,
|
|
30
25
|
pickerContainerStyle,
|
|
31
26
|
disabled && { backgroundColor: Colors.disabledGrey, borderWidth: 0 },
|
|
32
|
-
], onPress: () =>
|
|
27
|
+
], disabled: disabled, onPress: () => setOpen(true) },
|
|
33
28
|
leftIconShow && (React.createElement(Image, { source: leftIcon || defaultLeftIcon, style: [styles.icon, leftImageStyle] })),
|
|
34
29
|
React.createElement(Text, { style: [styles.text, textStyle, !value && { color: Colors.textGrey }], numberOfLines: 1 }, value ? formatValue(value, mode) : placeholder || "Select"),
|
|
35
30
|
rightIcon && (React.createElement(Image, { source: rightIcon, style: [styles.icon, rightImageStyle] }))),
|
|
36
31
|
typeof error === "string" && error.length > 0 && (React.createElement(Text, { style: [styles.errorText, errorTextStyle] }, error)),
|
|
37
|
-
React.createElement(
|
|
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
|
+
} })));
|
|
38
39
|
};
|
|
39
40
|
const formatValue = (date, mode) => {
|
|
40
41
|
try {
|
|
41
42
|
switch (mode) {
|
|
42
43
|
case "time":
|
|
43
|
-
return date.toLocaleTimeString([], {
|
|
44
|
+
return date.toLocaleTimeString([], {
|
|
45
|
+
hour: "2-digit",
|
|
46
|
+
minute: "2-digit",
|
|
47
|
+
});
|
|
44
48
|
case "datetime":
|
|
45
49
|
return date.toLocaleString();
|
|
46
50
|
default:
|
|
@@ -84,3 +88,189 @@ const styles = StyleSheet.create({
|
|
|
84
88
|
},
|
|
85
89
|
});
|
|
86
90
|
export default DateTimePicker;
|
|
91
|
+
// import React, { useState } from 'react';
|
|
92
|
+
// import {
|
|
93
|
+
// View,
|
|
94
|
+
// TouchableOpacity,
|
|
95
|
+
// Text,
|
|
96
|
+
// StyleSheet,
|
|
97
|
+
// Image,
|
|
98
|
+
// ImageSourcePropType,
|
|
99
|
+
// StyleProp,
|
|
100
|
+
// TextStyle,
|
|
101
|
+
// ViewStyle,
|
|
102
|
+
// ImageStyle,
|
|
103
|
+
// } from 'react-native';
|
|
104
|
+
// import DatePicker from 'react-native-date-picker';
|
|
105
|
+
// import { useTranslation } from 'react-i18next';
|
|
106
|
+
// import { Colors, Scale, Typography, Images } from '../../styles';
|
|
107
|
+
// interface DateTimePickerProps {
|
|
108
|
+
// value: Date | null;
|
|
109
|
+
// onChange: (date: Date) => void;
|
|
110
|
+
// label?: string;
|
|
111
|
+
// placeholder?: string;
|
|
112
|
+
// intlType?: string;
|
|
113
|
+
// mode?: 'date' | 'time' | 'datetime';
|
|
114
|
+
// disabled?: boolean;
|
|
115
|
+
// /** raw DatePicker props */
|
|
116
|
+
// minimumDate?: Date;
|
|
117
|
+
// maximumDate?: Date;
|
|
118
|
+
// modal?: boolean;
|
|
119
|
+
// confirmText?: string;
|
|
120
|
+
// cancelText?: string;
|
|
121
|
+
// /** style overrides */
|
|
122
|
+
// containerStyle?: StyleProp<ViewStyle>;
|
|
123
|
+
// pickerContainerStyle?: StyleProp<ViewStyle>;
|
|
124
|
+
// labelStyle?: StyleProp<TextStyle>;
|
|
125
|
+
// textStyle?: StyleProp<TextStyle>;
|
|
126
|
+
// leftImageStyle?: StyleProp<ImageStyle>;
|
|
127
|
+
// rightImageStyle?: StyleProp<ImageStyle>;
|
|
128
|
+
// /** icons */
|
|
129
|
+
// leftIcon?: ImageSourcePropType;
|
|
130
|
+
// rightIcon?: ImageSourcePropType;
|
|
131
|
+
// leftIconShow?: boolean;
|
|
132
|
+
// onCancel?: () => void;
|
|
133
|
+
// }
|
|
134
|
+
// const DateTimePicker: React.FC<DateTimePickerProps> = ({
|
|
135
|
+
// value,
|
|
136
|
+
// onChange,
|
|
137
|
+
// label,
|
|
138
|
+
// placeholder,
|
|
139
|
+
// intlType,
|
|
140
|
+
// mode = 'date',
|
|
141
|
+
// disabled = false,
|
|
142
|
+
// minimumDate,
|
|
143
|
+
// maximumDate,
|
|
144
|
+
// modal = true,
|
|
145
|
+
// confirmText,
|
|
146
|
+
// cancelText,
|
|
147
|
+
// containerStyle,
|
|
148
|
+
// pickerContainerStyle,
|
|
149
|
+
// labelStyle,
|
|
150
|
+
// textStyle,
|
|
151
|
+
// leftImageStyle,
|
|
152
|
+
// rightImageStyle,
|
|
153
|
+
// leftIcon,
|
|
154
|
+
// rightIcon,
|
|
155
|
+
// leftIconShow,
|
|
156
|
+
// onCancel,
|
|
157
|
+
// }) => {
|
|
158
|
+
// const { t } = useTranslation(['common', 'validation', 'address', 'sell']);
|
|
159
|
+
// const [open, setOpen] = useState(false);
|
|
160
|
+
// /** default icons based on mode */
|
|
161
|
+
// const defaultLeftIcon =
|
|
162
|
+
// mode === 'time'
|
|
163
|
+
// ? Images.ic_time // ⏰ your clock asset
|
|
164
|
+
// : Images.ic_calendar; // 📅 your calendar asset
|
|
165
|
+
// const getTranslatedLabel = () => {
|
|
166
|
+
// if (intlType) {
|
|
167
|
+
// const translated = t(label, { ns: intlType });
|
|
168
|
+
// if (translated !== label) return translated;
|
|
169
|
+
// }
|
|
170
|
+
// return label;
|
|
171
|
+
// };
|
|
172
|
+
// return (
|
|
173
|
+
// <View style={[styles.container, containerStyle]}>
|
|
174
|
+
// {/* Top label */}
|
|
175
|
+
// {label ? (
|
|
176
|
+
// <Text style={[styles.label, labelStyle]}>{getTranslatedLabel()}</Text>
|
|
177
|
+
// ) : null}
|
|
178
|
+
// <TouchableOpacity
|
|
179
|
+
// style={[
|
|
180
|
+
// styles.button,
|
|
181
|
+
// pickerContainerStyle,
|
|
182
|
+
// disabled && { backgroundColor: Colors.disabledGrey, borderWidth: 0 },
|
|
183
|
+
// ]}
|
|
184
|
+
// disabled={disabled}
|
|
185
|
+
// onPress={() => setOpen(true)}
|
|
186
|
+
// >
|
|
187
|
+
// {/* Left icon */}
|
|
188
|
+
// {leftIconShow &&
|
|
189
|
+
// <Image
|
|
190
|
+
// source={leftIcon || defaultLeftIcon}
|
|
191
|
+
// style={[styles.icon, leftImageStyle]}
|
|
192
|
+
// />}
|
|
193
|
+
// {/* Text / Placeholder */}
|
|
194
|
+
// <Text
|
|
195
|
+
// style={[
|
|
196
|
+
// styles.text,
|
|
197
|
+
// textStyle,
|
|
198
|
+
// !value && { color: Colors.textGrey },
|
|
199
|
+
// ]}
|
|
200
|
+
// numberOfLines={1}
|
|
201
|
+
// >
|
|
202
|
+
// {value ? formatValue(value, mode) : placeholder || 'Select'}
|
|
203
|
+
// </Text>
|
|
204
|
+
// {/* Right icon (mandatory) */}
|
|
205
|
+
// {rightIcon &&
|
|
206
|
+
// <Image
|
|
207
|
+
// source={rightIcon}
|
|
208
|
+
// style={[styles.icon, rightImageStyle]}
|
|
209
|
+
// />}
|
|
210
|
+
// </TouchableOpacity>
|
|
211
|
+
// <DatePicker
|
|
212
|
+
// modal={modal}
|
|
213
|
+
// open={open}
|
|
214
|
+
// date={value || new Date()}
|
|
215
|
+
// mode={mode}
|
|
216
|
+
// minimumDate={minimumDate}
|
|
217
|
+
// maximumDate={maximumDate}
|
|
218
|
+
// confirmText={confirmText}
|
|
219
|
+
// cancelText={cancelText}
|
|
220
|
+
// onConfirm={(val) => {
|
|
221
|
+
// setOpen(false);
|
|
222
|
+
// onChange(val);
|
|
223
|
+
// }}
|
|
224
|
+
// onCancel={() => {
|
|
225
|
+
// setOpen(false);
|
|
226
|
+
// onCancel && onCancel();
|
|
227
|
+
// }}
|
|
228
|
+
// />
|
|
229
|
+
// </View>
|
|
230
|
+
// );
|
|
231
|
+
// };
|
|
232
|
+
// const formatValue = (date: Date, mode: 'date' | 'time' | 'datetime') => {
|
|
233
|
+
// try {
|
|
234
|
+
// switch (mode) {
|
|
235
|
+
// case 'time':
|
|
236
|
+
// return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
237
|
+
// case 'datetime':
|
|
238
|
+
// return date.toLocaleString();
|
|
239
|
+
// default:
|
|
240
|
+
// return date.toLocaleDateString();
|
|
241
|
+
// }
|
|
242
|
+
// } catch {
|
|
243
|
+
// return '';
|
|
244
|
+
// }
|
|
245
|
+
// };
|
|
246
|
+
// const styles = StyleSheet.create({
|
|
247
|
+
// container: {
|
|
248
|
+
// marginVertical: Scale.moderateScale(8),
|
|
249
|
+
// },
|
|
250
|
+
// label: {
|
|
251
|
+
// ...Typography.style.standardU(),
|
|
252
|
+
// color: Colors.textColor,
|
|
253
|
+
// marginBottom: Scale.moderateScale(8),
|
|
254
|
+
// },
|
|
255
|
+
// button: {
|
|
256
|
+
// borderWidth: 1,
|
|
257
|
+
// borderColor: Colors.primaryColor,
|
|
258
|
+
// borderRadius: Scale.moderateScale(6),
|
|
259
|
+
// paddingVertical: Scale.moderateScale(12),
|
|
260
|
+
// paddingHorizontal: Scale.moderateScale(10),
|
|
261
|
+
// flexDirection: 'row',
|
|
262
|
+
// alignItems: 'center',
|
|
263
|
+
// },
|
|
264
|
+
// text: {
|
|
265
|
+
// flex: 1,
|
|
266
|
+
// ...Typography.style.standardU(),
|
|
267
|
+
// color: Colors.textColor,
|
|
268
|
+
// textTransform: "none",
|
|
269
|
+
// },
|
|
270
|
+
// icon: {
|
|
271
|
+
// width: Scale.moderateScale(20),
|
|
272
|
+
// height: Scale.moderateScale(20),
|
|
273
|
+
// resizeMode: 'contain',
|
|
274
|
+
// },
|
|
275
|
+
// });
|
|
276
|
+
// export default DateTimePicker;
|
|
@@ -2,7 +2,7 @@ import React, { useState } from "react";
|
|
|
2
2
|
import { ActivityIndicator } from "react-native";
|
|
3
3
|
import FastImage from "react-native-fast-image";
|
|
4
4
|
const Image = (props) => {
|
|
5
|
-
const [loading, setLoading] = useState(
|
|
5
|
+
const [loading, setLoading] = useState(false);
|
|
6
6
|
return (React.createElement(React.Fragment, null,
|
|
7
7
|
React.createElement(FastImage, { ...props, onLoadStart: () => {
|
|
8
8
|
setLoading(true);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@teamnhz/rn-ui-toolkit",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.3",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"files": [
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
"react": ">=19.0.0",
|
|
18
18
|
"react-i18next": "^15.7.2",
|
|
19
19
|
"react-native": ">=0.77.2",
|
|
20
|
+
"react-native-date-picker": "^5.0.13",
|
|
20
21
|
"react-native-element-dropdown": "^2.12.4",
|
|
21
22
|
"react-native-elements": "^3.4.3",
|
|
22
23
|
"react-native-fast-image": "^8.6.3",
|
|
@@ -30,16 +31,12 @@
|
|
|
30
31
|
"react-native-safe-area-context": "^5.6.1",
|
|
31
32
|
"react-native-svg": "^15.12.1",
|
|
32
33
|
"react-native-vector-icons": "^10.3.0",
|
|
33
|
-
"react-native-video-trim": "^3.0.9"
|
|
34
|
-
"@react-native-community/datetimepicker": "^8.4.4",
|
|
35
|
-
"react-native-modal-datetime-picker": "^18.0.0"
|
|
36
|
-
|
|
34
|
+
"react-native-video-trim": "^3.0.9"
|
|
37
35
|
},
|
|
38
36
|
"devDependencies": {
|
|
39
37
|
"@react-native-documents/picker": "^10.1.5",
|
|
40
38
|
"cpx": "^1.5.0",
|
|
41
39
|
"react-native-keyboard-aware-scroll-view": "^0.9.5",
|
|
42
40
|
"typescript": "^5.9.2"
|
|
43
|
-
}
|
|
44
|
-
"dependencies": {}
|
|
41
|
+
}
|
|
45
42
|
}
|