Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | import { useState, useCallback, useEffect } from "react"; import { Box, Button, Flex } from "rimble-ui"; import { FileDownload, ContentCopy } from "@rimble/icons"; import styled from "styled-components"; import QRCode from "qrcode.react"; import { colors } from "../../../../themes"; import { downloadCanvasImage, copyImageSupported, copyCanvasImage } from "../../../../utils/helpers"; const StyledQRCode = styled(QRCode)` max-width: 100%; height: auto !important; `; export interface ShareViaQrProps { url: string; inline?: boolean; } export const ShareViaQr: React.FunctionComponent<ShareViaQrProps> = (props) => { const { url, inline } = props; const [canvas, setCanvas] = useState<HTMLCanvasElement | undefined>(); const [copied, setCopied] = useState(false); useEffect(() => { if (copied) { setTimeout(() => { setCopied(false); }, 2500); } }, [copied]); const getCanvasNode = useCallback((node) => { setCanvas(node?.querySelector("canvas")); }, []); const PrimaryButton = inline ? Button : Button.Text; const SecondaryButton = inline ? Button.Outline : Button.Text; return ( <Flex flexDirection={inline ? "row" : "column"} alignItems="center"> <Box ref={getCanvasNode} p={3} mb={inline ? 0 : 4} border={inline ? 4 : undefined} backgroundColor={inline ? colors.nearWhite : "transparent"} maxWidth={8} > <StyledQRCode value={url} renderAs="canvas" size={512} bgColor="transparent" /> </Box> <Flex pl={inline ? 4 : 0} flexDirection="column" justifyContent="center"> <PrimaryButton size="small" mb={3} onClick={() => canvas && downloadCanvasImage(canvas, "credential-QR-code.png")} > <FileDownload size="15px" mr={2} /> Download QR code </PrimaryButton> {copyImageSupported && ( <SecondaryButton size="small" onClick={() => canvas && setCopied(copyCanvasImage(canvas))}> <ContentCopy size="15px" mr={2} /> {copied ? "Copied" : "Copy to clipboard"} </SecondaryButton> )} </Flex> </Flex> ); }; |