isky/SafeQR_Front_End_Mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed ClearScanData not being called when closing ScannedData Modal

Browse Source
This commit is contained in:
Isky
2024-08-15 16:22:13 +08:00
parent 36be49a740
commit 7618532d7a
2 changed files with 37 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
App.tsx
View File

@@ -26,6 +26,7 @@ const App: React.FC = () => {
const clearScanData = () => { const clearScanData = () => {
setScannedData(''); setScannedData('');
console.log('ClearScanedDATa');
}; };
useEffect(() => { useEffect(() => {

60
screens/QRScannerScreen.tsx
View File

@@ -11,7 +11,7 @@ import NetInfo from '@react-native-community/netinfo';
const { width: screenWidth, height: screenHeight } = Dimensions.get('window'); const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
const QRScannerScreen: React.FC = () => { const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanData }) => {
// State management // State management
const [isSettingsModalVisible, setIsSettingsModalVisible] = useState<boolean>(false); const [isSettingsModalVisible, setIsSettingsModalVisible] = useState<boolean>(false);
const [enableTorch, setEnableTorch] = useState<boolean>(false); const [enableTorch, setEnableTorch] = useState<boolean>(false);
@@ -79,6 +79,13 @@ const QRScannerScreen: React.FC = () => {
setIsScannedDataBoxVisible(false); setIsScannedDataBoxVisible(false);
}); });
}; };
const clearSelectedQrCodeData = () => {
console.log("!!!!!clearSelectedQrCodeData");
setQRCodeId(null);
hideScannedDataBox();
setScanned(false); // Reset the scanned state so the camera can scan again
clearScanData(); // Call the clearScanData passed from App.tsx
};
// Show an offline banner // Show an offline banner
const showBanner = () => { const showBanner = () => {
@@ -174,12 +181,13 @@ const QRScannerScreen: React.FC = () => {
<View style={styles.cameraContainer}> <View style={styles.cameraContainer}>
{device && ( {device && (
<Camera <Camera
style={StyleSheet.absoluteFill} style={StyleSheet.absoluteFill}
device={device} device={device}
isActive={!isSettingsModalVisible} // Disable the camera when settings modal is open isActive={!isSettingsModalVisible && !isScannedDataBoxVisible} // Disable the camera when settings modal or ScannedDataBox is open
torch={enableTorch ? 'on' : 'off'} torch={enableTorch ? 'on' : 'off'}
codeScanner={codeScanner} codeScanner={codeScanner}
/> />
)} )}
{/* Torch Button */} {/* Torch Button */}
@@ -210,24 +218,26 @@ const QRScannerScreen: React.FC = () => {
</View> </View>
{/* Scanned Data Box as a modal with sliding animation */} {/* Scanned Data Box as a modal with sliding animation */}
<Modal <Modal
transparent={true} transparent={true}
visible={isScannedDataBoxVisible} visible={isScannedDataBoxVisible}
animationType="none" animationType="none"
onRequestClose={hideScannedDataBox} onRequestClose={clearSelectedQrCodeData} // Call clearSelectedQrCodeData when the modal is requested to close
> >
<TouchableOpacity style={styles.modalOverlay} activeOpacity={1} onPress={hideScannedDataBox}> <TouchableOpacity
<Animated.View style={[styles.modalContainer, { transform: [{ translateY: scannedDataBoxY }] }]}> style={styles.modalOverlay}
<ScannedDataBox activeOpacity={1}
qrCodeId={qrCodeId!} onPress={clearSelectedQrCodeData} // Call clearSelectedQrCodeData on press
clearScanData={() => { >
setScanned(false); <Animated.View style={[styles.modalContainer, { transform: [{ translateY: scannedDataBoxY }] }]}>
hideScannedDataBox(); <ScannedDataBox
}} qrCodeId={qrCodeId!}
/> clearScanData={clearSelectedQrCodeData} // Close modal and reset the scanned state
</Animated.View> />
</TouchableOpacity> </Animated.View>
</Modal> </TouchableOpacity>
</Modal>
{/* Settings Icon */} {/* Settings Icon */}
<TouchableOpacity onPress={() => setIsSettingsModalVisible(true)} style={styles.settingsButton}> <TouchableOpacity onPress={() => setIsSettingsModalVisible(true)} style={styles.settingsButton}>