From 22c85e33c628e566eb2934dd7b55a7b4717c647d Mon Sep 17 00:00:00 2001 From: Steven Tang Date: Wed, 27 Sep 2023 13:32:36 -0700 Subject: [PATCH] Add Box widget schema for redwood layout --- .../ComposeUiRedwoodLayoutWidgetFactory.kt | 5 ++ .../HTMLElementRedwoodLayoutWidgetFactory.kt | 5 ++ redwood-layout-schema/redwood-api.xml | 12 +++ .../app/cash/redwood/layout/modifiers.kt | 12 +-- .../kotlin/app/cash/redwood/layout/schema.kt | 16 ++-- .../kotlin/app/cash/redwood/layout/widgets.kt | 74 +++++++++++++++++++ .../UIViewRedwoodLayoutWidgetFactory.kt | 4 + .../view/ViewRedwoodLayoutWidgetFactory.kt | 5 ++ .../widget/EmptyRedwoodLayoutWidgetFactory.kt | 2 + 9 files changed, 124 insertions(+), 11 deletions(-) diff --git a/redwood-layout-composeui/src/commonMain/kotlin/app/cash/redwood/layout/composeui/ComposeUiRedwoodLayoutWidgetFactory.kt b/redwood-layout-composeui/src/commonMain/kotlin/app/cash/redwood/layout/composeui/ComposeUiRedwoodLayoutWidgetFactory.kt index 8c30015d31..88677ec399 100644 --- a/redwood-layout-composeui/src/commonMain/kotlin/app/cash/redwood/layout/composeui/ComposeUiRedwoodLayoutWidgetFactory.kt +++ b/redwood-layout-composeui/src/commonMain/kotlin/app/cash/redwood/layout/composeui/ComposeUiRedwoodLayoutWidgetFactory.kt @@ -16,6 +16,7 @@ package app.cash.redwood.layout.composeui import androidx.compose.runtime.Composable +import app.cash.redwood.layout.widget.Box import app.cash.redwood.layout.widget.Column import app.cash.redwood.layout.widget.RedwoodLayoutWidgetFactory import app.cash.redwood.layout.widget.Row @@ -23,6 +24,10 @@ import app.cash.redwood.layout.widget.Spacer import app.cash.redwood.yoga.FlexDirection public class ComposeUiRedwoodLayoutWidgetFactory : RedwoodLayoutWidgetFactory<@Composable () -> Unit> { + override fun Box(): Box<() -> Unit> { + TODO("Not yet implemented") + } + override fun Column(): Column<@Composable () -> Unit> = ComposeUiFlexContainer(FlexDirection.Column) override fun Row(): Row<@Composable () -> Unit> = ComposeUiFlexContainer(FlexDirection.Row) override fun Spacer(): Spacer<@Composable () -> Unit> = ComposeUiSpacer() diff --git a/redwood-layout-dom/src/commonMain/kotlin/app/cash/redwood/layout/dom/HTMLElementRedwoodLayoutWidgetFactory.kt b/redwood-layout-dom/src/commonMain/kotlin/app/cash/redwood/layout/dom/HTMLElementRedwoodLayoutWidgetFactory.kt index a284f93ca4..8316599473 100644 --- a/redwood-layout-dom/src/commonMain/kotlin/app/cash/redwood/layout/dom/HTMLElementRedwoodLayoutWidgetFactory.kt +++ b/redwood-layout-dom/src/commonMain/kotlin/app/cash/redwood/layout/dom/HTMLElementRedwoodLayoutWidgetFactory.kt @@ -20,6 +20,7 @@ import app.cash.redwood.layout.api.Constraint import app.cash.redwood.layout.api.CrossAxisAlignment import app.cash.redwood.layout.api.MainAxisAlignment import app.cash.redwood.layout.api.Overflow +import app.cash.redwood.layout.widget.Box import app.cash.redwood.layout.widget.Column import app.cash.redwood.layout.widget.FlexContainer import app.cash.redwood.layout.widget.RedwoodLayoutWidgetFactory @@ -35,6 +36,10 @@ import org.w3c.dom.HTMLElement public class HTMLElementRedwoodLayoutWidgetFactory( private val document: Document, ) : RedwoodLayoutWidgetFactory { + override fun Box(): Box { + TODO("Not yet implemented") + } + override fun Column(): Column = HTMLFlexContainer( value = document.createElement("div") as HTMLDivElement, diff --git a/redwood-layout-schema/redwood-api.xml b/redwood-layout-schema/redwood-api.xml index e6e3b2f298..7f1a033638 100644 --- a/redwood-layout-schema/redwood-api.xml +++ b/redwood-layout-schema/redwood-api.xml @@ -21,6 +21,18 @@ + + + + + + + + + + + + diff --git a/redwood-layout-schema/src/main/kotlin/app/cash/redwood/layout/modifiers.kt b/redwood-layout-schema/src/main/kotlin/app/cash/redwood/layout/modifiers.kt index 3e99464ee5..3a1e39624b 100644 --- a/redwood-layout-schema/src/main/kotlin/app/cash/redwood/layout/modifiers.kt +++ b/redwood-layout-schema/src/main/kotlin/app/cash/redwood/layout/modifiers.kt @@ -46,7 +46,7 @@ public data class Shrink( /** * Add additional space around the item. */ -@Modifier(3, RowScope::class, ColumnScope::class) +@Modifier(3, RowScope::class, ColumnScope::class, BoxScope::class) public data class Margin( val margin: app.cash.redwood.ui.Margin, ) @@ -54,7 +54,7 @@ public data class Margin( /** * Set the alignment for an item along the horizontal axis. */ -@Modifier(4, ColumnScope::class) +@Modifier(4, ColumnScope::class, BoxScope::class) public data class HorizontalAlignment( val alignment: CrossAxisAlignment, ) @@ -62,7 +62,7 @@ public data class HorizontalAlignment( /** * Set the alignment for an item along the vertical axis. */ -@Modifier(5, RowScope::class) +@Modifier(5, RowScope::class, BoxScope::class) public data class VerticalAlignment( val alignment: CrossAxisAlignment, ) @@ -70,7 +70,7 @@ public data class VerticalAlignment( /** * Set a required width for an item. */ -@Modifier(6, RowScope::class, ColumnScope::class) +@Modifier(6, RowScope::class, ColumnScope::class, BoxScope::class) public data class Width( val width: Dp, ) @@ -78,7 +78,7 @@ public data class Width( /** * Set a required height for an item. */ -@Modifier(7, RowScope::class, ColumnScope::class) +@Modifier(7, RowScope::class, ColumnScope::class, BoxScope::class) public data class Height( val height: Dp, ) @@ -86,7 +86,7 @@ public data class Height( /** * Set a required width and height for an item. */ -@Modifier(8, RowScope::class, ColumnScope::class) +@Modifier(8, RowScope::class, ColumnScope::class, BoxScope::class) public data class Size( val width: Dp, val height: Dp, diff --git a/redwood-layout-schema/src/main/kotlin/app/cash/redwood/layout/schema.kt b/redwood-layout-schema/src/main/kotlin/app/cash/redwood/layout/schema.kt index 035e8e6b1f..1e100e5742 100644 --- a/redwood-layout-schema/src/main/kotlin/app/cash/redwood/layout/schema.kt +++ b/redwood-layout-schema/src/main/kotlin/app/cash/redwood/layout/schema.kt @@ -19,17 +19,23 @@ import app.cash.redwood.schema.Schema @Schema( [ - Row::class, + // Widgets + Box::class, Column::class, + Row::class, Spacer::class, + // Next tag: 5 + + // Modifiers Grow::class, - Shrink::class, - Margin::class, + Height::class, HorizontalAlignment::class, + Margin::class, + Shrink::class, + Size::class, VerticalAlignment::class, Width::class, - Height::class, - Size::class, + // Next tag: 9 ], ) public interface RedwoodLayout diff --git a/redwood-layout-schema/src/main/kotlin/app/cash/redwood/layout/widgets.kt b/redwood-layout-schema/src/main/kotlin/app/cash/redwood/layout/widgets.kt index d8868e4a88..e50c827899 100644 --- a/redwood-layout-schema/src/main/kotlin/app/cash/redwood/layout/widgets.kt +++ b/redwood-layout-schema/src/main/kotlin/app/cash/redwood/layout/widgets.kt @@ -169,3 +169,77 @@ public data class Spacer( @Default("Dp(0.0)") val height: Dp, ) + +/** + * Lays out widgets along the z-axis in a column. + * + * Minimum and maximum heights do not include margins. + */ +@Widget(4) +public data class Box( + /** + * Sets whether the box's width will match its widest child ([Constraint.Wrap]) or match the width + * of its parent ([Constraint.Fill]). + */ + @Property(1) + @Default("Constraint.Wrap") + val width: Constraint, + + @Property(2) + @Default("Dp(0.0)") + val minWidth: Dp, + + @Property(3) + @Default("Dp(Double.MAX_VALUE)") + val maxWidth: Dp, + + /** + * Sets whether the box's height will match its tallest child ([Constraint.Wrap]) or match the + * height of its parent ([Constraint.Fill]). + */ + @Property(4) + @Default("Constraint.Wrap") + val height: Constraint, + + @Property(5) + @Default("Dp(0.0)") + val minHeight: Dp, + + @Property(6) + @Default("Dp(Double.MAX_VALUE)") + val maxHeight: Dp, + + /** + * Applies margin (space) around the box. + * + * This can also be applied to an individual widget using `Modifier.margin`. + */ + @Property(7) + @Default("Margin.Zero") + val margin: Margin, + + /** + * Sets the default horizontal alignment for widgets in this Box. + * + * This can also be applied to an individual widget using `Modifier.horizontalAlignment`. + */ + @Property(8) + @Default("CrossAxisAlignment.Start") + val horizontalAlignment: CrossAxisAlignment, + + /** + * Sets the default vertical alignment for widgets in this Box. + * + * This can also be applied to an individual widget using `Modifier.horizontalAlignment`. + */ + @Property(9) + @Default("CrossAxisAlignment.Start") + val verticalAlignment: CrossAxisAlignment, + + /** + * A slot to add widgets in. + */ + @Children(1) val children: BoxScope.() -> Unit, +) + +public object BoxScope diff --git a/redwood-layout-uiview/src/commonMain/kotlin/app/cash/redwood/layout/uiview/UIViewRedwoodLayoutWidgetFactory.kt b/redwood-layout-uiview/src/commonMain/kotlin/app/cash/redwood/layout/uiview/UIViewRedwoodLayoutWidgetFactory.kt index d7a0001bfe..e77ee111eb 100644 --- a/redwood-layout-uiview/src/commonMain/kotlin/app/cash/redwood/layout/uiview/UIViewRedwoodLayoutWidgetFactory.kt +++ b/redwood-layout-uiview/src/commonMain/kotlin/app/cash/redwood/layout/uiview/UIViewRedwoodLayoutWidgetFactory.kt @@ -15,6 +15,7 @@ */ package app.cash.redwood.layout.uiview +import app.cash.redwood.layout.widget.Box import app.cash.redwood.layout.widget.Column import app.cash.redwood.layout.widget.RedwoodLayoutWidgetFactory import app.cash.redwood.layout.widget.Row @@ -24,6 +25,9 @@ import platform.UIKit.UIView @ObjCName("UIViewRedwoodLayoutWidgetFactory", exact = true) public class UIViewRedwoodLayoutWidgetFactory : RedwoodLayoutWidgetFactory { + override fun Box(): Box { + TODO("Not yet implemented") + } override fun Column(): Column = UIViewFlexContainer(FlexDirection.Column) override fun Row(): Row = UIViewFlexContainer(FlexDirection.Row) override fun Spacer(): Spacer = UIViewSpacer() diff --git a/redwood-layout-view/src/main/kotlin/app/cash/redwood/layout/view/ViewRedwoodLayoutWidgetFactory.kt b/redwood-layout-view/src/main/kotlin/app/cash/redwood/layout/view/ViewRedwoodLayoutWidgetFactory.kt index 6c0122e67b..87ff418492 100644 --- a/redwood-layout-view/src/main/kotlin/app/cash/redwood/layout/view/ViewRedwoodLayoutWidgetFactory.kt +++ b/redwood-layout-view/src/main/kotlin/app/cash/redwood/layout/view/ViewRedwoodLayoutWidgetFactory.kt @@ -17,6 +17,7 @@ package app.cash.redwood.layout.view import android.content.Context import android.view.View +import app.cash.redwood.layout.widget.Box import app.cash.redwood.layout.widget.Column import app.cash.redwood.layout.widget.RedwoodLayoutWidgetFactory import app.cash.redwood.layout.widget.Row @@ -26,6 +27,10 @@ import app.cash.redwood.yoga.FlexDirection public class ViewRedwoodLayoutWidgetFactory( private val context: Context, ) : RedwoodLayoutWidgetFactory { + override fun Box(): Box { + TODO("Not yet implemented") + } + override fun Column(): Column = ViewFlexContainer(context, FlexDirection.Column) override fun Row(): Row = ViewFlexContainer(context, FlexDirection.Row) override fun Spacer(): Spacer = ViewSpacer(context) diff --git a/redwood-protocol-widget/src/commonTest/kotlin/app/cash/redwood/protocol/widget/EmptyRedwoodLayoutWidgetFactory.kt b/redwood-protocol-widget/src/commonTest/kotlin/app/cash/redwood/protocol/widget/EmptyRedwoodLayoutWidgetFactory.kt index 61392bbec7..efafb7f84c 100644 --- a/redwood-protocol-widget/src/commonTest/kotlin/app/cash/redwood/protocol/widget/EmptyRedwoodLayoutWidgetFactory.kt +++ b/redwood-protocol-widget/src/commonTest/kotlin/app/cash/redwood/protocol/widget/EmptyRedwoodLayoutWidgetFactory.kt @@ -15,9 +15,11 @@ */ package app.cash.redwood.protocol.widget +import app.cash.redwood.layout.widget.Box import app.cash.redwood.layout.widget.RedwoodLayoutWidgetFactory class EmptyRedwoodLayoutWidgetFactory : RedwoodLayoutWidgetFactory { + override fun Box() = TODO() override fun Column() = TODO() override fun Row() = TODO() override fun Spacer() = TODO()