@teamnhz/rn-ui-toolkit 1.2.2 → 1.2.4

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

@@ -1,10 +1,18 @@
 import React from "react";
 type Props = {
     mediaType: "photo" | "video";
+    isMultiSelect?: boolean;
+    onSuccess: (data: any) => void;
     visible: boolean;
-    onSuccess: (res: any) => void;
     onClose: () => void;
     enableCompression?: boolean;
+    imageCompressionOptions?: {
+        maxWidth?: number;
+        quality?: number;
+    };
+    videoCompressionOptions?: {
+        compressionMethod?: "auto" | "manual";
+    };
 };
 declare const ImagePicker: React.FC<Props>;
 export default ImagePicker;

package/dist/components/ImagePicker/index.js

@@ -1,164 +1,498 @@
-import React from "react";
-import { View, Text, TouchableOpacity, StyleSheet, Image, } from "react-native";
+// // import React, { useCallback } from "react";
+// // import {
+// //   View,
+// //   Text,
+// //   TouchableOpacity,
+// //   StyleSheet,
+// //   Image,
+// //   Alert,
+// //   ViewStyle,
+// //   TextStyle,
+// //   ImageStyle,
+// // } from "react-native";
+// // import { BottomSheet, Dividers } from "../index";
+// // import { launchCamera, launchImageLibrary } from "react-native-image-picker";
+// // import ImageCropPicker from "react-native-image-crop-picker";
+// // import { Colors, Images, Scale, Typography } from "../../styles";
+// // 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;
+// // const ImagePicker: React.FC<Props> = ({
+// //   mediaType,
+// //   isMultiSelect = false,
+// //   onSuccess,
+// //   visible,
+// //   onClose,
+// //   containerStyle,
+// //   rowStyle,
+// //   textStyle,
+// //   iconStyle,
+// // }) => {
+// //   const onComplete = useCallback(
+// //     (data: any) => {
+// //       onSuccess(data);
+// //       onClose();
+// //     },
+// //     [onSuccess, onClose]
+// //   );
+// //   const onCamera = () => {
+// //     if (mediaType === "photo") {
+// //       if (isMultiSelect) {
+// //         ImageCropPicker.openCamera({ mediaType: "photo" })
+// //           .then((response) => onComplete([response]))
+// //           .catch(() => {});
+// //       } else {
+// //         ImageCropPicker.openCamera({ mediaType: "photo" })
+// //           .then((response) =>
+// //             ImageCropPicker.openCropper({
+// //               path: response?.path,
+// //               width: response?.width,
+// //               height: response?.height,
+// //               mediaType: "photo",
+// //               freeStyleCropEnabled: true,
+// //             }).then(onComplete)
+// //           )
+// //           .catch(() => {});
+// //       }
+// //     } else {
+// //       launchCamera({ mediaType: "video" }, (response) => {
+// //         if (response?.assets) {
+// //           onComplete({
+// //             path: response.assets[0]?.uri,
+// //             duration: response.assets[0]?.duration,
+// //           });
+// //         }
+// //       });
+// //     }
+// //   };
+// //   const onGallery = () => {
+// //     if (mediaType === "photo") {
+// //       if (isMultiSelect) {
+// //         ImageCropPicker.openPicker({
+// //           mediaType: "photo",
+// //           multiple: true,
+// //           maxFiles: 5,
+// //         })
+// //           .then((images) => {
+// //             if (images.length > 5) {
+// //               Alert.alert(
+// //                 "Limit Exceeded",
+// //                 "You can only select up to 5 images."
+// //               );
+// //             } else {
+// //               onComplete(images);
+// //             }
+// //           })
+// //           .catch(() => {});
+// //       } else {
+// //         ImageCropPicker.openPicker({ mediaType: "photo" })
+// //           .then((response) =>
+// //             ImageCropPicker.openCropper({
+// //               path: response?.path,
+// //               width: response?.width,
+// //               height: response?.height,
+// //               mediaType: "photo",
+// //               freeStyleCropEnabled: true,
+// //             }).then(onComplete)
+// //           )
+// //           .catch(() => {});
+// //       }
+// //     } else {
+// //       launchImageLibrary({ mediaType: "video" }, (result) => {
+// //         if (result?.assets) {
+// //           onComplete({
+// //             path: result.assets[0]?.uri,
+// //             duration: result.assets[0]?.duration,
+// //           });
+// //         }
+// //       });
+// //     }
+// //   };
+// //   return (
+// //     <BottomSheet visible={visible} onClose={onClose} height={230}>
+// //       <View style={[styles.container, containerStyle]}>
+// //         {/* Camera */}
+// //         <TouchableOpacity style={[styles.row, rowStyle]} onPress={onCamera}>
+// //           <Image source={Images.video_icon} style={[styles.icon, iconStyle]} />
+// //           <Text style={[styles.text, textStyle]}>Camera</Text>
+// //         </TouchableOpacity>
+// //         <Dividers small />
+// //         {/* Gallery */}
+// //         <TouchableOpacity style={[styles.row, rowStyle]} onPress={onGallery}>
+// //           <Image source={Images.image_icon} style={[styles.icon, iconStyle]} />
+// //           <Text style={[styles.text, textStyle]}>Gallery</Text>
+// //         </TouchableOpacity>
+// //         <Dividers small />
+// //         {/* Cancel */}
+// //         <TouchableOpacity style={[styles.row, rowStyle]} onPress={onClose}>
+// //           <Image source={Images.cancel} style={[styles.icon, iconStyle]} />
+// //           <Text style={[styles.text, textStyle]}>Cancel</Text>
+// //         </TouchableOpacity>
+// //       </View>
+// //     </BottomSheet>
+// //   );
+// // };
+// // export default ImagePicker;
+// // const styles = StyleSheet.create({
+// //   container: { flex: 1, padding: 16 },
+// //   row: {
+// //     flexDirection: "row",
+// //     alignItems: "center",
+// //   },
+// //   text: { ...Typography.style.standardU(), color: Colors.white },
+// //   icon: {
+// //     width: Scale.moderateScale(20),
+// //     height: Scale.moderateScale(20),
+// //     marginRight: 10,
+// //     tintColor: Colors.white,
+// //   },
+// // });
+// import React, { useCallback } from "react";
+// import {
+//   View,
+//   Text,
+//   TouchableOpacity,
+//   StyleSheet,
+//   Image,
+//   Alert,
+// } from "react-native";
+// import { BottomSheet, Dividers } from "../index";
+// import { launchCamera, launchImageLibrary } from "react-native-image-picker";
+// import ImageCropPicker from "react-native-image-crop-picker";
+// import { Colors, Images, Scale, Typography } from "../../styles";
+// // 👇 Import your permission utilities
+// import {
+//   cameraPermissions,
+//   galleryPermissions,
+// } from "../../utils/permissions"; // ✅ Make sure path is correct
+// type Props = {
+//   mediaType: "photo" | "video";
+//   isMultiSelect?: boolean;
+//   onSuccess: (data: any) => void;
+//   visible: boolean;
+//   onClose: () => void;
+// };
+// const ImagePicker: React.FC<Props> = ({
+//   mediaType,
+//   isMultiSelect = false,
+//   onSuccess,
+//   visible,
+//   onClose,
+// }) => {
+//   // ✅ Success handler
+//   const onComplete = useCallback(
+//     (data: any) => {
+//       onSuccess(data);
+//       onClose();
+//     },
+//     [onSuccess, onClose]
+//   );
+//   // ✅ CAMERA HANDLER with permission check
+//   const handleCamera = async () => {
+//     await cameraPermissions(async (granted: boolean) => {
+//       if (!granted) return; // ❌ Permission denied, handled by your alert
+//       if (mediaType === "photo") {
+//         if (isMultiSelect) {
+//           // single capture, multiple not supported directly from camera
+//           ImageCropPicker.openCamera({ mediaType: "photo" })
+//             .then((response) => onComplete([response]))
+//             .catch(() => {});
+//         } else {
+//           ImageCropPicker.openCamera({ mediaType: "photo" })
+//             .then((response) =>
+//               ImageCropPicker.openCropper({
+//                 path: response?.path,
+//                 width: response?.width,
+//                 height: response?.height,
+//                 mediaType: "photo",
+//                 freeStyleCropEnabled: true,
+//               }).then(onComplete)
+//             )
+//             .catch(() => {});
+//         }
+//       } else {
+//         // 🎥 VIDEO CAPTURE
+//         launchCamera({ mediaType: "video" }, (response) => {
+//           if (response?.assets?.length) {
+//             onComplete({
+//               path: response.assets[0]?.uri,
+//               duration: response.assets[0]?.duration,
+//             });
+//           }
+//         });
+//       }
+//     });
+//   };
+//   // ✅ GALLERY HANDLER with permission check
+//   const handleGallery = async () => {
+//     await galleryPermissions(async (granted: boolean) => {
+//       if (!granted) return; // ❌ Permission denied, handled by your alert
+//       if (mediaType === "photo") {
+//         if (isMultiSelect) {
+//           ImageCropPicker.openPicker({
+//             mediaType: "photo",
+//             multiple: true,
+//             maxFiles: 5,
+//           })
+//             .then((images) => {
+//               if (images.length > 5) {
+//                 Alert.alert(
+//                   "Limit Exceeded",
+//                   "You can only select up to 5 images."
+//                 );
+//               } else {
+//                 onComplete(images);
+//               }
+//             })
+//             .catch(() => {});
+//         } else {
+//           ImageCropPicker.openPicker({ mediaType: "photo" })
+//             .then((response) =>
+//               ImageCropPicker.openCropper({
+//                 path: response?.path,
+//                 width: response?.width,
+//                 height: response?.height,
+//                 mediaType: "photo",
+//                 freeStyleCropEnabled: true,
+//               }).then(onComplete)
+//             )
+//             .catch(() => {});
+//         }
+//       } else {
+//         // 🎥 VIDEO FROM GALLERY
+//         launchImageLibrary({ mediaType: "video" }, (result) => {
+//           if (result?.assets?.length) {
+//             onComplete({
+//               path: result.assets[0]?.uri,
+//               duration: result.assets[0]?.duration,
+//             });
+//           }
+//         });
+//       }
+//     });
+//   };
+//   return (
+//     <BottomSheet visible={visible} onClose={onClose} height={230}>
+//       <View style={styles.container}>
+//         {/* 📸 Camera */}
+//         <TouchableOpacity style={styles.row} onPress={handleCamera}>
+//           <Image source={Images.video_icon} style={styles.icon} />
+//           <Text style={styles.text}>Camera</Text>
+//         </TouchableOpacity>
+//         <Dividers small />
+//         {/* 🖼️ Gallery */}
+//         <TouchableOpacity style={styles.row} onPress={handleGallery}>
+//           <Image source={Images.image_icon} style={styles.icon} />
+//           <Text style={styles.text}>Gallery</Text>
+//         </TouchableOpacity>
+//         <Dividers small />
+//         {/* ❌ Cancel */}
+//         <TouchableOpacity style={styles.row} onPress={onClose}>
+//           <Image source={Images.cancel} style={styles.icon} />
+//           <Text style={styles.text}>Cancel</Text>
+//         </TouchableOpacity>
+//       </View>
+//     </BottomSheet>
+//   );
+// };
+// export default ImagePicker;
+// const styles = StyleSheet.create({
+//   container: { flex: 1, padding: 16 },
+//   row: {
+//     flexDirection: "row",
+//     alignItems: "center",
+//   },
+//   text: { ...Typography.style.standardU(), color: Colors.white },
+//   icon: {
+//     width: Scale.moderateScale(20),
+//     height: Scale.moderateScale(20),
+//     marginRight: 10,
+//     tintColor: Colors.white,
+//   },
+// });
+import React, { useCallback } from "react";
+import { View, Text, TouchableOpacity, StyleSheet, Image, Alert, } from "react-native";
 import { BottomSheet, Dividers } from "../index";
 import { launchCamera, launchImageLibrary } from "react-native-image-picker";
 import ImageCropPicker from "react-native-image-crop-picker";
 import { Image as ImageCompressor, Video as VideoCompressor, } from "react-native-compressor";
