Add section support to html scrolling lists

InkApplications · Oct 5, 2024 · 75cec60 · 75cec60
1 parent a550a51
commit 75cec60
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 33 deletions.
diff --git a/render-compose-html/src/jsMain/kotlin/ink/ui/render/compose/html/HtmlComposeRenderer.kt b/render-compose-html/src/jsMain/kotlin/ink/ui/render/compose/html/HtmlComposeRenderer.kt
@@ -4,7 +4,9 @@ import androidx.compose.runtime.Composable
 import ink.ui.render.compose.html.renderer.*
 import ink.ui.render.compose.html.renderer.CompositeElementRenderer
 import ink.ui.render.web.gridTemplateColumns
+import ink.ui.structures.GroupingStyle.*
 import ink.ui.structures.Positioning
+import ink.ui.structures.elements.ElementList
 import ink.ui.structures.elements.UiElement
 import ink.ui.structures.layouts.*
 import ink.ui.structures.render.RenderResult
@@ -81,13 +83,11 @@ class HtmlComposeRenderer(
                     renderElement(uiLayout.body)
                 }
             }
-            is ScrollingListLayout -> Section(
-                attrs = {
-                    classes("item-list")
-                }
-            ) {
-                uiLayout.items.forEach {
-                    Div {
+            is ScrollingListLayout -> when (uiLayout.groupingStyle) {
+                Unified -> renderElement(ElementList(uiLayout.items, groupingStyle = Unified))
+                Items -> renderElement(ElementList(uiLayout.items, groupingStyle = Items))
+                Sections -> uiLayout.items.forEach {
+                    Section {
                         renderElement(it)
                     }
                 }

diff --git a/render-compose/src/commonMain/kotlin/ink/ui/render/compose/ComposeRenderer.kt b/render-compose/src/commonMain/kotlin/ink/ui/render/compose/ComposeRenderer.kt
@@ -8,13 +8,16 @@ import androidx.compose.foundation.lazy.items
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
 import ink.ui.render.compose.renderer.*
 import ink.ui.render.compose.renderer.ActivityRenderer
 import ink.ui.render.compose.renderer.CompositeElementRenderer
 import ink.ui.render.compose.renderer.EmptyRenderer
 import ink.ui.render.compose.renderer.TextRenderer
 import ink.ui.render.compose.theme.ComposeRenderTheme
 import ink.ui.render.compose.theme.defaultTheme
+import ink.ui.structures.GroupingStyle
+import ink.ui.structures.GroupingStyle.*
 import ink.ui.structures.Positioning
 import ink.ui.structures.elements.UiElement
 import ink.ui.structures.layouts.*
@@ -95,23 +98,30 @@ class ComposeRenderer(
             ){
                 renderElement(uiLayout.body)
             }
-            is ScrollingListLayout -> LazyColumn(
-                contentPadding = WindowInsets(
-                    top = theme.spacing.gutters - theme.spacing.item,
-                    bottom = theme.spacing.gutters - theme.spacing.item,
-                    left = theme.spacing.gutters - theme.spacing.item,
-                    right = theme.spacing.gutters - theme.spacing.item,
-                ).add(WindowInsets.safeDrawing).asPaddingValues(),
-                modifier = Modifier
-                    .background(theme.colors.background)
-                    .fillMaxSize()
-            ) {
-                items(uiLayout.items) { item ->
-                    Box(
-                        modifier = Modifier.padding(theme.spacing.item)
-                            .fillMaxWidth(),
-                    ) {
-                        renderElement(item)
+            is ScrollingListLayout -> {
+                val itemSpacing = when (uiLayout.groupingStyle) {
+                    Unified -> 0.dp
+                    Items -> theme.spacing.item
+                    Sections -> theme.spacing.sectionSpacing
+                }
+                LazyColumn(
+                    contentPadding = WindowInsets(
+                        top = theme.spacing.gutters - itemSpacing,
+                        bottom = theme.spacing.gutters - itemSpacing,
+                        left = theme.spacing.gutters - itemSpacing,
+                        right = theme.spacing.gutters - itemSpacing,
+                    ).add(WindowInsets.safeDrawing).asPaddingValues(),
+                    modifier = Modifier
+                        .background(theme.colors.background)
+                        .fillMaxSize()
+                ) {
+                    items(uiLayout.items) { item ->
+                        Box(
+                            modifier = Modifier.padding(itemSpacing)
+                                .fillMaxWidth(),
+                        ) {
+                            renderElement(item)
+                        }
                     }
                 }
             }

diff --git a/render-static-html/src/jvmMain/kotlin/ink/ui/render/statichtml/HtmlRenderer.kt b/render-static-html/src/jvmMain/kotlin/ink/ui/render/statichtml/HtmlRenderer.kt
@@ -4,6 +4,7 @@ import ink.ui.render.statichtml.renderer.*
 import ink.ui.render.statichtml.renderer.CompositeElementRenderer
 import ink.ui.render.statichtml.renderer.TextRenderer
 import ink.ui.render.web.gridTemplateColumns
+import ink.ui.structures.GroupingStyle.*
 import ink.ui.structures.Positioning
 import ink.ui.structures.elements.ElementList
 import ink.ui.structures.elements.UiElement
@@ -78,12 +79,30 @@ class HtmlRenderer(
                     renderer = renderer,
                 )
             }
-            is ScrollingListLayout -> section {
-                renderWith(
-                    element = ElementList(uiLayout.items),
-                    consumer = consumer,
-                    renderer = renderer,
-                )
+            is ScrollingListLayout -> when (uiLayout.groupingStyle) {
+                Unified -> section {
+                    renderWith(
+                        element = ElementList(uiLayout.items, groupingStyle = Unified),
+                        consumer = consumer,
+                        renderer = renderer,
+                    )
+                }
+                Items -> section {
+                    renderWith(
+                        element = ElementList(uiLayout.items, groupingStyle = Items),
+                        consumer = consumer,
+                        renderer = renderer,
+                    )
+                }
+                Sections -> uiLayout.items.forEach { item ->
+                    section {
+                        renderWith(
+                            element = item,
+                            consumer = consumer,
+                            renderer = renderer,
+                        )
+                    }
+                }
             }
         }
     }

diff --git a/render-web-common/build.gradle.kts b/render-web-common/build.gradle.kts
@@ -10,6 +10,7 @@ kotlin {
         binaries.executable()
     }
     jvm()
+    jvmToolchain(11)
 
     sourceSets {
         commonMain.dependencies {

diff --git a/structures/api/structures.api b/structures/api/structures.api
@@ -524,11 +524,14 @@ public final class ink/ui/structures/layouts/PageLayout : ink/ui/structures/layo
 }
 
 public final class ink/ui/structures/layouts/ScrollingListLayout : ink/ui/structures/layouts/UiLayout {
-	public fun <init> (Ljava/util/List;)V
+	public fun <init> (Ljava/util/List;Link/ui/structures/GroupingStyle;)V
+	public synthetic fun <init> (Ljava/util/List;Link/ui/structures/GroupingStyle;ILkotlin/jvm/internal/DefaultConstructorMarker;)V
 	public final fun component1 ()Ljava/util/List;
-	public final fun copy (Ljava/util/List;)Link/ui/structures/layouts/ScrollingListLayout;
-	public static synthetic fun copy$default (Link/ui/structures/layouts/ScrollingListLayout;Ljava/util/List;ILjava/lang/Object;)Link/ui/structures/layouts/ScrollingListLayout;
+	public final fun component2 ()Link/ui/structures/GroupingStyle;
+	public final fun copy (Ljava/util/List;Link/ui/structures/GroupingStyle;)Link/ui/structures/layouts/ScrollingListLayout;
+	public static synthetic fun copy$default (Link/ui/structures/layouts/ScrollingListLayout;Ljava/util/List;Link/ui/structures/GroupingStyle;ILjava/lang/Object;)Link/ui/structures/layouts/ScrollingListLayout;
 	public fun equals (Ljava/lang/Object;)Z
+	public final fun getGroupingStyle ()Link/ui/structures/GroupingStyle;
 	public final fun getItems ()Ljava/util/List;
 	public fun hashCode ()I
 	public fun toString ()Ljava/lang/String;

diff --git a/structures/src/commonMain/kotlin/ink/ui/structures/layouts/ScrollingListLayout.kt b/structures/src/commonMain/kotlin/ink/ui/structures/layouts/ScrollingListLayout.kt
@@ -1,5 +1,6 @@
 package ink.ui.structures.layouts
 
+import ink.ui.structures.GroupingStyle
 import ink.ui.structures.elements.UiElement
 
 /**
@@ -10,4 +11,9 @@ data class ScrollingListLayout(
      * Elements to be displayed in the scrolling section of the layout.
      */
     val items: List<UiElement>,
+
+    /**
+     * Signifiers for indicating how the elements are related to each other.
+     */
+    val groupingStyle: GroupingStyle = GroupingStyle.Items,
 ): UiLayout