react-cimpress-fulfiller-logo
Advanced tools
Comparing version 0.0.9 to 0.0.10
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 | ||
}; |
{ | ||
"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 | ||
}; |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
8918
212
41
2
+ Addedprop-types@^15.6.0