@teamnhz/rn-ui-toolkit 1.0.7 → 1.0.9

package/dist/components/DateTimePicker/index.d.ts

@@ -8,20 +8,16 @@ interface DateTimePickerProps {
     intlType?: string;
     mode?: "date" | "time" | "datetime";
     disabled?: boolean;
-    /** raw DatePicker props */
     minimumDate?: Date;
     maximumDate?: Date;
-    modal?: boolean;
     confirmText?: string;
     cancelText?: string;
-    /** style overrides */
     containerStyle?: StyleProp<ViewStyle>;
     pickerContainerStyle?: StyleProp<ViewStyle>;
     labelStyle?: StyleProp<TextStyle>;
     textStyle?: StyleProp<TextStyle>;
     leftImageStyle?: StyleProp<ImageStyle>;
     rightImageStyle?: StyleProp<ImageStyle>;
-    /** icons */
     leftIcon?: ImageSourcePropType;
     rightIcon?: ImageSourcePropType;
     leftIconShow?: boolean;

package/dist/components/DateTimePicker/index.js

@@ -1,15 +1,12 @@
 import React, { useState } from "react";
 import { View, TouchableOpacity, Text, StyleSheet, Image, } from "react-native";
-import DatePicker from "react-native-date-picker";
+import DateTimePickerModal from "react-native-modal-datetime-picker";
 import { useTranslation } from "react-i18next";
 import { Colors, Scale, Typography, Images } from "../../styles";
-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, }) => {
+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, }) => {
     const { t } = useTranslation(["common", "validation", "address", "sell"]);
-    const [open, setOpen] = useState(false);
-    /** default icons based on mode */
-    const defaultLeftIcon = mode === "time"
-        ? Images.ic_time // ⏰ your clock asset
-        : Images.ic_calendar; // 📅 your calendar asset
+    const [isVisible, setIsVisible] = useState(false);
+    const defaultLeftIcon = mode === "time" ? Images.ic_time : Images.ic_calendar;
     const getTranslatedLabel = () => {
         if (intlType) {
             const translated = t(label, { ns: intlType });
@@ -18,33 +15,32 @@ const DateTimePicker = ({ value, onChange, label, placeholder, intlType, mode =
         }
         return label;
     };
+    const handleConfirm = (date) => {
+        setIsVisible(false);
+        onChange(date);
+    };
+    const handleCancel = () => {
+        setIsVisible(false);
+        onCancel?.();
+    };
     return (React.createElement(View, { style: containerStyle },
         label ? (React.createElement(Text, { style: [styles.label, labelStyle] }, getTranslatedLabel())) : null,
         React.createElement(TouchableOpacity, { style: [
                 styles.button,
                 pickerContainerStyle,
                 disabled && { backgroundColor: Colors.disabledGrey, borderWidth: 0 },
-            ], disabled: disabled, onPress: () => setOpen(true) },
+            ], onPress: () => !disabled && setIsVisible(true), disabled: disabled },
             leftIconShow && (React.createElement(Image, { source: leftIcon || defaultLeftIcon, style: [styles.icon, leftImageStyle] })),
             React.createElement(Text, { style: [styles.text, textStyle, !value && { color: Colors.textGrey }], numberOfLines: 1 }, value ? formatValue(value, mode) : placeholder || "Select"),
             rightIcon && (React.createElement(Image, { source: rightIcon, style: [styles.icon, rightImageStyle] }))),
         typeof error === "string" && error.length > 0 && (React.createElement(Text, { style: [styles.errorText, errorTextStyle] }, error)),
-        React.createElement(DatePicker, { modal: modal, open: open, date: value || new Date(), mode: mode, minimumDate: minimumDate, maximumDate: maximumDate, confirmText: confirmText, cancelText: cancelText, onConfirm: (val) => {
-                setOpen(false);
-                onChange(val);
-            }, onCancel: () => {
-                setOpen(false);
-                onCancel && onCancel();
-            } })));
+        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 })));
 };
 const formatValue = (date, mode) => {
     try {
         switch (mode) {
             case "time":
-                return date.toLocaleTimeString([], {
-                    hour: "2-digit",
-                    minute: "2-digit",
-                });
+                return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
             case "datetime":
                 return date.toLocaleString();
             default:
@@ -88,189 +84,3 @@ const styles = StyleSheet.create({
     },
 });
 export default DateTimePicker;
-// import React, { useState } from 'react';
-// import {
-//     View,
-//     TouchableOpacity,
-//     Text,
-//     StyleSheet,
-//     Image,
-//     ImageSourcePropType,
-//     StyleProp,
-//     TextStyle,
-//     ViewStyle,
-//     ImageStyle,
-// } from 'react-native';
-// import DatePicker from 'react-native-date-picker';
-// import { useTranslation } from 'react-i18next';
-// import { Colors, Scale, Typography, Images } from '../../styles';
-// interface DateTimePickerProps {
-//     value: Date | null;
-//     onChange: (date: Date) => void;
-//     label?: string;
-//     placeholder?: string;
-//     intlType?: string;
-//     mode?: 'date' | 'time' | 'datetime';
-//     disabled?: boolean;
-//     /** raw DatePicker props */
-//     minimumDate?: Date;
-//     maximumDate?: Date;
-//     modal?: boolean;
-//     confirmText?: string;
-//     cancelText?: string;
-//     /** style overrides */
-//     containerStyle?: StyleProp<ViewStyle>;
-//     pickerContainerStyle?: StyleProp<ViewStyle>;
-//     labelStyle?: StyleProp<TextStyle>;
-//     textStyle?: StyleProp<TextStyle>;
-//     leftImageStyle?: StyleProp<ImageStyle>;
-//     rightImageStyle?: StyleProp<ImageStyle>;
-//     /** icons */
-//     leftIcon?: ImageSourcePropType;
-//     rightIcon?: ImageSourcePropType;
-//     leftIconShow?: boolean;
-//     onCancel?: () => void;
-// }
-// const DateTimePicker: React.FC<DateTimePickerProps> = ({
-//     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,
-// }) => {
-//     const { t } = useTranslation(['common', 'validation', 'address', 'sell']);
-//     const [open, setOpen] = useState(false);
-//     /** default icons based on mode */
-//     const defaultLeftIcon =
-//         mode === 'time'
-//             ? Images.ic_time // ⏰ your clock asset
-//             : Images.ic_calendar; // 📅 your calendar asset
-//     const getTranslatedLabel = () => {
-//         if (intlType) {
-//             const translated = t(label, { ns: intlType });
-//             if (translated !== label) return translated;
-//         }
-//         return label;
-//     };
-//     return (
-//         <View style={[styles.container, containerStyle]}>
-//             {/* Top label */}
-//             {label ? (
-//                 <Text style={[styles.label, labelStyle]}>{getTranslatedLabel()}</Text>
-//             ) : null}
-//             <TouchableOpacity
-//                 style={[
-//                     styles.button,
-//                     pickerContainerStyle,
-//                     disabled && { backgroundColor: Colors.disabledGrey, borderWidth: 0 },
-//                 ]}
-//                 disabled={disabled}
-//                 onPress={() => setOpen(true)}
-//             >
-//                 {/* Left icon */}
-//                 {leftIconShow &&
-//                     <Image
-//                         source={leftIcon || defaultLeftIcon}
-//                         style={[styles.icon, leftImageStyle]}
-//                     />}
-//                 {/* Text / Placeholder */}
-//                 <Text
-//                     style={[
-//                         styles.text,
-//                         textStyle,
-//                         !value && { color: Colors.textGrey },
-//                     ]}
-//                     numberOfLines={1}
-//                 >
-//                     {value ? formatValue(value, mode) : placeholder || 'Select'}
-//                 </Text>
-//                 {/* Right icon (mandatory) */}
-//                 {rightIcon &&
-//                     <Image
-//                         source={rightIcon}
-//                         style={[styles.icon, rightImageStyle]}
-//                     />}
-//             </TouchableOpacity>
-//             <DatePicker
-//                 modal={modal}
-//                 open={open}
-//                 date={value || new Date()}
-//                 mode={mode}
-//                 minimumDate={minimumDate}
-//                 maximumDate={maximumDate}
-//                 confirmText={confirmText}
-//                 cancelText={cancelText}
-//                 onConfirm={(val) => {
-//                     setOpen(false);
-//                     onChange(val);
-//                 }}
-//                 onCancel={() => {
-//                     setOpen(false);
-//                     onCancel && onCancel();
-//                 }}
-//             />
-//         </View>
-//     );
-// };
-// const formatValue = (date: Date, mode: 'date' | 'time' | 'datetime') => {
-//     try {
-//         switch (mode) {
-//             case 'time':
-//                 return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-//             case 'datetime':
-//                 return date.toLocaleString();
-//             default:
-//                 return date.toLocaleDateString();
-//         }
-//     } catch {
-//         return '';
-//     }
-// };
-// const styles = StyleSheet.create({
-//     container: {
-//         marginVertical: Scale.moderateScale(8),
-//     },
-//     label: {
-//         ...Typography.style.standardU(),
-//         color: Colors.textColor,
-//         marginBottom: Scale.moderateScale(8),
-//     },
-//     button: {
-//         borderWidth: 1,
-//         borderColor: Colors.primaryColor,
-//         borderRadius: Scale.moderateScale(6),
-//         paddingVertical: Scale.moderateScale(12),
-//         paddingHorizontal: Scale.moderateScale(10),
-//         flexDirection: 'row',
-//         alignItems: 'center',
-//     },
-//     text: {
-//         flex: 1,
-//         ...Typography.style.standardU(),
-//         color: Colors.textColor,
-//         textTransform: "none",
-//     },
-//     icon: {
-//         width: Scale.moderateScale(20),
-//         height: Scale.moderateScale(20),
-//         resizeMode: 'contain',
-//     },
-// });
-// export default DateTimePicker;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamnhz/rn-ui-toolkit",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -17,7 +17,6 @@
     "react": ">=19.0.0",
     "react-i18next": "^15.7.2",
     "react-native": ">=0.77.2",
-    "react-native-date-picker": "^5.0.13",
     "react-native-element-dropdown": "^2.12.4",
     "react-native-elements": "^3.4.3",
     "react-native-fast-image": "^8.6.3",
@@ -38,5 +37,9 @@
     "cpx": "^1.5.0",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "typescript": "^5.9.2"
+  },
+  "dependencies": {
+    "@react-native-community/datetimepicker": "^8.5.0",
+    "react-native-modal-datetime-picker": "^18.0.0"
   }
 }