@umituz/react-native-ai-creations 1.2.0 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-creations",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "AI-generated creations gallery with filtering, sharing, and management for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -56,4 +56,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

package/src/presentation/components/CreationThumbnail.tsx

@@ -3,9 +3,12 @@
  * Displays a single creation thumbnail
  */
 
-import React, { useMemo } from "react";
-import { Image, TouchableOpacity, StyleSheet } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import React, { useMemo, useState } from "react";
+import { Image, TouchableOpacity, StyleSheet, View } from "react-native";
+import {
+  useAppDesignTokens,
+  AtomicIcon,
+} from "@umituz/react-native-design-system";
 
 interface CreationThumbnailProps {
   readonly uri: string;
@@ -19,6 +22,7 @@ export function CreationThumbnail({
   onPress,
 }: CreationThumbnailProps) {
   const tokens = useAppDesignTokens();
+  const [isPressed, setIsPressed] = useState(false);
 
   const styles = useMemo(
     () =>
@@ -29,13 +33,31 @@ export function CreationThumbnail({
           borderRadius: tokens.spacing.sm,
           backgroundColor: tokens.colors.backgroundSecondary,
         },
+        overlay: {
+          ...StyleSheet.absoluteFillObject,
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          borderRadius: tokens.spacing.sm,
+          justifyContent: "center",
+          alignItems: "center",
+        },
       }),
-    [tokens, size],
+    [tokens, size]
   );
 
   return (
-    <TouchableOpacity onPress={onPress} disabled={!onPress}>
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={!onPress}
+      onPressIn={() => setIsPressed(true)}
+      onPressOut={() => setIsPressed(false)}
+      activeOpacity={1}
+    >
       <Image source={{ uri }} style={styles.thumbnail} />
+      {isPressed && onPress && (
+        <View style={styles.overlay}>
+          <AtomicIcon name="eye" size="lg" color="textInverse" />
+        </View>
+      )}
     </TouchableOpacity>
   );
 }

package/src/presentation/screens/CreationsGalleryScreen.tsx

@@ -1,6 +1,6 @@
 /**
  * CreationsGalleryScreen
- * Full gallery view with filtering
+ * Full gallery view with filtering and editing
  */
 
 import React, { useMemo, useCallback, useState } from "react";
@@ -24,6 +24,8 @@ interface CreationsGalleryScreenProps {
   readonly repository: ICreationsRepository;
   readonly config: CreationsConfig;
   readonly t: (key: string) => string;
+  readonly enableEditing?: boolean;
+  readonly onImageEdit?: (uri: string, creationId: string) => void | Promise<void>;
 }
 
 export function CreationsGalleryScreen({
@@ -31,6 +33,8 @@ export function CreationsGalleryScreen({
   repository,
   config,
   t,
+  enableEditing = false,
+  onImageEdit,
 }: CreationsGalleryScreenProps) {
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
@@ -90,6 +94,16 @@ export function CreationsGalleryScreen({
     [t, config.translations, deleteMutation],
   );
 
+  const handleImageChange = useCallback(
+    async (uri: string, index: number) => {
+      const creation = filtered[index];
+      if (creation && onImageEdit) {
+        await onImageEdit(uri, creation.id);
+      }
+    },
+    [filtered, onImageEdit],
+  );
+
   const styles = useMemo(
     () =>
       StyleSheet.create({
@@ -165,6 +179,8 @@ export function CreationsGalleryScreen({
         index={viewerIndex}
         onDismiss={() => setViewerVisible(false)}
         onIndexChange={setViewerIndex}
+        enableEditing={enableEditing}
+        onImageChange={handleImageChange}
       />
     </View>
   );