From 467aa163c0e3989a8750d9127cfdb1f728b0b06e Mon Sep 17 00:00:00 2001 From: Grewer Date: Sat, 9 Mar 2019 17:24:15 +0800 Subject: [PATCH 1/2] add err handle --- src/Lightbox.js | 47 +++++++++++++++++++++++++++-------------------- 1 file changed, 27 insertions(+), 20 deletions(-) diff --git a/src/Lightbox.js b/src/Lightbox.js index 42601033..cca96fb5 100644 --- a/src/Lightbox.js +++ b/src/Lightbox.js @@ -31,9 +31,10 @@ class Lightbox extends Component { constructor (props) { super(props); - this.theme = deepMerge(defaultTheme, props.theme); - this.classes = StyleSheet.create(deepMerge(defaultStyles, this.theme)); - this.state = { imageLoaded: false }; + this.theme = deepMerge(defaultTheme, props.theme); + this.classes = StyleSheet.create(deepMerge(defaultStyles, this.theme)); + this.state = {imageLoaded: false}; + this.images = this.props.images bindFunctions.call(this, [ 'gotoNext', @@ -84,11 +85,11 @@ class Lightbox extends Component { } } - // preload current image - if (this.props.currentImage !== nextProps.currentImage || !this.props.isOpen && nextProps.isOpen) { - const img = this.preloadImageData(nextProps.images[nextProps.currentImage], this.handleImageLoaded); - if (img) this.setState({ imageLoaded: img.complete }); - } + // preload current image + if (this.props.currentImage !== nextProps.currentImage || !this.props.isOpen && nextProps.isOpen) { + const img = this.preloadImageData(nextProps.images[nextProps.currentImage], this.handleImageLoaded, nextProps.currentImage); + if (img) this.setState({imageLoaded: img.complete}); + } // add/remove event listeners if (!this.props.isOpen && nextProps.isOpen && nextProps.enableKeyboardInput) { @@ -108,18 +109,24 @@ class Lightbox extends Component { // METHODS // ============================== - preloadImage (idx, onload) { - return this.preloadImageData(this.props.images[idx], onload); - } - preloadImageData (data, onload) { - if (!data) return; - const img = new Image(); - const sourceSet = normalizeSourceSet(data); - - // TODO: add error handling for missing images - img.onerror = onload; - img.onload = onload; - img.src = data.src; + preloadImage(idx, onload) { + return this.preloadImageData(this.props.images[idx], onload, idx); + } + + loadError(e, id) { + // {src: this.props.errorImage,thumbnail:'',srcSet:[]} is can merge to this.props.errorImage + const _image = Object.assign({},this.images[id],{src: this.props.errorImage,thumbnail:'',srcSet:[]}) + this.images.splice(id, 1, _image) + } + + preloadImageData(data, onload, idx) { + if (!data) return; + const img = new Image(); + const sourceSet = normalizeSourceSet(data); + + img.onerror = e => this.loadError(e, idx); + img.onload = onload; + img.src = data.src; if (sourceSet) img.srcset = sourceSet; From 1e2cfc4f7a502f2240e527ff906f754006b3b4a1 Mon Sep 17 00:00:00 2001 From: Grewer Date: Sat, 9 Mar 2019 17:39:46 +0800 Subject: [PATCH 2/2] to pass lint --- src/Lightbox.js | 47 +++++++++++++++++++++++------------------------ 1 file changed, 23 insertions(+), 24 deletions(-) diff --git a/src/Lightbox.js b/src/Lightbox.js index cca96fb5..c9e3c298 100644 --- a/src/Lightbox.js +++ b/src/Lightbox.js @@ -31,10 +31,10 @@ class Lightbox extends Component { constructor (props) { super(props); - this.theme = deepMerge(defaultTheme, props.theme); - this.classes = StyleSheet.create(deepMerge(defaultStyles, this.theme)); - this.state = {imageLoaded: false}; - this.images = this.props.images + this.theme = deepMerge(defaultTheme, props.theme); + this.classes = StyleSheet.create(deepMerge(defaultStyles, this.theme)); + this.state = { imageLoaded: false }; + this.images = this.props.images; bindFunctions.call(this, [ 'gotoNext', @@ -86,10 +86,10 @@ class Lightbox extends Component { } // preload current image - if (this.props.currentImage !== nextProps.currentImage || !this.props.isOpen && nextProps.isOpen) { - const img = this.preloadImageData(nextProps.images[nextProps.currentImage], this.handleImageLoaded, nextProps.currentImage); - if (img) this.setState({imageLoaded: img.complete}); - } + if (this.props.currentImage !== nextProps.currentImage || !this.props.isOpen && nextProps.isOpen) { + const img = this.preloadImageData(nextProps.images[nextProps.currentImage], this.handleImageLoaded, nextProps.currentImage); + if (img) this.setState({ imageLoaded: img.complete }); + } // add/remove event listeners if (!this.props.isOpen && nextProps.isOpen && nextProps.enableKeyboardInput) { @@ -109,24 +109,24 @@ class Lightbox extends Component { // METHODS // ============================== - preloadImage(idx, onload) { - return this.preloadImageData(this.props.images[idx], onload, idx); - } + preloadImage (idx, onload) { + return this.preloadImageData(this.props.images[idx], onload, idx); + } - loadError(e, id) { - // {src: this.props.errorImage,thumbnail:'',srcSet:[]} is can merge to this.props.errorImage - const _image = Object.assign({},this.images[id],{src: this.props.errorImage,thumbnail:'',srcSet:[]}) - this.images.splice(id, 1, _image) - } + loadError (e, id) { + // {src: this.props.errorImage,thumbnail:'',srcSet:[]} is can merge to this.props.errorImage + const _image = Object.assign({}, this.images[id], { src: this.props.errorImage, thumbnail: '', srcSet: [] }); + this.images.splice(id, 1, _image); + } - preloadImageData(data, onload, idx) { - if (!data) return; - const img = new Image(); - const sourceSet = normalizeSourceSet(data); + preloadImageData (data, onload, idx) { + if (!data) return; + const img = new Image(); + const sourceSet = normalizeSourceSet(data); - img.onerror = e => this.loadError(e, idx); - img.onload = onload; - img.src = data.src; + img.onerror = e => this.loadError(e, idx); + img.onload = onload; + img.src = data.src; if (sourceSet) img.srcset = sourceSet; @@ -262,7 +262,6 @@ class Lightbox extends Component { const { imageLoaded } = this.state; if (!images || !images.length) return null; - const image = images[currentImage]; const sourceSet = normalizeSourceSet(image); const sizes = sourceSet ? '100vw' : null;