From e106b88165d8f8bed06d64215357b99db8c1d04a Mon Sep 17 00:00:00 2001 From: Hosmel Quintana Date: Tue, 13 Feb 2018 09:42:07 -0600 Subject: [PATCH 1/3] add .npmrc --- .npmrc | 1 + 1 file changed, 1 insertion(+) create mode 100644 .npmrc diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..43c97e7 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +package-lock=false From 26a61a22447deb54c02409dd7dc721c1b72f4eaa Mon Sep 17 00:00:00 2001 From: Hosmel Quintana Date: Tue, 13 Feb 2018 10:09:29 -0600 Subject: [PATCH 2/3] let user pass extra attributes --- lib/ImageWorker.js | 71 +++++++++++++++++++++++----------------------- 1 file changed, 36 insertions(+), 35 deletions(-) diff --git a/lib/ImageWorker.js b/lib/ImageWorker.js index 6c78dd3..687bf1f 100644 --- a/lib/ImageWorker.js +++ b/lib/ImageWorker.js @@ -15,37 +15,33 @@ const webWorkerScript = ` }) `; - type ImageWorkerProps = { - src: string, placeholder?: string | Function, - style?: Object, - imageClass?: string, - containerClass?: string, -} + src: string +}; type ImageWorkerState = { - isLoading: boolean, - imgSrc: string -} - - -const wrappedComponent = WrappedComponent => props => { - return ; + imgSrc: string, + isLoading: boolean }; 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: '' - } + }; + constructor(props: ImageWorkerProps) { super(props); + this.worker.onmessage = (event: Object) => { this.loadImage(event.data); }; @@ -60,46 +56,51 @@ class ImageWorker extends Component { this.image.onload = null; this.image.onerror = null; } + this.worker.terminate(); } renderPlaceholder() { - const { placeholder, style } = this.props; + const { placeholder, src, ...attributes } = this.props; // eslint-disable-line no-unused-vars + if (typeof placeholder === 'function') { - const PlaceholderComponent = wrappedComponent(placeholder); + const PlaceholderComponent = placeholder; + return ; } else if (typeof placeholder === 'string') { - return placeholder; - } else { - return null; + return ; } + + return null; } 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; - return ( -
- { - this.state.isLoading ? this.renderPlaceholder() : - worker - } -
+ const { placeholder, src, ...attributes } = this.props; // eslint-disable-line no-unused-vars + + return this.state.isLoading ? ( + this.renderPlaceholder() + ) : ( + ); } } From d27a708c5aecf23d4fed11b1d48411f37c71462f Mon Sep 17 00:00:00 2001 From: Hosmel Quintana Date: Tue, 13 Feb 2018 12:09:26 -0600 Subject: [PATCH 3/3] update readme --- README.md | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 71e8dd7..d17d1ee 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ yarn add react-worker-image ## Usage -`react-worker-image` exports one react component which takes `src` as a prop, and an optional prop of `placeholder`, `style` and `imageClass` which are applied to the img tag. +`react-worker-image` exports one react component which takes `src` as a prop, and an optional prop of `placeholder`. ```js const ImageWorker = require('react-worker-image').default; @@ -37,11 +37,8 @@ usage in code | ------------- |:-------------:| --------------:| | src | yes | string | | placeholder | optional | string or Component| -| style | optional | Object | -|imageClass | optional | string -|containerClass | optional | string -The above props are applied to the img tag. +Any other attribute that is passed to the component will be applied to the img tag. Found a bug file them [here](https://github.com/nitish24p/react-worker-image/issues).