@teamnhz/rn-ui-toolkit 1.0.1 → 1.0.3

package/dist/components/DateTimePicker/index.js

@@ -1,11 +1,16 @@
-import React, { useState } from 'react';
-import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
-import DatePicker from 'react-native-date-picker';
-import { useTranslation } from 'react-i18next';
-import { Colors, Scale, Typography } from '../../styles';
-const DateTimePicker = ({ value, onChange, label, intlType, mode = 'date', disabled = false, }) => {
-    const { t } = useTranslation(['common', 'validation', 'address', 'sell']);
-    const getLabel = () => {
+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
+    const getTranslatedLabel = () => {
         if (intlType) {
             const translated = t(label, { ns: intlType });
             if (translated !== label)
@@ -13,38 +18,259 @@ const DateTimePicker = ({ value, onChange, label, intlType, mode = 'date', disab
         }
         return label;
     };
-    const [open, setOpen] = useState(false);
-    return (React.createElement(View, { style: styles.container },
-        React.createElement(TouchableOpacity, { style: styles.button, disabled: disabled, onPress: () => setOpen(true) },
-            React.createElement(Text, { style: styles.text }, value ? formatValue(value, mode) : getLabel())),
-        React.createElement(DatePicker, { modal: true, open: open, date: value || new Date(), mode: mode, onConfirm: (val) => {
+    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) },
+            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: () => {
+                setOpen(false);
+                onCancel && onCancel();
+            } })));
 };
 const formatValue = (date, mode) => {
     try {
         switch (mode) {
-            case 'time':
-                return date.toLocaleTimeString();
-            case 'datetime':
+            case "time":
+                return date.toLocaleTimeString([], {
+                    hour: "2-digit",
+                    minute: "2-digit",
+                });
+            case "datetime":
                 return date.toLocaleString();
             default:
                 return date.toLocaleDateString();
         }
     }
     catch {
-        return ''; // fallback if date is invalid
+        return "";
     }
 };
 const styles = StyleSheet.create({
-    container: { marginVertical: Scale.moderateScale(5) },
+    label: {
+        ...Typography.style.standardU(),
+        color: Colors.textColor,
+        marginBottom: Scale.moderateScale(8),
+    },
     button: {
         borderWidth: 1,
         borderColor: Colors.primaryColor,
-        borderRadius: 5,
-        padding: 10,
+        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",
+    },
+    errorText: {
+        color: Colors.dangerRed,
+        fontSize: Scale.moderateScale(12),
+        marginTop: 3,
     },
-    text: { ...Typography.style.standardU(), color: Colors.primaryColor },
 });
 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/dist/components/Dividers/index.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
-import { ViewStyle } from 'react-native';
+import React from "react";
+import { ViewStyle } from "react-native";
 type DividerProps = {
     small?: boolean;
     disableMargin?: boolean;
     marginStyle?: ViewStyle;
 };
-declare const Dividers: ({ small, disableMargin, marginStyle, }: DividerProps) => React.JSX.Element;
+declare const Dividers: ({ small, disableMargin, marginStyle }: DividerProps) => React.JSX.Element;
 export default Dividers;

package/dist/components/Dividers/index.js

@@ -1,8 +1,8 @@
-import React from 'react';
-import { StyleSheet } from 'react-native';
-import { Divider } from 'react-native-elements';
-import { Colors, Scale } from '../../styles';
-const Dividers = ({ small, disableMargin, marginStyle, }) => (React.createElement(Divider, { style: [
+import React from "react";
+import { StyleSheet } from "react-native";
+import { Divider } from "react-native-elements";
+import { Colors, Scale } from "../../styles";
+const Dividers = ({ small, disableMargin, marginStyle }) => (React.createElement(Divider, { style: [
         small ? styles.dividerStyleSmall : styles.dividerStyleBig,
         !disableMargin ? styles.verticalMargin : null,
         marginStyle,
@@ -21,3 +21,39 @@ const styles = StyleSheet.create({
         marginVertical: Scale?.moderateScale(20),
     },
 });
+// import React from 'react';
+// import { StyleSheet, ViewStyle } from 'react-native';
+// import { Divider } from 'react-native-elements';
+// import { Colors, Scale } from '../../styles';
+// type DividerProps = {
+//   small?: boolean;
+//   disableMargin?: boolean;
+//   marginStyle?: ViewStyle;
+// };
+// const Dividers = ({
+//   small,
+//   disableMargin,
+//   marginStyle,
+// }: DividerProps) => (
+//   <Divider
+//     style={[
+//       small ? styles.dividerStyleSmall : styles.dividerStyleBig,
+//       !disableMargin ? styles.verticalMargin : null,
+//       marginStyle,
+//     ]}
+//   />
+// );
+// export default Dividers;
+// const styles = StyleSheet.create({
+//   dividerStyleBig: {
+//     backgroundColor: Colors.lightGrey,
+//     height: Scale?.moderateScale(10),
+//   },
+//   dividerStyleSmall: {
+//     backgroundColor: Colors.lightGrey,
+//     height: 1,
+//   },
+//   verticalMargin: {
+//     marginVertical: Scale?.moderateScale(20),
+//   },
+// });

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

@@ -1,10 +1,10 @@
 import React from "react";
-import { FlatListProps } from "react-native";
+import { FlatList, FlatListProps } from "react-native";
 interface HorizontalFlatListProps<ItemT> extends Omit<FlatListProps<ItemT>, "horizontal" | "renderItem"> {
     spacing?: number;
     renderItem: ({ item }: {
         item: ItemT;
     }) => React.ReactNode;
 }
-declare const HorizontalFlatList: <ItemT>({ spacing, renderItem, ...props }: HorizontalFlatListProps<ItemT>) => React.JSX.Element;
+declare const HorizontalFlatList: React.ForwardRefExoticComponent<HorizontalFlatListProps<unknown> & React.RefAttributes<FlatList<unknown>>>;
 export default HorizontalFlatList;

package/dist/components/HorizontalFlatList/index.js

@@ -1,14 +1,53 @@
-import React from "react";
-import { FlatList, View, StyleSheet } from "react-native";
-const HorizontalFlatList = ({ spacing = 10, renderItem, ...props }) => {
-    return (React.createElement(FlatList, { ...props, horizontal: true, showsHorizontalScrollIndicator: props.showsHorizontalScrollIndicator, keyExtractor: (item, index) => item.id?.toString() || index.toString(), renderItem: ({ item, index }) => (React.createElement(View, { style: [
+import React, { forwardRef } from "react";
+import { FlatList, View, StyleSheet, } from "react-native";
+const HorizontalFlatList = forwardRef(({ spacing = 10, renderItem, ...props }, ref) => {
+    return (React.createElement(FlatList, { ...props, ref: ref, horizontal: true, showsHorizontalScrollIndicator: props.showsHorizontalScrollIndicator ?? false, keyExtractor: (item, index) => item?.id?.toString() || index.toString(), renderItem: ({ item, index }) => (React.createElement(View, { style: [
                 styles.box,
-                { marginRight: index === (props.data?.length ?? 0) - 1 ? 0 : spacing },
+                {
+                    marginRight: index === (props.data?.length ?? 0) - 1 ? 0 : spacing,
+                },
             ] }, renderItem({ item }))) }));
-};
+});
+export default HorizontalFlatList;
 const styles = StyleSheet.create({
     box: {
-        flex: 1
+        flex: 1,
     },
 });
-export default HorizontalFlatList;
+// import React from "react";
+// import { FlatList, FlatListProps, View, StyleSheet } from "react-native";
+// import { Colors, Scale } from "../../styles"; // ✅ using your custom styles
+// interface HorizontalFlatListProps<ItemT>
+//   extends Omit<FlatListProps<ItemT>, "horizontal" | "renderItem"> {
+//   spacing?: number;
+//   renderItem: ({ item }: { item: ItemT }) => React.ReactNode;
+// }
+// const HorizontalFlatList = <ItemT,>({
+//   spacing = 10,
+//   renderItem,
+//   ...props
+// }: HorizontalFlatListProps<ItemT>) => {
+//   return (
+//     <FlatList
+//       {...props}
+//       horizontal
+//       showsHorizontalScrollIndicator={props.showsHorizontalScrollIndicator}
+//       keyExtractor={(item: any, index) => item.id?.toString() || index.toString()}
+//       renderItem={({ item, index }) => (
+//         <View
+//           style={[
+//             styles.box,
+//             { marginRight: index === (props.data?.length ?? 0) - 1 ? 0 : spacing },
+//           ]}
+//         >
+//           {renderItem({ item })}
+//         </View>
+//       )}
+//     />
+//   );
+// };
+// const styles = StyleSheet.create({
+//   box: {
+//     flex:1},
+// });
+// export default HorizontalFlatList;

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

@@ -1,5 +1,3 @@
-import React from 'react';
-declare const Image: ({ ...props }: {
-    [x: string]: any;
-}) => React.JSX.Element;
+import React from "react";
+declare const Image: (props: any) => React.JSX.Element;
 export default Image;

package/dist/components/Image/index.js

@@ -1,6 +1,24 @@
-import React from 'react';
-import FastImage from 'react-native-fast-image';
-const Image = ({ ...props }) => {
-    return React.createElement(FastImage, { ...props });
+import React, { useState } from "react";
+import { ActivityIndicator } from "react-native";
+import FastImage from "react-native-fast-image";
+const Image = (props) => {
+    const [loading, setLoading] = useState(true);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(FastImage, { ...props, onLoadStart: () => {
+                setLoading(true);
+            }, onLoadEnd: () => {
+                setLoading(false);
+            }, resizeMode: props.resizeMode }, loading ? (React.createElement(ActivityIndicator, { style: {
+                position: "absolute",
+                alignSelf: "center",
+                top: 0,
+                bottom: 0,
+            }, size: props.loaderSize || "small", color: props.loaderColor || "#919191" })) : null)));
 };
 export default Image;
+// import React from 'react';
+// import FastImage from 'react-native-fast-image';
+// const Image = ({ ...props }) => {
+//   return <FastImage {...props} />;
+// };
+// export default Image;

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

@@ -1,10 +1,17 @@
 import React from "react";
+import { ViewStyle, TextStyle, ImageStyle } from "react-native";
+type StyleProps = {
+    containerStyle?: ViewStyle;
+    rowStyle?: ViewStyle;
+    textStyle?: TextStyle;
+    iconStyle?: ImageStyle;
+};
 type Props = {
     mediaType: "photo" | "video";
     isMultiSelect?: boolean;
     onSuccess: (data: any) => void;
     visible: boolean;
     onClose: () => void;
-};
+} & StyleProps;
 declare const ImagePicker: React.FC<Props>;
 export default ImagePicker;