118 lines
4.8 KiB
TypeScript
118 lines
4.8 KiB
TypeScript
import React, { useState, useEffect, useRef } from 'react';
|
|
import { View, Text, Modal, TouchableOpacity, Vibration, StyleSheet, useWindowDimensions } 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 scanInProgress = useRef(false);
|
|
const { width, height } = useWindowDimensions();
|
|
const squareSize = Math.min(width * 0.8, height * 0.8, 400);
|
|
|
|
// Permission handling and scanned state reset on modal open
|
|
useEffect(() => {
|
|
if (!visible) return;
|
|
setScanned(false);
|
|
scanInProgress.current = false;
|
|
if (permission && !permission.granted && permission.canAskAgain) {
|
|
requestPermission();
|
|
}
|
|
}, [visible, permission]);
|
|
|
|
const handleBarCodeScanned = ({ type, data }: { type: string; data: string }) => {
|
|
if (scanInProgress.current) return;
|
|
scanInProgress.current = true;
|
|
|
|
setScanned(true);
|
|
Vibration.vibrate();
|
|
console.log(`Bar code with type ${type} and data ${data} has been scanned!`);
|
|
onScan(data);
|
|
onClose();
|
|
};
|
|
|
|
if (!permission) {
|
|
return <View />;
|
|
}
|
|
|
|
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'],
|
|
}}
|
|
/>
|
|
|
|
{/* Mask Overlay with transparent cutout */}
|
|
<View style={StyleSheet.absoluteFillObject} pointerEvents="none">
|
|
<View className="flex-1 bg-black/60" />
|
|
<View style={{ height: squareSize }} className="flex-row">
|
|
<View className="flex-1 bg-black/60" />
|
|
|
|
{/* Scanner Target Frame */}
|
|
<View
|
|
style={{ width: squareSize, height: squareSize }}
|
|
className="border-2 border-[#1071C2] justify-center items-center relative"
|
|
>
|
|
<View className="absolute top-0 left-0 w-6 h-6 border-l-4 border-t-4 border-[#1071C2]" />
|
|
<View className="absolute top-0 right-0 w-6 h-6 border-r-4 border-t-4 border-[#1071C2]" />
|
|
<View className="absolute bottom-0 left-0 w-6 h-6 border-l-4 border-b-4 border-[#1071C2]" />
|
|
<View className="absolute bottom-0 right-0 w-6 h-6 border-r-4 border-b-4 border-[#1071C2]" />
|
|
|
|
{!scanned && <ScanLine color="#1071C2" size={40} />}
|
|
</View>
|
|
|
|
<View className="flex-1 bg-black/60" />
|
|
</View>
|
|
<View className="flex-1 bg-black/60" />
|
|
</View>
|
|
|
|
{/* UI Overlay */}
|
|
<SafeAreaView style={StyleSheet.absoluteFillObject} pointerEvents="box-none">
|
|
<View className="flex-1 justify-between pt-8">
|
|
{/* Header */}
|
|
<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>
|
|
|
|
{/* Footer */}
|
|
<View className="items-center pb-12">
|
|
<TouchableOpacity
|
|
onPress={onClose}
|
|
className="bg-white/20 p-4 rounded-full"
|
|
>
|
|
<X color="white" size={32} />
|
|
</TouchableOpacity>
|
|
|
|
<Text className="text-white mt-4 font-medium">
|
|
Chiudi
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</SafeAreaView>
|
|
</View>
|
|
</Modal>
|
|
);
|
|
} |