@stellar-expert/ui-framework 1.14.13 → 1.14.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/interaction/qr-code.js +2 -12
- package/package.json +1 -1
package/interaction/qr-code.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, {useMemo, useRef} from 'react'
|
|
2
|
-
import
|
|
2
|
+
import {QRCodeCanvas} from 'qrcode.react'
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* QrCode renderer
|
|
@@ -14,7 +14,7 @@ export const QrCode = React.memo(function QrCode({value, caption, size = 320, em
|
|
|
14
14
|
const foreground = useMemo(() => getComputedStyle(document.documentElement).getPropertyValue('--color-primary'))
|
|
15
15
|
const containerRef = useRef()
|
|
16
16
|
return <div className="text-center" ref={containerRef}>
|
|
17
|
-
<
|
|
17
|
+
<QRCodeCanvas value={value} size={256} level="Q" includeMargin imageSettings={embedImage(embeddedImage, embeddedSize, size)}
|
|
18
18
|
fgColor={foreground} style={{width: size + 'px', height: size + 'px', display: 'block', margin: 'auto'}}/>
|
|
19
19
|
{!!caption && <div className="text-small dimmed condensed word-break">{caption}</div>}
|
|
20
20
|
</div>
|
|
@@ -32,14 +32,4 @@ function embedImage(src, size, qrSize) {
|
|
|
32
32
|
width: size,
|
|
33
33
|
excavate: true
|
|
34
34
|
}
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
function download(container, caption) {
|
|
38
|
-
const canvas = container.querySelector('canvas')
|
|
39
|
-
const link = document.createElement('a')
|
|
40
|
-
link.href = canvas.toDataURL()
|
|
41
|
-
link.download = caption ? caption.replace(/\W+/g, '-') + '-qr.png' : `qr${new Date().getTime()}.png`
|
|
42
|
-
document.body.appendChild(link)
|
|
43
|
-
link.click()
|
|
44
|
-
document.body.removeChild(link)
|
|
45
35
|
}
|