Image compatible with native data props

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()
             :
-            <img className={className} src={fallbackSrc} alt={alt} />
+            <img {...props} className={className} src={fallbackSrc} alt={alt} />
         :
-        <img className={className} src={src} alt={alt} onError={onError} />;
+        <img {...props} className={className} src={src} alt={alt} onError={onError} />;
 };
 
 Image.propTypes = {

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', () => (
     <Image
         className={styles['image']}
         src={'/images/non_existing.png'}
+        onError={action('onError')}
         renderFallback={() => (
             <Icon className={styles['icon']} icon={'ic_broken_link'} />
         )}

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', () => (
-    <Image
-        className={styles['image']}
-        src={'/images/default_avatar.png'}
-    />
-));
+storiesOf('Image', module).add('SampleImage', () => {
+    const domEventHandler = React.useCallback((event) => {
+        action('domEventHandler')(event.currentTarget.dataset);
+    }, []);
+    return (
+        <Image
+            className={styles['image']}
+            src={'/images/default_avatar.png'}
+            data-prop={'data-value'}
+            onClick={domEventHandler}
+        />
+    );
+});