41 lines
1.2 KiB
JavaScript
41 lines
1.2 KiB
JavaScript
import React, { useEffect, useRef, useState } from "react";
|
|
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import QRCodeMin from "utils/qrcode.min.js";
|
|
|
|
import { getDeviceAdditionInfo } from "../../actions/deviceActions";
|
|
import { scaleH, scaleW } from "../../utils/helperMethods";
|
|
|
|
let script = document.createElement("script");
|
|
script.innerText = QRCodeMin;
|
|
document.body.appendChild(script);
|
|
|
|
export default function TQRCode({ text, menu, width = "128", height = "128" }) {
|
|
const qrcodeRef = useRef(null);
|
|
const deviceInfo = useSelector((state) => state.device.deviceInfo);
|
|
const dispatch = useDispatch();
|
|
|
|
useEffect(() => {
|
|
dispatch(getDeviceAdditionInfo());
|
|
}, [dispatch]);
|
|
|
|
useEffect(() => {
|
|
if (typeof window === "object" && deviceInfo && menu) {
|
|
if (qrcodeRef.current) {
|
|
while (qrcodeRef.current.firstChild) {
|
|
qrcodeRef.current.removeChild(qrcodeRef.current.firstChild);
|
|
}
|
|
}
|
|
|
|
const qrcode = new window.QRCode(qrcodeRef.current, {
|
|
text: menu
|
|
? `${text}&nowMenu=${menu}&dvcIndex=${deviceInfo.dvcIndex}`
|
|
: text,
|
|
width: scaleW(width),
|
|
height: scaleH(height),
|
|
});
|
|
}
|
|
}, [text, menu, deviceInfo]);
|
|
return <div ref={qrcodeRef} />;
|
|
}
|