39 lines
987 B
TypeScript
39 lines
987 B
TypeScript
import * as React from "react";
|
|
import { ComponentProps } from "./BaseComponent";
|
|
import { StyledContainer, StyledContainerProps } from "./StyledContainer";
|
|
import styled from "styled-components";
|
|
|
|
export interface StyledImageProps extends StyledContainerProps {
|
|
defaultImageUrl: string;
|
|
}
|
|
|
|
export const StyledImage = styled(StyledContainer)<StyledImageProps>`
|
|
background-image: url("${props => {
|
|
return props.imageUrl || props.defaultImageUrl;
|
|
}}");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
`;
|
|
|
|
class ImageComponent extends React.Component<ImageComponentProps> {
|
|
render() {
|
|
return (
|
|
<StyledImage
|
|
className={this.props.isLoading ? "bp3-skeleton" : ""}
|
|
{...this.props}
|
|
>
|
|
{}
|
|
</StyledImage>
|
|
);
|
|
}
|
|
}
|
|
|
|
export interface ImageComponentProps extends ComponentProps {
|
|
imageUrl: string;
|
|
defaultImageUrl: string;
|
|
isLoading: boolean;
|
|
}
|
|
|
|
export default ImageComponent;
|