react-avatar - npm Package Compare versions

Comparing version 1.0.0-rc.1 to 1.0.0

lib/demo.js

 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
@@ -30,129 +30,165 @@
 var Demo = function (_React$Component) {
-  _inherits(Demo, _React$Component);
+    _inherits(Demo, _React$Component);
 
-  function Demo() {
-    _classCallCheck(this, Demo);
+    function Demo() {
+        var _Object$getPrototypeO;
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(Demo).apply(this, arguments));
-  }
+        var _temp, _this, _ret;
 
-  _createClass(Demo, [{
-    key: 'render',
-    value: function render() {
-      return _react2.default.createElement(
-        'div',
-        null,
-        _react2.default.createElement(
-          'section',
-          null,
-          _react2.default.createElement(
-            'h2',
-            null,
-            'Gravatar'
-          ),
-          _react2.default.createElement(_index2.default, { className: 'myCustomClass', md5Email: '8c5d4c4b9ef6c68c4ff91c319d4c56be', size: 40 }),
-          _react2.default.createElement(_index2.default, { md5Email: '8c5d4c4b9ef6c68c4ff91c319d4c56be', size: 100, round: true }),
-          _react2.default.createElement(_index2.default, { md5Email: '8c5d4c4b9ef6c68c4ff91c319d4c56be', size: 150 }),
-          _react2.default.createElement(_index2.default, { md5Email: '8c5d4c4b9ef6c68c4ff91c319d4c56be', size: 200 })
-        ),
-        _react2.default.createElement(
-          'section',
-          null,
-          _react2.default.createElement(
-            'h2',
-            null,
-            'Invalid gravatar'
-          ),
-          _react2.default.createElement(_index2.default, { email: 'bla', name: 'Jim Jones', size: 80 })
-        ),
-        _react2.default.createElement(
-          'section',
-          null,
-          _react2.default.createElement(
-            'h2',
-            null,
-            'Google+'
-          ),
-          _react2.default.createElement(_index2.default, { googleId: '116933859726289749306', size: 40 }),
-          _react2.default.createElement(_index2.default, { googleId: '116933859726289749306', size: 100, round: true }),
-          _react2.default.createElement(_index2.default, { googleId: '116933859726289749306', size: 150 }),
-          _react2.default.createElement(_index2.default, { googleId: '116933859726289749306', size: 200 })
-        ),
-        _react2.default.createElement(
-          'section',
-          null,
-          _react2.default.createElement(
-            'h2',
-            null,
-            'Facebook'
-          ),
-          _react2.default.createElement(_index2.default, { facebookId: '100008343750912', size: 40 }),
-          _react2.default.createElement(_index2.default, { facebookId: '100008343750912', size: 100, round: true }),
-          _react2.default.createElement(_index2.default, { facebookId: '100008343750912', size: 150 }),
-          _react2.default.createElement(_index2.default, { facebookId: '100008343750912', size: 200 })
-        ),
-        _react2.default.createElement(
-          'section',
-          null,
-          _react2.default.createElement(
-            'h2',
-            null,
-            'Skype'
-          ),
-          _react2.default.createElement(_index2.default, { skypeId: 'sitebase', size: 40 }),
-          _react2.default.createElement(_index2.default, { skypeId: 'sitebase', size: 100, round: true }),
-          _react2.default.createElement(_index2.default, { skypeId: 'sitebase', size: 150 }),
-          _react2.default.createElement(_index2.default, { skypeId: 'sitebase', size: 200 })
-        ),
-        _react2.default.createElement(
-          'section',
-          null,
-          _react2.default.createElement(
-            'h2',
-            null,
-            'Initials'
-          ),
-          _react2.default.createElement(_index2.default, { color: '#00FF00', name: 'Wim Mostmans', size: 40 }),
-          _react2.default.createElement(_index2.default, { name: 'Wim Mostmans', size: 100, round: true }),
-          _react2.default.createElement(_index2.default, { name: 'Wim Mostmans', size: 150 }),
-          _react2.default.createElement(_index2.default, { name: 'Wim Mostmans', size: 200 })
-        ),
-        _react2.default.createElement(
-          'section',
-          null,
-          _react2.default.createElement(
-            'h2',
-            null,
-            'Value'
-          ),
-          _react2.default.createElement(_index2.default, { value: '86%', size: 40 }),
-          _react2.default.createElement(_index2.default, { value: '86%', size: 100, round: true }),
-          _react2.default.createElement(_index2.default, { value: '86%', size: 150 }),
-          _react2.default.createElement(_index2.default, { value: '86%', size: 200 })
-        ),
-        _react2.default.createElement(
-          'section',
-          null,
-          _react2.default.createElement(
-            'h2',
-            null,
-            'Fallback to static src'
-          ),
-          _react2.default.createElement(_index2.default, { size: 100, facebookId: 'invalidfacebookusername', src: 'http://superiorplatform.com/pictures-of/faces/angry/04a-angry_baby.jpg' })
-        ),
-        _react2.default.createElement(
-          'section',
-          null,
-          _react2.default.createElement(
-            'h2',
-            null,
-            'Double fallback: Facebook to Google to initials'
-          ),
-          _react2.default.createElement(_index2.default, { facebookId: 'invalidfacebookusername', googleId: 'invalidgoogleid', name: 'Sitebase', size: 200, round: true })
-        )
-      );
+        _classCallCheck(this, Demo);
+
+        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+        }
+
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Demo)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+            name: 'Wim Mostmans',
+            skypeId: null
+        }, _this._onChangeName = function () {
+            _this.setState({
+                name: 'Foo Bar',
+                skypeId: null
+            });
+        }, _this._onSetSkype = function () {
+            _this.setState({ skypeId: 'sitebase' });
+        }, _temp), _possibleConstructorReturn(_this, _ret);
     }
