Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-cimpress-fulfiller-logo

Package Overview
Dependencies
Maintainers
3
Versions
18
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 0.0.9 to 0.0.10

94

lib/FufillerLogo.js
import React, { Component } from 'react';
import VisibilitySensor from 'react-visibility-sensor';
import PropTypes from 'prop-types';

@@ -8,25 +9,66 @@ export default class FulfillerLogo extends React.Component {

super(props);
this.url = `https://fulfilleridentity.trdlnk.cimpress.io/v1/fulfillers/${props.fulfillerId}/logo`;
this.state = {
imageBlob: null
imageBlob: null,
fulfillerId: props.fulfillerId,
visible: false,
imageIsLoading: false,
imageIsForbidden: false
};
this.defaultStyle = {
maxWidth: "50px",
maxHeight: "50px",
display: "inline-block",
objectFit: "contain",
width: "50px",
height: "50px",
marginRight: "10px",
verticalAlign: "middle"
};
}
componentWillReceiveProps(newProps) {
if (newProps.fulfillerId !== this.props.fulfillerId) {
this.setState({
imageBlob: null,
fulfillerId: newProps.fulfillerId
}, () => this.fetchImage(this.state.visible));
}
}
fetchImage(isVisible) {
this.setState({
visible: isVisible
});
if (isVisible && !this.state.imageBlob) {
this.setState({
imageIsLoading: true
});
let headers = new Headers();
headers.append("Authorization", `Bearer ${this.props.accessToken}`);
headers.append("Accept", "image/*");
let init = { method: 'GET',
headers.append('Authorization', `Bearer ${this.props.accessToken}`);
headers.append('Accept', 'image/*');
let init = {
method: 'GET',
headers: headers,
mode: 'cors',
cache: 'default' };
fetch(this.url, init).then(response => {
cache: 'default'
};
let url = `https://fulfilleridentity.trdlnk.cimpress.io/v1/fulfillers/${this.state.fulfillerId}/logo`;
fetch(url, init).then(response => {
if (response.status === 200) {
return response.blob();
} else {
throw new Error(`No logo: ${this.url}`);
throw response;
}
}).then(blob => {
this.setState({ imageBlob: blob });
}).catch(err => {
console.log(`Unable to fetch image for ${this.state.fulfillerId}, return status ${err.status}`);
this.setState({
imageIsForbidden: err.status === 403
});
}).then(() => {
this.setState({
imageIsLoading: false
});
});

@@ -37,8 +79,28 @@ }

render() {
let content = null;
let childContent = null;
if (this.state.imageBlob) {
let objectURL = URL.createObjectURL(this.state.imageBlob);
content = React.createElement('img', { className: this.props.className, src: objectURL });
childContent = React.createElement('img', { style: { width: "100%", height: "auto", maxWidth: "100%" }, src: objectURL });
} else if (this.state.imageIsLoading && this.props.imageLoading) {
childContent = this.props.imageLoading;
} else if (this.state.imageIsForbidden && this.props.noAccess) {
childContent = this.props.noAccess;
} else if (this.props.noImage) {
childContent = this.props.noImage;
}
let content = null;
if (this.props.className) {
content = React.createElement(
'div',
{ className: this.props.className },
childContent
);
} else {
content = React.createElement('div', { className: this.props.className });
content = React.createElement(
'div',
{ style: this.defaultStyle },
childContent
);
}

@@ -52,2 +114,10 @@

}
}
}
FulfillerLogo.propTypes = {
fulfillerId: PropTypes.string,
accessToken: PropTypes.string,
noImage: PropTypes.object,
imageLoading: PropTypes.object,
noAccess: PropTypes.object
};

3

package.json
{
"name": "react-cimpress-fulfiller-logo",
"version": "0.0.9",
"version": "0.0.10",
"description": "Fetches fulfiller logo from Fulfiller Identity Service.",

@@ -33,4 +33,5 @@ "main": "./lib/index.js",

"dependencies": {
"prop-types": "^15.6.0",
"react-visibility-sensor": "^3.10.1"
}
}

@@ -17,2 +17,25 @@ # react-cimpress-fulfiller-logo

`<FulfillerLogo fulfillerId="fulfillerId" accessToken={localStorage.getItem('accessToken')}/>`
Component uses sane defaults, which can be overridden.
### To override styles
In order to override styles provide `className`
`<FulfillerLogo className="fulfillerLogos" fulfillerId="fulfillerId" accessToken={localStorage.getItem('accessToken')}/>`
### To override default loading behaviour
In order to override loading behaviour provide `imageLoading` with the content.
import { colors, shapes } from '@cimpress/react-components';
let { Spinner } = shapes;
<FulfillerLogo imageLoading={{<Spinner/>}} fulfillerId="fulfillerId" accessToken={localStorage.getItem('accessToken')}/>
### To override default behaviour when no image is available
In order to override behaviour when no image is available provide `noImage` with the content.
<FulfillerLogo noImage={"No Image"} fulfillerId="fulfillerId" accessToken={localStorage.getItem('accessToken')}/>
import React, { Component } from 'react';
import VisibilitySensor from 'react-visibility-sensor';
import PropTypes from 'prop-types';
export default class FulfillerLogo extends React.Component {
constructor(props) {
constructor (props) {
super(props);
this.url = `https://fulfilleridentity.trdlnk.cimpress.io/v1/fulfillers/${props.fulfillerId}/logo`;
this.state = {
imageBlob: null,
fulfillerId: props.fulfillerId,
visible: false,
imageIsLoading: false,
imageIsForbidden: false,
};
this.defaultStyle = {
maxWidth: "50px",
maxHeight: "50px",
display: "inline-block",
objectFit: "contain",
width: "50px",
height: "50px",
marginRight: "10px",
verticalAlign: "middle"
};
}
componentWillReceiveProps (newProps) {
if (newProps.fulfillerId !== this.props.fulfillerId) {
this.setState({
imageBlob: null,
fulfillerId: newProps.fulfillerId,
}, () => this.fetchImage(this.state.visible));
}
}
fetchImage(isVisible) {
fetchImage (isVisible) {
this.setState({
visible: isVisible
});
if (isVisible && !this.state.imageBlob) {
this.setState({
imageIsLoading: true
});
let headers = new Headers();
headers.append("Authorization", `Bearer ${this.props.accessToken}`);
headers.append("Accept", "image/*");
let init = { method: 'GET',
headers.append('Authorization', `Bearer ${this.props.accessToken}`);
headers.append('Accept', 'image/*');
let init = {
method: 'GET',
headers: headers,
mode: 'cors',
cache: 'default' };
fetch(this.url, init).then(response => {
cache: 'default'
};
let url = `https://fulfilleridentity.trdlnk.cimpress.io/v1/fulfillers/${this.state.fulfillerId}/logo`;
fetch(url, init).then(response => {
if (response.status === 200) {
return response.blob();
} else {
throw new Error(`No logo: ${this.url}`)
throw response;
}
}).then(blob => {
this.setState({imageBlob: blob})
this.setState({imageBlob: blob});
}).catch(err => {
console.log(`Unable to fetch image for ${this.state.fulfillerId}, return status ${err.status}`);
this.setState({
imageIsForbidden: err.status === 403
});
}).then(() => {
this.setState({
imageIsLoading: false
});
});

@@ -35,9 +78,21 @@ }

render() {
let content = null;
render () {
let childContent = null;
if (this.state.imageBlob) {
let objectURL = URL.createObjectURL(this.state.imageBlob);
content = <img className={this.props.className} src={objectURL}/>;
childContent = <img style={{width: "100%", height: "auto", maxWidth: "100%"}} src={objectURL}/>;
} else if (this.state.imageIsLoading && this.props.imageLoading) {
childContent = this.props.imageLoading;
} else if (this.state.imageIsForbidden && this.props.noAccess) {
childContent = this.props.noAccess;
} else if (this.props.noImage) {
childContent = this.props.noImage
}
let content = null;
if (this.props.className) {
content = <div className={this.props.className}>{childContent}</div>;
} else {
content = <div className={this.props.className}></div>;
content = <div style={this.defaultStyle}>{childContent}</div>;
}

@@ -52,1 +107,9 @@

}
FulfillerLogo.propTypes = {
fulfillerId: PropTypes.string,
accessToken: PropTypes.string,
noImage: PropTypes.object,
imageLoading: PropTypes.object,
noAccess: PropTypes.object
};
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc