merge qrcode.react into rc-component/qrcode (#46)

Author: thinkasany

package.json

@@ -74,5 +74,6 @@
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
-  }
+  },
+  "packageManager": "[email protected]+sha512.8e4c3550fb500e808dbc30bb0ce4dd1eb614e30b1c55245f211591ec2cdf9c611cabd34e1364b42f564bd54b3945ed0f49d61d1bbf2ec9bd74b866fcdc723276"
 }

pnpm-lock.yaml

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React from 'react';
 import { useQRCode } from './hooks/useQRCode';
 import type { QRPropsCanvas } from './interface';
 import {
@@ -29,10 +29,10 @@ const QRCodeCanvas = React.forwardRef<HTMLCanvasElement, QRPropsCanvas>(
       ...otherProps
     } = props;
     const imgSrc = imageSettings?.src;
-    const _canvas = useRef<HTMLCanvasElement | null>(null);
-    const _image = useRef<HTMLImageElement>(null);
+    const _canvas = React.useRef<HTMLCanvasElement | null>(null);
+    const _image = React.useRef<HTMLImageElement>(null);
 
-    const setCanvasRef = useCallback(
+    const setCanvasRef = React.useCallback(
       (node: HTMLCanvasElement | null) => {
         _canvas.current = node;
         if (typeof forwardedRef === 'function') {
@@ -45,7 +45,7 @@ const QRCodeCanvas = React.forwardRef<HTMLCanvasElement, QRPropsCanvas>(
     );
 
 
-    const [, setIsImageLoaded] = useState(false);
+    const [, setIsImageLoaded] = React.useState(false);
 
     const { margin, cells, numCells, calculatedImageSettings } = useQRCode({
       value,
@@ -57,7 +57,7 @@ const QRCodeCanvas = React.forwardRef<HTMLCanvasElement, QRPropsCanvas>(
       size,
     });
 
-    useEffect(() => {
+    React.useEffect(() => {
       if (_canvas.current != null) {
         const canvas = _canvas.current;
 
@@ -122,7 +122,7 @@ const QRCodeCanvas = React.forwardRef<HTMLCanvasElement, QRPropsCanvas>(
       }
     });
 
-    useEffect(() => {
+    React.useEffect(() => {
       setIsImageLoaded(false);
     }, [imgSrc]);
 

src/QRCodeCanvas.tsx

@@ -158,7 +158,7 @@ export function getImageSettings(
  */
 export function getMarginSize(needMargin: boolean, marginSize?: number): number {
   if (marginSize != null) {
-    return Math.floor(marginSize);
+    return Math.max(Math.floor(marginSize), 0);
   }
   return needMargin ? SPEC_MARGIN_SIZE : DEFAULT_MARGIN_SIZE;
 }