-  }]);
 
-  return Demo;
+    _createClass(Demo, [{
+        key: 'render',
+        value: function render() {
+            return _react2.default.createElement(
+                'div',
+                null,
+                _react2.default.createElement(
+                    'section',
+                    null,
+                    _react2.default.createElement(
+                        'h2',
+                        null,
+                        'Gravatar'
+                    ),
+                    _react2.default.createElement(_index2.default, { className: 'myCustomClass', md5Email: '8c5d4c4b9ef6c68c4ff91c319d4c56be', size: 40 }),
+                    _react2.default.createElement(_index2.default, { md5Email: '8c5d4c4b9ef6c68c4ff91c319d4c56be', size: 100, round: true }),
+                    _react2.default.createElement(_index2.default, { md5Email: '8c5d4c4b9ef6c68c4ff91c319d4c56be', size: 150 }),
+                    _react2.default.createElement(_index2.default, { md5Email: '8c5d4c4b9ef6c68c4ff91c319d4c56be', size: 200 })
+                ),
+                _react2.default.createElement(
+                    'section',
+                    null,
+                    _react2.default.createElement(
+                        'h2',
+                        null,
+                        'Invalid gravatar'
+                    ),
+                    _react2.default.createElement(_index2.default, { email: 'bla', name: 'Jim Jones', size: 80 })
+                ),
+                _react2.default.createElement(
+                    'section',
+                    null,
+                    _react2.default.createElement(
+                        'h2',
+                        null,
+                        'Google+'
+                    ),
+                    _react2.default.createElement(_index2.default, { googleId: '116933859726289749306', size: 40 }),
+                    _react2.default.createElement(_index2.default, { googleId: '116933859726289749306', size: 100, round: true }),
+                    _react2.default.createElement(_index2.default, { googleId: '116933859726289749306', size: 150 }),
+                    _react2.default.createElement(_index2.default, { googleId: '116933859726289749306', size: 200 })
+                ),
+                _react2.default.createElement(
+                    'section',
+                    null,
+                    _react2.default.createElement(
+                        'h2',
+                        null,
+                        'Facebook'
+                    ),
+                    _react2.default.createElement(_index2.default, { facebookId: '100008343750912', size: 40 }),
+                    _react2.default.createElement(_index2.default, { facebookId: '100008343750912', size: 100, round: true }),
+                    _react2.default.createElement(_index2.default, { facebookId: '100008343750912', size: 150 }),
+                    _react2.default.createElement(_index2.default, { facebookId: '100008343750912', size: 200 })
+                ),
+                _react2.default.createElement(
+                    'section',
+                    null,
+                    _react2.default.createElement(
+                        'h2',
+                        null,
+                        'Skype'
+                    ),
+                    _react2.default.createElement(_index2.default, { skypeId: 'sitebase', size: 40 }),
+                    _react2.default.createElement(_index2.default, { skypeId: 'sitebase', size: 100, round: true }),
+                    _react2.default.createElement(_index2.default, { skypeId: 'sitebase', size: 150 }),
+                    _react2.default.createElement(_index2.default, { skypeId: 'sitebase', size: 200 })
+                ),
+                _react2.default.createElement(
+                    'section',
+                    null,
+                    _react2.default.createElement(
+                        'h2',
+                        null,
+                        'Initials'
+                    ),
+                    _react2.default.createElement(
+                        'div',
+                        { className: 'hidden' },
+                        _react2.default.createElement(
+                            'button',
+                            { onClick: this._onChangeName },
+                            'Change name'
+                        ),
+                        _react2.default.createElement(
+                            'button',
+                            { onClick: this._onSetSkype },
+                            'Set skype ID'
+                        )
+                    ),
+                    _react2.default.createElement(_index2.default, { name: this.state.name, skypeId: this.state.skypeId, size: 40 }),
+                    _react2.default.createElement(_index2.default, { name: this.state.name, size: 100, round: true }),
+                    _react2.default.createElement(_index2.default, { name: this.state.name, size: 150 }),
+                    _react2.default.createElement(_index2.default, { name: this.state.name, size: 200 })
+                ),
+                _react2.default.createElement(
+                    'section',
+                    null,
+                    _react2.default.createElement(
+                        'h2',
+                        null,
+                        'Value'
+                    ),
+                    _react2.default.createElement(_index2.default, { value: '86%', size: 40 }),
+                    _react2.default.createElement(_index2.default, { value: '86%', size: 100, round: true }),
+                    _react2.default.createElement(_index2.default, { value: '86%', size: 150 }),
+                    _react2.default.createElement(_index2.default, { value: '86%', size: 200 })
+                ),
+                _react2.default.createElement(
+                    'section',
+                    null,
+                    _react2.default.createElement(
+                        'h2',
+                        null,
+                        'Fallback to static src'
+                    ),
+                    _react2.default.createElement(_index2.default, { size: 150, facebookId: 'invalidfacebookusername', src: 'https://thumbs.dreamstime.com/m/cute-monster-avatar-smiling-face-yellow-color-52010608.jpg' })
+                ),
+                _react2.default.createElement(
+                    'section',
+                    null,
+                    _react2.default.createElement(
+                        'h2',
+                        null,
+                        'Double fallback: Facebook to Google to initials'
+                    ),
+                    _react2.default.createElement(_index2.default, { facebookId: 'invalidfacebookusername',
+                        googleId: 'invalidgoogleid',
+                        name: 'Sitebase',
+                        size: 200,
+                        round: true })
+                )
+            );
+        }
+    }]);
+
+    return Demo;
 }(_react2.default.Component);
