1- import {
2- MouseEvent ,
3- useEffect ,
4- useRef ,
5- useState ,
6- type ReactNode ,
7- type SessionDataTestId ,
8- } from 'react' ;
9- import { QRCode } from 'react-qrcode-logo' ;
1+ import { MouseEvent , useEffect , useState , type ReactNode , type SessionDataTestId } from 'react' ;
2+ import useWindowSize from 'react-use/lib/useWindowSize' ;
3+
4+ import { QRCodeSVG } from 'qrcode.react' ;
105import styled , { CSSProperties } from 'styled-components' ;
116import { THEME_GLOBALS } from '../themes/globals' ;
12- import { renderQRCode } from '../util/qrCodes' ;
137import { AnimatedFlex } from './basic/Flex' ;
148import { SessionIconType } from './icon' ;
15- import { tr } from '../localization/localeTools' ;
169
1710// AnimatedFlex because we fade in the QR code a flicker on first render
1811const StyledQRView = styled ( AnimatedFlex ) < {
@@ -24,6 +17,16 @@ const StyledQRView = styled(AnimatedFlex)<{
2417 ${ props => props . size && `width: ${ props . size } ${ props . size } }
2518` ;
2619
20+ const StyledFullScreenQrView = styled ( AnimatedFlex ) `
21+ top: 0;
22+ left: 0;
23+ width: 100vw;
24+ height: 100vh;
25+ z-index: 3;
26+ background-color: #000000dd;
27+ position: fixed;
28+ ` ;
29+
2730export type QRCodeLogoProps = { iconType : SessionIconType ; iconSize : number } ;
2831
2932export type SessionQRCodeProps = {
@@ -36,7 +39,8 @@ export type SessionQRCodeProps = {
3639 logoImage ?: string ;
3740 logoSize ?: number ;
3841 loading ?: boolean ;
39- onClick ?: ( fileName : string , dataUrl : string ) => void ;
42+ onToggleFullScreen ?: ( ) => void ;
43+ fullScreen ?: boolean ;
4044 ariaLabel ?: string ;
4145 dataTestId ?: SessionDataTestId ;
4246 style ?: CSSProperties ;
@@ -52,9 +56,9 @@ export function SessionQRCode(props: SessionQRCodeProps) {
5256 foregroundColor,
5357 hasLogo,
5458 logoImage,
55- logoSize,
5659 loading,
57- onClick,
60+ onToggleFullScreen,
61+ fullScreen,
5862 ariaLabel,
5963 dataTestId,
6064 style,
@@ -64,37 +68,13 @@ export function SessionQRCode(props: SessionQRCodeProps) {
6468 const [ bgColor , setBgColor ] = useState ( backgroundColor ) ;
6569 const [ fgColor , setFgColor ] = useState ( foregroundColor ) ;
6670
67- const qrRef = useRef < QRCode > ( null ) ;
6871 const qrCanvasSize = 1000 ;
69- const canvasLogoSize = logoSize ? ( qrCanvasSize * 0.25 * logoSize ) / logoSize : 250 ;
70-
71- const loadQRCodeDataUrl = async ( ) => {
72- const fileName = `${ id } ${ new Date ( ) . toISOString ( ) } ;
73- let url = '' ;
74-
75- try {
76- url = await renderQRCode (
77- {
78- id : `${ id } ,
79- value,
80- size,
81- hasLogo,
82- logoImage,
83- logoSize,
84- } ,
85- fileName
86- ) ;
87- } catch ( err ) {
88- window . log . error ( `QR code save failed! ${ fileName } ${ err } ) ;
89- }
90- return { fileName, url } ;
91- } ;
72+
73+ const { height, width } = useWindowSize ( ) ;
74+ const smallestDimension = Math . min ( height , width ) ;
9275
9376 const handleOnClick = async ( ) => {
94- const { fileName, url } = await loadQRCodeDataUrl ( ) ;
95- if ( onClick ) {
96- onClick ( fileName , url ) ;
97- }
77+ onToggleFullScreen ?.( ) ;
9878 } ;
9979
10080 useEffect ( ( ) => {
@@ -116,14 +96,17 @@ export function SessionQRCode(props: SessionQRCodeProps) {
11696 }
11797 } , [ backgroundColor , bgColor , fgColor , foregroundColor , hasLogo , loading , logo , logoImage ] ) ;
11898
99+ const Comp = fullScreen ? StyledFullScreenQrView : StyledQRView ;
100+
101+ const overriddenSize = fullScreen ? smallestDimension * 0.75 : size ;
102+
119103 return (
120- < StyledQRView
104+ < Comp
121105 $container = { true }
122106 $justifyContent = "center"
123107 $alignItems = "center"
124- size = { size }
108+ size = { overriddenSize }
125109 id = { id }
126- title = { tr ( 'fullScreenToggle' ) }
127110 aria-label = { ariaLabel || 'QR code' }
128111 onClick = { ( event : MouseEvent < HTMLDivElement > ) => {
129112 event . preventDefault ( ) ;
@@ -135,25 +118,29 @@ export function SessionQRCode(props: SessionQRCodeProps) {
135118 transition = { { duration : THEME_GLOBALS [ '--default-duration-seconds' ] } }
136119 style = { style }
137120 >
138- < QRCode
139- ref = { qrRef }
140- id = { `${ id } }
121+ < QRCodeSVG
141122 value = { value }
142- ecLevel = { 'Q' }
123+ level = { 'Q' }
143124 size = { qrCanvasSize }
144- bgColor = { bgColor }
145- fgColor = { fgColor }
146- quietZone = { 40 }
147- logoImage = { logo }
148- logoWidth = { canvasLogoSize }
149- logoHeight = { canvasLogoSize }
150- removeQrCodeBehindLogo = { true }
151- style = { {
152- width : size ,
153- height : size ,
154- } }
125+ bgColor = { fullScreen ? 'black' : bgColor }
126+ fgColor = { fullScreen ? 'white' : fgColor }
127+ marginSize = { 2 }
128+ style = { { width : overriddenSize , height : overriddenSize } }
129+ imageSettings = {
130+ logoImage && ! fullScreen
131+ ? {
132+ src : logoImage ,
133+ x : undefined ,
134+ y : undefined ,
135+ height : qrCanvasSize * 0.25 ,
136+ width : qrCanvasSize * 0.25 ,
137+ opacity : 1 ,
138+ excavate : true ,
139+ }
140+ : undefined
141+ }
155142 />
156- { children }
157- </ StyledQRView >
143+ { ! fullScreen ? children : null }
144+ </ Comp >
158145 ) ;
159146}
0 commit comments