Port a65d2d1045
to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
local
parent
1edaf58fb9
commit
bd851d3b58
2 changed files with 27 additions and 33 deletions
@ -1,33 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import PropTypes from 'prop-types'; |
|
||||||
import Blurhash from './blurhash'; |
|
||||||
import classNames from 'classnames'; |
|
||||||
|
|
||||||
export default class Image extends React.PureComponent { |
|
||||||
|
|
||||||
static propTypes = { |
|
||||||
src: PropTypes.string, |
|
||||||
srcSet: PropTypes.string, |
|
||||||
blurhash: PropTypes.string, |
|
||||||
className: PropTypes.string, |
|
||||||
}; |
|
||||||
|
|
||||||
state = { |
|
||||||
loaded: false, |
|
||||||
}; |
|
||||||
|
|
||||||
handleLoad = () => this.setState({ loaded: true }); |
|
||||||
|
|
||||||
render () { |
|
||||||
const { src, srcSet, blurhash, className } = this.props; |
|
||||||
const { loaded } = this.state; |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className={classNames('image', { loaded }, className)} role='presentation'> |
|
||||||
{blurhash && <Blurhash hash={blurhash} className='image__preview' />} |
|
||||||
<img src={src} srcSet={srcSet} alt='' onLoad={this.handleLoad} /> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
@ -0,0 +1,27 @@ |
|||||||
|
import React, { useCallback, useState } from 'react'; |
||||||
|
import Blurhash from './blurhash'; |
||||||
|
import classNames from 'classnames'; |
||||||
|
|
||||||
|
type Props = { |
||||||
|
src: string; |
||||||
|
srcSet?: string; |
||||||
|
blurhash?: string; |
||||||
|
className?: string; |
||||||
|
} |
||||||
|
|
||||||
|
export const Image: React.FC<Props> = ({ src, srcSet, blurhash, className }) => { |
||||||
|
const [loaded, setLoaded] = useState(false); |
||||||
|
|
||||||
|
const handleLoad = useCallback(() => { |
||||||
|
setLoaded(true); |
||||||
|
}, [setLoaded]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={classNames('image', { loaded }, className)} role='presentation'> |
||||||
|
{blurhash && <Blurhash hash={blurhash} className='image__preview' />} |
||||||
|
<img src={src} srcSet={srcSet} alt='' onLoad={handleLoad} /> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Image; |
Loading…
Reference in new issue