Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 11:42:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Image compatible with native data props

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-12-02 10:45:55 +02:00
parent 044b8d9709
commit a8f1e934cf
3 changed files with 25 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/common/Image/Image.js
View file

@ -1,11 +1,15 @@
const React = require('react'); const React = require('react');
const PropTypes = require('prop-types'); 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 [broken, setBroken] = React.useState(false);
const onError = React.useCallback(() => { const onError = React.useCallback((event) => {
if (typeof props.onError === 'function') {
props.onError(event);
}
setBroken(true); setBroken(true);
}, []); }, [props.onError]);
React.useLayoutEffect(() => { React.useLayoutEffect(() => {
setBroken(false); setBroken(false);
}, [src]); }, [src]);
@ -13,9 +17,9 @@ const Image = ({ className, src, alt, fallbackSrc, renderFallback }) => {
typeof renderFallback === 'function' ? typeof renderFallback === 'function' ?
renderFallback() 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 = { Image.propTypes = {

2
storybook/stories/Image/ImageWithFallback/ImageWithFallback.js
View file

@ -1,5 +1,6 @@
const React = require('react'); const React = require('react');
const { storiesOf } = require('@storybook/react'); const { storiesOf } = require('@storybook/react');
const { action } = require('@storybook/addon-actions');
const Icon = require('stremio-icons/dom'); const Icon = require('stremio-icons/dom');
const { Image } = require('stremio/common'); const { Image } = require('stremio/common');
const styles = require('./styles'); const styles = require('./styles');
@ -8,6 +9,7 @@ storiesOf('Image', module).add('ImageWithFallback', () => (
<Image <Image
className={styles['image']} className={styles['image']}
src={'/images/non_existing.png'} src={'/images/non_existing.png'}
onError={action('onError')}
renderFallback={() => ( renderFallback={() => (
<Icon className={styles['icon']} icon={'ic_broken_link'} /> <Icon className={styles['icon']} icon={'ic_broken_link'} />
)} )}

20
storybook/stories/Image/SampleImage/SampleImage.js
View file

@ -1,11 +1,19 @@
const React = require('react'); const React = require('react');
const { storiesOf } = require('@storybook/react'); const { storiesOf } = require('@storybook/react');
const { action } = require('@storybook/addon-actions');
const { Image } = require('stremio/common'); const { Image } = require('stremio/common');
const styles = require('./styles'); const styles = require('./styles');
storiesOf('Image', module).add('SampleImage', () => ( storiesOf('Image', module).add('SampleImage', () => {
<Image const domEventHandler = React.useCallback((event) => {
className={styles['image']} action('domEventHandler')(event.currentTarget.dataset);
src={'/images/default_avatar.png'} }, []);
/> return (
)); <Image
className={styles['image']}
src={'/images/default_avatar.png'}
data-prop={'data-value'}
onClick={domEventHandler}
/>
);
});