98 lines
4.2 KiB
TypeScript
98 lines
4.2 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { View, Text, Modal, TouchableOpacity, Vibration, StyleSheet, Dimensions } from 'react-native';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { CameraView, useCameraPermissions } from 'expo-camera';
|
|
import { X, ScanLine } from 'lucide-react-native';
|
|
|
|
interface QrScanModalProps {
|
|
visible: boolean;
|
|
onClose: () => void;
|
|
onScan: (data: string) => void;
|
|
}
|
|
|
|
export default function QrScanModal({ visible, onClose, onScan }: QrScanModalProps) {
|
|
const [permission, requestPermission] = useCameraPermissions();
|
|
const [scanned, setScanned] = useState(false);
|
|
const { width, height } = Dimensions.get('window');
|
|
const squareSize = Math.min(width * 0.8, height * 0.8, 400);
|
|
|
|
// Permission Handling and Reset Scanned State on Modal Open
|
|
useEffect(() => {
|
|
if (visible) {
|
|
setScanned(false);
|
|
if (permission && !permission.granted && permission.canAskAgain) {
|
|
requestPermission();
|
|
}
|
|
}
|
|
}, [visible, permission]);
|
|
|
|
const handleBarCodeScanned = ({ type, data }: { type: string; data: string }) => {
|
|
if (scanned) return;
|
|
setScanned(true);
|
|
Vibration.vibrate();
|
|
console.log(`Bar code with type ${type} and data ${data} has been scanned!`);
|
|
onScan(data);
|
|
onClose();
|
|
};
|
|
|
|
if (!permission) {
|
|
return <View />;
|
|
}
|
|
|
|
if (!permission.granted && visible) {
|
|
requestPermission();
|
|
}
|
|
|
|
return (
|
|
<Modal
|
|
visible={visible}
|
|
animationType="slide"
|
|
presentationStyle="fullScreen"
|
|
onRequestClose={onClose}
|
|
>
|
|
<View className="flex-1 bg-black">
|
|
{/* Camera Full Screen */}
|
|
<CameraView
|
|
style={StyleSheet.absoluteFillObject}
|
|
facing="back"
|
|
onBarcodeScanned={scanned ? undefined : handleBarCodeScanned}
|
|
barcodeScannerSettings={{
|
|
barcodeTypes: ["qr"],
|
|
}}
|
|
/>
|
|
|
|
{/* Dark Overlay with Transparent "Hole" (Visually Simulated with Borders or Opacity) */}
|
|
<SafeAreaView className="flex-1 justify-between bg-black/60 pt-8">
|
|
{/* Header Overlay */}
|
|
<View className="items-center">
|
|
<Text className="text-white text-xl font-bold">Scansiona QR Code</Text>
|
|
<Text className="text-gray-300 text-base mt-1">Inquadra il codice nel riquadro</Text>
|
|
</View>
|
|
|
|
{/* Central Area (Transparent for the camera) */}
|
|
<View className="items-center justify-center" style={{ height: squareSize }}>
|
|
<View style={{ width: squareSize, height: squareSize }}
|
|
className="border-2 border-[#099499] bg-transparent relative justify-center items-center">
|
|
{/* Decorative Corners */}
|
|
<View className="absolute top-0 left-0 w-6 h-6 border-l-4 border-t-4 border-[#099499]" />
|
|
<View className="absolute top-0 right-0 w-6 h-6 border-r-4 border-t-4 border-[#099499]" />
|
|
<View className="absolute bottom-0 left-0 w-6 h-6 border-l-4 border-b-4 border-[#099499]" />
|
|
<View className="absolute bottom-0 right-0 w-6 h-6 border-r-4 border-b-4 border-[#099499]" />
|
|
|
|
{/* Animated Scan Line or Icon */}
|
|
{!scanned && <ScanLine color="#099499" size={40} className="opacity-50" pointerEvents="none" />}
|
|
</View>
|
|
</View>
|
|
|
|
{/* Footer Overlay */}
|
|
<View className="items-center justify-end pb-12">
|
|
<TouchableOpacity onPress={onClose} className="bg-white/20 p-4 rounded-full">
|
|
<X color="white" size={32} pointerEvents="none" />
|
|
</TouchableOpacity>
|
|
<Text className="text-white mt-4 font-medium">Chiudi</Text>
|
|
</View>
|
|
</SafeAreaView>
|
|
</View>
|
|
</Modal>
|
|
);
|
|
} |