-import { cameraPermissions, galleryPermissions, checkMicroPhonePermission, } from "../../utils/permissions";
+import RNFS from "react-native-fs";
 import { Colors, Images, Scale, Typography } from "../../styles";
-//--------------------------------------
-// 🟦 FORMAT PATH (always file:// format)
-//--------------------------------------
-const normalizePath = (p) => {
-    if (!p)
-        return "";
-    return p.startsWith("file://") ? p : `file://${p}`;
-};
-//--------------------------------------
-// 🟦 FINAL RESPONSE FORMAT
-//--------------------------------------
-const buildResponse = (raw, compressed) => ({
-    path: normalizePath(compressed || raw?.path || raw?.uri),
-    originalPath: normalizePath(raw?.path || raw?.uri),
-    fileName: raw?.fileName || "",
-    type: raw?.type || "",
-    duration: raw?.duration || undefined,
-});
-//--------------------------------------
-// 🟦 MAIN COMPONENT
-//--------------------------------------
-const ImagePicker = ({ mediaType, visible, onSuccess, onClose, enableCompression = true, }) => {
-    //--------------------------------------
-    // SEND RAW (loader ON)
-    //--------------------------------------
-    const sendRaw = (raw) => {
-        onSuccess({
-            loading: true,
-            data: buildResponse(raw),
-        });
-    };
-    //--------------------------------------
-    // SEND FINAL (loader OFF)
-    //--------------------------------------
-    const sendFinal = (raw, compressed) => {
-        onSuccess({
-            loading: false,
-            data: buildResponse(raw, compressed),
-        });
-    };
-    //--------------------------------------
-    // COMPRESS IMAGE
-    //--------------------------------------
-    const compressImage = async (path) => {
+// Import your permission utilities
+import { cameraPermissions, galleryPermissions, checkMicroPhonePermission, } from "../../utils/permissions";
+const ImagePicker = ({ mediaType, isMultiSelect = false, onSuccess, visible, onClose, enableCompression = true, imageCompressionOptions = { maxWidth: 1080, quality: 0.7 }, videoCompressionOptions = { compressionMethod: "auto" }, }) => {
+    // Success handler
+    const onComplete = useCallback((data) => {
+        onSuccess(data);
+        onClose();
+    }, [onSuccess, onClose]);
+    // Helper: Compress Image
+    const compressImage = async (imagePath) => {
+        if (!enableCompression)
+            return imagePath;
         try {
-            return await ImageCompressor.compress(path, {
-                maxWidth: 1080,
-                quality: 0.7,
+            const compressedImage = await ImageCompressor.compress(imagePath, {
+                maxWidth: imageCompressionOptions.maxWidth,
+                quality: imageCompressionOptions.quality,
             });
+            // Log compressed size (optional)
+            const stats = await RNFS.stat(compressedImage.replace("file://", ""));
+            const sizeInMB = stats.size / (1024 * 1024);
+            console.log("Compressed Image Size (MB):", sizeInMB);
+            return compressedImage;
         }
-        catch {
-            return path;
+        catch (error) {
+            console.error("Image compression error:", error);
+            return imagePath; // Return original if compression fails
         }
     };
-    //--------------------------------------
-    // COMPRESS VIDEO
-    //--------------------------------------
-    const compressVideo = async (uri) => {
+    // Helper: Compress Video
+    const compressVideo = async (videoUri) => {
+        if (!enableCompression)
+            return videoUri;
         try {
-            return await VideoCompressor.compress(uri, {
-                compressionMethod: "auto",
+            const compressedVideo = await VideoCompressor.compress(videoUri, {
+                compressionMethod: videoCompressionOptions.compressionMethod,
             });
+            // Log compressed size (optional)
+            const stats = await RNFS.stat(compressedVideo.replace("file://", ""));
+            const sizeInMB = stats.size / (1024 * 1024);
+            console.log("Compressed Video Size (MB):", sizeInMB);
+            return compressedVideo;
         }
-        catch {
-            return uri;
+        catch (error) {
+            console.error("Video compression error:", error);
+            return videoUri; // Return original if compression fails
         }
     };
-    //--------------------------------------
-    // CAMERA HANDLER
-    //--------------------------------------
+    // CAMERA HANDLER with permission check and compression
     const handleCamera = async () => {
-        onClose(); // 🔥 CLOSE FIRST (best UX)
         await cameraPermissions(async (granted) => {
             if (!granted)
                 return;
-            // PHOTO
             if (mediaType === "photo") {
                 try {
-                    const img = await ImageCropPicker.openCamera({
+                    const response = await ImageCropPicker.openCamera({
                         mediaType: "photo",
-                        cropping: true,
                     });
-                    sendRaw(img);
-                    const compressed = enableCompression
-                        ? await compressImage(img.path)
-                        : img.path;
-                    sendFinal(img, compressed);
+                    if (isMultiSelect) {
+                        // Single capture for multi-select mode
+                        const compressedPath = await compressImage(response.path);
+                        onComplete([{ ...response, path: compressedPath }]);
+                    }
+                    else {
+                        // Crop and compress single image
+                        const cropped = await ImageCropPicker.openCropper({
+                            path: response?.path,
+                            width: response?.width,
+                            height: response?.height,
+                            mediaType: "photo",
+                            freeStyleCropEnabled: true,
+                        });
+                        const compressedPath = await compressImage(cropped.path);
+                        onComplete({ ...cropped, path: compressedPath });
+                    }
                 }
-                catch (e) {
-                    console.log("Camera Photo Error:", e);
+                catch (error) {
+                    console.log("Camera cancelled or error:", error);
                 }
             }
-            // VIDEO
             else {
-                const mic = await checkMicroPhonePermission();
-                if (!mic)
+                // VIDEO CAPTURE - check microphone permission first
+                const micPermission = await checkMicroPhonePermission();
+                if (!micPermission) {
+                    Alert.alert("Microphone Permission Required", "Please enable microphone access to record videos.");
                     return;
-                launchCamera({ mediaType: "video" }, async (res) => {
-                    const raw = res?.assets?.[0];
-                    if (!raw)
-                        return;
-                    sendRaw(raw);
-                    const compressed = enableCompression
-                        ? await compressVideo(raw.uri)
-                        : raw.uri;
-                    sendFinal(raw, compressed);
+                }
+                launchCamera({
+                    mediaType: "video",
+                    durationLimit: 60,
+                    videoQuality: "high",
+                }, async (response) => {
+                    if (response?.assets?.length) {
+                        const videoUri = response.assets[0]?.uri;
+                        const compressedPath = await compressVideo(videoUri);
+                        onComplete({
+                            path: compressedPath,
+                            duration: response.assets[0]?.duration,
+                        });
+                    }
                 });
             }
         });
     };
-    //--------------------------------------
-    // GALLERY HANDLER
-    //--------------------------------------
+    // GALLERY HANDLER with permission check and compression
     const handleGallery = async () => {
-        onClose(); // 🔥 CLOSE IMMEDIATELY
         await galleryPermissions(async (granted) => {
             if (!granted)
                 return;
-            // PHOTO (Crop Picker)
             if (mediaType === "photo") {
                 try {
-                    const img = await ImageCropPicker.openPicker({
-                        mediaType: "photo",
-                        cropping: true,
-                    });
-                    sendRaw(img);
-                    const compressed = enableCompression
-                        ? await compressImage(img.path)
-                        : img.path;
-                    sendFinal(img, compressed);
+                    if (isMultiSelect) {
+                        const images = await ImageCropPicker.openPicker({
+                            mediaType: "photo",
+                            multiple: true,
+                            maxFiles: 5,
+                        });
+                        if (images.length > 5) {
+                            Alert.alert("Limit Exceeded", "You can only select up to 5 images.");
+                            return;
+                        }
+                        // Compress multiple images
+                        const compressedImages = await Promise.all(images.map(async (img) => ({
+                            ...img,
+                            path: await compressImage(img.path),
+                        })));
+                        onComplete(compressedImages);
+                    }
+                    else {
+                        // Single image with crop
+                        const response = await ImageCropPicker.openPicker({
+                            mediaType: "photo",
+                        });
+                        const cropped = await ImageCropPicker.openCropper({
+                            path: response?.path,
+                            width: response?.width,
+                            height: response?.height,
+                            mediaType: "photo",
+                            freeStyleCropEnabled: true,
+                        });
+                        const compressedPath = await compressImage(cropped.path);
+                        onComplete({ ...cropped, path: compressedPath });
+                    }
                 }
-                catch (e) {
-                    console.log("Gallery Photo Error:", e);
+                catch (error) {
+                    console.log("Gallery cancelled or error:", error);
                 }
             }
-            // VIDEO
             else {
-                launchImageLibrary({ mediaType: "video" }, async (res) => {
-                    const raw = res?.assets?.[0];
-                    if (!raw)
-                        return;
-                    sendRaw(raw);
-                    const compressed = enableCompression
-                        ? await compressVideo(raw.uri)
-                        : raw.uri;
-                    sendFinal(raw, compressed);
+                // VIDEO FROM GALLERY
+                launchImageLibrary({
+                    mediaType: "video",
+                    assetRepresentationMode: "current",
+                }, async (result) => {
+                    if (result?.assets?.length) {
+                        const videoUri = result.assets[0]?.uri;
+                        const compressedPath = await compressVideo(videoUri);
+                        onComplete({
+                            path: compressedPath,
+                            duration: result.assets[0]?.duration,
+                        });
+                    }
                 });
             }
         });
     };
-    //--------------------------------------
-    // RETURN UI
-    //--------------------------------------
     return (React.createElement(BottomSheet, { visible: visible, onClose: onClose, height: 230 },
         React.createElement(View, { style: styles.container },
             React.createElement(TouchableOpacity, { style: styles.row, onPress: handleCamera },
@@ -174,23 +508,13 @@ const ImagePicker = ({ mediaType, visible, onSuccess, onClose, enableCompression
                 React.createElement(Text, { style: styles.text }, "Cancel")))));
 };
 export default ImagePicker;
-//--------------------------------------
-// STYLES
-//--------------------------------------
 const styles = StyleSheet.create({
     container: { flex: 1, padding: 16 },
     row: {
         flexDirection: "row",
         alignItems: "center",
-        justifyContent: "center", // 🔥 TEXT CENTERED
-        paddingVertical: 14,
-    },
-    text: {
-        ...Typography.style.standardU(),
-        color: Colors.white,
-        marginLeft: 10,
-        textAlign: "center",
     },
+    text: { ...Typography.style.standardU(), color: Colors.white },
     icon: {
         width: Scale.moderateScale(20),
         height: Scale.moderateScale(20),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamnhz/rn-ui-toolkit",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [