59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import { css } from "@emotion/css";
|
|
import React from "react";
|
|
|
|
interface IProperties {
|
|
src: string;
|
|
alt: string;
|
|
title: string | undefined;
|
|
srcSet: string | undefined;
|
|
sizes: string | undefined;
|
|
loading: "eager" | "lazy" | undefined;
|
|
className: string;
|
|
}
|
|
|
|
export class ImageRendererInner extends React.Component<IProperties> {
|
|
public override shouldComponentUpdate(nextProperties: IProperties): boolean {
|
|
const properties = this.props;
|
|
return (
|
|
properties.src !== nextProperties.src ||
|
|
properties.alt !== nextProperties.alt ||
|
|
properties.title !== nextProperties.title ||
|
|
properties.srcSet !== nextProperties.srcSet ||
|
|
properties.sizes !== nextProperties.sizes ||
|
|
properties.loading !== nextProperties.loading ||
|
|
properties.className !== nextProperties.className
|
|
);
|
|
}
|
|
|
|
public override render(): React.ReactElement {
|
|
const { src, alt, title, srcSet, sizes, loading, className } = this.props;
|
|
return (
|
|
<figure className={`${className} ${cls}`}>
|
|
<img alt={alt} src={src} title={title} srcSet={srcSet} sizes={sizes} loading={loading} />
|
|
{title && <figcaption>{title}</figcaption>}
|
|
</figure>
|
|
);
|
|
}
|
|
}
|
|
|
|
const cls = css({
|
|
boxSizing: "border-box",
|
|
maxWidth: "80%", // Prevent images from overflowing the container.
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
margin: 0,
|
|
"> img": {
|
|
flex: "1 0 auto",
|
|
boxSizing: "border-box",
|
|
maxWidth: "100%",
|
|
border: "1px solid var(--colorBorderImage)",
|
|
boxShadow: "0 0 20px 1px rgba(126, 125, 150, 0.6)",
|
|
},
|
|
"> figcaption": {
|
|
textAlign: "center",
|
|
fontStyle: "italic",
|
|
fontSize: "1em",
|
|
color: "var(--colorImageTitle)",
|
|
},
|
|
});
|