Add Column and Row and update :demo

ShreckYe · ShreckYe · commit d93663fcbf21 · 2022-12-13T00:37:53.000+08:00
diff --git a/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/layout/Box.kt b/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/layout/Box.kt
diff --git a/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/layout/Column.kt b/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/layout/Column.kt
@@ -0,0 +1,11 @@
+package com.huanshankeji.compose.layout
+
+import androidx.compose.runtime.Composable
+import com.huanshankeji.compose.ui.Element
+import com.huanshankeji.compose.ui.ModifierOrAttrs
+
+expect abstract class ColumnElement : Element
+expect interface ColumnScope
+
+@Composable
+expect fun Column(modifierOrAttrs: ModifierOrAttrs<ColumnElement> = null, content: @Composable ColumnScope.() -> Unit)
diff --git a/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/layout/Row.kt b/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/layout/Row.kt
@@ -0,0 +1,11 @@
+package com.huanshankeji.compose.layout
+
+import androidx.compose.runtime.Composable
+import com.huanshankeji.compose.ui.Element
+import com.huanshankeji.compose.ui.ModifierOrAttrs
+
+expect abstract class RowElement : Element
+expect interface RowScope
+
+@Composable
+expect fun Row(modifierOrAttrs: ModifierOrAttrs<RowElement> = null, content: @Composable RowScope.() -> Unit)
diff --git a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/layout/Box.kt b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/layout/Box.kt
diff --git a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/layout/Column.kt b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/layout/Column.kt
@@ -0,0 +1,21 @@
+package com.huanshankeji.compose.layout
+
+import androidx.compose.runtime.Composable
+import com.huanshankeji.compose.ui.ModifierOrAttrs
+import org.jetbrains.compose.web.dom.ElementScope
+import org.w3c.dom.HTMLDivElement
+
+actual typealias ColumnElement = HTMLDivElement
+
+actual interface ColumnScope {
+    val elementScope: ElementScope<HTMLDivElement>
+
+    class Impl(override val elementScope: ElementScope<HTMLDivElement>) : ColumnScope
+}
+
+@Composable
+actual fun Column(modifierOrAttrs: ModifierOrAttrs<ColumnElement>, content: @Composable ColumnScope.() -> Unit) =
+    // TODO: `modifierOrAttrs` not used yet
+    com.huanshankeji.compose.web.Column {
+        ColumnScope.Impl(this).content()
+    }
diff --git a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/layout/Row.kt b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/layout/Row.kt
@@ -0,0 +1,21 @@
+package com.huanshankeji.compose.layout
+
+import androidx.compose.runtime.Composable
+import com.huanshankeji.compose.ui.ModifierOrAttrs
+import org.jetbrains.compose.web.dom.ElementScope
+import org.w3c.dom.HTMLDivElement
+
+actual typealias RowElement = HTMLDivElement
+
+actual interface RowScope {
+    val elementScope: ElementScope<HTMLDivElement>
+
+    class Impl(override val elementScope: ElementScope<HTMLDivElement>) : RowScope
+}
+
+@Composable
+actual fun Row(modifierOrAttrs: ModifierOrAttrs<RowElement>, content: @Composable RowScope.() -> Unit) =
+    // TODO: `modifierOrAttrs` not used yet
+    com.huanshankeji.compose.web.Row {
+        RowScope.Impl(this).content()
+    }
diff --git a/compose-multiplatform-common/src/jvmMain/kotlin/com/huanshankeji/compose/layout/Box.kt b/compose-multiplatform-common/src/jvmMain/kotlin/com/huanshankeji/compose/layout/Box.kt
diff --git a/compose-multiplatform-common/src/jvmMain/kotlin/com/huanshankeji/compose/layout/Column.kt b/compose-multiplatform-common/src/jvmMain/kotlin/com/huanshankeji/compose/layout/Column.kt
@@ -0,0 +1,14 @@
+package com.huanshankeji.compose.layout
+
+import androidx.compose.runtime.Composable
+import com.huanshankeji.compose.ui.Element
+import com.huanshankeji.compose.ui.ModifierOrAttrs
+import com.huanshankeji.compose.ui.toModifier
+
+
+actual abstract class ColumnElement : Element()
+actual typealias ColumnScope = androidx.compose.foundation.layout.ColumnScope
+
+@Composable
+actual fun Column(modifierOrAttrs: ModifierOrAttrs<ColumnElement>, content: @Composable ColumnScope.() -> Unit) =
+    androidx.compose.foundation.layout.Column(modifierOrAttrs.toModifier(), content = content)
diff --git a/compose-multiplatform-common/src/jvmMain/kotlin/com/huanshankeji/compose/layout/Row.kt b/compose-multiplatform-common/src/jvmMain/kotlin/com/huanshankeji/compose/layout/Row.kt
@@ -0,0 +1,13 @@
+package com.huanshankeji.compose.layout
+
+import androidx.compose.runtime.Composable
+import com.huanshankeji.compose.ui.Element
+import com.huanshankeji.compose.ui.ModifierOrAttrs
+import com.huanshankeji.compose.ui.toModifier
+
+actual abstract class RowElement : Element()
+actual typealias RowScope = androidx.compose.foundation.layout.RowScope
+
+@Composable
+actual fun Row(modifierOrAttrs: ModifierOrAttrs<RowElement>, content: @Composable RowScope.() -> Unit) =
+    androidx.compose.foundation.layout.Row(modifierOrAttrs.toModifier(), content = content)
diff --git a/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Composables.kt b/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Composables.kt
@@ -3,6 +3,8 @@ package com.huanshankeji.compose.material.demo
 import androidx.compose.runtime.*
 import com.huanshankeji.compose.BasicText
 import com.huanshankeji.compose.layout.Box
