@teamnhz/rn-ui-toolkit 1.4.8 → 1.5.0

package/dist/@types/react-native-community-datetimepicker/index.d.ts

@@ -0,0 +1,29 @@
+declare module "@react-native-community/datetimepicker" {
+    import * as React from "react";
+    import { StyleProp, ViewStyle } from "react-native";
+    type DateTimePickerEvent = {
+        type: "set" | "dismissed";
+        nativeEvent: {
+            timestamp?: number;
+        };
+    };
+    type Display = "default" | "spinner" | "clock" | "calendar";
+    type AndroidVariant = "nativeAndroid" | "iosClone";
+    interface DateTimePickerProps {
+        value: Date;
+        mode?: "date" | "time" | "datetime";
+        display?: Display;
+        onChange: (event: DateTimePickerEvent, date?: Date) => void;
+        minimumDate?: Date;
+        maximumDate?: Date;
+        locale?: string;
+        timeZoneOffsetInMinutes?: number;
+        minuteInterval?: number;
+        textColor?: string;
+        style?: StyleProp<ViewStyle>;
+        is24Hour?: boolean;
+        androidVariant?: AndroidVariant;
+    }
+    export default class DateTimePicker extends React.Component<DateTimePickerProps> {
+    }
+}

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

@@ -1,27 +1,21 @@
-import React from "react";
-import { ImageSourcePropType, StyleProp, TextStyle, ViewStyle, ImageStyle } from "react-native";
+import React from 'react';
+import { StyleProp, TextStyle, ViewStyle, ImageStyle, ImageSourcePropType } from 'react-native';
 interface DateTimePickerProps {
     value: Date | null;
     onChange: (date: Date) => void;
     label?: string;
     placeholder?: string;
     intlType?: string;
-    mode?: "date" | "time" | "datetime";
+    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;
@@ -29,5 +23,5 @@ interface DateTimePickerProps {
     error?: string | boolean;
     errorTextStyle?: StyleProp<TextStyle>;
 }
-declare const DateTimePicker: React.FC<DateTimePickerProps>;
-export default DateTimePicker;
+declare const DateTimePickerComponent: React.FC<DateTimePickerProps>;
+export default DateTimePickerComponent;

package/dist/components/DateTimePicker/index.js

@@ -1,58 +1,119 @@
-import React, { useState } from "react";
-import { View, TouchableOpacity, Text, StyleSheet, Image, } from "react-native";
-import DatePicker from "react-native-date-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 { 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
+import React, { useEffect, useState } from 'react';
+import { View, TouchableOpacity, Text, StyleSheet, Image, Platform, Modal, } from 'react-native';
+import DateTimePicker from '@react-native-community/datetimepicker';
+import { useTranslation } from 'react-i18next';
+import { Colors, Scale, Typography, Images } from '../../styles';
+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, }) => {
+    const { t } = useTranslation(['common', 'validation', 'address', 'sell']);
+    const [show, setShow] = useState(false);
+    const [step, setStep] = useState('date');
+    const [tempDate, setTempDate] = useState(value || new Date());
+    useEffect(() => {
+        if (value) {
+            setTempDate(value);
+        }
+    }, [value]);
+    const defaultLeftIcon = mode === 'time' ? Images.ic_time : Images.ic_calendar;
     const getTranslatedLabel = () => {
-        if (intlType) {
+        if (intlType && label) {
             const translated = t(label, { ns: intlType });
             if (translated !== label)
                 return translated;
         }
         return label;
     };
+    const onChangeHandler = (event, selectedDate) => {
+        if (event.type === 'dismissed') {
+            setShow(false);
+            onCancel?.();
+            return;
+        }
+        if (mode === 'datetime') {
+            if (step === 'date') {
+                if (selectedDate) {
+                    setTempDate(selectedDate);
+                    if (Platform.OS === 'android') {
+                        // open time picker after date
+                        setStep('time');
+                    }
+                }
+                if (Platform.OS === 'ios') {
+                    // iOS can combine date+time with spinner, so just update temp
+                    if (selectedDate)
+                        setTempDate(selectedDate);
+                }
+            }
+            else {
+                if (selectedDate) {
+                    const finalDate = mergeDateAndTime(tempDate, selectedDate);
+                    onChange(finalDate);
+                }
+                setShow(false);
+                setStep('date');
+            }
+        }
+        else {
+            if (selectedDate) {
+                if (Platform.OS === 'ios') {
+                    setTempDate(selectedDate);
+                }
+                else {
+                    onChange(selectedDate);
+                }
+            }
+            setShow(Platform.OS === 'ios');
+        }
+    };
+    const mergeDateAndTime = (datePart, timePart) => {
+        const final = new Date(datePart);
+        final.setHours(timePart.getHours());
+        final.setMinutes(timePart.getMinutes());
+        final.setSeconds(timePart.getSeconds());
+        return final;
+    };
+    const handlePress = () => {
+        if (!disabled)
+            setShow(true);
+    };
     return (React.createElement(View, { style: containerStyle },
-        label ? (React.createElement(Text, { style: [styles.label, labelStyle] }, getTranslatedLabel())) : null,
+        label && (React.createElement(Text, { style: [styles.label, labelStyle] }, getTranslatedLabel())),
         React.createElement(TouchableOpacity, { style: [
                 styles.button,
                 pickerContainerStyle,
                 disabled && { backgroundColor: Colors.disabledGrey, borderWidth: 0 },
-            ], disabled: disabled, onPress: () => setOpen(true) },
-            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();
-            } })));
+            ], disabled: disabled, onPress: handlePress },
+            leftIconShow && (React.createElement(Image, { source: leftIcon || defaultLeftIcon, style: [styles.icon, styles.leftIcon, 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, styles.rightIcon, rightImageStyle] }))),
+        typeof error === 'string' && error.length > 0 && (React.createElement(Text, { style: [styles.errorText, errorTextStyle] }, error)),
+        show && Platform.OS === 'android' && (React.createElement(DateTimePicker, { value: value || new Date(), mode: mode === 'datetime' ? step : mode, minimumDate: minimumDate, maximumDate: maximumDate, onChange: onChangeHandler })),
+        Platform.OS === 'ios' && (React.createElement(Modal, { transparent: true, animationType: "slide", visible: show, onRequestClose: () => setShow(false) },
+            React.createElement(View, { style: styles.overlay },
+                React.createElement(View, { style: styles.container },
+                    React.createElement(TouchableOpacity, { style: styles.doneBtn, onPress: () => {
+                            setShow(false);
+                            if (tempDate)
+                                onChange(tempDate);
+                        } },
+                        React.createElement(Text, { style: styles.doneText }, "Done")),
+                    React.createElement(DateTimePicker, { value: tempDate, mode: mode, minimumDate: minimumDate, maximumDate: maximumDate, display: "spinner", onChange: (e, d) => d && setTempDate(d) })))))));
 };
 const formatValue = (date, mode) => {
     try {
         switch (mode) {
-            case "time":
+            case 'time':
                 return date.toLocaleTimeString([], {
-                    hour: "2-digit",
-                    minute: "2-digit",
+                    hour: '2-digit',
+                    minute: '2-digit',
                 });
-            case "datetime":
+            case 'datetime':
                 return date.toLocaleString();
             default:
                 return date.toLocaleDateString();
         }
     }
     catch {
-        return "";
+        return '';
     }
 };
 const styles = StyleSheet.create({
@@ -63,214 +124,52 @@ const styles = StyleSheet.create({
     },
     button: {
         borderWidth: 1,
-        borderColor: Colors.primaryColor,
+        borderColor: Colors.black,
         borderRadius: Scale.moderateScale(6),
         paddingVertical: Scale.moderateScale(12),
         paddingHorizontal: Scale.moderateScale(10),
-        flexDirection: "row",
-        alignItems: "center",
+        flexDirection: 'row',
+        alignItems: 'center',
     },
     text: {
         flex: 1,
         ...Typography.style.standardU(),
         color: Colors.textColor,
-        textTransform: "none",
+        textTransform: 'none',
     },
     icon: {
         width: Scale.moderateScale(20),
         height: Scale.moderateScale(20),
-        resizeMode: "contain",
+        resizeMode: 'contain',
+    },
+    leftIcon: {
+        marginRight: Scale.moderateScale(8),
+    },
+    rightIcon: {
+        marginLeft: Scale.moderateScale(8),
     },
     errorText: {
         color: Colors.dangerRed,
         fontSize: Scale.moderateScale(12),
         marginTop: 3,
     },
+    overlay: {
+        flex: 1,
+        justifyContent: 'flex-end',
+        backgroundColor: 'rgba(0,0,0,0.3)',
+    },
+    container: {
+        backgroundColor: Colors.white,
+        paddingBottom: 20,
+    },
+    doneBtn: {
+        alignSelf: 'flex-end',
+        padding: 12,
+    },
+    doneText: {
+        color: Colors.primaryColor,
+        fontSize: 16,
+        fontWeight: '600',
+    },
 });
-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;
+export default DateTimePickerComponent;

package/dist/styles/appConfig.js

@@ -1,22 +1,3 @@
-// import { setColorConfig } from "./colors";
-// import { setTypographyConfig } from "./typography";
-// export type AppConfig = {
-//   colors?: Record<string, string>;
-//   fonts?: any;
-//   sizes?: any;
-//   lang?: any;
-//   scaleFn?: any;
-// };
-// export function setAppConfig(config: AppConfig) {
-//   if (config.colors) setColorConfig(config.colors);
-//   setTypographyConfig({
-//     fonts: config.fonts,
-//     sizes: config.sizes,
-//     lang: config.lang,
-//     scaleFn: config.scaleFn,
-//   });
-// }
-// appConfig.js
 let appLanguage = "en"; // en | hi
 let customFonts = {
     en: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamnhz/rn-ui-toolkit",
-  "version": "1.4.8",
+  "version": "1.5.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -17,13 +17,16 @@
     "react": ">=19.0.0",
     "react-i18next": "^15.7.2",
     "react-native": ">=0.77.2",
-    "react-native-date-picker": "^5.0.13",
+    "react-native-compressor": "^1.13.0",
     "react-native-element-dropdown": "^2.12.4",
     "react-native-elements": "^3.4.3",
+    "react-native-fs": "^2.20.0",
     "react-native-gesture-handler": "^2.26.0",
     "react-native-image-crop-picker": "^0.51.1",
     "react-native-image-picker": "^8.2.0",
+    "react-native-image-resizer": "^1.4.5",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
+    "react-native-linear-gradient": "^2.8.3",
     "react-native-modal": "^14.0.0-rc.1",
     "react-native-permissions": "^4.1.5",
     "react-native-reanimated": "^3.17.5",
@@ -31,10 +34,7 @@
     "react-native-svg": "^15.12.1",
     "react-native-vector-icons": "^10.3.0",
     "react-native-video-trim": "^3.0.9",
-    "react-native-compressor": "^1.13.0",
-    "react-native-fs": "^2.20.0",
-    "react-native-linear-gradient": "^2.8.3",
-    "react-native-image-resizer":"^1.4.5"
+    "@react-native-community/datetimepicker": "^8.5.0"
   },
   "devDependencies": {
     "@react-native-documents/picker": "^10.1.5",