117 lines
2.5 KiB
TypeScript
117 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
import QrScanner from 'react-qr-scanner';
|
|
import { Box } from '@mui/material';
|
|
import styled from 'styled-components';
|
|
import Modal from '../components/Modal';
|
|
|
|
const ScannerContainer = styled(Box)`
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
`;
|
|
|
|
const ScannerFrame = styled.div`
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 60%;
|
|
height: 60%;
|
|
transform: translate(-50%, -50%);
|
|
border: 3px solid green;
|
|
box-sizing: border-box;
|
|
z-index: 2;
|
|
`;
|
|
|
|
const BlurOverlay = styled.div`
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
|
|
&::before,
|
|
&::after {
|
|
content: '';
|
|
background: rgba(255, 255, 255, 0.7);
|
|
backdrop-filter: blur(10px);
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&::before {
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: calc(50% - 30%);
|
|
}
|
|
|
|
&::after {
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: calc(50% - 30%);
|
|
}
|
|
|
|
div {
|
|
position: absolute;
|
|
top: calc(50% - 30%);
|
|
bottom: calc(50% - 30%);
|
|
width: calc(50% - 30%);
|
|
backdrop-filter: blur(10px);
|
|
background: rgba(255, 255, 255, 0.7);
|
|
pointer-events: none;
|
|
}
|
|
|
|
div:first-child {
|
|
left: 0;
|
|
}
|
|
|
|
div:last-child {
|
|
right: 0;
|
|
}
|
|
`;
|
|
|
|
interface ScannerModalProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
onScan: (data: { text: string } | null) => void;
|
|
slotQRCodes: string[]; // Required prop
|
|
}
|
|
|
|
const ScannerModal: React.FC<ScannerModalProps> = ({ open, onClose, onScan }) => {
|
|
const handleScan = (data: { text: string } | null) => {
|
|
if (data) {
|
|
onScan(data);
|
|
}
|
|
};
|
|
|
|
const handleError = (err: any) => {
|
|
console.error(err);
|
|
};
|
|
|
|
const constraints = {
|
|
video: { facingMode: { exact: "environment" } },
|
|
};
|
|
|
|
return (
|
|
<Modal open={open} onClose={onClose} title="Scan QR Code">
|
|
<ScannerContainer>
|
|
<QrScanner
|
|
delay={300}
|
|
onError={handleError}
|
|
onScan={handleScan}
|
|
style={{ width: '100%' }}
|
|
constraints={constraints}
|
|
/>
|
|
<BlurOverlay>
|
|
<div />
|
|
<div />
|
|
</BlurOverlay>
|
|
<ScannerFrame />
|
|
</ScannerContainer>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
export default ScannerModal; |