react-avatar - npm Package Compare versions

Comparing version 3.5.0 to 3.5.1

es/index.js

@@ -27,2 +27,4 @@ 'use strict';
 
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
@@ -32,4 +34,2 @@
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -40,3 +40,3 @@
 import { withConfig, ConfigProvider } from './context';
-import { getRandomColor, parseSize } from './utils';
+import { getRandomColor, parseSize, setGroupedTimeout } from './utils';
 import InternalState from './internal-state';
@@ -88,3 +88,3 @@ import gravatarSource from './sources/Gravatar';
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_createFetcher", function (internal) {
+    _defineProperty(_assertThisInitialized(_this), "_createFetcher", function (internal) {
       return function (errEvent) {
@@ -117,3 +117,3 @@ var cache = _this.props.cache;
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "fetch", function () {
+    _defineProperty(_assertThisInitialized(_this), "fetch", function () {
       var internal = new InternalState();
@@ -127,3 +127,4 @@ internal.fetch = _this._createFetcher(internal);
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_scaleTextNode", function (node) {
+    _defineProperty(_assertThisInitialized(_this), "_scaleTextNode", function (node) {
+      var retryTTL = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 16;
       var _this$props = _this.props,
@@ -133,3 +134,3 @@ unstyled = _this$props.unstyled,
           textMarginRatio = _this$props.textMarginRatio;
-      if (!node || unstyled) return;
+      if (!node || unstyled || _this.state.src || !_this.mounted) return;
       var spanNode = node.parentNode;
@@ -140,3 +141,17 @@ var tableNode = spanNode.parentNode;
           containerWidth = _spanNode$getBounding.width,
-          containerHeight = _spanNode$getBounding.height; // If the tableNode (outer-container) does not have its fontSize set yet,
+          containerHeight = _spanNode$getBounding.height; // Whenever the avatar element is not visible due to some CSS
+      // (such as display: none) on any parent component we will check
+      // whether the component has become visible.
+      //
+      // The time between checks grows up to half a second in an attempt
+      // to reduce flicker / performance issues.
+
+
+      if (containerWidth == 0 && containerHeight == 0) {
+        var ttl = Math.min(retryTTL * 1.5, 500);
+        setGroupedTimeout(function () {
+          return _this._scaleTextNode(node, ttl);
+        }, ttl);
+        return;
+      } // If the tableNode (outer-container) does not have its fontSize set yet,
       // we'll set it according to "textSizeRatio"
@@ -175,2 +190,3 @@
     value: function componentDidMount() {
+      this.mounted = true;
       this.fetch();
@@ -195,2 +211,4 @@ }
     value: function componentWillUnmount() {
+      this.mounted = false;
+
       if (this.state.internal) {
@@ -197,0 +215,0 @@ this.state.internal.active = false;

es/utils.js

@@ -126,2 +126,25 @@ 'use strict';
   }).slice(0, maxInitials).join('');
+}
+/**
+ * Grouped timeouts reduce the amount of timeouts trigged
+ * by grouping multiple handlers into a single setTimeout call.
+ *
+ * This reduces accuracy of the timeout but will be less expensive
+ * when multiple avatar have been loaded into view.
+ */
+
+var timeoutGroups = {};
+export function setGroupedTimeout(fn, ttl) {
+  if (timeoutGroups[ttl]) {
+    timeoutGroups[ttl].push(fn);
+    return;
+  }
+
+  var callbacks = timeoutGroups[ttl] = [fn];
+  setTimeout(function () {
+    delete timeoutGroups[ttl];
+    callbacks.forEach(function (cb) {
+      return cb();
+    });
+  }, ttl);
 }

lib/index.js

@@ -86,2 +86,4 @@ 'use strict';
 
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
@@ -91,4 +93,2 @@
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -129,3 +129,3 @@
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_createFetcher", function (internal) {
+    _defineProperty(_assertThisInitialized(_this), "_createFetcher", function (internal) {
       return function (errEvent) {
@@ -158,3 +158,3 @@ var cache = _this.props.cache;
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "fetch", function () {
+    _defineProperty(_assertThisInitialized(_this), "fetch", function () {
       var internal = new _internalState.default();
@@ -168,3 +168,4 @@ internal.fetch = _this._createFetcher(internal);
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_scaleTextNode", function (node) {
+    _defineProperty(_assertThisInitialized(_this), "_scaleTextNode", function (node) {
+      var retryTTL = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 16;
       var _this$props = _this.props,
@@ -174,3 +175,3 @@ unstyled = _this$props.unstyled,
           textMarginRatio = _this$props.textMarginRatio;
-      if (!node || unstyled) return;
+      if (!node || unstyled || _this.state.src || !_this.mounted) return;
       var spanNode = node.parentNode;
@@ -181,3 +182,17 @@ var tableNode = spanNode.parentNode;
           containerWidth = _spanNode$getBounding.width,
-          containerHeight = _spanNode$getBounding.height; // If the tableNode (outer-container) does not have its fontSize set yet,
+          containerHeight = _spanNode$getBounding.height; // Whenever the avatar element is not visible due to some CSS
+      // (such as display: none) on any parent component we will check
+      // whether the component has become visible.
+      //
+      // The time between checks grows up to half a second in an attempt
+      // to reduce flicker / performance issues.
+
+
+      if (containerWidth == 0 && containerHeight == 0) {
+        var ttl = Math.min(retryTTL * 1.5, 500);
+        (0, _utils.setGroupedTimeout)(function () {
+          return _this._scaleTextNode(node, ttl);
+        }, ttl);
+        return;
+      } // If the tableNode (outer-container) does not have its fontSize set yet,
       // we'll set it according to "textSizeRatio"
@@ -216,2 +231,3 @@
     value: function componentDidMount() {
+      this.mounted = true;
       this.fetch();
@@ -236,2 +252,4 @@ }
     value: function componentWillUnmount() {
+      this.mounted = false;
+
       if (this.state.internal) {
@@ -238,0 +256,0 @@ this.state.internal.active = false;

lib/utils.js

@@ -11,2 +11,3 @@ 'use strict';
 exports.defaultInitials = defaultInitials;
+exports.setGroupedTimeout = setGroupedTimeout;
 exports.defaultColors = void 0;
@@ -148,2 +149,27 @@
   }).slice(0, maxInitials).join('');
+}
+/**
+ * Grouped timeouts reduce the amount of timeouts trigged
+ * by grouping multiple handlers into a single setTimeout call.
+ *
+ * This reduces accuracy of the timeout but will be less expensive
+ * when multiple avatar have been loaded into view.
+ */
+
+
+var timeoutGroups = {};
+
+function setGroupedTimeout(fn, ttl) {
+  if (timeoutGroups[ttl]) {
+    timeoutGroups[ttl].push(fn);
+    return;
+  }
+
+  var callbacks = timeoutGroups[ttl] = [fn];
+  setTimeout(function () {
+    delete timeoutGroups[ttl];
+    callbacks.forEach(function (cb) {
+      return cb();
+    });
+  }, ttl);
 }

package.json

 {
   "name": "react-avatar",
-  "version": "3.5.0",
+  "version": "3.5.1",
   "description": "Universal React avatar component makes it possible to generate avatars based on user information.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -15,3 +15,3 @@ # <Avatar> [![Build Status](https://travis-ci.org/Sitebase/react-avatar.svg?branch=master)](https://travis-ci.org/Sitebase/react-avatar) [![npm downloads](https://img.shields.io/npm/dm/react-avatar.svg)](https://www.npmjs.com/package/react-avatar) [![version](https://img.shields.io/npm/v/react-avatar.svg)](https://www.npmjs.com/package/react-avatar) ![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/react-avatar.svg) ![npm type definitions](https://img.shields.io/npm/types/react-avatar.svg)
 * Instagram (using [Avatar Redirect](#avatar-redirect))
-* Vkontakte
+* Vkontakte (using [Avatar Redirect](#avatar-redirect))
 * Skype
@@ -18,0 +18,0 @@ * Gravatar

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

109338

increased by2.45%

Lines of code

2107

increased by3.59%

No dependency changes