library: New component [SuperSpinner]

composeApp/src/commonMain/kotlin/component/TextComponent.kt

@@ -22,6 +22,12 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.CornerRadius
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.drawscope.DrawScope
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import top.yukonga.miuix.kmp.basic.BasicComponent
 import top.yukonga.miuix.kmp.basic.Box
@@ -35,10 +41,14 @@ import top.yukonga.miuix.kmp.basic.Text
 import top.yukonga.miuix.kmp.basic.TextButton
 import top.yukonga.miuix.kmp.basic.TextField
 import top.yukonga.miuix.kmp.extra.CheckboxLocation
+import top.yukonga.miuix.kmp.extra.DropDownMode
+import top.yukonga.miuix.kmp.extra.SpinnerEntry
+import top.yukonga.miuix.kmp.extra.SpinnerMode
 import top.yukonga.miuix.kmp.extra.SuperArrow
 import top.yukonga.miuix.kmp.extra.SuperCheckbox
 import top.yukonga.miuix.kmp.extra.SuperDialog
 import top.yukonga.miuix.kmp.extra.SuperDropdown
+import top.yukonga.miuix.kmp.extra.SuperSpinner
 import top.yukonga.miuix.kmp.extra.SuperSwitch
 import top.yukonga.miuix.kmp.theme.MiuixTheme
 import top.yukonga.miuix.kmp.utils.MiuixPopupUtil.Companion.dismissDialog
@@ -52,8 +62,17 @@ fun TextComponent() {
     var switch by remember { mutableStateOf(false) }
     var switchTrue by remember { mutableStateOf(true) }
     val dropdownOptions = listOf("Option 1", "Option 2", "Option 3", "Option 4")
-    val dropdownSelectedOption = remember { mutableStateOf(0) }
-    val dropdownSelectedOptionRight = remember { mutableStateOf(1) }
+    val dropdownOptionSelected = remember { mutableStateOf(0) }
+    val dropdownOptionSelectedRight = remember { mutableStateOf(1) }
+    val spinnerOptions = listOf(
+        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", "Yellow"),
+    )
+    val spinnerOptionSelected = remember { mutableStateOf(0) }
+    val spinnerOptionSelectedRight = remember { mutableStateOf(1) }
+    val spinnerOptionSelectedDialog = remember { mutableStateOf(2) }
     var miuixSuperCheckbox by remember { mutableStateOf("State: false") }
     var miuixSuperCheckboxState by remember { mutableStateOf(false) }
     var miuixSuperRightCheckbox by remember { mutableStateOf("false") }
@@ -295,7 +314,6 @@ fun TextComponent() {
     }
 
     SmallTitle(text = "Dropdown")
-
     Card(
         modifier = Modifier
             .padding(horizontal = 12.dp)
@@ -305,17 +323,17 @@ fun TextComponent() {
             title = "Dropdown",
             summary = "Popup near click",
             items = dropdownOptions,
-            selectedIndex = dropdownSelectedOption.value,
-            onSelectedIndexChange = { newOption -> dropdownSelectedOption.value = newOption },
+            selectedIndex = dropdownOptionSelected.value,
+            onSelectedIndexChange = { newOption -> dropdownOptionSelected.value = newOption },
         )
 
         SuperDropdown(
             title = "Dropdown",
             summary = "Popup always on right",
-            alwaysRight = true,
             items = dropdownOptions,
-            selectedIndex = dropdownSelectedOptionRight.value,
-            onSelectedIndexChange = { newOption -> dropdownSelectedOptionRight.value = newOption },
+            selectedIndex = dropdownOptionSelectedRight.value,
+            onSelectedIndexChange = { newOption -> dropdownOptionSelectedRight.value = newOption },
+            mode = DropDownMode.AlwaysOnRight
         )
 
         SuperDropdown(
@@ -327,6 +345,47 @@ fun TextComponent() {
         )
     }
 
+    SmallTitle(text = "Spinner")
+    Card(
+        modifier = Modifier
+            .padding(horizontal = 12.dp)
+            .padding(bottom = 6.dp)
+    ) {
+        SuperSpinner(
+            title = "Spinner",
+            summary = "Spinner near click",
+            items = spinnerOptions,
+            selectedIndex = spinnerOptionSelected.value,
+            onSelectedIndexChange = { newOption -> spinnerOptionSelected.value = newOption },
+        )
+
+        SuperSpinner(
+            title = "Spinner",
+            summary = "Spinner always on right",
+            items = spinnerOptions,
+            selectedIndex = spinnerOptionSelectedRight.value,
+            onSelectedIndexChange = { newOption -> spinnerOptionSelectedRight.value = newOption },
+            mode = SpinnerMode.AlwaysOnRight,
+        )
+
+        SuperSpinner(
+            title = "Spinner",
+            summary = "Spinner as Dialog",
+            dialogButtonString = "Cancel",
+            items = spinnerOptions,
+            selectedIndex = spinnerOptionSelectedDialog.value,
+            onSelectedIndexChange = { newOption -> spinnerOptionSelectedDialog.value = newOption },
+        )
+
+        SuperSpinner(
+            title = "Disabled Spinner",
+            items = listOf(SpinnerEntry(icon = null, title = "Option 4")),
+            selectedIndex = 0,
+            onSelectedIndexChange = {},
+            enabled = false
+        )
+    }
+
     dialog(showDialog)
     dialog2(showDialog2)
 }
@@ -424,3 +483,17 @@ fun dialog2(showDialog: MutableState<Boolean>) {
         }
     }
 }
