Support multiple image sets

src/components/grid.tsx

@@ -4,59 +4,66 @@ import * as Model from "../model";
 import * as React from "react";
 
 export interface Props {
-    images: Model.Images;
-    onImageSelected: (key: string) => void;
+    images: Model.Image[];
+    onImageSelected: (image: Model.Image) => void;
     width: number;
 }
 
 export const ROW_HEIGHT = 200;
 export const MOBILE_ROW_HEIGHT = 100;
 
+interface Row {
+    images: Model.Image[];
+    width: number;
+}
+
 export class Grid extends React.PureComponent<Props, {}> {
     static displayName = "Grid";
 
     render() {
-        const keys = Object.keys(this.props.images);
-
-        let row: string[] = [];
-        const rows: string[][] = [];
-        const rowWidths: number[] = [];
+        let row: Model.Image[] = [];
+        const rows: Row[] = [];
         let rowWidth = 0;
 
-        keys.forEach(key => {
-            const image = this.props.images[key];
-
+        this.props.images.forEach(image => {
             const newWidth = rowWidth + (image.width/image.height);
             const height = this.props.width / newWidth;
 
             if (height < this._rowHeight()) {
-                rows.push(row);
-                rowWidths.push(rowWidth);
+                rows.push({
+                    images: row,
+                    width: rowWidth
+                });
 
                 row = [];
                 rowWidth = (image.width/image.height);
             } else {
                 rowWidth = newWidth;
             }
-            row.push(key);
+            row.push(image);
+        });
+        rows.push({
+            images: row,
+            width: rowWidth
         });
-        rows.push(row);
-        rowWidths.push(rowWidth);
 
-        const images = rows.map((row, idx) => {
-            const scale = this.props.width / rowWidths[idx];
+        const images = rows.map(row => {
+            const height = this.props.width / row.width;
 
-            const pics = row.map(key => {
-                const image = this.props.images[key];
+            const pics = row.images.map(image => {
                 return <Picture
                     image={image}
-                    onClick={() => this.props.onImageSelected(key)}
-                    src={key}
-                    key={key}
-                    width={image.width/image.height * scale}
+                    onClick={() => this.props.onImageSelected(image)}
+                    key={image.src}
+                    width={image.width/image.height * height}
                 />
             });
-            return <div className="Grid-row" style={{height: scale + "px"}} key={row.join(",")}>{pics}</div>;
+            return <div
+                className="Grid-row"
+                style={{height: height + "px"}}
+                key={row.images.map(image => image.src).join(",")}>
+                {pics}
+            </div>;
         });
 
         return <div className="Grid">{images}</div>;