Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add sort fields, new filters and update QR scanner lib
Signed-off-by: Tomás Castillo <[email protected]>
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import * as React from "react"; | ||
| import { useEffect, useRef, useState } from "react"; | ||
| import QrScanner from "qr-scanner"; | ||
| import styles from "./index.module.less"; | ||
|
|
||
| const QrReader = function ({ onError, onScan }) { | ||
| // QR States | ||
| const scanner = useRef(null); | ||
| const videoEl = useRef(null); | ||
| const [qrOn, setQrOn] = useState(true); | ||
|
|
||
| // Success | ||
| const onScanSuccess = (result) => { | ||
| // 🖨 Print the "result" to browser console. | ||
| console.log(result); | ||
| // ✅ Handle success. | ||
| onScan(result?.data); | ||
| }; | ||
|
|
||
| // Fail | ||
| const onScanFail = (err) => { | ||
| // 🖨 Print the "err" to browser console. | ||
| console.log(err); | ||
|
|
||
| // onError(err); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| if (videoEl?.current && !scanner.current) { | ||
| // 👉 Instantiate the QR Scanner | ||
| scanner.current = new QrScanner(videoEl?.current, onScanSuccess, { | ||
| onDecodeError: onScanFail, | ||
| preferredCamera: "environment", | ||
| highlightScanRegion: true, | ||
| highlightCodeOutline: true | ||
| }); | ||
|
|
||
| // 🚀 Start QR Scanner | ||
| scanner?.current | ||
| ?.start() | ||
| .then(() => setQrOn(true)) | ||
| .catch((err) => { | ||
| if (err) setQrOn(false); | ||
| }); | ||
| } | ||
|
|
||
| // 🧹 Clean up on unmount. | ||
| // 🚨 This removes the QR Scanner from rendering and using camera when it is closed or removed from the UI. | ||
| return () => { | ||
| if (!videoEl?.current) { | ||
| scanner?.current?.stop(); | ||
| } | ||
| }; | ||
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| if (!qrOn) | ||
| alert( | ||
| "Camera is blocked or not accessible. Please allow camera in your browser permissions and Reload." | ||
| ); | ||
| }, [qrOn]); | ||
|
|
||
| return ( | ||
| <div className={styles.qrReader}> | ||
| {/* QR */} | ||
| {/* eslint-disable-next-line jsx-a11y/media-has-caption */} | ||
| <video ref={videoEl} /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default QrReader; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| .qr-reader { | ||
| width: 300px; | ||
| height: 300px; | ||
| margin: 0 auto; | ||
| position: relative; | ||
| } | ||
|
|
||
| .qr-reader video { | ||
| width: 100%; | ||
| height: 100%; | ||
| object-fit: cover; | ||
| } | ||
|
|
||
| .qr-reader .qr-box { | ||
| width: 100% !important; | ||
| left: 0 !important; | ||
| } | ||
|
|
||
| .qr-reader .qr-frame { | ||
| position: absolute; | ||
| fill: none; | ||
| left: 50%; | ||
| top: 50%; | ||
| transform: translateX(-50%) translateY(-50%); | ||
| } | ||
|
|
||
| /* Media Queries for mobile screens */ | ||
| @media (max-width: 426px) { | ||
| .qr-reader { | ||
| width: 100%; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.