diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/square.js')
-rw-r--r-- | plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/square.js | 33 |
1 files changed, 33 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/square.js b/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/square.js new file mode 100644 index 00000000..2a1ab888 --- /dev/null +++ b/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/square.js @@ -0,0 +1,33 @@ +/** + * External dependencies + */ +import { chunk, drop, take } from 'lodash'; + +/** + * Internal dependencies + */ +import Row from './row'; +import Column from './column'; +import Gallery from './gallery'; +import { MAX_COLUMNS } from '../constants'; + +export default function Square( { columns, renderedImages } ) { + const columnCount = Math.min( MAX_COLUMNS, columns ); + + const remainder = renderedImages.length % columnCount; + + return ( + <Gallery> + { [ + ...( 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> + ) ) } + </Row> + ) ) } + </Gallery> + ); +} |