51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import React, { useContext } from "react";
|
|
import { Modal } from "react-bootstrap";
|
|
import { ImCamera } from "react-icons/im";
|
|
import { useScanner } from "../../utils/useScanner";
|
|
import { ModalHeader } from "./ModalHeader";
|
|
|
|
export const ScannerModal = ({
|
|
open,
|
|
onClose,
|
|
onDetected,
|
|
}: {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
onDetected?: (isbn: string) => void;
|
|
}): React.JSX.Element => {
|
|
const { scannerError, setScannerRef } = useScanner({ onDetected });
|
|
|
|
return (
|
|
<Modal show={open} onHide={onClose} centered>
|
|
<ModalHeader
|
|
onClose={onClose}
|
|
title={"Scan barcode"}
|
|
icon={<ImCamera size={50} className='ml-0 mr-auto' />}
|
|
/>
|
|
<Modal.Body>
|
|
<div
|
|
className='w-100 overflow-hidden'
|
|
ref={(ref) => setScannerRef(ref)}
|
|
style={{
|
|
position: "relative",
|
|
height: "25vh",
|
|
}}
|
|
>
|
|
<canvas
|
|
className='drawingBuffer w-100 position-absolute'
|
|
style={{
|
|
height: "100%",
|
|
border: `2px solid black`,
|
|
}}
|
|
/>
|
|
</div>
|
|
{scannerError ? (
|
|
<p>
|
|
ERROR INITIALIZING CAMERA ${JSON.stringify(scannerError)} -- DO YOU
|
|
HAVE PERMISSION?
|
|
</p>
|
|
) : null}
|
|
</Modal.Body>
|
|
</Modal>
|
|
);
|
|
};
|