@teamnhz/rn-ui-toolkit 1.1.8 → 1.2.0

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

@@ -2,7 +2,7 @@ import React from "react";
 type Props = {
     mediaType: "photo" | "video";
     isMultiSelect?: boolean;
-    onSuccess: (response: any) => void;
+    onSuccess: (res: any) => void;
     visible: boolean;
     onClose: () => void;
     enableCompression?: boolean;

package/dist/components/ImagePicker/index.js

@@ -1,378 +1,152 @@
-// 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 RNFS from "react-native-fs";
-// import { Colors, Images, Scale, Typography } from "../../styles";
-// // Import your permission utilities
-// import {
-//   cameraPermissions,
-//   galleryPermissions,
-//   checkMicroPhonePermission,
-// } from "../../utils/permissions";
-// type Props = {
-//   mediaType: "photo" | "video";
-//   isMultiSelect?: boolean;
-//   onSuccess: (data: any) => void;
-//   visible: boolean;
-//   onClose: () => void;
-//   // Compression options
-//   enableCompression?: boolean;
-//   imageCompressionOptions?: {
-//     maxWidth?: number;
-//     quality?: number;
-//   };
-//   videoCompressionOptions?: {
-//     compressionMethod?: "auto" | "manual";
-//   };
-// };
-// const ImagePicker: React.FC<Props> = ({
-//   mediaType,
-//   isMultiSelect = false,
-//   onSuccess,
-//   visible,
-//   onClose,
-//   enableCompression = true,
-//   imageCompressionOptions = { maxWidth: 1080, quality: 0.7 },
-//   videoCompressionOptions = { compressionMethod: "auto" },
-// }) => {
-//   // Success handler
-//   const onComplete = useCallback(
-//     (data: any) => {
-//       onSuccess(data);
-//       onClose();
-//     },
-//     [onSuccess, onClose]
-//   );
-//   // Helper: Compress Image
-//   const compressImage = async (imagePath: string) => {
-//     if (!enableCompression) return imagePath;
-//     try {
-//       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 (error) {
-//       console.error("Image compression error:", error);
-//       return imagePath; // Return original if compression fails
-//     }
-//   };
-//   // Helper: Compress Video
-//   const compressVideo = async (videoUri: string) => {
-//     if (!enableCompression) return videoUri;
-//     try {
-//       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 (error) {
-//       console.error("Video compression error:", error);
-//       return videoUri; // Return original if compression fails
-//     }
-//   };
-//   // CAMERA HANDLER with permission check and compression
-//   const handleCamera = async () => {
-//     await cameraPermissions(async (granted: boolean) => {
-//       if (!granted) return;
-//       if (mediaType === "photo") {
-//         try {
-//           const response = await ImageCropPicker.openCamera({
-//             mediaType: "photo",
-//           });
-//           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 (error) {
-//           console.log("Camera cancelled or error:", error);
-//         }
-//       } else {
-//         // 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",
-//             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 with permission check and compression
-//   const handleGallery = async () => {
-//     await galleryPermissions(async (granted: boolean) => {
-//       if (!granted) return;
-//       if (mediaType === "photo") {
-//         try {
-//           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 (error) {
-//           console.log("Gallery cancelled or error:", error);
-//         }
-//       } else {
-//         // 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 (
-//     <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 from "react";
 import { View, Text, TouchableOpacity, StyleSheet, Image, } 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 { Colors, Images, Scale, Typography } from "../../styles";
 import { cameraPermissions, galleryPermissions, checkMicroPhonePermission, } from "../../utils/permissions";
-const ImagePicker = ({ mediaType, isMultiSelect = false, onSuccess, visible, onClose, enableCompression = true, }) => {
-    // Close modal + start loader in parent
-    const sendRawAndClose = (rawData) => {
-        onClose();
-        onSuccess({ loading: true, data: rawData });
+import { Colors, Images, Scale, Typography } from "../../styles";
+//--------------------------------------
+// 🟦 FORMAT RESPONSE (single standard)
+//--------------------------------------
+const normalizePath = (p) => p ? p.replace("file://", "") : "";
+const buildResponse = (raw, compressed) => {
+    return {
+        path: normalizePath(compressed || raw?.path || raw?.uri),
+        originalPath: normalizePath(raw?.path || raw?.uri),
+        fileName: raw?.fileName || "",
+        type: raw?.type || "",
+        duration: raw?.duration || undefined,
     };
-    // After compression finished
-    const sendFinalCompressed = (compressed) => {
-        onSuccess({ loading: false, data: compressed });
+};
+const ImagePicker = ({ mediaType, onSuccess, visible, onClose, enableCompression = true, }) => {
+    //--------------------------------------
+    // 🟦 SEND RAW (loading true)
+    //--------------------------------------
+    const sendRaw = (raw) => {
+        onSuccess({
+            loading: true,
+            data: buildResponse(raw),
+        });
     };
+    //--------------------------------------
+    // 🟦 SEND FINAL COMPRESSED
+    //--------------------------------------
+    const sendFinal = (raw, compressedPath) => {
+        onSuccess({
+            loading: false,
+            data: buildResponse(raw, compressedPath),
+        });
+    };
+    //--------------------------------------
+    // 🟦 COMPRESS IMAGE
+    //--------------------------------------
     const compressImage = async (path) => {
         try {
-            const compressed = await ImageCompressor.compress(path, {
+            return await ImageCompressor.compress(path, {
                 maxWidth: 1080,
                 quality: 0.7,
             });
-            return compressed;
         }
-        catch (e) {
+        catch {
             return path;
         }
     };
+    //--------------------------------------
+    // 🟦 COMPRESS VIDEO
+    //--------------------------------------
     const compressVideo = async (uri) => {
         try {
-            const compressed = await VideoCompressor.compress(uri, {
+            return await VideoCompressor.compress(uri, {
                 compressionMethod: "auto",
             });
-            return compressed;
         }
-        catch (e) {
+        catch {
             return uri;
         }
     };
-    // ---------- CAMERA ----------
+    //--------------------------------------
+    // 🟦 TAKE PHOTO / VIDEO FROM CAMERA
+    //--------------------------------------
     const handleCamera = async () => {
         await cameraPermissions(async (granted) => {
             if (!granted)
                 return;
+            // PHOTO FROM CAMERA
             if (mediaType === "photo") {
                 try {
-                    const picked = await ImageCropPicker.openCamera({
+                    const img = await ImageCropPicker.openCamera({
                         mediaType: "photo",
+                        cropping: true,
                     });
-                    sendRawAndClose(picked); // CLOSE MODAL + START LOADER
-                    setTimeout(async () => {
-                        const compressedPath = await compressImage(picked.path);
-                        sendFinalCompressed({ ...picked, path: compressedPath });
-                    }, 10);
+                    sendRaw(img);
+                    const compressed = enableCompression
+                        ? await compressImage(img.path)
+                        : img.path;
+                    sendFinal(img, compressed);
                 }
-                catch (err) {
-                    console.log(err);
+                catch (e) {
+                    console.log("Camera Photo Error", e);
                 }
             }
+            // VIDEO FROM CAMERA
             else {
-                // VIDEO
                 const mic = await checkMicroPhonePermission();
                 if (!mic)
                     return;
-                launchCamera({ mediaType: "video", durationLimit: 60, videoQuality: "high" }, (res) => {
-                    if (!res?.assets?.length)
+                launchCamera({ mediaType: "video" }, async (res) => {
+                    const raw = res?.assets?.[0];
+                    if (!raw)
                         return;
-                    const raw = res.assets[0];
-                    sendRawAndClose(raw);
-                    setTimeout(async () => {
-                        const compressed = await compressVideo(raw.uri);
-                        sendFinalCompressed({
-                            path: compressed,
-                            duration: raw.duration,
-                        });
-                    }, 10);
+                    sendRaw(raw);
+                    const compressed = enableCompression
+                        ? await compressVideo(raw.uri)
+                        : raw.uri;
+                    sendFinal(raw, compressed);
                 });
             }
         });
     };
-    // ---------- GALLERY ----------
+    //--------------------------------------
+    // 🟦 PICK FROM GALLERY
+    //--------------------------------------
     const handleGallery = async () => {
         await galleryPermissions(async (granted) => {
             if (!granted)
                 return;
+            // PHOTO FROM GALLERY (CROP PICKER)
             if (mediaType === "photo") {
                 try {
-                    const picked = await ImageCropPicker.openPicker({
+                    const img = await ImageCropPicker.openPicker({
                         mediaType: "photo",
+                        cropping: true,
                     });
-                    sendRawAndClose(picked);
-                    setTimeout(async () => {
-                        const compressed = await compressImage(picked.path);
-                        sendFinalCompressed({ ...picked, path: compressed });
-                    }, 10);
+                    sendRaw(img);
+                    const compressed = enableCompression
+                        ? await compressImage(img.path)
+                        : img.path;
+                    sendFinal(img, compressed);
                 }
                 catch (e) {
-                    console.log(e);
+                    console.log("Gallery Photo Error", e);
                 }
             }
+            // VIDEO FROM GALLERY
             else {
-                launchImageLibrary({ mediaType: "video" }, (res) => {
-                    if (!res?.assets?.length)
+                launchImageLibrary({ mediaType: "video" }, async (res) => {
+                    const raw = res?.assets?.[0];
+                    if (!raw)
                         return;
-                    const raw = res.assets[0];
-                    sendRawAndClose(raw);
-                    setTimeout(async () => {
-                        const compressed = await compressVideo(raw.uri);
-                        sendFinalCompressed({
-                            path: compressed,
-                            duration: raw.duration,
-                        });
-                    }, 10);
+                    sendRaw(raw);
+                    const compressed = enableCompression
+                        ? await compressVideo(raw.uri)
+                        : raw.uri;
+                    sendFinal(raw, compressed);
                 });
             }
         });
     };
+    //--------------------------------------
     return (React.createElement(BottomSheet, { visible: visible, onClose: onClose, height: 230 },
         React.createElement(View, { style: styles.container },
             React.createElement(TouchableOpacity, { style: styles.row, onPress: handleCamera },

package/package.json

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