diff --git a/README.md b/README.md index 71e8dd7..421f3a4 100644 --- a/README.md +++ b/README.md @@ -40,6 +40,7 @@ usage in code | style | optional | Object | |imageClass | optional | string |containerClass | optional | string +|onLoad | optional | function The above props are applied to the img tag. diff --git a/lib/ImageWorker.js b/lib/ImageWorker.js index 6c78dd3..468f2e9 100644 --- a/lib/ImageWorker.js +++ b/lib/ImageWorker.js @@ -1,6 +1,6 @@ /* @flow */ -import React, { Component } from 'react'; +import React, { Component } from "react"; const webWorkerScript = ` self.addEventListener('message', event => { @@ -15,20 +15,18 @@ const webWorkerScript = ` }) `; - type ImageWorkerProps = { src: string, placeholder?: string | Function, style?: Object, imageClass?: string, - containerClass?: string, -} + containerClass?: string +}; type ImageWorkerState = { isLoading: boolean, imgSrc: string -} - +}; const wrappedComponent = WrappedComponent => props => { return ; @@ -36,14 +34,16 @@ const wrappedComponent = WrappedComponent => props => { class ImageWorker extends Component { image: HTMLImageElement; - worker = new Worker(URL.createObjectURL( - new Blob([webWorkerScript], { type: 'application/javascript' }) - )) + worker = new Worker( + URL.createObjectURL( + new Blob([webWorkerScript], { type: "application/javascript" }) + ) + ); state = { isLoading: true, - imgSrc: '' - } + imgSrc: "" + }; constructor(props: ImageWorkerProps) { super(props); this.worker.onmessage = (event: Object) => { @@ -65,11 +65,11 @@ class ImageWorker extends Component { renderPlaceholder() { const { placeholder, style } = this.props; - if (typeof placeholder === 'function') { + if (typeof placeholder === "function") { const PlaceholderComponent = wrappedComponent(placeholder); return ; - } else if (typeof placeholder === 'string') { - return placeholder; + } else if (typeof placeholder === "string") { + return placeholder; } else { return null; } @@ -78,27 +78,38 @@ class ImageWorker extends Component { loadImage = (url: string) => { const image = new Image(); this.image = image; - + image.src = url; - image.decode !== undefined ? image.decode().then(this.onLoad).catch(this.onLoad) : image.onload = this.onLoad; - } + image.decode !== undefined + ? image + .decode() + .then(this.onLoad) + .catch(this.onLoad) + : (image.onload = this.onLoad); + }; onLoad = () => { this.setState({ imgSrc: this.image.src, isLoading: false }); - } + }; render() { - const { style, imageClass, containerClass } = this.props; + const { style, imageClass, containerClass, onLoad } = this.props; return (
- { - this.state.isLoading ? this.renderPlaceholder() : - worker - } + {this.state.isLoading ? ( + this.renderPlaceholder() + ) : ( + worker + )}
); } diff --git a/yarn.lock b/yarn.lock index 44c6829..490842e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1855,7 +1855,7 @@ lodash@^4.15.0, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0: version "4.17.4" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" -loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1: +loose-envify@^1.0.0, loose-envify@^1.3.1: version "1.3.1" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" dependencies: @@ -2151,24 +2151,6 @@ rc@^1.1.7: minimist "^1.2.0" strip-json-comments "~2.0.1" -react-dom@^16.2.0: - version "16.2.0" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044" - dependencies: - fbjs "^0.8.16" - loose-envify "^1.1.0" - object-assign "^4.1.1" - prop-types "^15.6.0" - -react@^16.2.0: - version "16.2.0" - resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba" - dependencies: - fbjs "^0.8.16" - loose-envify "^1.1.0" - object-assign "^4.1.1" - prop-types "^15.6.0" - readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.2.2: version "2.3.3" resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"