jc-biz-components/lib/jc-qrcode/index.js

jc component library based on Antd

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _qr = require('qr.js');

var _qr2 = _interopRequireDefault(_qr);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

function getBackingStorePixelRatio(ctx) {
  return ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1;
}

var getDOMNode = null;
if (/^0\.14/.test(_react2['default'].version)) {
  getDOMNode = function getDOMNode(ref) {
    return ref;
  };
} else {
  getDOMNode = function getDOMNode(ref) {
    return _reactDom2['default'].findDOMNode(ref);
  };
}

var QRCode = function (_Component) {
  (0, _inherits3['default'])(QRCode, _Component);

  function QRCode() {
    (0, _classCallCheck3['default'])(this, QRCode);
    return (0, _possibleConstructorReturn3['default'])(this, (QRCode.__proto__ || Object.getPrototypeOf(QRCode)).apply(this, arguments));
  }

  (0, _createClass3['default'])(QRCode, [{
    key: 'shouldComponentUpdate',
    value: function shouldComponentUpdate(nextProps) {
      var that = this;
      return Object.keys(QRCode.propTypes).some(function (k) {
        return that.props[k] !== nextProps[k];
      });
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.update();
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      this.update();
    }
  }, {
    key: 'utf16to8',
    value: function utf16to8(str) {
      var out = null;
      var i = null;
      var len = null;
      var c = null;
      out = '';
      len = str.length;
      for (i = 0; i < len; i++) {
        c = str.charCodeAt(i);
        if (c >= 0x0001 && c <= 0x007F) {
          out += str.charAt(i);
        } else if (c > 0x07FF) {
          out += String.fromCharCode(0xE0 | c >> 12 & 0x0F);
          out += String.fromCharCode(0x80 | c >> 6 & 0x3F);
          out += String.fromCharCode(0x80 | c >> 0 & 0x3F);
        } else {
          out += String.fromCharCode(0xC0 | c >> 6 & 0x1F);
          out += String.fromCharCode(0x80 | c >> 0 & 0x3F);
        }
      }
      return out;
    }
  }, {
    key: 'update',
    value: function update() {
      var value = this.utf16to8(this.props.value);
      var qrcode = (0, _qr2['default'])(value);
      var canvas = getDOMNode(this.refs.canvas);

      var ctx = canvas.getContext('2d');
      var cells = qrcode.modules;
      var tileW = this.props.size / cells.length;
      var tileH = this.props.size / cells.length;
      var scale = (window.devicePixelRatio || 1) / getBackingStorePixelRatio(ctx);
      canvas.height = canvas.width = this.props.size * scale;
      ctx.scale(scale, scale);

      cells.forEach(function (row, rdx) {
        row.forEach(function (cell, cdx) {
          ctx.fillStyle = cell ? this.props.fgColor : this.props.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);
        }, this);
      }, this);

      if (this.props.logo) {
        var self = this;
        var size = this.props.size;
        var image = document.createElement('img');
        image.src = this.props.logo;
        image.onload = function () {
          var dwidth = self.props.logoWidth || size * 0.2;
          var dheight = self.props.logoHeight || image.height / image.width * dwidth;
          var dx = (size - dwidth) / 2;
          var dy = (size - dheight) / 2;
          image.width = dwidth;
          image.height = dheight;
          ctx.drawImage(image, dx, dy, dwidth, dheight);
        };
      }
    }
  }, {
    key: 'render',
    value: function render() {
      return _react2['default'].createElement('canvas', {
        id: 'qrCode',
        style: { height: this.props.size, width: this.props.size },
        height: this.props.size,
        width: this.props.size,
        ref: 'canvas'
      });
    }
  }]);
  return QRCode;
}(_react.Component);

QRCode.propTypes = {
  value: _propTypes2['default'].string.isRequired,
  size: _propTypes2['default'].number,
  bgColor: _propTypes2['default'].string,
  fgColor: _propTypes2['default'].string,
  logo: _propTypes2['default'].string,
  logoWidth: _propTypes2['default'].number,
  logoHeight: _propTypes2['default'].number
};

QRCode.defaultProps = {
  size: 128,
  bgColor: '#FFFFFF',
  fgColor: '#000000',
  value: 'http://facebook.github.io/react/'
};

exports['default'] = QRCode;
module.exports = exports['default'];