feat(qrcode): publish version 3.0

package.json

@@ -55,7 +55,7 @@
     "rax-types": "^1.0.0",
     "semver": "^6.3.0",
     "semver-regex": "^3.1.3",
-    "shelljs": "0.8.3",
+    "shelljs": "0.8.5",
     "typescript": "^3.8.3"
   },
   "resolutions": {

packages/rax-qrcode/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 3.0.0
+
+- [feat] update rax-canvas version to v2.0
+- [feat] support passing strings with px of width and height in style 
+
 ## 2.0.2
 
-- [fix] can't get correct screenWidth in some Android Phones, use windowWidth instead
+- [fix] can't get correct screenWidth in some Android Phones, use windowWidth instead

packages/rax-qrcode/demo/index.md

@@ -16,7 +16,7 @@ function App() {
   return (
     <QRCode
       data="http://market.m.taobao.com/apps/market/m-vip/88-festival.html?wh_weex=true&wx_navbar_transparent=true"
-      style={{ width: 400, height: 400 }}
+      style={{ width: '400', height: '400' }}
     />
   );
 }

packages/rax-qrcode/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rax-qrcode",
-  "version": "2.0.2",
+  "version": "3.0.0",
   "description": "QRCode component for Rax.",
   "license": "BSD-3-Clause",
   "main": "lib/index.js",
@@ -31,7 +31,7 @@
   ],
   "dependencies": {
     "qr.js": "0.0.0",
-    "rax-canvas": "^1.0.0"
+    "rax-canvas": "^2.0.0"
   },
   "peerDependencies": {
     "rax": "^1.0.0"

packages/rax-qrcode/src/index.tsx

@@ -30,6 +30,25 @@ const styles = {
   }
 };
 
+const ENDS_WITH_PX_EXCEPT_RPX = /^[0-9\.]+\s*([^r]px)?$/;
+
+function processDimensions(width: string | number, height: string | number) {
+  let w = width;
+  let h = height;
+  if (typeof width === 'string' && ENDS_WITH_PX_EXCEPT_RPX.test(width)){
+    w = parseFloat(width);
+  }
+
+  if (typeof height === 'string' && ENDS_WITH_PX_EXCEPT_RPX.test(height)){
+    h = parseFloat(height);
+  }
+
+  return {
+    width: w as number,
+    height: h as number
+  };
+}
+
 class QRCode extends Component<QRCodeProps, {}> {
   public width = 0;
   public height = 0;
@@ -38,7 +57,7 @@ class QRCode extends Component<QRCodeProps, {}> {
   public constructor(props) {
     super(props);
     const { style = {} } = props;
-    const { width = 300, height = 300 } = style;
+    const { width, height } = processDimensions(style.width || 300, style.height || 300);
     this.width = width;
     this.height = height;
     this.canvas = createRef();