From 838b3cfd7f8668224c0e57b359c2b9f293668364 Mon Sep 17 00:00:00 2001
From: Joseph Hale <me@jhale.dev>
Date: Sun, 25 Jan 2026 03:12:23 -0700
Subject: [PATCH] fix: clean up `Flow` and `Squares`

The flow default in `Squares` is specific to my Binary Clock. While that default is nice there, it's not as good of a general default as "reading order", i.e. top to bottom, row by row.
---
 src/layouts/Flow.tsx    | 28 +++++++++++++++++-----------
 src/layouts/Squares.tsx | 24 ++++--------------------
 2 files changed, 21 insertions(+), 31 deletions(-)

diff --git a/src/layouts/Flow.tsx b/src/layouts/Flow.tsx
index e75ad17..bfc4655 100644
--- a/src/layouts/Flow.tsx
+++ b/src/layouts/Flow.tsx
@@ -17,34 +17,40 @@ export interface FlowProps {
 	rows: number;
 	columns: number;
 	children: React.ReactNode[];
-	flow: FlowDefinition;
+	flow?: FlowDefinition;
 }
 
-export interface FlowDirectionProps {
-	rows: number;
-	columns: number;
-	children: React.ReactNode[];
-	origin: FlowDefinition['origin'];
+const DEFAULT_FLOW: FlowDefinition = {
+	origin: 'top-left',
+	direction: 'row',
 }
 
 function Flow(props: FlowProps) {
-	if (props.flow.direction === 'column') {
+	const flow = props.flow || DEFAULT_FLOW;
+	if (flow.direction === 'column') {
 		return (
-			<ColumnFlow {...props} origin={props.flow.origin}>
+			<ColumnFlow {...props} origin={flow.origin}>
 				{props.children}
 			</ColumnFlow>
 		)
-	} else if (props.flow.direction === 'row') {
+	} else if (flow.direction === 'row') {
 		return (
-			<RowFlow {...props} origin={props.flow.origin}>
+			<RowFlow {...props} origin={flow.origin}>
 				{props.children}
 			</RowFlow>
 		)
 	} else {
-		throw new Error(`Invalid flow direction: ${props.flow.direction}`);
+		throw new Error(`Invalid flow direction: ${flow.direction}`);
 	}
 }
 
+export interface FlowDirectionProps {
+	rows: number;
+	columns: number;
+	children: React.ReactNode[];
+	origin: FlowDefinition['origin'];
+}
+
 function ColumnFlow(props: FlowDirectionProps) {
 	const { rows, columns, children, origin } = props;
 
diff --git a/src/layouts/Squares.tsx b/src/layouts/Squares.tsx
index 1c42e4c..a4cfa0b 100644
--- a/src/layouts/Squares.tsx
+++ b/src/layouts/Squares.tsx
@@ -6,25 +6,10 @@
 
 import { View } from "react-native";
 import Measured, { useMeasurements } from "./Measured";
-import Flow, { type FlowDefinition } from "./Flow";
+import Flow, { type FlowProps } from "./Flow";
 import styles from "../styles";
 
-export interface SquaresProps {
-	rows: number;
-	columns: number;
-	flow?: FlowDefinition;
-	children: Iterable<React.ReactNode>;
-}
-
-const DEFAULT_FLOW: FlowDefinition = {
-	origin: 'top-left',
-	direction: 'column',
-}
-
-/**
- * Places its children into a grid of squares.
- */
-export default function Squares(props: SquaresProps) {
+export default function Squares(props: FlowProps) {
 	return (
 		<Measured>
 			<MeasuredSquares {...props} />
@@ -32,13 +17,12 @@ export default function Squares(props: SquaresProps) {
 	)
 }
 
-function MeasuredSquares(props: SquaresProps) {
+function MeasuredSquares(props: FlowProps) {
 	const squares = useSquares(props.rows, props.columns, Array.from(props.children));
-	const flow = props.flow || DEFAULT_FLOW;
 
 	return (
 		<View style={[styles.layout.centered, styles.layout.filled]}>
-			<Flow rows={props.rows} columns={props.columns} flow={flow}>
+			<Flow {...props}>
 				{squares}
 			</Flow>
 		</View>
-- 
2.51.2