moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ImageLoader: convert to TSX

This commit is contained in:
Alex Gleason 2022-10-12 16:23:16 -05:00
parent f42e8520b5
commit 5885c454af
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
1 changed files with 27 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
app/soapbox/features/ui/components/image_loader.js → app/soapbox/features/ui/components/image_loader.tsx
View File

@ -1,19 +1,20 @@
import classNames from 'clsx';
import PropTypes from 'prop-types';
import React from 'react';
import ZoomableImage from './zoomable-image';
export default class ImageLoader extends React.PureComponent {
type EventRemover = () => void;
static propTypes = {
alt: PropTypes.string,
src: PropTypes.string.isRequired,
previewSrc: PropTypes.string,
width: PropTypes.number,
height: PropTypes.number,
onClick: PropTypes.func,
}
interface IImageLoader {
alt?: string,
src: string,
previewSrc?: string,
width?: number,
height?: number,
onClick?: React.MouseEventHandler,
}
class ImageLoader extends React.PureComponent<IImageLoader> {
static defaultProps = {
alt: '',
@ -27,8 +28,9 @@ export default class ImageLoader extends React.PureComponent {
width: null,
}
removers = [];
canvas = null;
removers: EventRemover[] = [];
canvas: HTMLCanvasElement | null = null;
_canvasContext: CanvasRenderingContext2D | null = null;
get canvasContext() {
if (!this.canvas) {
@ -42,7 +44,7 @@ export default class ImageLoader extends React.PureComponent {
this.loadImage(this.props);
}
componentDidUpdate(prevProps) {
componentDidUpdate(prevProps: IImageLoader) {
if (prevProps.src !== this.props.src) {
this.loadImage(this.props);
}
@ -52,7 +54,7 @@ export default class ImageLoader extends React.PureComponent {
this.removeEventListeners();
}
loadImage(props) {
loadImage(props: IImageLoader) {
this.removeEventListeners();
this.setState({ loading: true, error: false });
Promise.all([
@ -66,7 +68,7 @@ export default class ImageLoader extends React.PureComponent {
.catch(() => this.setState({ loading: false, error: true }));
}
loadPreviewCanvas = ({ previewSrc, width, height }) => new Promise((resolve, reject) => {
loadPreviewCanvas = ({ previewSrc, width, height }: IImageLoader) => new Promise<void>((resolve, reject) => {
const image = new Image();
const removeEventListeners = () => {
image.removeEventListener('error', handleError);
@ -78,21 +80,23 @@ export default class ImageLoader extends React.PureComponent {
};
const handleLoad = () => {
removeEventListeners();
this.canvasContext.drawImage(image, 0, 0, width, height);
this.canvasContext?.drawImage(image, 0, 0, width || 0, height || 0);
resolve();
};
image.addEventListener('error', handleError);
image.addEventListener('load', handleLoad);
image.src = previewSrc;
image.src = previewSrc || '';
this.removers.push(removeEventListeners);
})
clearPreviewCanvas() {
const { width, height } = this.canvas;
this.canvasContext.clearRect(0, 0, width, height);
if (this.canvas && this.canvasContext) {
const { width, height } = this.canvas;
this.canvasContext.clearRect(0, 0, width, height);
}
}
loadOriginalImage = ({ src }) => new Promise((resolve, reject) => {
loadOriginalImage = ({ src }: IImageLoader) => new Promise<void>((resolve, reject) => {
const image = new Image();
const removeEventListeners = () => {
image.removeEventListener('error', handleError);
@ -122,7 +126,7 @@ export default class ImageLoader extends React.PureComponent {
return typeof width === 'number' && typeof height === 'number';
}
setCanvasRef = c => {
setCanvasRef = (c: HTMLCanvasElement) => {
this.canvas = c;
if (c) this.setState({ width: c.offsetWidth });
}
@ -157,3 +161,5 @@ export default class ImageLoader extends React.PureComponent {
}
}
export default ImageLoader;