react-native-qrcode-styled
Version:
A fully customizable QR Code generator for React Native based on react-native-svg and javascript-qrcode.
174 lines (173 loc) • 7.26 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNativeSvg = require("react-native-svg");
var _helpers = require("../helpers.js");
var _constants = require("../constants.js");
var _useQRCodeData = _interopRequireDefault(require("../hooks/useQRCodeData.js"));
var _SVGPieces = _interopRequireWildcard(require("./SVGPieces.js"));
var _SVGQRLogo = _interopRequireDefault(require("./SVGQRLogo.js"));
var _SVGGradient = _interopRequireDefault(require("./SVGGradient.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function SVGQRCodeStyled({
data = "I'm QR Code!",
onChangeSize,
pieceSize = _SVGPieces.DEFAULT_PIECE_SIZE,
pieceScale,
pieceRotation,
pieceCornerType = 'rounded',
pieceBorderRadius = 0,
pieceStroke,
pieceStrokeWidth,
pieceLiquidRadius,
isPiecesGlued = false,
outerEyesOptions,
innerEyesOptions,
renderCustomPieceItem,
padding,
color = 'black',
gradient,
logo,
backgroundImage,
version,
maskPattern,
toSJISFunc,
errorCorrectionLevel = 'M',
children,
renderBackground,
...props
}, ref) {
const {
hidePieces = true,
onChange: onChangeLogo,
...logoProps
} = logo || {};
const [logoArea, setLogoArea] = (0, _react.useState)();
const qrCodeOptions = (0, _react.useMemo)(() => ({
version,
errorCorrectionLevel,
maskPattern,
toSJISFunc
}), [errorCorrectionLevel, maskPattern, toSJISFunc, version]);
const {
qrCodeSize,
bitMatrix
} = (0, _useQRCodeData.default)(data, qrCodeOptions);
const svgSize = pieceSize * qrCodeSize;
(0, _react.useEffect)(() => {
onChangeSize?.(qrCodeSize);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [qrCodeSize]);
const transformedOuterEyesOptions = (0, _helpers.transformEyeOptionsToCommonPattern)(outerEyesOptions);
const transformedInnerEyesOptions = (0, _helpers.transformEyeOptionsToCommonPattern)(innerEyesOptions);
const _props = {
...props
};
if (padding) {
const _size = svgSize + 2 * padding;
_props.width = _size;
_props.height = _size;
_props.viewBox = `-${padding} -${padding} ${_size} ${_size}`;
}
const startGradientOuterEyeCoords = {
topLeft: [0, 0],
topRight: [svgSize - pieceSize * _constants.OUTER_EYE_SIZE_IN_BITS, 0],
bottomLeft: [0, svgSize - pieceSize * _constants.OUTER_EYE_SIZE_IN_BITS]
};
const startGradientInnerEyeCoords = {
topLeft: [2 * pieceSize, 2 * pieceSize],
topRight: [svgSize - pieceSize * _constants.INNER_EYE_SIZE_IN_BITS + 2 * pieceSize, 2 * pieceSize],
bottomLeft: [2 * pieceSize, svgSize - pieceSize * _constants.OUTER_EYE_SIZE_IN_BITS + 2 * pieceSize]
};
const renderPieces = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SVGPieces.default, {
bitMatrix: bitMatrix,
isPiecesGlued: isPiecesGlued,
pieceLiquidRadius: pieceLiquidRadius,
pieceBorderRadius: pieceBorderRadius,
pieceCornerType: pieceCornerType,
pieceRotation: pieceRotation,
pieceScale: pieceScale,
pieceSize: pieceSize,
pieceStroke: pieceStroke,
pieceStrokeWidth: pieceStrokeWidth,
outerEyesOptions: transformedOuterEyesOptions,
innerEyesOptions: transformedInnerEyesOptions,
renderCustomPieceItem: renderCustomPieceItem,
logoArea: hidePieces ? logoArea : undefined
});
const handleChangeLogo = area => {
setLogoArea(area);
onChangeLogo?.(area);
};
const renderLogo = () => logo ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SVGQRLogo.default, {
...logoProps,
errorCorrectionLevel: errorCorrectionLevel,
pieceSize: pieceSize,
qrCodeSize: qrCodeSize,
onChange: handleChangeLogo
}) : null;
if (backgroundImage) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.Svg, {
ref: ref,
width: svgSize,
height: svgSize,
..._props,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Defs, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.ClipPath, {
id: 'image',
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.G, {
children: renderPieces()
})
})
}), renderBackground?.(pieceSize, bitMatrix), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Image, {
x: "0",
y: "0",
width: "100%",
height: "100%",
preserveAspectRatio: "xMaxYMax slice",
...backgroundImage,
clipPath: "url(#image)"
}), renderLogo(), children?.(pieceSize, bitMatrix)]
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.Svg, {
ref: ref,
width: svgSize,
height: svgSize,
..._props,
children: [(!!gradient || !!transformedOuterEyesOptions || !!transformedInnerEyesOptions) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.Defs, {
children: [!!gradient && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SVGGradient.default, {
id: "gradient",
size: svgSize,
...gradient
}), !!transformedOuterEyesOptions && Object.keys(transformedOuterEyesOptions).map(key => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SVGGradient.default, {
id: `${key}CornerSquareGradient`,
size: pieceSize * _constants.OUTER_EYE_SIZE_IN_BITS,
origin: startGradientOuterEyeCoords[key],
...transformedOuterEyesOptions?.[key]?.gradient
}, `${key}CornerSquareGradient`);
}), !!transformedInnerEyesOptions && Object.keys(transformedInnerEyesOptions).map(key => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SVGGradient.default, {
id: `${key}CornerDotGradient`,
size: pieceSize * _constants.INNER_EYE_SIZE_IN_BITS,
origin: startGradientInnerEyeCoords[key],
...transformedInnerEyesOptions?.[key]?.gradient
}, `${key}CornerDotGradient`);
})]
}), renderBackground?.(pieceSize, bitMatrix), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.G, {
fill: gradient ? 'url(#gradient)' : color,
children: renderPieces()
}), renderLogo(), children?.(pieceSize, bitMatrix)]
});
}
const forwardedSVGQRCodeStyled = /*#__PURE__*/(0, _react.forwardRef)(SVGQRCodeStyled);
forwardedSVGQRCodeStyled.displayName = 'SVGQRCodeStyled';
var _default = exports.default = forwardedSVGQRCodeStyled;
//# sourceMappingURL=SVGQRCodeStyled.js.map