All files / src/components/views/Credentials/CredentialShare ShareViaQr.tsx

0% Statements 0/16
0% Branches 0/24
0% Functions 0/6
0% Lines 0/16

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>
  );
};