@digigov/ui 2.0.0-rc.8 → 2.0.2

package/app/QrCodeScanner/index.js

@@ -1,63 +1,31 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "validate", "onScan", "onError", "dataType", "legacyMode"];
-import React from 'react';
-var QrReader = /*#__PURE__*/React.lazy(function () {
-  return import('@uides/react-qr-reader');
-});
-/**
- * QRCodeScanner assumes that the data provided inside the QR code image,
- * are a HTTP link, thus it uses the `encodeURI` function to escape
- * all scanned data that will be forwarded to the `onScan` function
- *
- * When a QR code is scanned, before we run the `onScan` callback function,
- * we do the following:
- *
- * 1. Run a validator function provided in the props of QrCodeScanner component
- *    that receives the *raw* scanned data and returns a boolean type. (eg. check
- *    if it's a gov.gr subdomain, or that it matches the current domain)
- * 2. If the validator returns `true`, then construct a URL object from the data provided
- *    and check if the protocol is `https` and the `origin` is the same as the origin of this page
- * 2. Automatically fallback to the `onError` callback function, if the validation or url check fail
- * 3. Finally, run `onScan` callback function with the scanned data encoded as a URI.
- *
- */
+import react from "react";
+const QrReader = /*#__PURE__*/ react.lazy(()=>import("@uides/react-qr-reader"));
+const QrCodeScanner = ({ children, validate, onScan, onError, dataType = 'url', legacyMode = false, ...props })=>{
+    if ('text' === dataType) console.warn(`Security Warning! The \`text\` dataType could be used to inject XSS code to your application database or user DOM.
 
-export var QrCodeScanner = function QrCodeScanner(_ref) {
-  var children = _ref.children,
-    validate = _ref.validate,
-    onScan = _ref.onScan,
-    onError = _ref.onError,
-    _ref$dataType = _ref.dataType,
-    dataType = _ref$dataType === void 0 ? 'url' : _ref$dataType,
-    _ref$legacyMode = _ref.legacyMode,
-    legacyMode = _ref$legacyMode === void 0 ? false : _ref$legacyMode,
-    props = _objectWithoutProperties(_ref, _excluded);
-  if (dataType === 'text') {
-    console.warn("Security Warning! The `text` dataType could be used to inject XSS code to your application database or user DOM.\n\nIn order to be safe, you can:\n1. Use a sanitizer function inside the `onScan` callback function that makes sure the data is not posing a threat to your app\n2. Contact @digigov-ui for any further details and feature requests.\n3. Read more about xss https://owasp.org/www-community/attacks/xss/\n");
-  }
-  var handleOnScan = function handleOnScan(data) {
-    if (data) {
-      if (dataType === 'url') {
-        try {
-          new URL(data);
-        } catch (e) {
-          return onError(new Error('@digigov-ui XSS Validation failed: qr code payload should follow the pattern `https://dilosi.services.gov.gr/show/:reference_code`'), data);
+In order to be safe, you can:
+1. Use a sanitizer function inside the \`onScan\` callback function that makes sure the data is not posing a threat to your app
+2. Contact @digigov-ui for any further details and feature requests.
+3. Read more about xss https://owasp.org/www-community/attacks/xss/
+`);
+    const handleOnScan = (data)=>{
+        if (data) {
+            if ('url' === dataType) try {
+                new URL(data);
+            } catch  {
+                return onError(new Error('@digigov-ui XSS Validation failed: qr code payload should follow the pattern `https://dilosi.services.gov.gr/show/:reference_code`'), data);
+            }
+            if (validate && !validate(data)) return onError(new Error('Custom QR Code payload validation failed'), data);
+            onScan(data);
         }
-      }
-      // run a validator function provided by the application code
-      if (validate && !validate(data)) {
-        return onError(new Error('Custom QR Code payload validation failed'), data);
-      }
-      // proceed with application defined callback function
-      onScan(data);
-    }
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(QrReader, _extends({
-    delay: 100,
-    onError: onError,
-    onScan: handleOnScan,
-    legacyMode: legacyMode
-  }, props)), children);
+    };
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(QrReader, {
+        delay: 100,
+        onError: onError,
+        onScan: handleOnScan,
+        legacyMode: legacyMode,
+        ...props
+    }), children);
 };
-export default QrCodeScanner;
+const app_QrCodeScanner = QrCodeScanner;
+export { QrCodeScanner, app_QrCodeScanner as default };

package/app/QrCodeViewer/index.d.ts

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

package/app/QrCodeViewer/index.js

@@ -1,143 +1,100 @@
-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 () {
-  try {
-    new Path2D().addPath(new Path2D());
-  } catch (e) {
-    return false;
-  }
-  return true;
+import react, { useEffect, useRef, useState } from "react";
+import qrcodegen from "./qrcodegen.js";
+import { MARGIN_SIZE, excavateModules, generatePath, getImageSettings } from "./utils.js";
+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  {
+        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
+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.
-    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);
+const QrCodeViewer_QrCodeViewerCanvas = /*#__PURE__*/ react.forwardRef(function(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 (null !== _canvas.current) {
+            const canvas = _canvas.current;
+            const ctx = canvas.getContext('2d');
+            if (!ctx) return;
+            let cells = qrcodegen.QrCode.encodeText(value, ERROR_LEVEL_MAP[level]).getModules();
+            const margin = includeMargin ? MARGIN_SIZE : 0;
+            const numCells = cells.length + 2 * margin;
+            const calculatedImageSettings = getImageSettings(cells, size, includeMargin, imageSettings);
+            const image = _image.current;
+            const haveImageToRender = null != calculatedImageSettings && null !== image && image.complete && 0 !== image.naturalHeight && 0 !== image.naturalWidth;
+            if (haveImageToRender && calculatedImageSettings) {
+                if (null != calculatedImageSettings.excavation) cells = excavateModules(cells, calculatedImageSettings.excavation);
+            }
+            const pixelRatio = window.devicePixelRatio || 1;
+            canvas.height = canvas.width = size * pixelRatio;
+            const scale = size / numCells * pixelRatio;
+            ctx.scale(scale, scale);
+            ctx.fillStyle = bgColor;
+            ctx.fillRect(0, 0, numCells, numCells);
+            ctx.fillStyle = fgColor;
+            if (SUPPORTS_PATH2D) 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);
             }
-          });
-        });
-      }
-      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);
+    useEffect(()=>{
+        setIsImageLoaded(false);
+    }, [
+        imgSrc,
+        isImgLoaded
+    ]);
+    const canvasStyle = {
+        height: size,
+        width: size,
+        ...style
+    };
+    let img;
+    if (null != imgSrc) img = /*#__PURE__*/ react.createElement("img", {
+        src: imgSrc,
+        key: imgSrc,
+        style: {
+            display: 'none'
+        },
+        onLoad: ()=>{
+            setIsImageLoaded(true);
+        },
+        ref: _image
+    });
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("canvas", {
+        style: canvasStyle,
+        height: size,
+        width: size,
+        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_QrCodeViewer = /*#__PURE__*/ react.forwardRef(function(props, ref) {
+    return /*#__PURE__*/ react.createElement(QrCodeViewer_QrCodeViewerCanvas, {
+        ...props,
+        ref: ref
+    });
 });
-export default QrCodeViewer;
+const app_QrCodeViewer = QrCodeViewer_QrCodeViewer;
+export { QrCodeViewer_QrCodeViewer as QrCodeViewer, app_QrCodeViewer as default };