@@ -159,0 +195,0 @@

lib/index.js

@@ -110,8 +110,22 @@ 'use strict';
         value: function componentWillReceiveProps(newProps) {
-            if (newProps.src && newProps.src !== this.props.src) {
-                this.setState({ src: newProps.src });
-            } else if (newProps.name && newProps.name !== this.props.name) {
-                this.setState({ value: this.getInitials(newProps.name) });
-            } else if (newProps.value && newProps.value !== this.props.value) {
-                this.setState({ value: newProps.value });
+            var nextState = {};
+            if (newProps.src !== this.props.src) nextState.src = newProps.src;
+
+            if (newProps.name !== this.props.name) nextState.name = newProps.name;
+
+            if (newProps.value !== this.props.value) nextState.value = newProps.value;
+
+            if (newProps.skypeId !== this.props.skypeId) nextState.skypeId = newProps.skypeId;
+
+            if (newProps.email !== this.props.email) nextState.email = newProps.email;
+
+            if (newProps.md5Email !== this.props.md5Email) nextState.md5Email = newProps.md5Email;
+
+            if (newProps.facebookId !== this.props.facebookId) nextState.facebookId = newProps.facebookId;
+
+            if (newProps.googleId !== this.props.googleId) nextState.googleId = newProps.googleId;
+
+            if (Object.keys(nextState) !== 0) {
+                nextState.sourcePointer = 0;
+                this.setState(nextState, this.fetch);
             }
@@ -118,0 +132,0 @@ }

package.json

 {
   "name": "react-avatar",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0",
   "description": "Universal React avatar component makes it possible to generate avatars based on user information.",
   "main": "lib/index.js",
   "scripts": {
+    "clean": "rm -rf ./lib/*",
     "transpile": "./node_modules/.bin/babel ./src --out-dir ./lib",
     "demo": "./node_modules/.bin/browserify ./lib/demo.js -o ./build/demo.js --transform browserify-global-shim --standalone ReactAvatarDemo",
-    "dev": "npm run transpile && npm run demo",
+    "dev": "npm run clean && npm run transpile && npm run demo",
     "test": "eslint src/index.js"
@@ -11,0 +12,0 @@ },

src/demo.js

@@ -7,3 +7,19 @@ 'use strict';
 
-export default class Demo extends React.Component {
+export default
+class Demo extends React.Component {
+    state = {
+        name: 'Wim Mostmans',
+        skypeId: null
+    }
+
+    _onChangeName = () => {
+        this.setState({
+            name: 'Foo Bar',
+            skypeId: null
+        });
+    }
+
+    _onSetSkype = () => {
+        this.setState({skypeId: 'sitebase'});
+    }
     render() {
@@ -51,6 +67,10 @@ return (
         <h2>Initials</h2>
-        <Avatar color="#00FF00" name="Wim Mostmans" size={40} />
-        <Avatar name="Wim Mostmans" size={100} round={true}/>
-        <Avatar name="Wim Mostmans" size={150} />
-        <Avatar name="Wim Mostmans" size={200} />
+        <div className="hidden">
+            <button onClick={this._onChangeName}>Change name</button>
+            <button onClick={this._onSetSkype}>Set skype ID</button>
+        </div>
+        <Avatar name={this.state.name} skypeId={this.state.skypeId} size={40} />
+        <Avatar name={this.state.name} size={100} round={true}/>
+        <Avatar name={this.state.name} size={150} />
+        <Avatar name={this.state.name} size={200} />
       </section>
@@ -73,3 +93,7 @@
         <h2>Double fallback: Facebook to Google to initials</h2>
-        <Avatar facebookId="invalidfacebookusername" googleId="invalidgoogleid" name="Sitebase" size={200} round={true}></Avatar>
+        <Avatar facebookId="invalidfacebookusername"
+            googleId="invalidgoogleid"
+            name="Sitebase"
+            size={200}
+            round={true} />
       </section>
@@ -76,0 +100,0 @@ </div>

src/index.js

@@ -72,8 +72,30 @@ 'use strict';
     componentWillReceiveProps(newProps) {
-        if (newProps.src && newProps.src !== this.props.src) {
-            this.setState({ src: newProps.src });
-        } else if (newProps.name && newProps.name !== this.props.name) {
-            this.setState({ value: this.getInitials(newProps.name) });
-        } else if (newProps.value && newProps.value !== this.props.value) {
-            this.setState({ value: newProps.value });
+        const nextState = {};
+        if (newProps.src !== this.props.src)
+            nextState.src = newProps.src;
+
+        if (newProps.name !== this.props.name)
+            nextState.name = newProps.name;
+
+        if (newProps.value !== this.props.value)
+            nextState.value = newProps.value;
+
+        if (newProps.skypeId !== this.props.skypeId)
+            nextState.skypeId = newProps.skypeId;
+
+        if (newProps.email !== this.props.email)
+            nextState.email = newProps.email;
+
+        if (newProps.md5Email !== this.props.md5Email)
+            nextState.md5Email = newProps.md5Email;
+
+        if (newProps.facebookId !== this.props.facebookId)
+            nextState.facebookId = newProps.facebookId;
+
+        if (newProps.googleId !== this.props.googleId)
+            nextState.googleId = newProps.googleId;
+
+        if(Object.keys(nextState) !== 0) {
+            nextState.sourcePointer = 0;
+            this.setState(nextState, this.fetch);
         }
@@ -80,0 +102,0 @@ }

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

815609

increased by0.94%

Lines of code

18984

increased by0.69%

Number of low quality alerts

0

decreased by-100%

Number of medium supply chain risk alerts

3

decreased by-25%

No dependency changes