From 8c557b1715732729934eeb4850522d90744078f9 Mon Sep 17 00:00:00 2001
From: Jon Surrell <jon.surrell@automattic.com>
Date: Wed, 19 Dec 2018 13:38:00 +0100
Subject: [PATCH] Mosaic work

---
 .../extensions/tiled-gallery/layout/index.js  |  8 +++--
 .../extensions/tiled-gallery/layout/mosaic.js | 32 +++++++++++--------
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/client/gutenberg/extensions/tiled-gallery/layout/index.js b/client/gutenberg/extensions/tiled-gallery/layout/index.js
index d0a3bb0e1970b..ecd0b24bbaa95 100644
--- a/client/gutenberg/extensions/tiled-gallery/layout/index.js
+++ b/client/gutenberg/extensions/tiled-gallery/layout/index.js
@@ -65,7 +65,7 @@ export default class Layout extends Component {
 	}
 
 	render() {
-		const { children, className, layoutStyle } = this.props;
+		const { children, className, layoutStyle, images } = this.props;
 
 		// eslint-disable-next-line no-nested-ternary
 		const LayoutRenderer = isSquareishLayout( layoutStyle )
@@ -78,7 +78,11 @@ export default class Layout extends Component {
 
 		return (
 			<div className={ className }>
-				<LayoutRenderer columns={ this.props.columns } renderedImages={ renderedImages } />
+				<LayoutRenderer
+					columns={ this.props.columns }
+					images={ images }
+					renderedImages={ renderedImages }
+				/>
 				{ children }
 			</div>
 		);
diff --git a/client/gutenberg/extensions/tiled-gallery/layout/mosaic.js b/client/gutenberg/extensions/tiled-gallery/layout/mosaic.js
index 86a34cc0ba249..b4c16b7f6b889 100644
--- a/client/gutenberg/extensions/tiled-gallery/layout/mosaic.js
+++ b/client/gutenberg/extensions/tiled-gallery/layout/mosaic.js
@@ -1,28 +1,34 @@
 /**
  * External dependencies
  */
-import { chunk, drop, take } from 'lodash';
+import { repeat } from 'lodash';
 
 /**
  * Internal dependencies
  */
 import Row from './row';
 import Column from './column';
-import { MAX_COLUMNS } from '../constants';
 
-export default function Mosaic( { columns, renderedImages } ) {
-	const columnCount = Math.min( MAX_COLUMNS, columns );
+export default function Mosaic( { images, renderedImages } ) {
+	const ratios = images.map( ( { height, width } ) => ( height && width ? width / height : 1 ) );
+	const rows = ratiosToShapes( ratios );
 
-	const remainder = renderedImages.length % columnCount;
+	let cursor = 0;
 
-	return [
-		...( remainder ? [ take( renderedImages, remainder ) ] : [] ),
-		...chunk( drop( renderedImages, remainder ), columnCount ),
-	].map( ( imagesInRow, rowIndex ) => (
-		<Row key={ rowIndex } className={ `columns-${ imagesInRow.length }` }>
-			{ imagesInRow.map( ( image, colIndex ) => (
-				<Column key={ colIndex }>{ image }</Column>
-			) ) }
+	return rows.map( ( columns, rowIndex ) => (
+		<Row key={ rowIndex }>
+			{ columns.map( ( imageCount, colIndex ) => {
+				const column = renderedImages
+					.slice( cursor, imageCount )
+					.map( image => <Column key={ colIndex }>{ image }</Column> );
+				cursor += imageCount;
+
+				return column;
+			} ) }
 		</Row>
 	) );
 }
+
+function ratiosToShapes( ratios ) {
+	return [ repeat( 1, ratios.length ) ];
+}