114 lines
4.4 KiB
TypeScript
114 lines
4.4 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import {
|
|
KeyboardAvoidingView,
|
|
Modal,
|
|
Platform,
|
|
Text,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
View,
|
|
Keyboard,
|
|
ScrollView
|
|
} from 'react-native';
|
|
import { X } from 'lucide-react-native';
|
|
|
|
interface SetDescriptionModalProps {
|
|
visible: boolean;
|
|
initialDescription: string;
|
|
onClose: () => void;
|
|
onSave: (desc: string) => void;
|
|
}
|
|
|
|
export default function SetDescriptionModal({
|
|
visible,
|
|
initialDescription,
|
|
onClose,
|
|
onSave
|
|
}: SetDescriptionModalProps) {
|
|
const [desc, setDesc] = useState(initialDescription);
|
|
|
|
useEffect(() => {
|
|
if (visible) {
|
|
setDesc(initialDescription || '');
|
|
}
|
|
}, [visible, initialDescription]);
|
|
|
|
return (
|
|
<Modal
|
|
visible={visible}
|
|
transparent
|
|
animationType="slide"
|
|
statusBarTranslucent
|
|
onRequestClose={onClose}
|
|
>
|
|
<KeyboardAvoidingView
|
|
behavior={Platform.OS === 'ios' ? 'padding' : 'padding'}
|
|
className="flex-1"
|
|
>
|
|
<View className="flex-1 bg-black/60 justify-end">
|
|
|
|
{/* Backdrop */}
|
|
<TouchableOpacity
|
|
className="flex-1 w-full"
|
|
onPress={() => {
|
|
Keyboard.dismiss();
|
|
onClose();
|
|
}}
|
|
activeOpacity={1}
|
|
/>
|
|
|
|
<View className="bg-white w-full rounded-t-[2.5rem] p-6 shadow-2xl max-h-[85%]">
|
|
|
|
{/* Header */}
|
|
<View className="flex-row justify-between items-center mb-6">
|
|
<Text className="text-2xl font-bold text-gray-800">Descrizione Foto</Text>
|
|
<TouchableOpacity onPress={onClose} className="p-2 bg-gray-100 rounded-full">
|
|
<X size={24} color="#4b5563" />
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
{/* Text Area with Scroll */}
|
|
<ScrollView
|
|
className="mb-6"
|
|
showsVerticalScrollIndicator={false}
|
|
keyboardShouldPersistTaps="handled"
|
|
bounces={false}
|
|
>
|
|
<TextInput
|
|
className="bg-gray-50 border border-gray-200 rounded-2xl p-4 text-base text-gray-800"
|
|
placeholder="Inserisci una descrizione... (max 250 caratteri)"
|
|
placeholderTextColor="#9ca3af"
|
|
multiline
|
|
maxLength={250}
|
|
value={desc}
|
|
onChangeText={setDesc}
|
|
style={{ minHeight: 120, maxHeight: 200, textAlignVertical: 'top' }}
|
|
/>
|
|
<Text className={`text-right mt-2 text-sm font-medium ${desc.length >= 250 ? 'text-red-500' : 'text-gray-500'}`}>
|
|
{desc.length}/250
|
|
</Text>
|
|
</ScrollView>
|
|
|
|
{/* Actions */}
|
|
<View className="flex-row gap-4 mb-4">
|
|
<TouchableOpacity
|
|
onPress={onClose}
|
|
className="flex-1 py-4 bg-gray-200 rounded-2xl shadow-sm active:bg-gray-300"
|
|
>
|
|
<Text className="text-gray-700 text-center font-bold text-lg">Annulla</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
onPress={() => onSave(desc)}
|
|
className="flex-1 py-4 rounded-2xl shadow-lg active:scale-[0.98] bg-[#1071C2]"
|
|
>
|
|
<Text className="text-white text-center font-bold text-lg">Salva</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
</View>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
</Modal>
|
|
);
|
|
} |