blob: 3079e333102fe42e8817ceb0b854181f203a4677 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
import { QrCode2 } from "@mui/icons-material";
import { Button, TextField } from "@mui/material";
import dynamic from "next/dynamic";
import React, { useState } from "react";
import useCameraStore from "../hooks/useCameraStore";
const BarcodeScannerComponent = dynamic(
() => import("react-qr-barcode-scanner"),
{ ssr: false }
);
const BarcodeScanner: React.FC = () => {
const { barcode, setBarcode } = useCameraStore();
const [isCameraActive, setIsCameraActive] = useState(false);
return (
<div>
<Button
variant="outlined"
onClick={() => setIsCameraActive(!isCameraActive)}
startIcon={<QrCode2 />}
color="error"
className="mb-2"
>
{isCameraActive ? "Cancel" : "Scane Code"}
</Button>
{isCameraActive && (
<BarcodeScannerComponent
width={500} // Tingkatkan ukuran untuk memperjelas gambar
height={300}
onUpdate={(err, result) => {
if (result) {
setBarcode(result.getText());
setIsCameraActive(false);
}
}}
/>
)}
<div className="mt-4">
<TextField
fullWidth
label="Detected Picking Code"
id="outlined-basic"
value={barcode}
onChange={ (e) => setBarcode(e.target.value) }
InputLabelProps={{
shrink: true, // Label akan selalu berada di atas (outline)
}}
/>
</div>
</div>
);
};
export default BarcodeScanner;
|