+
+class RoundedRectanglePainter(
+    private val cornerRadius: Dp = 6.dp
+) : Painter() {
+    override val intrinsicSize = Size.Unspecified
+
+    override fun DrawScope.onDraw() {
+        drawRoundRect(
+            color = Color.White,
+            size = Size(size.width, size.height),
+            cornerRadius = CornerRadius(cornerRadius.toPx(), cornerRadius.toPx())
+        )
+    }
+}

miuix/build.gradle.kts

@@ -57,4 +57,4 @@ android {
     defaultConfig {
         minSdk = libs.versions.android.minSdk.get().toInt()
     }
-}
+}

miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt

@@ -86,34 +86,36 @@ import kotlin.math.roundToInt
  * @param title The title of the [SuperDropdown].
  * @param items The options of the [SuperDropdown].
  * @param selectedIndex The index of the selected option.
- * @param onSelectedIndexChange The callback when the index is selected.
  * @param modifier The modifier to be applied to the [SuperDropdown].
  * @param popupModifier The modifier to be applied to the popup of the [SuperDropdown].
  * @param titleColor The color of the title.
  * @param summary The summary of the [SuperDropdown].
  * @param summaryColor The color of the summary.
+ * @param mode The dropdown show mode of the [SuperDropdown].
  * @param horizontalPadding The horizontal padding of the [SuperDropdown].
