make SelectButton more flexible

Author: westnordost

app/src/androidMain/kotlin/de/westnordost/streetcomplete/quests/LengthForm.kt

@@ -65,9 +65,8 @@ fun LengthForm(
                         selectedUnit = unit
                         onChange(null)
                     },
-                ) {
-                    Text(it.toString())
-                }
+                    itemContent = { Text(it.toString()) }
+                )
             }
 
             ProvideTextStyle(MaterialTheme.typography.largeInput) {

app/src/androidMain/kotlin/de/westnordost/streetcomplete/quests/max_height/MaxHeightForm.kt

@@ -4,7 +4,6 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.ProvideTextStyle
 import androidx.compose.material.Text
@@ -15,18 +14,15 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import de.westnordost.streetcomplete.R
 import de.westnordost.streetcomplete.data.meta.LengthUnit
 import de.westnordost.streetcomplete.osm.Length
 import de.westnordost.streetcomplete.osm.unit
 import de.westnordost.streetcomplete.ui.common.LengthFeetInchesInput
 import de.westnordost.streetcomplete.ui.common.LengthMetersInput
 import de.westnordost.streetcomplete.ui.common.SelectButton
-import de.westnordost.streetcomplete.ui.common.TextFieldStyle
 import de.westnordost.streetcomplete.ui.theme.extraLargeInput
 import de.westnordost.streetcomplete.ui.theme.largeInput
 
@@ -59,10 +55,9 @@ fun MaxHeightForm(
                 onSelectedItem = { unit ->
                     selectedUnit = unit
                     onChange(null)
-                }
-            ) {
-                Text(it.toString())
-            }
+                },
+                itemContent = { Text(it.toString()) }
+            )
         }
         MaxHeightSign(countryCode = countryCode) {
             when (selectedUnit) {

app/src/androidMain/kotlin/de/westnordost/streetcomplete/ui/common/SelectButton.kt

@@ -1,16 +1,19 @@
 package de.westnordost.streetcomplete.ui.common
 
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.calculateEndPadding
+import androidx.compose.foundation.layout.calculateStartPadding
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material.ButtonColors
 import androidx.compose.material.ButtonElevation
 import androidx.compose.material.DropdownMenu
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.Icon
 import androidx.compose.material.LocalTextStyle
-import androidx.compose.material.OutlinedButton
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -19,6 +22,8 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.datasource.LoremIpsum
 import androidx.compose.ui.unit.dp
@@ -39,32 +44,56 @@ import kotlin.collections.forEach
 @Composable
 fun <T> SelectButton(
     items: List<T>,
-    selectedItem: T,
     onSelectedItem: (T) -> Unit,
     modifier: Modifier = Modifier,
+    selectedItem: T? = null,
+    style: ButtonStyle = ButtonStyle.Default,
     enabled: Boolean = true,
     interactionSource: MutableInteractionSource? = null,
-    elevation: ButtonElevation? = null,
+    elevation: ButtonElevation? = style.elevation,
+    shape: Shape = style.shape,
+    border: BorderStroke? = style.border,
+    colors: ButtonColors = style.buttonColors,
+    contentPadding: PaddingValues = style.contentPadding,
+    showDropDownArrow: Boolean = true,
     itemContent: @Composable (RowScope.(item: T) -> Unit),
+    content: @Composable (RowScope.() -> Unit) = { selectedItem?.let { itemContent(it) } }
 ) {
     var expanded by remember { mutableStateOf(false) }
 
+    val revisedContentPadding = if (showDropDownArrow) {
+        val layoutDirection = LocalLayoutDirection.current
+        PaddingValues(
+            start = contentPadding.calculateStartPadding(layoutDirection),
+            top = contentPadding.calculateTopPadding(),
+            end = contentPadding.calculateEndPadding(layoutDirection) - 8.dp,
+            bottom = contentPadding.calculateBottomPadding(),
+        )
+    } else {
+        contentPadding
+    }
+
     Box(modifier = modifier) {
-        OutlinedButton(
+        Button2(
             onClick = { expanded = !expanded },
-            contentPadding = PaddingValues(start = 16.dp, top = 8.dp, end = 8.dp, bottom = 8.dp),
             enabled = enabled,
             interactionSource = interactionSource,
             elevation = elevation,
+            shape = shape,
+            border = border,
+            colors = colors,
+            contentPadding = revisedContentPadding,
         ) {
-            itemContent(selectedItem)
-            Icon(
-                painter = painterResource(Res.drawable.ic_arrow_drop_down_24),
-                contentDescription = null,
-                modifier = Modifier
-                    .padding(start = 8.dp)
-                    .rotate(if (expanded) 180f else 0f)
-            )
+            content()
+            if (showDropDownArrow) {
+                Icon(
+                    painter = painterResource(Res.drawable.ic_arrow_drop_down_24),
+                    contentDescription = null,
+                    modifier = Modifier
+                        .padding(start = 8.dp)
+                        .rotate(if (expanded) 180f else 0f)
+                )
+            }
         }
         DropdownMenu(
             expanded = expanded,
@@ -95,5 +124,6 @@ private fun LengthInputSelectorPreview() {
         items = words,
         selectedItem = selected,
         onSelectedItem = { selected = it },
-    ) { Text(it) }
+        itemContent = { Text(it) }
+    )
 }