First complete working prototype scanning from search bar
This commit is contained in:
parent
0bba63330d
commit
4078c6ba34
|
@ -6,6 +6,7 @@ import { OnResultFunction } from "@blackbox-vision/react-qr-reader/dist-types/ty
|
||||||
import { BarcodeFormat } from "@zxing/library";
|
import { BarcodeFormat } from "@zxing/library";
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
import { faQrcode } from "@fortawesome/free-solid-svg-icons/faQrcode";
|
import { faQrcode } from "@fortawesome/free-solid-svg-icons/faQrcode";
|
||||||
|
import { Dialog } from "@headlessui/react";
|
||||||
import useKeyboardShortcut from "use-keyboard-shortcut";
|
import useKeyboardShortcut from "use-keyboard-shortcut";
|
||||||
import PriceBox from "./PriceBox";
|
import PriceBox from "./PriceBox";
|
||||||
import { RuntimeContext } from "./useRuntime";
|
import { RuntimeContext } from "./useRuntime";
|
||||||
|
@ -35,9 +36,9 @@ const Title: React.FC = () => {
|
||||||
searchRef.current?.focus();
|
searchRef.current?.focus();
|
||||||
});
|
});
|
||||||
|
|
||||||
const [isScanning, setScanning] = useState<boolean>();
|
const [isScanning, setScanning] = useState<boolean>(false);
|
||||||
const onScan = () => {
|
const onScan = () => {
|
||||||
setScanning(!isScanning);
|
setScanning(true);
|
||||||
};
|
};
|
||||||
const evaluateScan: OnResultFunction = (result, error, codeReader) => {
|
const evaluateScan: OnResultFunction = (result, error, codeReader) => {
|
||||||
console.log("scan");
|
console.log("scan");
|
||||||
|
@ -49,15 +50,32 @@ const Title: React.FC = () => {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (searchRef.current) {
|
history.push(`/search?q=${text}`);
|
||||||
searchRef.current.value = text;
|
|
||||||
searchRef.current.dispatchEvent(new Event("input", { bubbles: true }));
|
|
||||||
}
|
|
||||||
setScanning(false);
|
setScanning(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
|
<Dialog
|
||||||
|
className="fixed z-10 inset-0 overflow-y-auto"
|
||||||
|
open={isScanning}
|
||||||
|
onClose={() => setScanning(false)}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-center min-h-screen">
|
||||||
|
<Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
|
||||||
|
<Dialog.Title className="absolute top-0 w-full text-center bg-white text-lg">
|
||||||
|
Point an ETH address QR code to camera
|
||||||
|
</Dialog.Title>
|
||||||
|
<div className="absolute inset-0 bg-transparent rounded min-w-max max-w-3xl w-full h-screen max-h-screen m-auto">
|
||||||
|
<QrReader
|
||||||
|
className="m-auto"
|
||||||
|
constraints={{}}
|
||||||
|
onResult={evaluateScan}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Dialog>
|
||||||
<div className="px-9 py-2 flex justify-between items-baseline">
|
<div className="px-9 py-2 flex justify-between items-baseline">
|
||||||
<Link className="self-center" to="/">
|
<Link className="self-center" to="/">
|
||||||
<div className="text-2xl text-link-blue font-title font-bold flex items-center space-x-2">
|
<div className="text-2xl text-link-blue font-title font-bold flex items-center space-x-2">
|
||||||
|
@ -95,13 +113,6 @@ const Title: React.FC = () => {
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon icon={faQrcode} />
|
<FontAwesomeIcon icon={faQrcode} />
|
||||||
</button>
|
</button>
|
||||||
{isScanning && (
|
|
||||||
<QrReader
|
|
||||||
className="w-screen h-screen"
|
|
||||||
constraints={{}}
|
|
||||||
onResult={evaluateScan}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<button
|
<button
|
||||||
className="rounded-r border-t border-b border-r bg-gray-100 hover:bg-gray-200 focus:outline-none px-2 py-1 text-sm text-gray-500"
|
className="rounded-r border-t border-b border-r bg-gray-100 hover:bg-gray-200 focus:outline-none px-2 py-1 text-sm text-gray-500"
|
||||||
type="submit"
|
type="submit"
|
||||||
|
@ -111,6 +122,7 @@ const Title: React.FC = () => {
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue