@sky-mavis/tanto-widget/dist/cjs/components/qr-code/QRCode.cjs

Tanto Widget

'use strict';

var jsxRuntime = require('@emotion/react/jsx-runtime');
var react$1 = require('@emotion/react');
var QRCodeStyling = require('qr-code-styling');
var react = require('react');
var dataUris = require('../../assets/data-uris.cjs');

const SIZE = 236;
const RADIUS = 24;
const QRCode = react.memo(({
  value,
  size = SIZE,
  logo = dataUris.blueFilledWCLogoUri
}) => {
  const theme = react$1.useTheme();
  const qrRef = react.useRef(null);
  const qrCodeRef = react.useRef(null);
  const defaultOptions = react.useMemo(() => ({
    type: 'svg',
    dotsOptions: {
      type: 'dots',
      gradient: {
        type: 'radial',
        colorStops: [{
          offset: 0.0,
          color: '#0c6fff'
        }, {
          offset: 0.12,
          color: '#105fff'
        }, {
          offset: 0.25,
          color: '#104aff'
        }, {
          offset: 0.4,
          color: '#0e3fff'
        }, {
          offset: 0.55,
          color: '#1325c2'
        }, {
          offset: 0.7,
          color: '#1a2fb3'
        }, {
          offset: 0.85,
          color: '#1f3a88'
        }, {
          offset: 0.98,
          color: '#1b1d5a'
        }, {
          offset: 1.0,
          color: '#201f1d'
        }]
      }
    },
    cornersSquareOptions: {
      type: 'extra-rounded',
      color: '#201f1d'
    },
    cornersDotOptions: {
      type: 'dot',
      color: '#201f1d'
    },
    backgroundOptions: {
      color: theme.qrcodeBackground
    },
    imageOptions: {
      margin: 3,
      imageSize: 0.18
    },
    qrOptions: {
      errorCorrectionLevel: 'H'
    }
  }), [theme]);
  react.useEffect(() => {
    if (!qrRef.current) return;
    if (!qrCodeRef.current) {
      qrCodeRef.current = new QRCodeStyling({
        width: size,
        height: size,
        data: value,
        image: logo,
        ...defaultOptions
      });
      qrCodeRef.current.append(qrRef.current);
    } else {
      qrCodeRef.current.update({
        width: size,
        height: size,
        data: value,
        image: logo
      });
    }
    return () => {
      if (qrRef.current) {
        qrRef.current.innerHTML = '';
      }
      qrCodeRef.current = null;
    };
  }, [value, size, logo]);
  return jsxRuntime.jsx("div", {
    ref: qrRef,
    css: {
      width: size,
      height: size,
      borderRadius: RADIUS,
      overflow: 'hidden'
    }
  });
});

exports.QRCode = QRCode;