81 lines
1.6 KiB
TypeScript
81 lines
1.6 KiB
TypeScript
import * as React from "react";
|
|
import { ComponentProps } from "./BaseComponent";
|
|
import styled from "styled-components";
|
|
|
|
export interface StyledImageProps {
|
|
defaultImageUrl: string;
|
|
imageUrl?: string;
|
|
backgroundColor?: string;
|
|
}
|
|
|
|
export const StyledImage = styled.div<
|
|
StyledImageProps & {
|
|
imageError: boolean;
|
|
}
|
|
>`
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: "row";
|
|
background: ${props => props.backgroundColor};
|
|
background-image: url("${props =>
|
|
props.imageError ? props.defaultImageUrl : props.imageUrl}");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
height: 100%;
|
|
width: 100%;
|
|
`;
|
|
|
|
class ImageComponent extends React.Component<
|
|
ImageComponentProps,
|
|
{
|
|
imageError: boolean;
|
|
}
|
|
> {
|
|
constructor(props: ImageComponentProps) {
|
|
super(props);
|
|
this.state = {
|
|
imageError: false,
|
|
};
|
|
}
|
|
render() {
|
|
return (
|
|
<StyledImage
|
|
className={this.props.isLoading ? "bp3-skeleton" : ""}
|
|
imageError={this.state.imageError}
|
|
{...this.props}
|
|
>
|
|
<img
|
|
style={{
|
|
display: "none",
|
|
}}
|
|
alt={this.props.widgetName}
|
|
src={this.props.imageUrl}
|
|
onError={this.onImageError}
|
|
onLoad={this.onImageLoad}
|
|
></img>
|
|
</StyledImage>
|
|
);
|
|
}
|
|
|
|
onImageError = () => {
|
|
this.setState({
|
|
imageError: true,
|
|
});
|
|
};
|
|
|
|
onImageLoad = () => {
|
|
this.setState({
|
|
imageError: false,
|
|
});
|
|
};
|
|
}
|
|
|
|
export interface ImageComponentProps extends ComponentProps {
|
|
imageUrl: string;
|
|
defaultImageUrl: string;
|
|
isLoading: boolean;
|
|
}
|
|
|
|
export default ImageComponent;
|