Add ExposedDropdownMenu3Sample

JetBrains · Sep 5, 2023 · 23c9367 · 23c9367
1 parent 80c8476
commit 23c9367
Showing 1 changed file with 66 additions and 21 deletions.
diff --git a/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/PopupAndDialog.kt b/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/PopupAndDialog.kt
@@ -1,7 +1,12 @@
 package androidx.compose.mpp.demo
 
 import androidx.compose.material3.AlertDialog as AlertDialog3
+import androidx.compose.material3.Button as Button3
 import androidx.compose.material3.DropdownMenu as DropdownMenu3
+import androidx.compose.material3.DropdownMenuItem as DropdownMenuItem3
+import androidx.compose.material3.ExposedDropdownMenuBox as ExposedDropdownMenuBox3
+import androidx.compose.material3.TextField as TextField3
+import androidx.compose.material3.Text as Text3
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.horizontalScroll
@@ -24,14 +29,16 @@ import androidx.compose.material.DropdownMenuItem
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Surface
 import androidx.compose.material.Text
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ExposedDropdownMenu
+import androidx.compose.material3.ExposedDropdownMenuDefaults
 import androidx.compose.mpp.demo.textfield.android.loremIpsum
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
-import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.IntOffset
@@ -55,6 +62,7 @@ fun PopupAndDialog() {
         AlertDialog3Sample()
         DropdownMenuSample()
         DropdownMenu3Sample()
+        ExposedDropdownMenu3Sample()
     }
 }
 
@@ -105,39 +113,39 @@ private fun AlertDialog3Sample() {
     var short by remember { mutableStateOf(false) }
     var long by remember { mutableStateOf(false) }
     Row(horizontalArrangement = Arrangement.spacedBy(5.dp)) {
-        Button(onClick = { short = true }) {
-            Text("AlertDialog3 (short)")
+        Button3(onClick = { short = true }) {
+            Text3("AlertDialog3 (short)")
         }
-        Button(onClick = { long = true }) {
-            Text("AlertDialog3 (long)")
+        Button3(onClick = { long = true }) {
+            Text3("AlertDialog3 (long)")
         }
     }
     if (short) {
         AlertDialog3(
             onDismissRequest = { },
             confirmButton = {
-                Button(onClick = { short = false }) {
-                    Text("OK")
+                Button3(onClick = { short = false }) {
+                    Text3("OK")
                 }
             },
-            text = { Text("Meow") },
+            text = { Text3("Meow") },
         )
     }
     if (long) {
         AlertDialog3(
             onDismissRequest = { },
             confirmButton = {
-                Button(onClick = { long = false }) {
-                    Text("OK")
+                Button3(onClick = { long = false }) {
+                    Text3("OK")
                 }
             },
             dismissButton = {
-                Button(onClick = { long = false }) {
-                    Text("Cancel")
+                Button3(onClick = { long = false }) {
+                    Text3("Cancel")
                 }
             },
-            title = { Text("Alert Dialog") },
-            text = { Text(loremIpsum()) },
+            title = { Text3("Alert Dialog") },
+            text = { Text3(loremIpsum()) },
         )
     }
 }
@@ -232,7 +240,6 @@ private fun MyPopup(
     }
 }
 
-@OptIn(ExperimentalComposeUiApi::class)
 @Composable
 private fun DialogSamples() {
     Row(horizontalArrangement = Arrangement.spacedBy(5.dp)) {
@@ -330,18 +337,18 @@ private fun DropdownMenu3Sample() {
     val horizontalScrollState = rememberScrollState()
     Row(
         modifier = Modifier
-            .background(Color.Gray)
+            .background(Color.LightGray)
             .horizontalScroll(horizontalScrollState),
         horizontalArrangement = Arrangement.spacedBy(100.dp)
     ) {
         repeat(10) {
             Column {
                 var expanded by remember { mutableStateOf(false) }
-                Button(
+                Button3(
                     onClick = { expanded = true },
                     modifier = Modifier.width(180.dp)
                 ) {
-                    Text("DropdownMenu3")
+                    Text3("DropdownMenu3")
                 }
                 DropdownMenu3(
                     expanded = expanded,
@@ -350,12 +357,50 @@ private fun DropdownMenu3Sample() {
                     properties = PopupProperties(focusable = false)
                 ) {
                     repeat(it + 5) {
-                        DropdownMenuItem(onClick = { expanded = false }) {
-                            Text("Item $it")
-                        }
+                        DropdownMenuItem3(
+                            text = { Text3("Item $it") },
+                            onClick = { expanded = false }
+                        )
                     }
                 }
             }
         }
     }
 }
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun ExposedDropdownMenu3Sample() {
+    val options = List(5) { "Item $it" }
+    var expanded by remember { mutableStateOf(false) }
+    var selectedOptionText by remember { mutableStateOf(options[0]) }
+    ExposedDropdownMenuBox3(
+        expanded = expanded,
+        onExpandedChange = { expanded = !expanded },
+    ) {
+        TextField3(
+            modifier = Modifier.menuAnchor(),
+            readOnly = true,
+            value = selectedOptionText,
+            onValueChange = {},
+            label = { Text3("ExposedDropdownMenuBox3") },
+            trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) },
+            colors = ExposedDropdownMenuDefaults.textFieldColors(),
+        )
+        ExposedDropdownMenu(
+            expanded = expanded,
+            onDismissRequest = { expanded = false },
+        ) {
+            options.forEach { selectionOption ->
+                DropdownMenuItem3(
+                    text = { Text3(selectionOption) },
+                    onClick = {
+                        selectedOptionText = selectionOption
+                        expanded = false
+                    },
+                    contentPadding = ExposedDropdownMenuDefaults.ItemContentPadding,
+                )
+            }
+        }
+    }
+}