react-qr-code - npm Package Compare versions

Comparing version 0.0.1-rc.3 to 0.0.1-rc.4

lib/components/QRCode.js

@@ -8,2 +8,13 @@ 'use strict';
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _desc, _value, _class;
+// qr.js doesn't handle error level of zero (M) so we need to do it right,
+// thus the deep require.
+
+
+var _autobindDecorator = require('autobind-decorator');
+
+var _autobindDecorator2 = _interopRequireDefault(_autobindDecorator);
+
 var _react = require('react');
@@ -25,95 +36,141 @@
 
-var propTypes = {};
-// qr.js doesn't handle error level of zero (M) so we need to do it right,
-// thus the deep require.
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-var defaultProps = {};
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-var QRCode = exports.QRCode = _react2.default.createClass({
-  displayName: 'QRCode',
+function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {
+  var desc = {};
+  Object['ke' + 'ys'](descriptor).forEach(function (key) {
+    desc[key] = descriptor[key];
+  });
+  desc.enumerable = !!desc.enumerable;
+  desc.configurable = !!desc.configurable;
 
-  propTypes: {
-    value: _react2.default.PropTypes.string.isRequired,
-    size: _react2.default.PropTypes.number,
-    level: _react2.default.PropTypes.oneOf(['L', 'M', 'Q', 'H']),
-    bgColor: _react2.default.PropTypes.string,
-    fgColor: _react2.default.PropTypes.string
-  },
+  if ('value' in desc || desc.initializer) {
+    desc.writable = true;
+  }
 
-  getDefaultProps: function getDefaultProps() {
-    return {
-      size: 128,
-      level: 'L',
-      bgColor: '#FFFFFF',
-      fgColor: '#000000'
-    };
-  },
+  desc = decorators.slice().reverse().reduce(function (desc, decorator) {
+    return decorator(target, property, desc) || desc;
+  }, desc);
 
-  shouldComponentUpdate: function shouldComponentUpdate(nextProps) {
-    var _this = this;
+  if (context && desc.initializer !== void 0) {
+    desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
+    desc.initializer = undefined;
+  }
 
-    return Object.keys(QRCode.propTypes).some(function (k) {
-      return _this.props[k] !== nextProps[k];
-    });
-  },
+  if (desc.initializer === void 0) {
+    Object['define' + 'Property'](target, property, desc);
+    desc = null;
+  }
 
-  componentDidMount: function componentDidMount() {
-    this.update();
-  },
+  return desc;
+}
 
-  componentDidUpdate: function componentDidUpdate() {
-    this.update();
-  },
+var propTypes = {
+  value: _react2.default.PropTypes.string.isRequired,
+  size: _react2.default.PropTypes.number,
+  level: _react2.default.PropTypes.oneOf(['L', 'M', 'Q', 'H']),
+  bgColor: _react2.default.PropTypes.string,
+  fgColor: _react2.default.PropTypes.string
+};
 
-  update: function update() {
-    var _props = this.props;
-    var value = _props.value;
-    var size = _props.size;
-    var level = _props.level;
-    var bgColor = _props.bgColor;
-    var fgColor = _props.fgColor;
+var defaultProps = {
+  size: 128,
+  level: 'L',
+  bgColor: '#FFFFFF',
+  fgColor: '#000000'
+};
 
-    // We'll use type===-1 to force QRCode to automatically pick the best type
+var QRCode = exports.QRCode = (_class = function (_React$Component) {
+  _inherits(QRCode, _React$Component);
 
-    var qrcode = new _QRCode2.default(-1, _ErrorCorrectLevel2.default[level]);
-    qrcode.addData(value);
-    qrcode.make();
+  function QRCode() {
+    _classCallCheck(this, QRCode);
 
-    var canvas = this.canvas;
+    return _possibleConstructorReturn(this, Object.getPrototypeOf(QRCode).apply(this, arguments));
+  }
 
-    var ctx = canvas.getContext('2d');
-    var cells = qrcode.modules;
-    var tileW = size / cells.length;
-    var tileH = size / cells.length;
-    var scale = (window.devicePixelRatio || 1) / (0, _utils.getBackingStorePixelRatio)(ctx);
-    canvas.height = canvas.width = size * scale;
-    ctx.scale(scale, scale);
+  _createClass(QRCode, [{
+    key: 'shouldComponentUpdate',
+    value: function shouldComponentUpdate(nextProps) {
+      var _this2 = this;
 
-    cells.forEach(function (row, rdx) {
-      row.forEach(function (cell, cdx) {
-        ctx.fillStyle = cell ? fgColor : bgColor;
-        var w = Math.ceil((cdx + 1) * tileW) - Math.floor(cdx * tileW);
-        var h = Math.ceil((rdx + 1) * tileH) - Math.floor(rdx * tileH);
-        ctx.fillRect(Math.round(cdx * tileW), Math.round(rdx * tileH), w, h);
+      return Object.keys(QRCode.propTypes).some(function (k) {
+        return _this2.props[k] !== nextProps[k];
       });
-    });
-  },
+    }
+  }, {
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.update();
+    }
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      this.update();
+    }
+  }, {
+    key: 'update',
+    value: function update() {
+      var _props = this.props;
+      var value = _props.value;
+      var size = _props.size;
+      var level = _props.level;
+      var bgColor = _props.bgColor;
+      var fgColor = _props.fgColor;
 
-  setCanvasRef: function setCanvasRef(canvas) {
-    this.canvas = canvas;
-  },
+      // We'll use type===-1 to force QRCode to automatically pick the best type
 
+      var qrcode = new _QRCode2.default(-1, _ErrorCorrectLevel2.default[level]);
+      qrcode.addData(value);
+      qrcode.make();
 
-  render: function render() {
-    return _react2.default.createElement('canvas', {
-      style: { height: this.props.size, width: this.props.size },
-      height: this.props.size,
-      width: this.props.size,
-      ref: this.setCanvasRef
-    });
-  }
-});
+      var canvas = this.canvas;
 
+      var ctx = canvas.getContext('2d');
+      var cells = qrcode.modules;
+      var tileW = size / cells.length;
+      var tileH = size / cells.length;
+      var scale = (window.devicePixelRatio || 1) / (0, _utils.getBackingStorePixelRatio)(ctx);
+      canvas.height = canvas.width = size * scale;
+      ctx.scale(scale, scale);
+
+      cells.forEach(function (row, rdx) {
+        row.forEach(function (cell, cdx) {
+          ctx.fillStyle = cell ? fgColor : bgColor;
+          var w = Math.ceil((cdx + 1) * tileW) - Math.floor(cdx * tileW);
+          var h = Math.ceil((rdx + 1) * tileH) - Math.floor(rdx * tileH);
+          ctx.fillRect(Math.round(cdx * tileW), Math.round(rdx * tileH), w, h);
+        });
+      });
+    }
+  }, {
+    key: 'setCanvasRef',
+    value: function setCanvasRef(canvas) {
+      this.canvas = canvas;
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var canvasStyle = {
+        height: this.props.size,
+        width: this.props.size
+      };
+      return _react2.default.createElement('canvas', {
+        style: canvasStyle,
+        height: this.props.size,
+        width: this.props.size,
+        ref: this.setCanvasRef
+      });
+    }
+  }]);
+
+  return QRCode;
+}(_react2.default.Component), (_applyDecoratedDescriptor(_class.prototype, 'setCanvasRef', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'setCanvasRef'), _class.prototype)), _class);
+;
+
 QRCode.propTypes = propTypes;
 QRCode.defaultProps = defaultProps;

package.json

 {
   "name": "react-qr-code",
-  "version": "0.0.1-rc.3",
+  "version": "0.0.1-rc.4",
   "description": "A <QRCode /> component for React.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -20,8 +20,8 @@ # react-qr-code
 ```javascript
-var React = require('react');
-var QRCode = require('react-qr-code');
+import React from 'react';
+import QRCode from 'react-qr-code';
 
 React.render(
   <QRCode value="http://facebook.github.io/react/" />,
-  mountNode
+  document.getElementById('Container')
 );
@@ -28,0 +28,0 @@ ```

No alert changes

Improved metrics

Total package byte prevSize

10286

increased by42.5%

Lines of code

152

increased by50.5%

No dependency changes