QRCodeSVG.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.QRCodeSVG = void 0;
  7. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  8. var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
  9. var _react = _interopRequireDefault(require("react"));
  10. var _utils = require("./utils");
  11. var _useQRCode2 = require("./hooks/useQRCode");
  12. var _excluded = ["value", "size", "level", "bgColor", "fgColor", "includeMargin", "minVersion", "title", "marginSize", "imageSettings"];
  13. var QRCodeSVG = exports.QRCodeSVG = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
  14. var value = props.value,
  15. _props$size = props.size,
  16. size = _props$size === void 0 ? _utils.DEFAULT_SIZE : _props$size,
  17. _props$level = props.level,
  18. level = _props$level === void 0 ? _utils.DEFAULT_LEVEL : _props$level,
  19. _props$bgColor = props.bgColor,
  20. bgColor = _props$bgColor === void 0 ? _utils.DEFAULT_BACKGROUND_COLOR : _props$bgColor,
  21. _props$fgColor = props.fgColor,
  22. fgColor = _props$fgColor === void 0 ? _utils.DEFAULT_FRONT_COLOR : _props$fgColor,
  23. _props$includeMargin = props.includeMargin,
  24. includeMargin = _props$includeMargin === void 0 ? _utils.DEFAULT_NEED_MARGIN : _props$includeMargin,
  25. _props$minVersion = props.minVersion,
  26. minVersion = _props$minVersion === void 0 ? _utils.DEFAULT_MINVERSION : _props$minVersion,
  27. title = props.title,
  28. marginSize = props.marginSize,
  29. imageSettings = props.imageSettings,
  30. otherProps = (0, _objectWithoutProperties2.default)(props, _excluded);
  31. var _useQRCode = (0, _useQRCode2.useQRCode)({
  32. value: value,
  33. level: level,
  34. minVersion: minVersion,
  35. includeMargin: includeMargin,
  36. marginSize: marginSize,
  37. imageSettings: imageSettings,
  38. size: size
  39. }),
  40. margin = _useQRCode.margin,
  41. cells = _useQRCode.cells,
  42. numCells = _useQRCode.numCells,
  43. calculatedImageSettings = _useQRCode.calculatedImageSettings;
  44. var cellsToDraw = cells;
  45. var image = null;
  46. if (imageSettings != null && calculatedImageSettings != null) {
  47. if (calculatedImageSettings.excavation != null) {
  48. cellsToDraw = (0, _utils.excavateModules)(cells, calculatedImageSettings.excavation);
  49. }
  50. image = /*#__PURE__*/_react.default.createElement("image", {
  51. href: imageSettings.src,
  52. height: calculatedImageSettings.h,
  53. width: calculatedImageSettings.w,
  54. x: calculatedImageSettings.x + margin,
  55. y: calculatedImageSettings.y + margin,
  56. preserveAspectRatio: "none",
  57. opacity: calculatedImageSettings.opacity
  58. // when crossOrigin is not set, the image will be tainted
  59. // and the canvas cannot be exported to an image
  60. ,
  61. crossOrigin: calculatedImageSettings.crossOrigin
  62. });
  63. }
  64. var fgPath = (0, _utils.generatePath)(cellsToDraw, margin);
  65. return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
  66. height: size,
  67. width: size,
  68. viewBox: "0 0 ".concat(numCells, " ").concat(numCells),
  69. ref: ref,
  70. role: "img"
  71. }, otherProps), !!title && /*#__PURE__*/_react.default.createElement("title", null, title), /*#__PURE__*/_react.default.createElement("path", {
  72. fill: bgColor,
  73. d: "M0,0 h".concat(numCells, "v").concat(numCells, "H0z"),
  74. shapeRendering: "crispEdges"
  75. }), /*#__PURE__*/_react.default.createElement("path", {
  76. fill: fgColor,
  77. d: fgPath,
  78. shapeRendering: "crispEdges"
  79. }), image);
  80. });
  81. if (process.env.NODE_ENV !== 'production') {
  82. QRCodeSVG.displayName = 'QRCodeSVG';
  83. }