mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

ImageLoader: convert to TSX

environments/review-media-moda-e1w8yz/deployments/1128
Alex Gleason 2022-10-12 16:23:16 -05:00
rodzic f42e8520b5
commit 5885c454af
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
1 zmienionych plików z 27 dodań i 21 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

48
app/soapbox/features/ui/components/image_loader.js → app/soapbox/features/ui/components/image_loader.tsx
Wyświetl plik

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