Merge pull request #64 from GamgeeNL/master

Refactored componentWillUpdate into getDerivedStateFromProps

Author: awesomejerry

src/index.js

@@ -1,11 +1,60 @@
-import React, { PureComponent } from 'react'
-import { Image as RNImage } from 'react-native'
-import PropTypes from 'prop-types'
-import Svg, { Defs, G, Rect, Path, Image, ClipPath } from 'react-native-svg'
-import genMatrix from './genMatrix'
+import React, {PureComponent} from 'react';
+import {Image as RNImage} from 'react-native';
+import PropTypes from 'prop-types';
+import Svg, {Defs, G, Rect, Path, Image, ClipPath} from 'react-native-svg';
+import genMatrix from './genMatrix';
 
-const DEFAULT_SIZE = 100
-const DEFAULT_BG_COLOR = 'white'
+const DEFAULT_SIZE = 100;
+const DEFAULT_BG_COLOR = 'white';
+
+/* calculate the size of the cell and draw the path */
+function calculateMatrix(props) {
+  const {value, size, ecl, onError} = props;
+  try {
+    const matrix = genMatrix(value, ecl);
+    const cellSize = size / matrix.length;
+    return {
+      value,
+      size,
+      cellSize,
+      path: transformMatrixIntoPath(cellSize, matrix)
+    };
+  } catch (error) {
+    if (onError && typeof onError === 'function') {
+      onError(error);
+    } else {
+      // Pass the error when no handler presented
+      throw error;
+    }
+  }
+  return {};
+}
+
+/* project the matrix into path draw */
+function transformMatrixIntoPath(cellSize, matrix) {
+  // adjust origin
+  let d = '';
+  matrix.forEach((row, i) => {
+    let needDraw = false;
+    row.forEach((column, j) => {
+      if (column) {
+        if (!needDraw) {
+          d += `M${cellSize * j} ${cellSize / 2 + cellSize * i} `;
+          needDraw = true;
+        }
+        if (needDraw && j === matrix.length - 1) {
+          d += `L${cellSize * (j + 1)} ${cellSize / 2 + cellSize * i} `;
+        }
+      } else {
+        if (needDraw) {
+          d += `L${cellSize * j} ${cellSize / 2 + cellSize * i} `;
+          needDraw = false;
+        }
+      }
+    });
+  });
+  return d;
+}
 
 /**
  * A simple component for displaying QR Code using svg
@@ -41,6 +90,7 @@ export default class QRCode extends PureComponent {
      */
     onError: PropTypes.func
   };
+
   static defaultProps = {
     value: 'This is a QR Code.',
     size: DEFAULT_SIZE,
@@ -53,84 +103,52 @@ export default class QRCode extends PureComponent {
     ecl: 'M',
     onError: undefined
   };
-  constructor (props) {
-    super(props)
-    this._matrix = null
-    this._cellSize = null
-    this._path = null
-    this.setMatrix(props)
-  }
-  componentWillUpdate (nextProps) {
-    // if value has changed, re-setMatrix
-    if (nextProps.value !== this.props.value || nextProps.size !== this.props.size) {
-      this.setMatrix(nextProps)
-    }
+
+  constructor(props) {
+    super(props);
+    this.state = calculateMatrix(props);
   }
-  /* calculate the size of the cell and draw the path */
-  setMatrix (props) {
-    const { value, size, ecl, onError } = props
-    try {
-      this._matrix = genMatrix(value, ecl)
-      this._cellSize = size / this._matrix.length
-      this._path = this.transformMatrixIntoPath()
-    } catch (error) {
-      if (onError && typeof onError === 'function') {
-        onError(error)
-      } else {
-        // Pass the error when no handler presented
-        throw error
-      }
+
+  static getDerivedStateFromProps(props, state) {
+    // if value has changed, re-calculateMatrix
+    if (props.value !== state.value || props.size !== state.size) {
+      return calculateMatrix(props);
     }
+    return null;
   }
-  /* project the matrix into path draw */
-  transformMatrixIntoPath () {
-    const matrix = this._matrix
-    const cellSize = this._cellSize
-    // adjust origin
-    let d = ''
-    matrix.forEach((row, i) => {
-      let needDraw = false
-      row.forEach((column, j) => {
-        if (column) {
-          if (!needDraw) {
-            d += `M${cellSize * j} ${cellSize / 2 + cellSize * i} `
-            needDraw = true
-          }
-          if (needDraw && j === matrix.length - 1) {
-            d += `L${cellSize * (j + 1)} ${cellSize / 2 + cellSize * i} `
-          }
-        } else {
-          if (needDraw) {
-            d += `L${cellSize * j} ${cellSize / 2 + cellSize * i} `
-            needDraw = false
-          }
-        }
-      })
-    })
-    return d
-  }
-  render () {
+
+  render() {
     const {
-      getRef, size, color, backgroundColor,
-      logo, logoSize, logoMargin, logoBackgroundColor, logoBorderRadius
-    } = this.props
+      getRef,
+      size,
+      color,
+      backgroundColor,
+      logo,
+      logoSize,
+      logoMargin,
+      logoBackgroundColor,
+      logoBorderRadius
+    } = this.props;
+
+    const logoPosition = size / 2 - logoSize / 2 - logoMargin;
+    const logoWrapperSize = logoSize + logoMargin * 2;
+    const logoWrapperBorderRadius =
+      logoBorderRadius + (logoBorderRadius && logoMargin);
 
-    const logoPosition = size / 2 - logoSize / 2 - logoMargin
-    const logoWrapperSize = logoSize + logoMargin * 2
-    const logoWrapperBorderRadius = logoBorderRadius + (logoBorderRadius && logoMargin)
+    const {cellSize, path} = this.state;
 
     return (
       <Svg ref={getRef} width={size} height={size}>
         <Defs>
-          <ClipPath id='clip-wrapper'>
+          <ClipPath id="clip-wrapper">
             <Rect
               width={logoWrapperSize}
               height={logoWrapperSize}
               rx={logoWrapperBorderRadius}
               ry={logoWrapperBorderRadius}
             />
           </ClipPath>
-          <ClipPath id='clip-logo'>
+          <ClipPath id="clip-logo">
             <Rect
               width={logoSize}
               height={logoSize}
@@ -139,38 +157,30 @@ export default class QRCode extends PureComponent {
             />
           </ClipPath>
         </Defs>
-        <Rect
-          width={size}
-          height={size}
-          fill={backgroundColor}
-        />
-        { this._path && this._cellSize && (
-          <Path
-            d={this._path}
-            stroke={color}
-            strokeWidth={this._cellSize}
-          />
+        <Rect width={size} height={size} fill={backgroundColor} />
+        {path && cellSize && (
+          <Path d={path} stroke={color} strokeWidth={cellSize} />
         )}
         {logo && (
           <G x={logoPosition} y={logoPosition}>
             <Rect
               width={logoWrapperSize}
               height={logoWrapperSize}
               fill={logoBackgroundColor}
-              clipPath='url(#clip-wrapper)'
+              clipPath="url(#clip-wrapper)"
             />
             <G x={logoMargin} y={logoMargin}>
               <Image
                 width={logoSize}
                 height={logoSize}
-                preserveAspectRatio='xMidYMid slice'
+                preserveAspectRatio="xMidYMid slice"
                 href={logo}
-                clipPath='url(#clip-logo)'
+                clipPath="url(#clip-logo)"
               />
             </G>
           </G>
         )}
       </Svg>
-    )
+    );
   }
 }