@umituz/react-native-image 1.1.1 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-image",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "Image manipulation and viewing for React Native apps - resize, crop, rotate, flip, compress, gallery viewer",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -56,4 +56,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

package/src/domain/utils/ImageUtils.ts

@@ -77,7 +77,7 @@ export class ImageUtils {
         }
     }
 
-    static getSquareCrop(width: number, height: number): ImageManipulateAction['crop'] {
+    static getSquareCrop(width: number, height: number): { originX: number; originY: number; width: number; height: number } {
         const size = Math.min(width, height);
         const originX = (width - size) / 2;
         const originY = (height - size) / 2;

package/src/index.ts

@@ -52,6 +52,7 @@ export { ImageGallery, type ImageGalleryProps } from './presentation/components/
 export { useImage } from './presentation/hooks/useImage';
 export { useImageTransform } from './presentation/hooks/useImageTransform';
 export { useImageConversion } from './presentation/hooks/useImageConversion';
+export { useImageEditor } from './presentation/hooks/useImageEditor';
 
 export {
   useImageGallery,

package/src/presentation/components/GalleryHeader.tsx

@@ -0,0 +1,58 @@
+/**
+ * GalleryHeader Component
+ * Header for ImageGallery with edit and close buttons
+ * 
+ * This component should be implemented by the consumer app
+ * using their own design system and safe area handling.
+ */
+
+import React from 'react';
+import { View, TouchableOpacity, StyleSheet, Text } from 'react-native';
+
+interface GalleryHeaderProps {
+    onEdit: () => void;
+    onClose: () => void;
+}
+
+export function GalleryHeader({ onEdit, onClose }: GalleryHeaderProps) {
+    return (
+        <View style={styles.container}>
+            <TouchableOpacity style={styles.button} onPress={onEdit}>
+                <Text style={styles.buttonText}>Edit</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity style={styles.button} onPress={onClose}>
+                <Text style={styles.buttonText}>✕</Text>
+            </TouchableOpacity>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        paddingTop: 48,
+        paddingHorizontal: 16,
+        paddingBottom: 16,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    },
+    button: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        padding: 12,
+        borderRadius: 8,
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    },
+    buttonText: {
+        fontSize: 14,
+        color: '#FFFFFF',
+        fontWeight: '600',
+    },
+});

package/src/presentation/components/ImageGallery.tsx

@@ -2,19 +2,23 @@
  * Image Gallery Component
  * 
  * A wrapper around react-native-image-viewing that provides
- * theme integration and standard configuration.
+ * theme integration, standard configuration, and optional editing.
  */
 
-import React from 'react';
+import React, { useCallback } from 'react';
 import ImageViewing from 'react-native-image-viewing';
+import * as ImageManipulator from 'expo-image-manipulator';
 import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
 import type { ImageViewerItem, ImageGalleryOptions } from '../../domain/entities/ImageTypes';
+import { GalleryHeader } from './GalleryHeader';
 
 export interface ImageGalleryProps extends ImageGalleryOptions {
     images: ImageViewerItem[];
     visible: boolean;
     onDismiss: () => void;
     index?: number;
+    onImageChange?: (uri: string, index: number) => void | Promise<void>;
+    enableEditing?: boolean;
 }
 
 export const ImageGallery: React.FC<ImageGalleryProps> = ({
@@ -26,29 +30,74 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
     swipeToCloseEnabled = true,
     doubleTapToZoomEnabled = true,
     onIndexChange,
+    onImageChange,
+    enableEditing = false,
 }) => {
     const tokens = useAppDesignTokens();
+    const [currentIndex, setCurrentIndex] = React.useState(index);
+
+    React.useEffect(() => {
+        setCurrentIndex(index);
+    }, [index]);
 
-    // Use theme background if not provided
     const bg = backgroundColor || tokens.colors.backgroundPrimary;
 
-    // Map images to structure expected by ImageViewing (uri object)
-    const viewerImages = React.useMemo(() =>
-        images.map(img => ({ uri: img.uri })),
+    const viewerImages = React.useMemo(
+        () => images.map((img) => ({ uri: img.uri })),
         [images]
     );
 
+    const handleEdit = useCallback(async () => {
+        const currentImage = images[currentIndex];
+        if (!currentImage || !onImageChange) return;
+
+        try {
+            const result = await ImageManipulator.manipulateAsync(
+                currentImage.uri,
+                [],
+                {
+                    compress: 1,
+                    format: ImageManipulator.SaveFormat.JPEG,
+                }
+            );
+
+            if (result.uri) {
+                await onImageChange(result.uri, currentIndex);
+            }
+        } catch (error) {
+            // Silent fail
+        }
+    }, [images, currentIndex, onImageChange]);
+
+    const handleIndexChange = useCallback(
+        (newIndex: number) => {
+            setCurrentIndex(newIndex);
+            onIndexChange?.(newIndex);
+        },
+        [onIndexChange]
+    );
+
+    const headerComponent = useCallback(() => {
+        if (!enableEditing) return null;
+        return (
+            <GalleryHeader
+                onEdit={handleEdit}
+                onClose={onDismiss}
+            />
+        );
+    }, [enableEditing, handleEdit, onDismiss]);
+
     return (
         <ImageViewing
             images={viewerImages}
-            imageIndex={index}
+            imageIndex={currentIndex}
             visible={visible}
             onRequestClose={onDismiss}
-            onImageIndexChange={onIndexChange}
+            onImageIndexChange={handleIndexChange}
             backgroundColor={bg}
             swipeToCloseEnabled={swipeToCloseEnabled}
             doubleTapToZoomEnabled={doubleTapToZoomEnabled}
-        // Can add custom Header/Footer here using theme tokens if needed
+            HeaderComponent={headerComponent}
         />
     );
 };

package/src/presentation/hooks/useImageEditor.ts

@@ -0,0 +1,61 @@
+/**
+ * useImageEditor Hook
+ * Provides image editing functionality with crop, rotate, flip
+ */
+
+import { useState, useCallback } from 'react';
+import * as ImageManipulator from 'expo-image-manipulator';
+import type { Action } from 'expo-image-manipulator';
+
+interface UseImageEditorOptions {
+    onSave?: (uri: string) => void | Promise<void>;
+}
+
+export function useImageEditor({ onSave }: UseImageEditorOptions = {}) {
+    const [isEditing, setIsEditing] = useState(false);
+    const [currentUri, setCurrentUri] = useState<string | null>(null);
+
+    const startEditing = useCallback((uri: string) => {
+        setCurrentUri(uri);
+        setIsEditing(true);
+    }, []);
+
+    const cancelEditing = useCallback(() => {
+        setIsEditing(false);
+        setCurrentUri(null);
+    }, []);
+
+    const saveEdit = useCallback(
+        async (actions: Action[]) => {
+            if (!currentUri) return;
+
+            try {
+                const result = await ImageManipulator.manipulateAsync(
+                    currentUri,
+                    actions,
+                    { compress: 0.9, format: ImageManipulator.SaveFormat.JPEG }
+                );
+
+                if (onSave) {
+                    await onSave(result.uri);
+                }
+
+                setIsEditing(false);
+                setCurrentUri(null);
+
+                return result.uri;
+            } catch (error) {
+                throw error;
+            }
+        },
+        [currentUri, onSave]
+    );
+
+    return {
+        isEditing,
+        currentUri,
+        startEditing,
+        cancelEditing,
+        saveEdit,
+    };
+}