fix Demo examples (#1126)

Fix examples in Demo app: - Components / TextFields / Emoji - Components / LazyLayouts / StaggeredGrid
JetBrains · Feb 21, 2024 · 8e4957c · 8e4957c
1 parent 7b5af48
commit 8e4957c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 13 deletions.
diff --git a/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/LazyLayouts.kt b/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/LazyLayouts.kt
@@ -27,13 +27,15 @@ import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
 import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
+import androidx.compose.foundation.lazy.staggeredgrid.items
 import androidx.compose.material.Button
 import androidx.compose.material.Text
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalLayoutDirection
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
 import kotlin.random.Random
@@ -82,15 +84,21 @@ private fun ExampleLazyGrid() {
     }
 }
 
-@OptIn(ExperimentalFoundationApi::class)
+private data class StaggeredGridItem(val color: Color, val height: Dp)
+
 @Composable
 private fun ExampleStaggeredGrid() {
+    val items: List<StaggeredGridItem> = remember {
+        List(100) {
+            StaggeredGridItem(color = Color(Random.nextInt()), height = Random.nextInt(100, 200).dp)
+        }
+    }
     LazyVerticalStaggeredGrid(StaggeredGridCells.Fixed(3), Modifier.fillMaxSize()) {
-        items(100) {
+        items(items) {
             Box(
                 Modifier.fillMaxSize()
-                    .height(remember { Random.nextInt(100, 200).dp })
-                    .background(remember { Color(Random.nextInt()) })
+                    .height(it.height)
+                    .background(it.color)
             )
         }
     }
@@ -125,9 +133,9 @@ private fun ExampleTwoDirectionsAndRTL() {
                 Text("Toggle layout direction")
             }
             LazyColumn(Modifier.fillMaxSize()) {
-                items(rows) {row ->
+                items(rows) { row ->
                     LazyRow(Modifier.height(rowHeight)) {
-                        items(columns) {col ->
+                        items(columns) { col ->
                             val color = colors[(row + col) % colors.size]
 
                             Box(

diff --git a/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/textfield/EmojiExample.kt b/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/textfield/EmojiExample.kt
@@ -4,13 +4,14 @@ import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.Text
 import androidx.compose.material.TextField
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
@@ -20,26 +21,27 @@ fun EmojiExample() {
     Column {
         TextFieldExample(
             "Compound Emoji",
-            mutableStateOf("Family emoji: \uD83D\uDC68\u200D\uD83D\uDC69\u200D\uD83D\uDC67\u200D\uD83D\uDC66, and some text at the end")
+            "Family emoji: \uD83D\uDC68\u200D\uD83D\uDC69\u200D\uD83D\uDC67\u200D\uD83D\uDC66, and some text at the end"
         )
 
         TextFieldExample(
             "Compound Emoji",
-            mutableStateOf("Split family emoji: \uD83D\uDC68 \uD83D\uDC69 \uD83D\uDC67 \uD83D\uDC66, and some text at the end")
+            "Split family emoji: \uD83D\uDC68 \uD83D\uDC69 \uD83D\uDC67 \uD83D\uDC66, and some text at the end"
         )
 
     }
 
 }
 
 @Composable
-private fun TextFieldExample(title: String, state: MutableState<String>) {
+private fun TextFieldExample(title: String, initialText: String) {
+    var text by remember { mutableStateOf(initialText) }
     Column(Modifier.fillMaxWidth().padding(4.dp).border(1.dp, Color.Black).padding(4.dp)) {
         Text(title)
         TextField(
-            value = state.value,
+            value = text,
             onValueChange = {
-                state.value = it
+                text = it
             },
             keyboardOptions = KeyboardOptions(autoCorrect = false),
         )