@digigov/ui 1.2.0-a7ffb5dc → 2.0.0-7d9a8d86

package/app/QrCodeViewer/index.d.ts

@@ -3,3 +3,4 @@ import { QRPropsCanvas } from '@digigov/ui/app/QrCodeViewer/types';
 export interface QrCodeViewerProps extends QRPropsCanvas {
 }
 export declare const QrCodeViewer: React.ForwardRefExoticComponent<QrCodeViewerProps & React.RefAttributes<unknown>>;
+export default QrCodeViewer;

package/app/QrCodeViewer/index.js

@@ -1,16 +1,17 @@
-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"];
-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 () {
+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";
+const DEFAULT_SIZE = 128;
+const DEFAULT_LEVEL = "L";
+const DEFAULT_BGCOLOR = "#FFFFFF";
+const DEFAULT_FGCOLOR = "#000000";
+const DEFAULT_INCLUDEMARGIN = false;
+const SUPPORTS_PATH2D = function() {
   try {
     new Path2D().addPath(new Path2D());
   } catch (e) {
@@ -18,79 +19,59 @@ var SUPPORTS_PATH2D = function () {
   }
   return true;
 }();
-var ERROR_LEVEL_MAP = {
+const ERROR_LEVEL_MAP = {
   L: qrcodegen.QrCode.Ecc.LOW,
   M: qrcodegen.QrCode.Ecc.MEDIUM,
   Q: qrcodegen.QrCode.Ecc.QUARTILE,
   H: qrcodegen.QrCode.Ecc.HIGH
 };
-var QrCodeViewerCanvas = /*#__PURE__*/React.forwardRef(function QrCodeViewerCanvas(props, ref) {
-  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 _canvasRef = useRef(null);
-  var _canvas = ref || _canvasRef;
-  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.
+const QrCodeViewerCanvas = React.forwardRef(function QrCodeViewerCanvas2(props, ref) {
+  const {
+    value,
+    size = DEFAULT_SIZE,
+    level = DEFAULT_LEVEL,
+    bgColor = DEFAULT_BGCOLOR,
+    fgColor = DEFAULT_FGCOLOR,
+    includeMargin = DEFAULT_INCLUDEMARGIN,
+    style,
+    imageSettings,
+    ...otherProps
+  } = props;
+  const imgSrc = imageSettings?.src;
+  const _canvasRef = useRef(null);
+  const _canvas = ref || _canvasRef;
+  const _image = useRef(null);
+  const [isImgLoaded, setIsImageLoaded] = useState(false);
+  useEffect(() => {
     if (_canvas.current !== null) {
-      var canvas = _canvas.current;
-      var ctx = canvas.getContext('2d');
+      const canvas = _canvas.current;
+      const 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;
+      let cells = qrcodegen.QrCode.encodeText(value, ERROR_LEVEL_MAP[level]).getModules();
+      const margin = includeMargin ? MARGIN_SIZE : 0;
+      const numCells = cells.length + margin * 2;
+      const calculatedImageSettings = getImageSettings(cells, size, includeMargin, imageSettings);
+      const image = _image.current;
+      const 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;
+      const pixelRatio = window.devicePixelRatio || 1;
       canvas.height = canvas.width = size * pixelRatio;
-      var scale = size / numCells * pixelRatio;
+      const 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) {
+        cells.forEach(function(row, rdx) {
+          row.forEach(function(cell, cdx) {
             if (cell) {
               ctx.fillRect(cdx + margin, rdx + margin, 1, 1);
             }
@@ -104,39 +85,39 @@ var QrCodeViewerCanvas = /*#__PURE__*/React.forwardRef(function QrCodeViewerCanv
       }
     }
   });
-
-  // Ensure we mark image loaded as false here so we trigger updating the
-  // canvas in our other effect.
-  useEffect(function () {
+  useEffect(() => {
     setIsImageLoaded(false);
   }, [imgSrc, isImgLoaded]);
-  var canvasStyle = _extends({
-    height: size,
-    width: size
-  }, style);
-  var img;
+  const canvasStyle = {height: size, width: size, ...style};
+  let img;
   if (imgSrc != null) {
-    img = /*#__PURE__*/React.createElement("img", {
+    img = /* @__PURE__ */ React.createElement("img", {
       src: imgSrc,
       key: imgSrc,
-      style: {
-        display: 'none'
-      },
-      onLoad: function onLoad() {
+      style: {display: "none"},
+      onLoad: () => {
         setIsImageLoaded(true);
       },
       ref: _image
     });
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("canvas", _extends({
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("canvas", {
     style: canvasStyle,
     height: size,
     width: size,
-    ref: _canvas
-  }, otherProps)), img);
+    ref: _canvas,
+    ...otherProps
+  }), img);
 });
-export var QrCodeViewer = /*#__PURE__*/React.forwardRef(function QrCodeViewer(props, ref) {
-  return /*#__PURE__*/React.createElement(QrCodeViewerCanvas, _extends({}, props, {
-    ref: ref
-  }));
-});
+const QrCodeViewer = React.forwardRef(function QrCodeViewer2(props, ref) {
+  return /* @__PURE__ */ React.createElement(QrCodeViewerCanvas, {
+    ...props,
+    ref
+  });
+});
+var QrCodeViewer_default = QrCodeViewer;
+export {
+  QrCodeViewer,
+  QrCodeViewer_default as default
+};
+//# sourceMappingURL=index.js.map

package/app/QrCodeViewer/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/app/QrCodeViewer/index.tsx"],
+  "sourcesContent": ["import React, { useRef, useEffect, useState } from 'react';\nimport qrcodegen from '@digigov/ui/app/QrCodeViewer/qrcodegen';\nimport { QRPropsCanvas } from '@digigov/ui/app/QrCodeViewer/types';\nimport {\n  generatePath,\n  excavateModules,\n  getImageSettings,\n  MARGIN_SIZE,\n} from '@digigov/ui/app/QrCodeViewer/utils';\n\nconst DEFAULT_SIZE = 128;\nconst DEFAULT_LEVEL = 'L';\nconst DEFAULT_BGCOLOR = '#FFFFFF';\nconst DEFAULT_FGCOLOR = '#000000';\nconst DEFAULT_INCLUDEMARGIN = false;\n\nconst SUPPORTS_PATH2D = (function () {\n  try {\n    new Path2D().addPath(new Path2D());\n  } catch (e) {\n    return false;\n  }\n  return true;\n})();\nconst ERROR_LEVEL_MAP: { [index: string]: qrcodegen.QrCode.Ecc } = {\n  L: qrcodegen.QrCode.Ecc.LOW,\n  M: qrcodegen.QrCode.Ecc.MEDIUM,\n  Q: qrcodegen.QrCode.Ecc.QUARTILE,\n  H: qrcodegen.QrCode.Ecc.HIGH,\n};\nconst QrCodeViewerCanvas = React.forwardRef(function QrCodeViewerCanvas(\n  props: QRPropsCanvas,\n  ref: any\n) {\n  const {\n    value,\n    size = DEFAULT_SIZE,\n    level = DEFAULT_LEVEL,\n    bgColor = DEFAULT_BGCOLOR,\n    fgColor = DEFAULT_FGCOLOR,\n    includeMargin = DEFAULT_INCLUDEMARGIN,\n    style,\n    imageSettings,\n    ...otherProps\n  } = props;\n  const imgSrc = imageSettings?.src;\n  const _canvasRef = useRef<HTMLCanvasElement>(null);\n  const _canvas = ref || _canvasRef;\n  const _image = useRef<HTMLImageElement>(null);\n  // We're just using this state to trigger rerenders when images load. We\n  // Don't actually read the value anywhere. A smarter use of useEffect would\n  // depend on this value.\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const [isImgLoaded, setIsImageLoaded] = useState(false);\n\n  useEffect(() => {\n    // Always update the canvas. It's cheap enough and we want to be correct\n    // with the current state.\n    if (_canvas.current !== null) {\n      const canvas = _canvas.current;\n\n      const ctx = canvas.getContext('2d');\n      if (!ctx) {\n        return;\n      }\n\n      let cells = qrcodegen.QrCode.encodeText(\n        value,\n        ERROR_LEVEL_MAP[level]\n      ).getModules();\n\n      const margin = includeMargin ? MARGIN_SIZE : 0;\n      const numCells = cells.length + margin * 2;\n      const calculatedImageSettings = getImageSettings(\n        cells,\n        size,\n        includeMargin,\n        imageSettings\n      );\n\n      const image = _image.current;\n      const haveImageToRender =\n        calculatedImageSettings != null &&\n        image !== null &&\n        image.complete &&\n        image.naturalHeight !== 0 &&\n        image.naturalWidth !== 0;\n\n      if (haveImageToRender && calculatedImageSettings) {\n        if (calculatedImageSettings.excavation != null) {\n          cells = excavateModules(cells, calculatedImageSettings.excavation);\n        }\n      }\n\n      // We're going to scale this so that the number of drawable units\n      // matches the number of cells. This avoids rounding issues, but does\n      // result in some potentially unwanted single pixel issues between\n      // blocks, only in environments that don't support Path2D.\n      const pixelRatio = window.devicePixelRatio || 1;\n      canvas.height = canvas.width = size * pixelRatio;\n      const scale = (size / numCells) * pixelRatio;\n      ctx.scale(scale, scale);\n\n      // Draw solid background, only paint dark modules.\n      ctx.fillStyle = bgColor;\n      ctx.fillRect(0, 0, numCells, numCells);\n\n      ctx.fillStyle = fgColor;\n      if (SUPPORTS_PATH2D) {\n        // $FlowFixMe: Path2D c'tor doesn't support args yet.\n        ctx.fill(new Path2D(generatePath(cells, margin)));\n      } else {\n        cells.forEach(function (row, rdx) {\n          row.forEach(function (cell, cdx) {\n            if (cell) {\n              ctx.fillRect(cdx + margin, rdx + margin, 1, 1);\n            }\n          });\n        });\n      }\n\n      if (haveImageToRender && calculatedImageSettings) {\n        if (image instanceof HTMLImageElement) {\n          ctx.drawImage(\n            image,\n            calculatedImageSettings.x + margin,\n            calculatedImageSettings.y + margin,\n            calculatedImageSettings.w,\n            calculatedImageSettings.h\n          );\n        }\n      }\n    }\n  });\n\n  // Ensure we mark image loaded as false here so we trigger updating the\n  // canvas in our other effect.\n  useEffect(() => {\n    setIsImageLoaded(false);\n  }, [imgSrc, isImgLoaded]);\n\n  const canvasStyle = { height: size, width: size, ...style };\n  let img;\n  if (imgSrc != null) {\n    img = (\n      <img\n        src={imgSrc}\n        key={imgSrc}\n        style={{ display: 'none' }}\n        onLoad={() => {\n          setIsImageLoaded(true);\n        }}\n        ref={_image}\n      />\n    );\n  }\n  return (\n    <>\n      <canvas\n        style={canvasStyle}\n        height={size}\n        width={size}\n        ref={_canvas}\n        {...otherProps}\n      />\n      {img}\n    </>\n  );\n});\n\nexport interface QrCodeViewerProps extends QRPropsCanvas {}\n\nexport const QrCodeViewer = React.forwardRef(function QrCodeViewer(\n  props: QrCodeViewerProps,\n  ref\n) {\n  return <QrCodeViewerCanvas {...props} ref={ref} />;\n});\n\nexport default QrCodeViewer;"],
+  "mappings": "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",
+  "names": []
+}