45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import * as Model from "../model";
|
|
|
|
import * as React from "react";
|
|
|
|
export interface Props {
|
|
src: string;
|
|
image: Model.Image;
|
|
onClick: () => void;
|
|
selected?: boolean;
|
|
width: number;
|
|
}
|
|
|
|
export class Picture extends React.PureComponent<Props, {}> {
|
|
static displayName = "Picture";
|
|
|
|
render() {
|
|
const src = `img/600/${this.props.src}`;
|
|
return <img
|
|
className={ this.props.selected ? "Picture-selected" : ""}
|
|
onClick={this.props.onClick}
|
|
srcSet={this._srcset()}
|
|
src={src}
|
|
width={ this.props.selected ? "100%" : this.props.width + "px" }
|
|
/>;
|
|
}
|
|
|
|
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;
|
|
|
|
const scale = width / this.props.width;
|
|
|
|
if (scale >= 1) {
|
|
srcs.push(`img/${size}/${this.props.src} ${scale}x`);
|
|
}
|
|
});
|
|
|
|
return srcs.join(",");
|
|
}
|
|
}
|