diff --git a/app/javascript/mastodon/components/image.jsx b/app/javascript/mastodon/components/image.jsx deleted file mode 100644 index 6e81ddf082c..00000000000 --- a/app/javascript/mastodon/components/image.jsx +++ /dev/null @@ -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 ( -
- {blurhash && } - -
- ); - } - -} diff --git a/app/javascript/mastodon/components/image.tsx b/app/javascript/mastodon/components/image.tsx new file mode 100644 index 00000000000..9b4d6022555 --- /dev/null +++ b/app/javascript/mastodon/components/image.tsx @@ -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 = ({ src, srcSet, blurhash, className }) => { + const [loaded, setLoaded] = useState(false); + + const handleLoad = useCallback(() => { + setLoaded(true); + }, [setLoaded]); + + return ( +
+ {blurhash && } + +
+ ); +}; + +export default Image;