@digigov/ui 0.26.2 → 0.26.4

package/app/QrCodeViewer/index.js

@@ -0,0 +1,248 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.QrCodeViewer = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _qrcodegen = _interopRequireDefault(require("@digigov/ui/app/QrCodeViewer/qrcodegen"));
+
+var _utils = require("@digigov/ui/app/QrCodeViewer/utils");
+
+var _excluded = ["value", "size", "level", "bgColor", "fgColor", "includeMargin", "style", "imageSettings"],
+    _excluded2 = ["value", "size", "level", "bgColor", "fgColor", "includeMargin", "imageSettings"],
+    _excluded3 = ["renderAs"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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["default"].QrCode.Ecc.LOW,
+  M: _qrcodegen["default"].QrCode.Ecc.MEDIUM,
+  Q: _qrcodegen["default"].QrCode.Ecc.QUARTILE,
+  H: _qrcodegen["default"].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 = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var imgSrc = imageSettings === null || imageSettings === void 0 ? void 0 : imageSettings.src;
+
+  var _canvas = (0, _react.useRef)(null);
+
+  var _image = (0, _react.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 = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isImgLoaded = _useState2[0],
+      setIsImageLoaded = _useState2[1];
+
+  (0, _react.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["default"].QrCode.encodeText(value, ERROR_LEVEL_MAP[level]).getModules();
+
+      var margin = includeMargin ? _utils.MARGIN_SIZE : 0;
+      var numCells = cells.length + margin * 2;
+      var calculatedImageSettings = (0, _utils.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 = (0, _utils.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((0, _utils.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.
+
+  (0, _react.useEffect)(function () {
+    setIsImageLoaded(false);
+  }, [imgSrc, isImgLoaded]);
+  var canvasStyle = (0, _extends2["default"])({
+    height: size,
+    width: size
+  }, style);
+  var img;
+
+  if (imgSrc != null) {
+    img = /*#__PURE__*/_react["default"].createElement("img", {
+      src: imgSrc,
+      key: imgSrc,
+      style: {
+        display: 'none'
+      },
+      onLoad: function onLoad() {
+        setIsImageLoaded(true);
+      },
+      ref: _image
+    });
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("canvas", (0, _extends2["default"])({
+    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 = (0, _objectWithoutProperties2["default"])(props, _excluded2);
+
+  var cells = _qrcodegen["default"].QrCode.encodeText(value, ERROR_LEVEL_MAP[level]).getModules();
+
+  var margin = includeMargin ? _utils.MARGIN_SIZE : 0;
+  var numCells = cells.length + margin * 2;
+  var calculatedImageSettings = (0, _utils.getImageSettings)(cells, size, includeMargin, imageSettings);
+  var image;
+
+  if (imageSettings != null && calculatedImageSettings != null) {
+    if (calculatedImageSettings.excavation != null) {
+      cells = (0, _utils.excavateModules)(cells, calculatedImageSettings.excavation);
+    }
+
+    image = /*#__PURE__*/_react["default"].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 = (0, _utils.generatePath)(cells, margin);
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
+    height: size,
+    width: size,
+    viewBox: "0 0 ".concat(numCells, " ").concat(numCells)
+  }, otherProps), /*#__PURE__*/_react["default"].createElement("path", {
+    fill: bgColor,
+    d: "M0,0 h".concat(numCells, "v").concat(numCells, "H0z"),
+    shapeRendering: "crispEdges"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    fill: fgColor,
+    d: fgPath,
+    shapeRendering: "crispEdges"
+  }), image);
+}
+
+var QrCodeViewer = function QrCodeViewer(props) {
+  var renderAs = props.renderAs,
+      otherProps = (0, _objectWithoutProperties2["default"])(props, _excluded3);
+
+  if (renderAs === 'svg') {
+    return /*#__PURE__*/_react["default"].createElement(QrCodeViewerSVG, otherProps);
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(QrCodeViewerCanvas, otherProps);
+};
+
+exports.QrCodeViewer = QrCodeViewer;
+var _default = QrCodeViewer;
+exports["default"] = _default;

package/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" />
+
+

package/app/QrCodeViewer/qrcodegen.d.ts

@@ -0,0 +1,100 @@
+/**
+ * @license QR Code generator library (TypeScript)
+ * Copyright (c) Project Nayuki.
+ * SPDX-License-Identifier: MIT
+ */
+declare namespace qrcodegen {
+    type bit = number;
+    type byte = number;
+    type int = number;
+    export class QrCode {
+        static encodeText(text: string, ecl: QrCode.Ecc): QrCode;
+        static encodeBinary(data: Readonly<Array<byte>>, ecl: QrCode.Ecc): QrCode;
+        static encodeSegments(segs: Readonly<Array<QrSegment>>, ecl: QrCode.Ecc, minVersion?: int, maxVersion?: int, mask?: int, boostEcl?: boolean): QrCode;
+        readonly version: int;
+        readonly errorCorrectionLevel: QrCode.Ecc;
+        readonly size: int;
+        readonly mask: int;
+        private readonly modules;
+        private readonly isFunction;
+        constructor(version: int, errorCorrectionLevel: QrCode.Ecc, dataCodewords: Readonly<Array<byte>>, msk: int);
+        getModule(x: int, y: int): boolean;
+        getModules(): boolean[][];
+        private drawFunctionPatterns;
+        private drawFormatBits;
+        private drawVersion;
+        private drawFinderPattern;
+        private drawAlignmentPattern;
+        private setFunctionModule;
+        private addEccAndInterleave;
+        private drawCodewords;
+        private applyMask;
+        private getPenaltyScore;
+        private getAlignmentPatternPositions;
+        private static getNumRawDataModules;
+        private static getNumDataCodewords;
+        private static reedSolomonComputeDivisor;
+        private static reedSolomonComputeRemainder;
+        private static reedSolomonMultiply;
+        private finderPenaltyCountPatterns;
+        private finderPenaltyTerminateAndCount;
+        private finderPenaltyAddHistory;
+        static readonly MIN_VERSION: int;
+        static readonly MAX_VERSION: int;
+        private static readonly PENALTY_N1;
+        private static readonly PENALTY_N2;
+        private static readonly PENALTY_N3;
+        private static readonly PENALTY_N4;
+        private static readonly ECC_CODEWORDS_PER_BLOCK;
+        private static readonly NUM_ERROR_CORRECTION_BLOCKS;
+    }
+    export class QrSegment {
+        static makeBytes(data: Readonly<Array<byte>>): QrSegment;
+        static makeNumeric(digits: string): QrSegment;
+        static makeAlphanumeric(text: string): QrSegment;
+        static makeSegments(text: string): Array<QrSegment>;
+        static makeEci(assignVal: int): QrSegment;
+        static isNumeric(text: string): boolean;
+        static isAlphanumeric(text: string): boolean;
+        readonly mode: QrSegment.Mode;
+        readonly numChars: int;
+        private readonly bitData;
+        constructor(mode: QrSegment.Mode, numChars: int, bitData: Array<bit>);
+        getData(): Array<bit>;
+        static getTotalBits(segs: Readonly<Array<QrSegment>>, version: int): number;
+        private static toUtf8ByteArray;
+        private static readonly NUMERIC_REGEX;
+        private static readonly ALPHANUMERIC_REGEX;
+        private static readonly ALPHANUMERIC_CHARSET;
+    }
+    export {};
+}
+declare namespace qrcodegen.QrCode {
+    type int = number;
+    export class Ecc {
+        static readonly LOW: Ecc;
+        static readonly MEDIUM: Ecc;
+        static readonly QUARTILE: Ecc;
+        static readonly HIGH: Ecc;
+        readonly ordinal: int;
+        readonly formatBits: int;
+        private constructor();
+    }
+    export {};
+}
+declare namespace qrcodegen.QrSegment {
+    type int = number;
+    export class Mode {
+        static readonly NUMERIC: Mode;
+        static readonly ALPHANUMERIC: Mode;
+        static readonly BYTE: Mode;
+        static readonly KANJI: Mode;
+        static readonly ECI: Mode;
+        readonly modeBits: int;
+        private readonly numBitsCharCount;
+        private constructor();
+        numCharCountBits(ver: int): int;
+    }
+    export {};
+}
+export default qrcodegen;