diff --git a/src/common/Image/Image.js b/src/common/Image/Image.js index 98f4955e8..520fade03 100644 --- a/src/common/Image/Image.js +++ b/src/common/Image/Image.js @@ -1,11 +1,15 @@ const React = require('react'); const PropTypes = require('prop-types'); -const Image = ({ className, src, alt, fallbackSrc, renderFallback }) => { +const Image = ({ className, src, alt, fallbackSrc, renderFallback, ...props }) => { const [broken, setBroken] = React.useState(false); - const onError = React.useCallback(() => { + const onError = React.useCallback((event) => { + if (typeof props.onError === 'function') { + props.onError(event); + } + setBroken(true); - }, []); + }, [props.onError]); React.useLayoutEffect(() => { setBroken(false); }, [src]); @@ -13,9 +17,9 @@ const Image = ({ className, src, alt, fallbackSrc, renderFallback }) => { typeof renderFallback === 'function' ? renderFallback() : - {alt} + {alt} : - {alt}; + {alt}; }; Image.propTypes = { diff --git a/storybook/stories/Image/ImageWithFallback/ImageWithFallback.js b/storybook/stories/Image/ImageWithFallback/ImageWithFallback.js index 82cb90e2d..e18552e16 100644 --- a/storybook/stories/Image/ImageWithFallback/ImageWithFallback.js +++ b/storybook/stories/Image/ImageWithFallback/ImageWithFallback.js @@ -1,5 +1,6 @@ const React = require('react'); const { storiesOf } = require('@storybook/react'); +const { action } = require('@storybook/addon-actions'); const Icon = require('stremio-icons/dom'); const { Image } = require('stremio/common'); const styles = require('./styles'); @@ -8,6 +9,7 @@ storiesOf('Image', module).add('ImageWithFallback', () => ( ( )} diff --git a/storybook/stories/Image/SampleImage/SampleImage.js b/storybook/stories/Image/SampleImage/SampleImage.js index 10880fff4..7436c25a3 100644 --- a/storybook/stories/Image/SampleImage/SampleImage.js +++ b/storybook/stories/Image/SampleImage/SampleImage.js @@ -1,11 +1,19 @@ const React = require('react'); const { storiesOf } = require('@storybook/react'); +const { action } = require('@storybook/addon-actions'); const { Image } = require('stremio/common'); const styles = require('./styles'); -storiesOf('Image', module).add('SampleImage', () => ( - -)); +storiesOf('Image', module).add('SampleImage', () => { + const domEventHandler = React.useCallback((event) => { + action('domEventHandler')(event.currentTarget.dataset); + }, []); + return ( + + ); +});