mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-12-12 16:29:01 +05:30
72 lines
1.4 KiB
TypeScript
72 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import clsx from 'clsx';
|
|
import { ComponentLoader } from 'app/components/ui/loader';
|
|
import { SKIN_LIGHT } from 'app/components/ui';
|
|
|
|
import styles from './imageLoader.scss';
|
|
|
|
export default class ImageLoader extends React.Component<
|
|
{
|
|
src: string;
|
|
alt: string;
|
|
ratio: number; // width:height ratio
|
|
onLoad?: Function;
|
|
},
|
|
{
|
|
isLoading: boolean;
|
|
}
|
|
> {
|
|
state = {
|
|
isLoading: true,
|
|
};
|
|
|
|
componentDidMount() {
|
|
this.preloadImage();
|
|
}
|
|
|
|
preloadImage() {
|
|
const img = new Image();
|
|
img.onload = () => this.imageLoaded();
|
|
img.onerror = () => this.preloadImage();
|
|
img.src = this.props.src;
|
|
}
|
|
|
|
imageLoaded() {
|
|
this.setState({ isLoading: false });
|
|
|
|
if (this.props.onLoad) {
|
|
this.props.onLoad();
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { isLoading } = this.state;
|
|
const { src, alt, ratio } = this.props;
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<div
|
|
style={{
|
|
height: 0,
|
|
paddingBottom: `${ratio * 100}%`,
|
|
}}
|
|
/>
|
|
|
|
{isLoading && (
|
|
<div className={styles.loader}>
|
|
<ComponentLoader skin={SKIN_LIGHT} />
|
|
</div>
|
|
)}
|
|
|
|
<div
|
|
className={clsx(styles.image, {
|
|
[styles.imageLoaded]: !isLoading,
|
|
})}
|
|
>
|
|
<img src={src} alt={alt} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|