+import com.huanshankeji.compose.layout.Column
+import com.huanshankeji.compose.layout.Row
 import com.huanshankeji.compose.material.*
 import com.huanshankeji.compose.material.icon.MaterialIcons
 import com.huanshankeji.compose.ui.unit.dpOrPx
@@ -16,38 +18,46 @@ fun App() {
     }, {
         MaterialIconActionButton({}, MaterialIcons.Search, "search")
     }) {
-        Card {
-            Box({
-                style {
-                    padding(16.dpOrPx)
-                }
-            }) {
+        Card({
+            style {
+                padding(16.dpOrPx)
+            }
+        }) {
+            Column {
                 BasicText("basic text")
                 Text("Material text")
 
                 var count by remember { mutableStateOf(0) }
                 val onClick: () -> Unit = { count++ }
-                Button(onClick) {
-                    Label(count.toString())
-                }
-
-                IconButton(onClick, materialIcon = MaterialIcons.Search, contentDescription = "increment count")
 
-                List {
-                    item {
-                        Text("Ungrouped item")
+                Row {
+                    Button(onClick) {
+                        Label(count.toString())
                     }
-                    items(count) {
-                        Text("Ungrouped item $it/$count")
+                    IconButton(onClick, materialIcon = MaterialIcons.Search, contentDescription = "increment count")
+                }
+
+                Box({
+                    style {
+                        padding(16.dpOrPx)
                     }
-                    group(headerContent = {
-                        Text("Group title")
-                    }) {
+                }) {
+                    List {
                         item {
-                            Text("Grouped item")
+                            Text("Ungrouped item")
                         }
                         items(count) {
-                            Text("Grouped item $it/$count")
+                            Text("Ungrouped item $it/$count")
+                        }
+                        group(headerContent = {
+                            Text("Group title")
+                        }) {
+                            item {
+                                Text("Grouped item")
+                            }
+                            items(count) {
+                                Text("Grouped item $it/$count")
+                            }
                         }
                     }
                 }
