QRCodeSVG.js 3.3 KB

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