react-fancy-qrcode
Version:
Customizable QR code generated for React & React Native
79 lines • 5.47 kB
JavaScript
import React from "react";
import { generateDataMatrix } from "../utils";
import Dot from "./Dot";
import Logo from "./Logo";
import PositionPattern from "./PositionPattern";
export default React.memo(React.forwardRef(function (_a, ref) {
var _b = _a.value, value = _b === void 0 ? "" : _b, size = _a.size, logo = _a.logo, svgDom = _a.svgDom, _c = _a.logoSize, logoSize = _c === void 0 ? 0 : _c, _d = _a.dotScale, dotScale = _d === void 0 ? 1 : _d, _e = _a.dotRadius, dotRadius = _e === void 0 ? 0 : _e, _f = _a.color, color = _f === void 0 ? "black" : _f, _g = _a.backgroundColor, backgroundColor = _g === void 0 ? "white" : _g, _h = _a.margin, margin = _h === void 0 ? 0 : _h, _j = _a.errorCorrection, errorCorrection = _j === void 0 ? "M" : _j, _k = _a.colorGradientDirection, colorGradientDirection = _k === void 0 ? ["0%", "0%", "100%", "100%"] : _k, positionColor = _a.positionColor, _l = _a.positionRadius, positionRadius = _l === void 0 ? 0 : _l, _m = _a.positionGradientDirection, positionGradientDirection = _m === void 0 ? ["0%", "0%", "100%", "100%"] : _m;
var COLOR_GRAD = "colorGradient";
var POS_COLOR_GRAD = "positionColorGradient";
// Set logo size
if (logo) {
if (!logoSize) {
logoSize = size * 0.2;
}
}
// Convert the QRCode data into a matrix of pixels
var matrix = generateDataMatrix(value, errorCorrection);
if (!matrix.length) {
return null;
}
var sideCount = matrix.length;
var cellSize = size / sideCount;
// Normalize Colors
var colorGradient = [];
var posColorGradient = [];
if (Array.isArray(color)) {
colorGradient = color;
color = "url(#".concat(COLOR_GRAD, ")");
}
if (!positionColor) {
positionColor = color;
}
if (Array.isArray(positionColor)) {
posColorGradient = positionColor;
positionColor = "url(#".concat(POS_COLOR_GRAD, ")");
}
// Keep scale between 0.1 - 1
if (!dotScale || dotScale > 1 || dotScale <= 0.1) {
dotScale = 1;
}
// Calculate logo cell bounds
var logoStartCell = -1;
var logoStopCell = -1;
if (logoSize && matrix.length) {
var logoMargin = cellSize * 0.1;
var logoCells = Math.ceil((logoSize + logoMargin) / cellSize);
logoStartCell = Math.floor(sideCount / 2 - logoCells / 2);
logoStopCell = sideCount - logoStartCell;
}
var Svg = svgDom.Svg, Defs = svgDom.Defs, G = svgDom.G, Rect = svgDom.Rect, LinearGradient = svgDom.LinearGradient, Stop = svgDom.Stop;
return (React.createElement(Svg, { viewBox: [
-margin,
-margin,
size + margin * 2,
size + margin * 2,
].join(" "), width: size, height: size, ref: ref },
React.createElement(Defs, null,
Boolean((colorGradient === null || colorGradient === void 0 ? void 0 : colorGradient.length) && Array.isArray(colorGradientDirection)) && (React.createElement(LinearGradient, { id: COLOR_GRAD, x1: colorGradientDirection[0], y1: colorGradientDirection[1], x2: colorGradientDirection[2], y2: colorGradientDirection[3] },
React.createElement(Stop, { offset: "0", stopColor: colorGradient[0], stopOpacity: "1" }),
React.createElement(Stop, { offset: "1", stopColor: colorGradient[1], stopOpacity: "1" }))),
Boolean((posColorGradient === null || posColorGradient === void 0 ? void 0 : posColorGradient.length) &&
Array.isArray(positionGradientDirection)) && (React.createElement(LinearGradient, { id: POS_COLOR_GRAD, x1: positionGradientDirection[0], y1: positionGradientDirection[1], x2: positionGradientDirection[2], y2: positionGradientDirection[3] },
React.createElement(Stop, { offset: "0", stopColor: posColorGradient[0], stopOpacity: "1" }),
React.createElement(Stop, { offset: "1", stopColor: posColorGradient[1], stopOpacity: "1" })))),
React.createElement(G, null,
React.createElement(Rect, { x: -margin, y: -margin, width: size + margin * 2, height: size + margin * 2, fill: backgroundColor })),
React.createElement(G, null,
React.createElement(PositionPattern, { placement: "top-left", cellSize: cellSize, positionColor: positionColor, sideCount: sideCount, positionRadius: positionRadius, svgDom: svgDom }),
React.createElement(PositionPattern, { placement: "top-right", cellSize: cellSize, positionColor: positionColor, sideCount: sideCount, positionRadius: positionRadius, svgDom: svgDom }),
React.createElement(PositionPattern, { placement: "bottom-left", cellSize: cellSize, positionColor: positionColor, sideCount: sideCount, positionRadius: positionRadius, svgDom: svgDom })),
React.createElement(G, null, matrix.map(function (rowData, row) {
return rowData.map(function (pixelValue, column) {
return Boolean(value) && (React.createElement(Dot, { value: pixelValue, row: row, column: column, cellSize: cellSize, color: color, logoStartCell: logoStartCell, logoStopCell: logoStopCell, sideCount: sideCount, dotScale: dotScale || 1, dotRadius: dotRadius || 0, svgDom: svgDom, key: "".concat(row, "-").concat(column) }));
});
})),
logo && logoSize && (React.createElement(G, null,
React.createElement(Logo, { logo: logo, logoSize: logoSize, size: size, svgDom: svgDom })))));
}));
//# sourceMappingURL=QRCode.js.map