- * @param alwaysRight Whether the popup is always show on the right side.
  * @param insideMargin The margin inside the [SuperDropdown].
  * @param defaultWindowInsetsPadding Whether to apply default window insets padding to the [SuperDropdown].
  * @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.
  */
 @Composable
 fun SuperDropdown(
     title: String,
     items: List<String>,
     selectedIndex: Int,
-    onSelectedIndexChange: (Int) -> Unit,
     modifier: Modifier = Modifier,
     popupModifier: Modifier = Modifier,
     titleColor: BasicComponentColors = BasicComponentDefaults.titleColor(),
     summary: String? = null,
     summaryColor: BasicComponentColors = BasicComponentDefaults.summaryColor(),
-    alwaysRight: Boolean = false,
+    mode: DropDownMode = DropDownMode.Normal,
     horizontalPadding: Dp = 0.dp,
     insideMargin: PaddingValues = BasicComponentDefaults.InsideMargin,
     defaultWindowInsetsPadding: Boolean = true,
-    enabled: Boolean = true
+    enabled: Boolean = true,
+    showValue: Boolean = true,
+    onSelectedIndexChange: ((Int) -> Unit)?,
 ) {
     val interactionSource = remember { MutableInteractionSource() }
     val isDropdownExpanded = remember { mutableStateOf(false) }
@@ -171,13 +173,15 @@ fun SuperDropdown(
         summary = summary,
         summaryColor = summaryColor,
         rightActions = {
-            Text(
-                modifier = Modifier.widthIn(max = 130.dp),
-                text = items[selectedIndex],
-                fontSize = MiuixTheme.textStyles.body2.fontSize,
-                color = actionColor,
-                textAlign = TextAlign.End,
-            )
+            if (showValue) {
+                Text(
+                    modifier = Modifier.widthIn(max = 130.dp),
+                    text = items[selectedIndex],
+                    fontSize = MiuixTheme.textStyles.body2.fontSize,
+                    color = actionColor,
+                    textAlign = TextAlign.End,
+                )
+            }
             Image(
                 modifier = Modifier
                     .padding(start = 8.dp)
@@ -275,7 +279,7 @@ fun SuperDropdown(
                     LazyColumn(
                         modifier = Modifier
                             .onGloballyPositioned { layoutCoordinates ->
-                                offsetXPx = if (alwaysRight || !alignLeft) {
+                                offsetXPx = if (mode == DropDownMode.AlwaysOnRight || !alignLeft) {
                                     dropdownOffsetXPx + componentWidthPx - insideRightPx - layoutCoordinates.size.width - paddingPx - if (defaultWindowInsetsPadding) displayCutoutLeftSize.value else 0
                                 } else {
                                     dropdownOffsetXPx + paddingPx + insideLeftPx - if (defaultWindowInsetsPadding) displayCutoutLeftSize.value else 0
@@ -303,21 +307,19 @@ fun SuperDropdown(
                             .clip(SmoothRoundedCornerShape(16.dp))
                             .background(MiuixTheme.colorScheme.surface)
                     ) {
-                        item {
-                            items.forEachIndexed { index, option ->
-                                DropdownImpl(
-                                    text = option,
-                                    optionSize = items.size,
-                                    isSelected = items[selectedIndex] == option,
-                                    onSelectedIndexChange = {
-                                        hapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)
-                                        onSelectedIndexChange(it)
-                                        dismissPopup(isDropdownExpanded)
-                                    },
-                                    textWidthDp = textWidthDp,
-                                    index = index
-                                )
-                            }
+                        items(items.size) { index ->
+                            DropdownImpl(
+                                text = items[index],
+                                optionSize = items.size,
+                                isSelected = selectedIndex == index,
+                                onSelectedIndexChange = {
+                                    hapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)
+                                    onSelectedIndexChange?.let { it1 -> it1(it) }
+                                    dismissPopup(isDropdownExpanded)
+                                },
+                                textWidthDp = textWidthDp,
+                                index = index
+                            )
                         }
                     }
                 }
@@ -377,7 +379,7 @@ fun DropdownImpl(
         Text(
             modifier = Modifier.width(textWidthDp ?: 50.dp),
             text = text,
-            fontSize = 16.sp,
+            fontSize = MiuixTheme.textStyles.body1.fontSize,
             fontWeight = FontWeight.Medium,
             color = textColor,
         )
@@ -439,3 +441,11 @@ fun calculateOffsetYPx(
  * Only one dropdown is allowed to be displayed at a time.
  */
 val dropdownStates = mutableStateListOf<MutableState<Boolean>>()
+
+/**
+ * The dropdown show mode.
+ */
+enum class DropDownMode {
+    Normal,
+    AlwaysOnRight
+}