Refactor the LazyColumn composable to use modifiers and refactor the related scopes to be akin to those in androidx.compose

Author: ShreckYe

compose-multiplatform-material/build.gradle.kts

@@ -15,6 +15,7 @@ kotlin {
         commonMain {
             dependencies {
                 api(compose.runtime)
+                implementation("org.jetbrains.compose.annotation-internal:annotation:${DependencyVersions.composeMultiplatform}")
                 api(project(":compose-multiplatform-common:compose-multiplatform-common-legacy")) // TODO remove
                 api(project(":compose-multiplatform-common"))
                 //compileOnly(compose.material) // for KDoc element links only

compose-multiplatform-material/src/androidxCommonMain/kotlin/com/huanshankeji/compose/material/ListAndLazyColumn.androidxCommon.kt

@@ -0,0 +1,41 @@
+package com.huanshankeji.compose.material.lazy.ext
+
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.runtime.Composable
+import com.huanshankeji.compose.ui.Modifier
+import androidx.compose.foundation.lazy.LazyItemScope as PlatformLazyItemScope
+import androidx.compose.foundation.lazy.LazyListScope as PlatformLazyListScope
+
+actual class LazyListScope(val platformValue: PlatformLazyListScope) {
+    actual fun item(key: Any?, contentType: Any?, content: @Composable LazyItemScope.() -> Unit) =
+        platformValue.item(key, contentType) { LazyItemScope(this).content() }
+
+    actual fun items(
+        count: Int,
+        key: ((index: Int) -> Any)?,
+        contentType: (index: Int) -> Any?,
+        itemContent: @Composable LazyItemScope.(index: Int) -> Unit
+    ) =
+        platformValue.items(count, key, contentType) { LazyItemScope(this).itemContent(it) }
+
+    @OptIn(ExperimentalFoundationApi::class)
+    actual fun group(
+        key: Any?,
+        contentType: Any?,
+        headerContent: @Composable HeaderScope.() -> Unit,
+        content: LazyListScope.() -> Unit
+    ) {
+        platformValue.stickyHeader(key, contentType) { HeaderScope(this).headerContent() }
+        content()
+    }
+}
+
+actual class LazyItemScope(val platformValue: PlatformLazyItemScope)
+actual typealias HeaderScope = LazyItemScope
+
+@Composable
+actual fun LazyColumn(modifier: Modifier, content: LazyListScope.() -> Unit) =
+    // Note that it's actually in the `foundation` package.
+    androidx.compose.foundation.lazy.LazyColumn(modifier.platformModifier) {
+        LazyListScope(this).content()
+    }

compose-multiplatform-material/src/androidxCommonMain/kotlin/com/huanshankeji/compose/material/lazy/ext/LazyDsl.androidxCommon.kt

@@ -0,0 +1,45 @@
+package com.huanshankeji.compose.material.lazy.ext
+
+//import androidx.compose.foundation.lazy.LazyListScope
+import androidx.compose.runtime.Composable
+import com.huanshankeji.compose.ui.Modifier
+
+/** @see LazyListScope */
+expect class LazyListScope {
+    fun item(key: Any? = null, contentType: Any? = null, content: @Composable LazyItemScope.() -> Unit)
+
+    fun items(
+        count: Int,
+        key: ((index: Int) -> Any)? = null,
+        contentType: (index: Int) -> Any? = { null },
+        itemContent: @Composable LazyItemScope.(index: Int) -> Unit
+    )
+
+    fun group(
+        key: Any? = null,
+        contentType: Any? = null,
+        headerContent: @Composable HeaderScope.() -> Unit,
+        content: LazyListScope.() -> Unit
+    )
+}
+
+expect class LazyItemScope /*{
+    fun Modifier.fillParentMaxSize(@FloatRange(from = 0.0, to = 1.0) fraction: Float = 1f): Modifier
+    fun Modifier.fillParentMaxWidth(@FloatRange(from = 0.0, to = 1.0) fraction: Float = 1f): Modifier
+    fun Modifier.fillParentMaxHeight(@FloatRange(from = 0.0, to = 1.0) fraction: Float = 1f): Modifier
+}*/
+
+expect class HeaderScope
+
+/**
+ * The current implementation is not actually lazy on web, but it seems not necessary to be.
+ */
+@Composable
+expect fun LazyColumn(modifier: Modifier = Modifier, content: LazyListScope.() -> Unit)
+
+/**
+ * An alias for [LazyColumn] that is more conventional for Web/HTML/JS.
+ */
+@Composable
+fun ScrollableList(modifier: Modifier = Modifier, content: LazyListScope.() -> Unit) =
+    LazyColumn(modifier, content)

compose-multiplatform-material/src/commonMain/kotlin/com/huanshankeji/compose/material/ListAndLazyColumn.kt

@@ -1,10 +1,8 @@
-package com.huanshankeji.compose.material
+package com.huanshankeji.compose.material.lazy.ext
 
 import androidx.compose.runtime.Composable
-import com.huanshankeji.compose.ui.ModifierOrAttrs
-import com.huanshankeji.compose.ui.toAttrs
-import com.huanshankeji.compose.web.attributes.attrs
-import com.huanshankeji.compose.web.attributes.plus
+import com.huanshankeji.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.toAttrs
 import dev.petuska.kmdc.list.MDCList
 import dev.petuska.kmdc.list.MDCListGroup
 import dev.petuska.kmdc.list.MDCListScope
@@ -17,13 +15,11 @@ import org.w3c.dom.HTMLHeadingElement
 import org.w3c.dom.HTMLLIElement
 import org.w3c.dom.HTMLUListElement
 
-actual typealias ListElement = HTMLUListElement
-
 /**
  * This class contains mutable fields.
  * @see androidx.compose.foundation.lazy.LazyListScopeImpl
  */
-actual class ListScope(
+actual class LazyListScope(
     val mdcListScope: MDCListScope<HTMLUListElement>
 ) {
     private var composables: MutableList<@Composable () -> Unit>? = null
@@ -33,7 +29,7 @@ actual class ListScope(
 
     /** Add the composable functions with the non-composable functions and then invoke them. */
     @Composable
-    fun ComposableRun(content: ListScope.() -> Unit) {
+    fun ComposableRun(content: LazyListScope.() -> Unit) {
         composables = mutableListOf()
         content()
         for (composable in composables!!)
@@ -42,48 +38,48 @@ actual class ListScope(
     }
 
 
-    actual fun item(key: Any?, contentType: Any?, content: @Composable ItemScope.() -> Unit) = addComposable {
-        mdcListScope.ListItem { ItemScope(this).content() }
+    actual fun item(key: Any?, contentType: Any?, content: @Composable LazyItemScope.() -> Unit) = addComposable {
+        mdcListScope.ListItem { LazyItemScope(this).content() }
     }
 
     actual fun items(
         count: Int,
         key: ((index: Int) -> Any)?,
         contentType: (index: Int) -> Any?,
-        itemContent: @Composable ItemScope.(index: Int) -> Unit
+        itemContent: @Composable LazyItemScope.(index: Int) -> Unit
     ) = addComposable {
         repeat(count) { i ->
-            mdcListScope.ListItem { ItemScope(this).itemContent(i) }
+            mdcListScope.ListItem { LazyItemScope(this).itemContent(i) }
         }
     }
 
     actual fun group(
         key: Any?,
         contentType: Any?,
         headerContent: @Composable HeaderScope.() -> Unit,
-        content: ListScope.() -> Unit
+        content: LazyListScope.() -> Unit
     ) = addComposable {
         MDCListGroup {
             Subheader {
                 HeaderScope(this).headerContent()
             }
             MDCList {
-                ListScope(this).ComposableRun(content)
+                LazyListScope(this).ComposableRun(content)
             }
         }
     }
 }
 
-actual class ItemScope(val mdcListItemScope: MDCListItemScope<HTMLLIElement>)
-actual class HeaderScope(val elementScope: ElementScope<HTMLHeadingElement>)
+actual class LazyItemScope(val mdcListItemScope: MDCListItemScope<HTMLLIElement>)
+actual class HeaderScope(val headingElementScope: ElementScope<HTMLHeadingElement>)
 
 @Composable
-actual fun ScrollableList(modifierOrAttrs: ModifierOrAttrs<ListElement>, content: ListScope.() -> Unit) =
-    MDCList(attrs = attrs<ListElement> {
+actual fun LazyColumn(modifier: Modifier, content: LazyListScope.() -> Unit) =
+    MDCList(attrs = modifier.platformModifier.toAttrs {
         style {
             //overflowY("scroll")
             overflowY("auto")
         }
-    } + modifierOrAttrs.toAttrs()) {
-        ListScope(this).ComposableRun(content)
+    }) {
+        LazyListScope(this).ComposableRun(content)
     }

compose-multiplatform-material/src/commonMain/kotlin/com/huanshankeji/compose/material/lazy/ext/LazyDsl.kt

@@ -23,10 +23,9 @@ import com.huanshankeji.compose.material.icons.Icons
 import com.huanshankeji.compose.material.icons.filled.Add
 import com.huanshankeji.compose.material.icons.filled.Menu
 import com.huanshankeji.compose.material.icons.filled.Search
+import com.huanshankeji.compose.material.lazy.ext.LazyColumn
 import com.huanshankeji.compose.ui.Modifier
 import com.huanshankeji.compose.ui.graphics.Color
-import com.huanshankeji.compose.ui.height
-import com.huanshankeji.compose.ui.unit.dpOrPx
 import com.huanshankeji.compose.material.ext.Button as ExtButton
 
 @Composable
@@ -65,11 +64,7 @@ fun App() {
                 }
 
                 Box(Modifier.padding(16.dp)) {
-                    ScrollableList({
-                        style {
-                            height(100.dpOrPx)
-                        }
-                    }) {
+                    LazyColumn(Modifier.height(100.dp)) {
                         item {
                             Text("Ungrouped item")
                         }