library: Add maxHeight parameter to ListPopup

YuKongA · YuKongA · commit a865082cd26b · 2025-01-08T18:39:50.000+08:00
diff --git a/composeApp/src/commonMain/kotlin/component/TextComponent.kt b/composeApp/src/commonMain/kotlin/component/TextComponent.kt
@@ -77,7 +77,7 @@ fun TextComponent(
     val dropdownOptions2 = listOf(
         "Option 1", "Option 2", "Option 3", "Option 4",
         "Option 5", "Option 6", "Option 7", "Option 8",
-        "Option 9", "Option 10", "Option 11", "Option 12 (this is a long long long option)"
+        "Option 9", "Option 10", "Option 11", "Option 12 (this is a longest option)"
     )
     val spinnerOptions = listOf(
         SpinnerEntry(icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFFFF5B29)) }, "Option 1", "Red"),
@@ -89,7 +89,7 @@ fun TextComponent(
         SpinnerEntry(icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFFFF5B29)) }, "Option 1", "Red"),
         SpinnerEntry(icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFF36D167)) }, "Option 2", "Green"),
         SpinnerEntry(icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFF3482FF)) }, "Option 3", "Blue"),
-        SpinnerEntry(icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFFFFB21D)) }, "Option 4 (this is a long option)", "Yellow"),
+        SpinnerEntry(icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFFFFB21D)) }, "Option 4", "Yellow"),
     )
     SmallTitle(text = "Basic")
     Card(
@@ -343,7 +343,8 @@ fun TextComponent(
             items = dropdownOptions2,
             selectedIndex = dropdownOptionSelectedRight.value,
             onSelectedIndexChange = { newOption -> dropdownOptionSelectedRight.value = newOption },
-            mode = DropDownMode.AlwaysOnRight
+            mode = DropDownMode.AlwaysOnRight,
+            maxHeight = 300.dp
         )
 
         SuperDropdown(
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/ListPopup.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/ListPopup.kt
@@ -35,6 +35,7 @@ import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.layout.positionInWindow
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalLayoutDirection
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.IntRect
 import androidx.compose.ui.unit.IntSize
@@ -56,6 +57,7 @@ import kotlin.math.min
  * @param popupPositionProvider The [PopupPositionProvider] of the [ListPopup].
  * @param alignment The alignment of the [ListPopup].
  * @param onDismissRequest The callback when the [ListPopup] is dismissed.
+ * @param maxHeight The maximum height of the [ListPopup]. If null, the height will be calculated automatically.
  * @param content The [Composable] content of the [ListPopup]. You should use the [ListPopupColumn] in general.
  */
 @Composable
@@ -65,6 +67,7 @@ fun ListPopup(
     popupPositionProvider: PopupPositionProvider = ListPopupDefaults.DropdownPositionProvider,
     alignment: PopupPositionProvider.Align = PopupPositionProvider.Align.Right,
     onDismissRequest: (() -> Unit)? = null,
+    maxHeight: Dp? = null,
     content: @Composable () -> Unit
 ) {
     var offset by remember { mutableStateOf(IntOffset.Zero) }
@@ -155,7 +158,7 @@ fun ListPopup(
                             constraints.copy(
                                 minWidth = 200.dp.roundToPx(),
                                 minHeight = 50.dp.roundToPx(),
-                                maxHeight = windowBounds.height - popupMargin.top - popupMargin.bottom
+                                maxHeight = if (maxHeight != null) maxHeight.roundToPx() else windowBounds.height - popupMargin.top - popupMargin.bottom
                             )
                         )
                         popupContentSize = IntSize(placeable.width, placeable.height)
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt
@@ -31,6 +31,7 @@ import androidx.compose.ui.platform.LocalHapticFeedback
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import kotlinx.coroutines.launch
 import top.yukonga.miuix.kmp.basic.BasicComponent
@@ -59,6 +60,7 @@ import top.yukonga.miuix.kmp.utils.MiuixPopupUtil.Companion.dismissPopup
  * @param summaryColor The color of the summary.
  * @param mode The dropdown show mode of the [SuperDropdown].
  * @param insideMargin The margin inside the [SuperDropdown].
+ * @param maxHeight The maximum height of the [ListPopup].
  * @param enabled Whether the [SuperDropdown] is enabled.
  * @param showValue Whether to show the selected value of the [SuperDropdown].
  * @param onSelectedIndexChange The callback when the selected index of the [SuperDropdown] is changed.
@@ -74,6 +76,7 @@ fun SuperDropdown(
     summaryColor: BasicComponentColors = BasicComponentDefaults.summaryColor(),
     mode: DropDownMode = DropDownMode.Normal,
     insideMargin: PaddingValues = BasicComponentDefaults.InsideMargin,
+    maxHeight: Dp? = null,
     enabled: Boolean = true,
     showValue: Boolean = true,
     onSelectedIndexChange: ((Int) -> Unit)?,
@@ -135,7 +138,8 @@ fun SuperDropdown(
                         PopupPositionProvider.Align.Left,
                     onDismissRequest = {
                         isDropdownExpanded.value = false
-                    }
+                    },
+                    maxHeight = maxHeight
                 ) {
                     ListPopupColumn {
                         items.forEachIndexed { index, string ->
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperSpinner.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperSpinner.kt
@@ -40,6 +40,7 @@ import androidx.compose.ui.platform.LocalHapticFeedback
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import kotlinx.coroutines.launch
@@ -72,6 +73,7 @@ import top.yukonga.miuix.kmp.utils.MiuixPopupUtil.Companion.dismissPopup
  * @param mode The mode of the [SuperSpinner].
  * @param leftAction The action to be shown at the left side of the [SuperSpinner].
  * @param insideMargin The [PaddingValues] to be applied inside the [SuperSpinner].
+ * @param maxHeight The maximum height of the [ListPopup].
  * @param enabled Whether the [SuperSpinner] is enabled.
  * @param showValue Whether to show the value of the [SuperSpinner].
  * @param onSelectedIndexChange The callback to be invoked when the selected index of the [SuperSpinner] is changed.
@@ -88,6 +90,7 @@ fun SuperSpinner(
     mode: SpinnerMode = SpinnerMode.Normal,
     leftAction: @Composable (() -> Unit)? = null,
     insideMargin: PaddingValues = BasicComponentDefaults.InsideMargin,
+    maxHeight: Dp? = null,
     enabled: Boolean = true,
     showValue: Boolean = true,
     onSelectedIndexChange: ((Int) -> Unit)?,
@@ -149,7 +152,8 @@ fun SuperSpinner(
                         PopupPositionProvider.Align.Left,
                     onDismissRequest = {
                         isDropdownExpanded.value = false
-                    }
+                    },
+                    maxHeight = maxHeight
                 ) {
                     ListPopupColumn {
                         items.forEachIndexed { index, spinnerEntry ->
@@ -377,9 +381,11 @@ fun SuperSpinner(
                     layout(0, 0) { }
                 }
                 val button = measurables[1].measure(constraints)
-                val lazyList = measurables[0].measure(constraints.copy(
-                    maxHeight = constraints.maxHeight - button.height
-                ))
+                val lazyList = measurables[0].measure(
+                    constraints.copy(
+                        maxHeight = constraints.maxHeight - button.height
+                    )
+                )
                 layout(constraints.maxWidth, lazyList.height + button.height) {
                     lazyList.place(0, 0)
                     button.place(0, lazyList.height)
