Tiles - fix spacing (fence-post issue)

packages/block-library/src/gallery/tiles.native.js

@@ -6,83 +6,52 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Children, useEffect, useLayoutEffect, useState } from '@wordpress/element';
+import { Children } from '@wordpress/element';
 
 const containerStyle = {
-	// flex: 1,
 	flexDirection: 'row',
 	flexWrap: 'wrap',
 };
 
-function Tiles( props ) {
-	// const [ columns, setColumns ] = useState();
+const tileStyle = {
+	overflow: 'hidden',
+	flexDirection: 'row',
+	alignItems: 'center',
+	borderColor: 'transparent',
+};
 
+function Tiles( props ) {
 	const {
-		// columns: newColumns,
 		columns,
 		children,
 		groutSpacing = 10,
 	} = props;
 
-	// useEffect(() => {
-	// 	// if ( columns !== newColumns ) {
-	// 		setTimeout(() => {
-	// 			setColumns(newColumns);
-	// 		}, 1);
-	// 	// }
-	// });
-
-	// useLayoutEffect(() => {
-	// 	// setTimeout(() => {
-	// 		setColumns(newColumns);
-	// 	// }, 1);
-	// });
-
-	const tileBorderWidth = groutSpacing / 2;
 	const tileCount = Children.count( children );
-	const lastRow = Math.floor( ( tileCount - 1 ) / columns );
+	const lastTile = tileCount - 1;
+	const lastRow = Math.floor( lastTile / columns );
 
-	const wrappedChilren = Children.map( children, ( child, index ) => {
+	const wrappedChildren = Children.map( children, ( child, index ) => {
 		const row = Math.floor( index / columns );
-		const isLastItem = ( index + 1 ) === tileCount;
-
-		const isInFirstRow = row === 0;
-		const isInLastRow = row === lastRow;
-
-		const isFirstInRow = index % columns === 0;
-		const isLastInRow = ( index + 1 ) % columns === 0 || isLastItem;
-
-		const tileStyle = {
-			flex: 1,
-			flexBasis: ( ( 1 / columns ) * 100 ) + '%',
-			overflow: 'hidden',
-			flexDirection: 'row',
-			alignItems: 'center',
-			borderColor: 'transparent',
-			borderLeftWidth: isFirstInRow ? 0 : tileBorderWidth,
-			borderRightWidth: isLastInRow ? 0 : tileBorderWidth,
-			borderTopWidth: isInFirstRow ? 0 : tileBorderWidth,
-			borderBottomWidth: isInLastRow ? 0 : tileBorderWidth,
-		};
+		const rowLength = row === lastRow ? lastTile % columns + 1: columns;
+		const indexInRow = index % columns;
 
 		return (
-			<View style={ tileStyle }
-				onLayout={ (e) => {
-					console.log(`Tile ${index} width: ${e.nativeEvent.layout.width}`)
-				} }
-			>
+			<View style={ [ tileStyle, {
+				flexBasis: ( ( 1 / rowLength ) * 100 ) + '%',
+				borderLeftWidth: groutSpacing * ( indexInRow / rowLength ),
+				borderRightWidth: groutSpacing * ( 1 - ( indexInRow + 1 ) / rowLength ),
+				borderTopWidth: row === 0 ? 0 : groutSpacing / 2,
+				borderBottomWidth: row === lastRow ? 0 : groutSpacing / 2,
+			} ]}>
 				{ child }
 			</View>
 		);
-	}	)
+	} );
 
 	return (
-		<View style={ containerStyle }
-		 onLayout={ (e) => {
-			 console.log(`Tiles width: ${e.nativeEvent.layout.width}`)
-			} }
-		 >
-			{ wrappedChilren }
+		<View style={ containerStyle }>
+			{ wrappedChildren }
 		</View>
 	);
 }