Add CrossAxisAlignment property to LazyList (#1277)

cashapp · Jun 28, 2023 · 3248ab3 · 3248ab3
1 parent f7ea8b7
commit 3248ab3
Show file tree

Hide file tree

Showing 34 changed files with 142 additions and 62 deletions.
diff --git a/...d-lazylayout-compose/src/commonMain/kotlin/app/cash/redwood/lazylayout/compose/LazyDsl.kt b/...d-lazylayout-compose/src/commonMain/kotlin/app/cash/redwood/lazylayout/compose/LazyDsl.kt
@@ -19,6 +19,7 @@ import androidx.compose.runtime.Composable
 import app.cash.redwood.LayoutScopeMarker
 import app.cash.redwood.Modifier
 import app.cash.redwood.layout.api.Constraint
+import app.cash.redwood.layout.api.CrossAxisAlignment
 import app.cash.redwood.ui.Margin
 
 @LayoutScopeMarker
@@ -75,6 +76,7 @@ public fun LazyRow(
   width: Constraint = Constraint.Wrap,
   height: Constraint = Constraint.Wrap,
   margin: Margin = Margin.Zero,
+  verticalAlignment: CrossAxisAlignment = CrossAxisAlignment.Start,
   modifier: Modifier = Modifier,
   placeholder: @Composable () -> Unit,
   content: LazyListScope.() -> Unit,
@@ -84,6 +86,7 @@ public fun LazyRow(
     width = width,
     height = height,
     margin = margin,
+    crossAxisAlignment = verticalAlignment,
     modifier = modifier,
     placeholder = placeholder,
     content = content,
@@ -98,6 +101,7 @@ public fun LazyRow(
   width: Constraint = Constraint.Wrap,
   height: Constraint = Constraint.Wrap,
   margin: Margin = Margin.Zero,
+  verticalAlignment: CrossAxisAlignment = CrossAxisAlignment.Start,
   modifier: Modifier = Modifier,
   placeholder: @Composable () -> Unit,
   content: LazyListScope.() -> Unit,
@@ -109,6 +113,7 @@ public fun LazyRow(
     width = width,
     height = height,
     margin = margin,
+    crossAxisAlignment = verticalAlignment,
     modifier = modifier,
     placeholder = placeholder,
     content = content,
@@ -120,6 +125,7 @@ public fun LazyColumn(
   width: Constraint = Constraint.Wrap,
   height: Constraint = Constraint.Wrap,
   margin: Margin = Margin.Zero,
+  horizontalAlignment: CrossAxisAlignment = CrossAxisAlignment.Start,
   modifier: Modifier = Modifier,
   placeholder: @Composable () -> Unit,
   content: LazyListScope.() -> Unit,
@@ -129,6 +135,7 @@ public fun LazyColumn(
     width = width,
     height = height,
     margin = margin,
+    crossAxisAlignment = horizontalAlignment,
     modifier = modifier,
     placeholder = placeholder,
     content = content,
@@ -143,6 +150,7 @@ public fun LazyColumn(
   width: Constraint = Constraint.Wrap,
   height: Constraint = Constraint.Wrap,
   margin: Margin = Margin.Zero,
+  horizontalAlignment: CrossAxisAlignment = CrossAxisAlignment.Start,
   modifier: Modifier = Modifier,
   placeholder: @Composable () -> Unit,
   content: LazyListScope.() -> Unit,
@@ -154,6 +162,7 @@ public fun LazyColumn(
     width = width,
     height = height,
     margin = margin,
+    crossAxisAlignment = horizontalAlignment,
     modifier = modifier,
     placeholder = placeholder,
     content = content,

diff --git a/...-lazylayout-compose/src/commonMain/kotlin/app/cash/redwood/lazylayout/compose/LazyList.kt b/...-lazylayout-compose/src/commonMain/kotlin/app/cash/redwood/lazylayout/compose/LazyList.kt
@@ -25,6 +25,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import app.cash.redwood.Modifier
 import app.cash.redwood.layout.api.Constraint
+import app.cash.redwood.layout.api.CrossAxisAlignment
 import app.cash.redwood.ui.Margin
 import kotlin.jvm.JvmName
 
@@ -36,6 +37,7 @@ internal fun LazyList(
   width: Constraint,
   height: Constraint,
   margin: Margin,
+  crossAxisAlignment: CrossAxisAlignment,
   modifier: Modifier,
   placeholder: @Composable () -> Unit,
   content: LazyListScope.() -> Unit,
@@ -63,6 +65,7 @@ internal fun LazyList(
     width = width,
     height = height,
     margin = margin,
+    crossAxisAlignment = crossAxisAlignment,
     modifier = modifier,
     placeholder = { repeat(placeholderPoolSize) { placeholder() } },
     items = {
@@ -83,6 +86,7 @@ internal fun RefreshableLazyList(
   width: Constraint,
   height: Constraint,
   margin: Margin,
+  crossAxisAlignment: CrossAxisAlignment,
   modifier: Modifier,
   placeholder: @Composable () -> Unit,
   content: LazyListScope.() -> Unit,
@@ -112,6 +116,7 @@ internal fun RefreshableLazyList(
     width = width,
     height = height,
     margin = margin,
+    crossAxisAlignment = crossAxisAlignment,
     modifier = modifier,
     placeholder = { repeat(placeholderPoolSize) { placeholder() } },
     items = {

diff --git a/...eui/src/androidUnitTest/kotlin/app/cash/redwood/layout/composeui/ComposeUiLazyListTest.kt b/...eui/src/androidUnitTest/kotlin/app/cash/redwood/layout/composeui/ComposeUiLazyListTest.kt
@@ -28,6 +28,7 @@ import app.cash.redwood.Modifier as RedwoodModifier
 import app.cash.redwood.layout.AbstractFlexContainerTest
 import app.cash.redwood.layout.TestFlexContainer
 import app.cash.redwood.layout.api.Constraint
+import app.cash.redwood.layout.api.CrossAxisAlignment
 import app.cash.redwood.lazylayout.composeui.ComposeUiLazyList
 import app.cash.redwood.ui.Margin
 import app.cash.redwood.widget.Widget
@@ -88,6 +89,14 @@ class ComposeUiLazyListTest(
     }
 
     override fun alignItems(alignItems: AlignItems) {
+      val crossAxisAlignment = when (alignItems) {
+        AlignItems.FlexStart -> CrossAxisAlignment.Start
+        AlignItems.Center -> CrossAxisAlignment.Center
+        AlignItems.FlexEnd -> CrossAxisAlignment.End
+        AlignItems.Stretch -> CrossAxisAlignment.Stretch
+        else -> throw AssertionError()
+      }
+      delegate.crossAxisAlignment(crossAxisAlignment)
     }
 
     override fun justifyContent(justifyContent: JustifyContent) {

diff --git a/...omposeui/src/commonMain/kotlin/app/cash/redwood/lazylayout/composeui/ComposeUiLazyList.kt b/...omposeui/src/commonMain/kotlin/app/cash/redwood/lazylayout/composeui/ComposeUiLazyList.kt
@@ -40,6 +40,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import app.cash.redwood.Modifier as RedwoodModifier
 import app.cash.redwood.layout.api.Constraint
+import app.cash.redwood.layout.api.CrossAxisAlignment
 import app.cash.redwood.lazylayout.widget.LazyList
 import app.cash.redwood.lazylayout.widget.RefreshableLazyList
 import app.cash.redwood.ui.Margin
@@ -59,6 +60,7 @@ internal class ComposeUiLazyList :
   private var width by mutableStateOf(Constraint.Wrap)
   private var height by mutableStateOf(Constraint.Wrap)
   private var margin by mutableStateOf(Margin.Zero)
+  private var crossAxisAlignment by mutableStateOf(CrossAxisAlignment.Start)
 
   override var modifier: RedwoodModifier = RedwoodModifier
 
@@ -102,9 +104,14 @@ internal class ComposeUiLazyList :
     this.margin = margin
   }
 
+  override fun crossAxisAlignment(crossAxisAlignment: CrossAxisAlignment) {
+    this.crossAxisAlignment = crossAxisAlignment
+  }
+
   override val value = @Composable {
     val content: LazyListScope.() -> Unit = {
       items(items.widgets) { item ->
+        // TODO If CrossAxisAlignment is Stretch, pass Modifier.fillParentMaxWidth() to child widget.
         item.value.invoke()
       }
     }
@@ -148,15 +155,30 @@ internal class ComposeUiLazyList :
         )
         .pullRefresh(state = refreshState, enabled = onRefresh != null)
       if (isVertical) {
+        val horizontalAlignment = when (crossAxisAlignment) {
+          CrossAxisAlignment.Start -> Alignment.Start
+          CrossAxisAlignment.Center -> Alignment.CenterHorizontally
+          CrossAxisAlignment.End -> Alignment.End
+          CrossAxisAlignment.Stretch -> Alignment.Start
+          else -> throw AssertionError()
+        }
         LazyColumn(
           modifier = modifier,
           state = state,
+          horizontalAlignment = horizontalAlignment,
           content = content,
         )
       } else {
         LazyRow(
           modifier = modifier,
           state = state,
+          verticalAlignment = when (crossAxisAlignment) {
+            CrossAxisAlignment.Start -> Alignment.Top
+            CrossAxisAlignment.Center -> Alignment.CenterVertically
+            CrossAxisAlignment.End -> Alignment.Bottom
+            CrossAxisAlignment.Stretch -> Alignment.Top
+            else -> throw AssertionError()
+          },
           content = content,
         )
       }

diff --git a/...out.composeui_ComposeUiLazyListTest_columnWithUpdatedAlignItems[LTR]_center.png b/...out.composeui_ComposeUiLazyListTest_columnWithUpdatedAlignItems[LTR]_center.png
diff --git a/...ut.composeui_ComposeUiLazyListTest_columnWithUpdatedAlignItems[LTR]_flexend.png b/...ut.composeui_ComposeUiLazyListTest_columnWithUpdatedAlignItems[LTR]_flexend.png
diff --git a/...out.composeui_ComposeUiLazyListTest_columnWithUpdatedAlignItems[RTL]_center.png b/...out.composeui_ComposeUiLazyListTest_columnWithUpdatedAlignItems[RTL]_center.png
diff --git a/...ut.composeui_ComposeUiLazyListTest_columnWithUpdatedAlignItems[RTL]_flexend.png b/...ut.composeui_ComposeUiLazyListTest_columnWithUpdatedAlignItems[RTL]_flexend.png
diff --git a/...out.composeui_ComposeUiLazyListTest_layoutWithAlignItems[LTR,Column,Center].png b/...out.composeui_ComposeUiLazyListTest_layoutWithAlignItems[LTR,Column,Center].png
diff --git a/...ut.composeui_ComposeUiLazyListTest_layoutWithAlignItems[LTR,Column,FlexEnd].png b/...ut.composeui_ComposeUiLazyListTest_layoutWithAlignItems[LTR,Column,FlexEnd].png
diff --git a/...layout.composeui_ComposeUiLazyListTest_layoutWithAlignItems[LTR,Row,Center].png b/...layout.composeui_ComposeUiLazyListTest_layoutWithAlignItems[LTR,Row,Center].png
diff --git a/...ayout.composeui_ComposeUiLazyListTest_layoutWithAlignItems[LTR,Row,FlexEnd].png b/...ayout.composeui_ComposeUiLazyListTest_layoutWithAlignItems[LTR,Row,FlexEnd].png
diff --git a/...out.composeui_ComposeUiLazyListTest_layoutWithAlignItems[RTL,Column,Center].png b/...out.composeui_ComposeUiLazyListTest_layoutWithAlignItems[RTL,Column,Center].png
diff --git a/...ut.composeui_ComposeUiLazyListTest_layoutWithAlignItems[RTL,Column,FlexEnd].png b/...ut.composeui_ComposeUiLazyListTest_layoutWithAlignItems[RTL,Column,FlexEnd].png
diff --git a/...layout.composeui_ComposeUiLazyListTest_layoutWithAlignItems[RTL,Row,Center].png b/...layout.composeui_ComposeUiLazyListTest_layoutWithAlignItems[RTL,Row,Center].png
diff --git a/...ayout.composeui_ComposeUiLazyListTest_layoutWithAlignItems[RTL,Row,FlexEnd].png b/...ayout.composeui_ComposeUiLazyListTest_layoutWithAlignItems[RTL,Row,FlexEnd].png
diff --git a/redwood-lazylayout-schema/src/main/kotlin/app/cash/redwood/lazylayout/widgets.kt b/redwood-lazylayout-schema/src/main/kotlin/app/cash/redwood/lazylayout/widgets.kt
@@ -16,6 +16,7 @@
 package app.cash.redwood.lazylayout
 
 import app.cash.redwood.layout.api.Constraint
+import app.cash.redwood.layout.api.CrossAxisAlignment
 import app.cash.redwood.schema.Children
 import app.cash.redwood.schema.Property
 import app.cash.redwood.schema.Widget
@@ -30,6 +31,7 @@ public data class LazyList(
   @Property(5) val width: Constraint,
   @Property(6) val height: Constraint,
   @Property(7) val margin: Margin,
+  @Property(8) val crossAxisAlignment: CrossAxisAlignment,
   @Children(1) val placeholder: () -> Unit,
   @Children(2) val items: () -> Unit,
 )
@@ -45,6 +47,7 @@ public data class RefreshableLazyList(
   @Property(7) val width: Constraint,
   @Property(8) val height: Constraint,
   @Property(9) val margin: Margin,
+  @Property(10) val crossAxisAlignment: CrossAxisAlignment,
   @Children(1) val placeholder: () -> Unit,
   @Children(2) val items: () -> Unit,
 )
diff --git a/...ylayout-uiview/src/commonMain/kotlin/app/cash/redwood/lazylayout/uiview/UIViewLazyList.kt b/...ylayout-uiview/src/commonMain/kotlin/app/cash/redwood/lazylayout/uiview/UIViewLazyList.kt
@@ -23,6 +23,7 @@ package app.cash.redwood.lazylayout.uiview
 
 import app.cash.redwood.Modifier
 import app.cash.redwood.layout.api.Constraint
+import app.cash.redwood.layout.api.CrossAxisAlignment
 import app.cash.redwood.lazylayout.widget.LazyList
 import app.cash.redwood.lazylayout.widget.RefreshableLazyList
 import app.cash.redwood.ui.Margin
@@ -237,6 +238,10 @@ internal open class UIViewLazyList() : LazyList<UIView>, ChangeListener {
     collectionView.contentInset = UIEdgeInsetsMake(margin.top.value, margin.start.value, margin.end.value, margin.bottom.value)
   }
 
+  override fun crossAxisAlignment(crossAxisAlignment: CrossAxisAlignment) {
+    // TODO Support CrossAxisAlignment in `redwood-lazylayout-uiview`
+  }
+
   override var modifier: Modifier = Modifier
 
   override val value: UIView get() = collectionView