@digigov/ui 0.26.2 → 0.26.4

package/esm/app/QrCodeViewer/index.js

@@ -0,0 +1,224 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["value", "size", "level", "bgColor", "fgColor", "includeMargin", "style", "imageSettings"],
+    _excluded2 = ["value", "size", "level", "bgColor", "fgColor", "includeMargin", "imageSettings"],
+    _excluded3 = ["renderAs"];
+import React, { useRef, useEffect, useState } from 'react';
+import qrcodegen from '@digigov/ui/app/QrCodeViewer/qrcodegen';
+import { generatePath, excavateModules, getImageSettings, MARGIN_SIZE } from '@digigov/ui/app/QrCodeViewer/utils';
+var DEFAULT_SIZE = 128;
+var DEFAULT_LEVEL = 'L';
+var DEFAULT_BGCOLOR = '#FFFFFF';
+var DEFAULT_FGCOLOR = '#000000';
+var DEFAULT_INCLUDEMARGIN = false;
+
+var SUPPORTS_PATH2D = function () {
+  try {
+    new Path2D().addPath(new Path2D());
+  } catch (e) {
+    return false;
+  }
+
+  return true;
+}();
+
+var ERROR_LEVEL_MAP = {
+  L: qrcodegen.QrCode.Ecc.LOW,
+  M: qrcodegen.QrCode.Ecc.MEDIUM,
+  Q: qrcodegen.QrCode.Ecc.QUARTILE,
+  H: qrcodegen.QrCode.Ecc.HIGH
+};
+
+function QrCodeViewerCanvas(props) {
+  var value = props.value,
+      _props$size = props.size,
+      size = _props$size === void 0 ? DEFAULT_SIZE : _props$size,
+      _props$level = props.level,
+      level = _props$level === void 0 ? DEFAULT_LEVEL : _props$level,
+      _props$bgColor = props.bgColor,
+      bgColor = _props$bgColor === void 0 ? DEFAULT_BGCOLOR : _props$bgColor,
+      _props$fgColor = props.fgColor,
+      fgColor = _props$fgColor === void 0 ? DEFAULT_FGCOLOR : _props$fgColor,
+      _props$includeMargin = props.includeMargin,
+      includeMargin = _props$includeMargin === void 0 ? DEFAULT_INCLUDEMARGIN : _props$includeMargin,
+      style = props.style,
+      imageSettings = props.imageSettings,
+      otherProps = _objectWithoutProperties(props, _excluded);
+
+  var imgSrc = imageSettings === null || imageSettings === void 0 ? void 0 : imageSettings.src;
+
+  var _canvas = useRef(null);
+
+  var _image = useRef(null); // We're just using this state to trigger rerenders when images load. We
+  // Don't actually read the value anywhere. A smarter use of useEffect would
+  // depend on this value.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isImgLoaded = _useState2[0],
+      setIsImageLoaded = _useState2[1];
+
+  useEffect(function () {
+    // Always update the canvas. It's cheap enough and we want to be correct
+    // with the current state.
+    if (_canvas.current !== null) {
+      var canvas = _canvas.current;
+      var ctx = canvas.getContext('2d');
+
+      if (!ctx) {
+        return;
+      }
+
+      var cells = qrcodegen.QrCode.encodeText(value, ERROR_LEVEL_MAP[level]).getModules();
+      var margin = includeMargin ? MARGIN_SIZE : 0;
+      var numCells = cells.length + margin * 2;
+      var calculatedImageSettings = getImageSettings(cells, size, includeMargin, imageSettings);
+      var image = _image.current;
+      var haveImageToRender = calculatedImageSettings != null && image !== null && image.complete && image.naturalHeight !== 0 && image.naturalWidth !== 0;
+
+      if (haveImageToRender && calculatedImageSettings) {
+        if (calculatedImageSettings.excavation != null) {
+          cells = excavateModules(cells, calculatedImageSettings.excavation);
+        }
+      } // We're going to scale this so that the number of drawable units
+      // matches the number of cells. This avoids rounding issues, but does
+      // result in some potentially unwanted single pixel issues between
+      // blocks, only in environments that don't support Path2D.
+
+
+      var pixelRatio = window.devicePixelRatio || 1;
+      canvas.height = canvas.width = size * pixelRatio;
+      var scale = size / numCells * pixelRatio;
+      ctx.scale(scale, scale); // Draw solid background, only paint dark modules.
+
+      ctx.fillStyle = bgColor;
+      ctx.fillRect(0, 0, numCells, numCells);
+      ctx.fillStyle = fgColor;
+
+      if (SUPPORTS_PATH2D) {
+        // $FlowFixMe: Path2D c'tor doesn't support args yet.
+        ctx.fill(new Path2D(generatePath(cells, margin)));
+      } else {
+        cells.forEach(function (row, rdx) {
+          row.forEach(function (cell, cdx) {
+            if (cell) {
+              ctx.fillRect(cdx + margin, rdx + margin, 1, 1);
+            }
+          });
+        });
+      }
+
+      if (haveImageToRender && calculatedImageSettings) {
+        if (image instanceof HTMLImageElement) {
+          ctx.drawImage(image, calculatedImageSettings.x + margin, calculatedImageSettings.y + margin, calculatedImageSettings.w, calculatedImageSettings.h);
+        }
+      }
+    }
+  }); // Ensure we mark image loaded as false here so we trigger updating the
+  // canvas in our other effect.
+
+  useEffect(function () {
+    setIsImageLoaded(false);
+  }, [imgSrc, isImgLoaded]);
+
+  var canvasStyle = _extends({
+    height: size,
+    width: size
+  }, style);
+
+  var img;
+
+  if (imgSrc != null) {
+    img = /*#__PURE__*/React.createElement("img", {
+      src: imgSrc,
+      key: imgSrc,
+      style: {
+        display: 'none'
+      },
+      onLoad: function onLoad() {
+        setIsImageLoaded(true);
+      },
+      ref: _image
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("canvas", _extends({
+    style: canvasStyle,
+    height: size,
+    width: size,
+    ref: _canvas
+  }, otherProps)), img);
+}
+
+function QrCodeViewerSVG(props) {
+  var value = props.value,
+      _props$size2 = props.size,
+      size = _props$size2 === void 0 ? DEFAULT_SIZE : _props$size2,
+      _props$level2 = props.level,
+      level = _props$level2 === void 0 ? DEFAULT_LEVEL : _props$level2,
+      _props$bgColor2 = props.bgColor,
+      bgColor = _props$bgColor2 === void 0 ? DEFAULT_BGCOLOR : _props$bgColor2,
+      _props$fgColor2 = props.fgColor,
+      fgColor = _props$fgColor2 === void 0 ? DEFAULT_FGCOLOR : _props$fgColor2,
+      _props$includeMargin2 = props.includeMargin,
+      includeMargin = _props$includeMargin2 === void 0 ? DEFAULT_INCLUDEMARGIN : _props$includeMargin2,
+      imageSettings = props.imageSettings,
+      otherProps = _objectWithoutProperties(props, _excluded2);
+
+  var cells = qrcodegen.QrCode.encodeText(value, ERROR_LEVEL_MAP[level]).getModules();
+  var margin = includeMargin ? MARGIN_SIZE : 0;
+  var numCells = cells.length + margin * 2;
+  var calculatedImageSettings = getImageSettings(cells, size, includeMargin, imageSettings);
+  var image;
+
+  if (imageSettings != null && calculatedImageSettings != null) {
+    if (calculatedImageSettings.excavation != null) {
+      cells = excavateModules(cells, calculatedImageSettings.excavation);
+    }
+
+    image = /*#__PURE__*/React.createElement("image", {
+      xlinkHref: imageSettings.src,
+      height: calculatedImageSettings.h,
+      width: calculatedImageSettings.w,
+      x: calculatedImageSettings.x + margin,
+      y: calculatedImageSettings.y + margin,
+      preserveAspectRatio: "none"
+    });
+  } // Drawing strategy: instead of a rect per module, we're going to create a
+  // single path for the dark modules and layer that on top of a light rect,
+  // for a total of 2 DOM nodes. We pay a bit more in string concat but that's
+  // way faster than DOM ops.
+  // For level 1, 441 nodes -> 2
+  // For level 40, 31329 -> 2
+
+
+  var fgPath = generatePath(cells, margin);
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    height: size,
+    width: size,
+    viewBox: "0 0 ".concat(numCells, " ").concat(numCells)
+  }, otherProps), /*#__PURE__*/React.createElement("path", {
+    fill: bgColor,
+    d: "M0,0 h".concat(numCells, "v").concat(numCells, "H0z"),
+    shapeRendering: "crispEdges"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: fgColor,
+    d: fgPath,
+    shapeRendering: "crispEdges"
+  }), image);
+}
+
+export var QrCodeViewer = function QrCodeViewer(props) {
+  var renderAs = props.renderAs,
+      otherProps = _objectWithoutProperties(props, _excluded3);
+
+  if (renderAs === 'svg') {
+    return /*#__PURE__*/React.createElement(QrCodeViewerSVG, otherProps);
+  }
+
+  return /*#__PURE__*/React.createElement(QrCodeViewerCanvas, otherProps);
+};
+export default QrCodeViewer;

package/esm/app/QrCodeViewer/index.mdx

@@ -0,0 +1,21 @@
+---
+id: qr-code
+title: QrCodeViewer
+
+---
+
+```bash
+import QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
+``` 
+
+## How to use
+
+### Default QrCodeViewer
+
+<Story packageName="@digigov/ui" component="app/QrCodeViewer" story="Default.tsx" />
+
+### Custom QrCodeViewer
+
+<Story packageName="@digigov/ui" component="app/QrCodeViewer" story="Custom.tsx" />
+
+