react-avatar - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

lib/demo.js

@@ -130,2 +130,15 @@ 'use strict';
             null,
+            'Vkontakte'
+          ),
+          _react2.default.createElement(_index2.default, { vkontakteId: '1', size: 40 }),
+          _react2.default.createElement(_index2.default, { vkontakteId: '1', size: 100, round: true }),
+          _react2.default.createElement(_index2.default, { vkontakteId: '1', size: 150 }),
+          _react2.default.createElement(_index2.default, { vkontakteId: '1', size: 200 })
+        ),
+        _react2.default.createElement(
+          'section',
+          null,
+          _react2.default.createElement(
+            'h2',
+            null,
             'Skype'
@@ -148,3 +161,3 @@ ),
             'div',
-            { className: 'hidden' },
+            null,
             _react2.default.createElement(
@@ -151,0 +164,0 @@ 'button',

lib/index.js

@@ -13,2 +13,6 @@ 'use strict';
 
+var _reactAddonsPureRenderMixin = require('react-addons-pure-render-mixin');
+
+var _reactAddonsPureRenderMixin2 = _interopRequireDefault(_reactAddonsPureRenderMixin);
+
 var _Gravatar = require('./sources/Gravatar.js');
@@ -22,2 +26,6 @@
 
+var _Vkontakte = require('./sources/Vkontakte.js');
+
+var _Vkontakte2 = _interopRequireDefault(_Vkontakte);
+
 var _Twitter = require('./sources/Twitter.js');
@@ -55,3 +63,3 @@
 
-var SOURCES = [_Gravatar2.default, _Facebook2.default, _Twitter2.default, _Google2.default, _Skype2.default, _Src2.default, _Value2.default, _Icon2.default];
+var SOURCES = [_Facebook2.default, _Google2.default, _Twitter2.default, _Vkontakte2.default, _Skype2.default, _Gravatar2.default, _Src2.default, _Value2.default, _Icon2.default];
 
@@ -90,7 +98,11 @@ var Avatar = function (_React$Component) {
 
-            if (SOURCES.length === _this.state.sourcePointer) return;
+            if (SOURCES.length === _this.state._internal.sourcePointer) return;
 
-            var source = SOURCES[_this.state.sourcePointer];
+            var source = SOURCES[_this.state._internal.sourcePointer];
+
+            var internal = _this.state._internal;
+            internal.sourcePointer++;
+
             _this.setState({
-                sourcePointer: _this.state.sourcePointer + 1
+                _internal: internal
             }, function () {
@@ -102,3 +114,5 @@ _this.tryNextsource(source);
         _this.state = {
-            sourcePointer: 0,
+            _internal: {
+                sourcePointer: 0
+            },
             src: null,
@@ -108,2 +122,3 @@ value: null,
         };
+        _this.shouldComponentUpdate = _reactAddonsPureRenderMixin2.default.shouldComponentUpdate.bind(_this);
         return _this;
@@ -127,4 +142,2 @@ }
 
-            if (newProps.skypeId !== this.props.skypeId) nextState.skypeId = newProps.skypeId;
-
             if (newProps.email !== this.props.email) nextState.email = newProps.email;
@@ -140,4 +153,9 @@
 
+            if (newProps.vkontakteId !== this.props.vkontakteId) nextState.vkontakteId = newProps.vkontakteId;
+
+            if (newProps.skypeId !== this.props.skypeId) nextState.skypeId = newProps.skypeId;
+
             if (Object.keys(nextState) !== 0) {
-                nextState.sourcePointer = 0;
+                nextState._internal = this.state._internal;
+                nextState._internal.sourcePointer = 0;
                 this.setState(nextState, this.fetch);
@@ -222,4 +240,5 @@ }
     googleId: _react2.default.PropTypes.string,
+    twitterHandle: _react2.default.PropTypes.string,
+    vkontakteId: _react2.default.PropTypes.string,
     skypeId: _react2.default.PropTypes.string,
-    twitterHandle: _react2.default.PropTypes.string,
     round: _react2.default.PropTypes.bool,
@@ -237,5 +256,6 @@ size: _react2.default.PropTypes.number
     facebookId: null,
+    googleId: null,
+    twitterHandle: null,
+    vkontakteId: null,
     skypeId: null,
-    twitterHandle: null,
-    googleId: null,
     round: false,
@@ -242,0 +262,0 @@ size: 100

lib/utils.js

@@ -7,2 +7,3 @@ 'use strict';
 exports.fetch = fetch;
+exports.fetchJSONP = fetchJSONP;
 exports.getRandomColor = getRandomColor;
@@ -28,2 +29,21 @@
 
+function fetchJSONP(url, successCb, errorCb) {
+    var callbackName = 'jsonp_cb_' + Math.round(100000 * Math.random());
+
+    var script = document.createElement('script');
+    script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'callback=' + callbackName;
+    document.body.appendChild(script);
+
+    script.onerror = function () {
+        errorCb();
+    };
+
+    window[callbackName] = function (data) {
+        console.log('CALLBACK', data, successCb);
+        delete window[callbackName];
+        document.body.removeChild(script);
+        successCb(data);
+    };
+}
+
 var defaultColors = ['#d73d32', '#7e3794', '#4285f4', '#67ae3f', '#d61a7f', '#ff4080'];
@@ -30,0 +50,0 @@

package.json

 {
   "name": "react-avatar",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Universal React avatar component makes it possible to generate avatars based on user information.",
@@ -60,3 +60,3 @@ "main": "lib/index.js",
     "eslint-plugin-react": "3.5.1",
-    "react-addons-pure-render-mixin": "^0.14.0",
+    "react-addons-pure-render-mixin": "^0.14.8",
     "react-dom": "^0.14.0",
@@ -63,0 +63,0 @@ "reactify": "^1.0.0",

README.md

@@ -11,2 +11,4 @@ # <Avatar>[![Build Status](https://travis-ci.org/Sitebase/react-avatar.svg?branch=master)](https://travis-ci.org/Sitebase/react-avatar)
 * Google
+* Twitter
+* Vkontakte
 * Skype
@@ -16,3 +18,2 @@ * Gravatar
 * Name initials
-* Custom text
 
@@ -53,5 +54,7 @@ The fallbacks are in the same order as the list above were Facebook has the highest priority.
 ```html
-<Avatar google-id="118096717852922241760" size="100" round="true" />
-<Avatar facebook-id="100008343750912" size="150" />
-<Avatar skype-id="sitebase" size="200" />
+<Avatar googleId="118096717852922241760" size="100" round="true" />
+<Avatar facebookId="100008343750912" size="150" />
+<Avatar vkontakteId="1" size="150" />
+<Avatar skypeId="sitebase" size="200" />
+<Avatar twitterHandle="sitebase" size="40" />
 <Avatar name="Wim Mostmans" size="150" />
@@ -58,0 +61,0 @@ <Avatar value="86%" size="40" />

src/demo.js

@@ -56,11 +56,19 @@ 'use strict';
 
-        <section>
-          <h2>Twitter</h2>
-          <Avatar twitterHandle="sitebase" size={40} />
-          <Avatar twitterHandle="sitebase" size={100} round={true} />
-          <Avatar twitterHandle="sitebase" size={150} />
-          <Avatar twitterHandle="sitebase" size={200} />
-        </section>
+      <section>
+        <h2>Twitter</h2>
+        <Avatar twitterHandle="sitebase" size={40} />
+        <Avatar twitterHandle="sitebase" size={100} round={true} />
+        <Avatar twitterHandle="sitebase" size={150} />
+        <Avatar twitterHandle="sitebase" size={200} />
+      </section>
 
       <section>
+        <h2>Vkontakte</h2>
+        <Avatar vkontakteId="1" size={40} />
+        <Avatar vkontakteId="1" size={100} round={true} />
+        <Avatar vkontakteId="1" size={150} />
+        <Avatar vkontakteId="1" size={200} />
+      </section>
+
+      <section>
         <h2>Skype</h2>
@@ -75,3 +83,3 @@ <Avatar skypeId="sitebase" size={40} />
         <h2>Initials</h2>
-        <div className="hidden">
+        <div>
             <button onClick={this._onChangeName}>Change name</button>
@@ -78,0 +86,0 @@ <button onClick={this._onSetSkype}>Set skype ID</button>

src/index.js

 'use strict';
 
 import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 import gravatarSource from './sources/Gravatar.js';
 import facebookSource from './sources/Facebook.js';
+import vkontakteSource from './sources/Vkontakte.js';
 import twitterSource from './sources/Twitter.js';
@@ -15,7 +17,8 @@ import googleSource from './sources/Google.js';
 const SOURCES = [
-    gravatarSource,
     facebookSource,
+    googleSource,
     twitterSource,
-    googleSource,
+    vkontakteSource,
     skypeSource,
+    gravatarSource,
     srcSource,
@@ -40,4 +43,5 @@ valueSource,
         googleId: React.PropTypes.string,
+        twitterHandle: React.PropTypes.string,
+        vkontakteId: React.PropTypes.string,
         skypeId: React.PropTypes.string,
-        twitterHandle: React.PropTypes.string,
         round: React.PropTypes.bool,
@@ -56,5 +60,6 @@ size: React.PropTypes.number
         facebookId: null,
+        googleId: null,
+        twitterHandle: null,
+        vkontakteId: null,
         skypeId: null,
-        twitterHandle: null,
-        googleId: null,
         round: false,
@@ -67,3 +72,5 @@ size: 100
         this.state = {
-            sourcePointer: 0,
+            _internal: {
+                sourcePointer: 0
+            },
             src: null,
@@ -73,2 +80,3 @@ value: null,
         };
+        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
     }
@@ -91,5 +99,2 @@
 
-        if (newProps.skypeId !== this.props.skypeId)
-            nextState.skypeId = newProps.skypeId;
-
         if (newProps.email !== this.props.email)
@@ -110,4 +115,12 @@ nextState.email = newProps.email;
 
+        if (newProps.vkontakteId !== this.props.vkontakteId)
+            nextState.vkontakteId = newProps.vkontakteId;
+
+        if (newProps.skypeId !== this.props.skypeId)
+            nextState.skypeId = newProps.skypeId;
+
+
         if(Object.keys(nextState) !== 0) {
-            nextState.sourcePointer = 0;
+            nextState._internal = this.state._internal;
+            nextState._internal.sourcePointer = 0;
             this.setState(nextState, this.fetch);
@@ -143,8 +156,12 @@ }
 
-        if(SOURCES.length === this.state.sourcePointer)
+        if(SOURCES.length === this.state._internal.sourcePointer)
             return;
 
-        const source = SOURCES[this.state.sourcePointer];
+        const source = SOURCES[this.state._internal.sourcePointer];
+
+        const internal = this.state._internal;
+        internal.sourcePointer++;
+
         this.setState({
-            sourcePointer: (this.state.sourcePointer + 1)
+            _internal: internal
         }, () => {
@@ -151,0 +168,0 @@ this.tryNextsource(source);

src/sources/Twitter.js

@@ -15,3 +15,3 @@ 'use strict';
     getImageSize() {
-        const { size }  = this.props;
+        const { size } = this.props;
 
@@ -18,0 +18,0 @@ if (size <= 24)

src/utils.js

@@ -20,2 +20,22 @@ 'use strict';
 
+export
+function fetchJSONP(url, successCb, errorCb) {
+    const callbackName = 'jsonp_cb_' + Math.round(100000 * Math.random());
+
+    const script = document.createElement('script');
+    script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'callback=' + callbackName;
+    document.body.appendChild(script);
+
+    script.onerror = function() {
+        errorCb();
+    };
+
+    window[callbackName] = function(data) {
+        console.log('CALLBACK', data, successCb);
+        delete window[callbackName];
+        document.body.removeChild(script);
+        successCb(data);
+    };
+}
+
 const defaultColors = [
@@ -22,0 +42,0 @@ '#d73d32',

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1572740

increased by0.86%

Number of package files

36

increased by5.88%

Lines of code

38556

increased by0.84%

Number of lines in readme file

117

increased by2.63%

No dependency changes