This commit is contained in:
2018-12-28 15:18:48 -07:00
parent b3820ca43b
commit 53fa2be4fa
6 changed files with 219 additions and 196 deletions

View File

@@ -3,39 +3,42 @@ import * as Model from "../model";
import * as React from "react";
export interface Props {
image: Model.Image;
onClick: () => void;
width: number;
image: Model.Image;
onClick: () => void;
width: number;
}
export class Picture extends React.PureComponent<Props, {}> {
static displayName = "Picture";
static displayName = "Picture";
render() {
const src = `img/600/${this.props.image.src}`;
return <img
onClick={this.props.onClick}
srcSet={this._srcset()}
src={src}
width={ this.props.width + "px" }
/>;
}
render() {
const src = `img/600/${this.props.image.src}`;
return (
<img
onClick={this.props.onClick}
srcSet={this._srcset()}
src={src}
width={this.props.width + "px"}
/>
);
}
private _srcset = (): string => {
const srcs: string[] = [];
private _srcset = (): string => {
const srcs: string[] = [];
Model.SIZES.forEach(size => {
const width = this.props.image.width > this.props.image.height
? size
: this.props.image.width / this.props.image.height * size;
Model.SIZES.forEach(size => {
const width =
this.props.image.width > this.props.image.height
? size
: (this.props.image.width / this.props.image.height) * size;
const scale = width / this.props.width;
const scale = width / this.props.width;
if (scale >= 1) {
srcs.push(`img/${size}/${this.props.image.src} ${scale}x`);
}
});
if (scale >= 1) {
srcs.push(`img/${size}/${this.props.image.src} ${scale}x`);
}
});
return srcs.join(",");
}
return srcs.join(",");
};
}