react-cimpress-fulfiller-logo - npm Package Compare versions

Comparing version 0.0.12 to 0.0.13

lib/FufillerLogo.js

@@ -1,15 +0,32 @@
-import React, { Component } from 'react';
-import VisibilitySensor from 'react-visibility-sensor';
-import PropTypes from 'prop-types';
+'use strict';
 
-export default class FulfillerLogo extends React.Component {
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactVisibilitySensor = require('react-visibility-sensor');
+
+var _reactVisibilitySensor2 = _interopRequireDefault(_reactVisibilitySensor);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+class FulfillerLogo extends _react2.default.Component {
+
   constructor(props) {
     super(props);
     this.state = {
-      imageBlob: null,
+      imageObjectUrl: null,
       fulfillerId: props.fulfillerId,
       visible: false,
       imageIsLoading: false,
-      imageIsForbidden: false
+      imageIsForbidden: false,
+      imageIsNotPresent: false
     };
@@ -30,5 +47,11 @@ this.defaultStyle = {
     if (newProps.fulfillerId !== this.props.fulfillerId) {
+      if (this.state.imageObjectUrl) {
+        URL.revokeObjectURL(this.state.imageObjectUrl);
+      }
       this.setState({
-        imageBlob: null,
-        fulfillerId: newProps.fulfillerId
+        imageObjectUrl: null,
+        fulfillerId: newProps.fulfillerId,
+        imageIsLoading: false,
+        imageIsForbidden: false,
+        imageIsNotPresent: false
       }, () => this.fetchImage(this.state.visible));
@@ -38,2 +61,12 @@ }
 
+  componentWillUnmount() {
+    if (this.state.imageObjectUrl) {
+      URL.revokeObjectURL(this.state.imageObjectUrl);
+    }
+  }
+
+  shouldRetryLoading() {
+    return !(this.state.imageIsForbidden || this.state.imageIsNotPresent);
+  }
+
   fetchImage(isVisible) {
@@ -43,3 +76,3 @@ this.setState({
     });
-    if (isVisible && !this.state.imageBlob) {
+    if (isVisible && !this.state.imageObjectUrl && this.shouldRetryLoading()) {
       this.setState({
@@ -66,7 +99,8 @@ imageIsLoading: true
       }).then(blob => {
-        this.setState({ imageBlob: blob });
+        this.setState({ imageObjectUrl: URL.createObjectURL(blob) });
       }).catch(err => {
         console.log(`Unable to fetch image for ${this.state.fulfillerId}, return status ${err.status}`);
         this.setState({
-          imageIsForbidden: err.status === 403
+          imageIsForbidden: err.status === 403,
+          imageIsNotPresent: err.status === 404
         });
@@ -83,5 +117,4 @@ }).then(() => {
     let childContent = this.props.placeholder;
-    if (this.state.imageBlob) {
-      let objectURL = URL.createObjectURL(this.state.imageBlob);
-      childContent = React.createElement('img', { style: { maxWidth: "inherit", maxHeight: "inherit" }, src: objectURL });
+    if (this.state.imageObjectUrl) {
+      childContent = _react2.default.createElement('img', { style: { maxWidth: "inherit", maxHeight: "inherit" }, src: this.state.imageObjectUrl });
     } else if (this.state.imageIsLoading) {
@@ -98,7 +131,7 @@ childContent = this.props.imageLoading || this.props.placeholder;
     if (!childContent) {
-      childContent = React.createElement('span', null);
+      childContent = _react2.default.createElement('span', null);
     }
 
     if (this.props.className) {
-      content = React.createElement(
+      content = _react2.default.createElement(
         'div',
@@ -109,3 +142,3 @@ { className: this.props.className },
     } else {
-      content = React.createElement(
+      content = _react2.default.createElement(
         'div',
@@ -117,5 +150,5 @@ { style: this.defaultStyle },
 
-    return React.createElement(
-      VisibilitySensor,
-      { partialVisibility: true, scrollCheck: true, onChange: this.fetchImage.bind(this) },
+    return _react2.default.createElement(
+      _reactVisibilitySensor2.default,
+      { partialVisibility: true, scrollDelay: 1000, scrollCheck: true, onChange: this.fetchImage.bind(this) },
       content
@@ -126,9 +159,10 @@ );
 
+exports.default = FulfillerLogo;
 FulfillerLogo.propTypes = {
-  fulfillerId: PropTypes.string,
-  accessToken: PropTypes.string,
-  noImage: PropTypes.object,
-  imageLoading: PropTypes.object,
-  noAccess: PropTypes.object,
-  placeholder: PropTypes.object
+  fulfillerId: _propTypes2.default.string,
+  accessToken: _propTypes2.default.string,
+  noImage: _propTypes2.default.object,
+  imageLoading: _propTypes2.default.object,
+  noAccess: _propTypes2.default.object,
+  placeholder: _propTypes2.default.object
 };

lib/index.js

@@ -0,3 +1,5 @@
+"use strict";
+
 let FulfillerLogo = require("./FufillerLogo");
 
 module.exports = FulfillerLogo;

package.json

 {
   "name": "react-cimpress-fulfiller-logo",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "Fetches fulfiller logo from Fulfiller Identity Service.",
   "main": "./lib/index.js",
   "scripts": {
-    "build": "babel src -d lib"
+    "build": "babel src -d lib",
+    "test": "jest"
   },
@@ -20,2 +21,13 @@ "repository": {
   ],
+  "jest": {
+    "verbose": true,
+    "moduleDirectories": [
+      "node_modules",
+      "src"
+    ],
+    "moduleFileExtensions": [
+      "js",
+      "jsx"
+    ]
+  },
   "bugs": {
@@ -30,8 +42,14 @@ "url": "https://github.com/Cimpress-MCP/react-cimpress-fulfiller-logo/issues"
     "babel-cli": "^6.24.1",
-    "babel-plugin-transform-react-jsx": "^6.24.1"
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
+    "babel-plugin-transform-react-jsx": "^6.24.1",
+    "jest": "^21.2.1",
+    "jest-cli": "^21.2.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-test-renderer": "^16.2.0"
   },
   "dependencies": {
     "prop-types": "^15.6.0",
-    "react-visibility-sensor": "^3.10.1"
+    "react-visibility-sensor": "^3.11.0"
   }
 }

readme.md

@@ -25,3 +25,3 @@ # react-cimpress-fulfiller-logo
 
-    `<FulfillerLogo className="fulfillerLogos" fulfillerId="fulfillerId" accessToken={localStorage.getItem('accessToken')}/>`
+    <FulfillerLogo className="fulfillerLogos" fulfillerId="fulfillerId" accessToken={localStorage.getItem('accessToken')}/>
 
@@ -43,3 +43,2 @@ ### To override default loading behaviour
 
-
 ### Other overrides
@@ -46,0 +45,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

Improved metrics

Total package byte prevSize

8019

increased by22.63%

Lines of code

139

increased by21.93%

Worsened metrics

Dev dependency count

9

increased by200%

Number of lines in readme file

58

decreased by-1.69%

Dependency changes

• Updatedreact-visibility-sensor@^3.11.0