Skip to content

Commit 48fb58a

Browse files
authored
library: Add customizable colors for SuperDropdown (#56)
* Add `DropdownColors` and `DropdownDefaults` to allow users to customize the colors of `SuperDropdown`.
1 parent e5d2f78 commit 48fb58a

File tree

1 file changed

+47
-16
lines changed

1 file changed

+47
-16
lines changed

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

Lines changed: 47 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import androidx.compose.foundation.layout.size
1212
import androidx.compose.foundation.layout.widthIn
1313
import androidx.compose.runtime.Composable
1414
import androidx.compose.runtime.DisposableEffect
15+
import androidx.compose.runtime.Immutable
1516
import androidx.compose.runtime.getValue
1617
import androidx.compose.runtime.mutableStateOf
1718
import androidx.compose.runtime.remember
@@ -80,6 +81,7 @@ fun SuperDropdown(
8081
maxHeight: Dp? = null,
8182
enabled: Boolean = true,
8283
showValue: Boolean = true,
84+
dropdownColors: DropdownColors = DropdownDefaults.dropdownColors(),
8385
onClick: (() -> Unit)? = null,
8486
onSelectedIndexChange: ((Int) -> Unit)?,
8587
) {
@@ -89,7 +91,8 @@ fun SuperDropdown(
8991
val coroutineScope = rememberCoroutineScope()
9092
val held = remember { mutableStateOf<HoldDownInteraction.Hold?>(null) }
9193
val hapticFeedback = LocalHapticFeedback.current
92-
val actionColor = if (enabled) MiuixTheme.colorScheme.onSurfaceVariantActions else MiuixTheme.colorScheme.disabledOnSecondaryVariant
94+
val actionColor =
95+
if (enabled) MiuixTheme.colorScheme.onSurfaceVariantActions else MiuixTheme.colorScheme.disabledOnSecondaryVariant
9396

9497
var alignLeft by rememberSaveable { mutableStateOf(true) }
9598

@@ -149,6 +152,7 @@ fun SuperDropdown(
149152
text = string,
150153
optionSize = items.size,
151154
isSelected = selectedIndex == index,
155+
dropdownColors = dropdownColors,
152156
onSelectedIndexChange = {
153157
hapticFeedback.performHapticFeedback(HapticFeedbackType.Confirm)
154158
onSelectedIndexChange?.let { it1 -> it1(it) }
@@ -201,6 +205,32 @@ fun SuperDropdown(
201205
)
202206
}
203207

208+
@Immutable
209+
class DropdownColors(
210+
val contentColor: Color,
211+
val containerColor: Color,
212+
val selectedContentColor: Color,
213+
val selectedContainerColor: Color
214+
)
215+
216+
object DropdownDefaults {
217+
218+
@Composable
219+
fun dropdownColors(
220+
contentColor: Color = MiuixTheme.colorScheme.onSurface,
221+
containerColor: Color = MiuixTheme.colorScheme.surface,
222+
selectedContentColor: Color = MiuixTheme.colorScheme.onTertiaryContainer,
223+
selectedContainerColor: Color = MiuixTheme.colorScheme.tertiaryContainer
224+
): DropdownColors {
225+
return DropdownColors(
226+
contentColor = contentColor,
227+
containerColor = containerColor,
228+
selectedContentColor = selectedContentColor,
229+
selectedContainerColor = selectedContainerColor
230+
)
231+
}
232+
}
233+
204234
/**
205235
* The implementation of the dropdown.
206236
*
@@ -216,24 +246,20 @@ fun DropdownImpl(
216246
optionSize: Int,
217247
isSelected: Boolean,
218248
index: Int,
249+
dropdownColors: DropdownColors = DropdownDefaults.dropdownColors(),
219250
onSelectedIndexChange: (Int) -> Unit
220251
) {
221252
val additionalTopPadding = if (index == 0) 20f.dp else 12f.dp
222253
val additionalBottomPadding = if (index == optionSize - 1) 20f.dp else 12f.dp
223254
val textColor = if (isSelected) {
224-
MiuixTheme.colorScheme.onTertiaryContainer
255+
dropdownColors.selectedContentColor
225256
} else {
226-
MiuixTheme.colorScheme.onSurface
227-
}
228-
val selectColor = if (isSelected) {
229-
MiuixTheme.colorScheme.onTertiaryContainer
230-
} else {
231-
Color.Transparent
257+
dropdownColors.contentColor
232258
}
233259
val backgroundColor = if (isSelected) {
234-
MiuixTheme.colorScheme.tertiaryContainer
260+
dropdownColors.selectedContainerColor
235261
} else {
236-
MiuixTheme.colorScheme.surface
262+
dropdownColors.containerColor
237263
}
238264
Row(
239265
verticalAlignment = Alignment.CenterVertically,
@@ -253,12 +279,17 @@ fun DropdownImpl(
253279
fontWeight = FontWeight.Medium,
254280
color = textColor,
255281
)
256-
Image(
257-
modifier = Modifier.padding(start = 12.dp).size(20.dp),
258-
imageVector = MiuixIcons.Check,
259-
colorFilter = BlendModeColorFilter(selectColor, BlendMode.SrcIn),
260-
contentDescription = null,
261-
)
282+
if (isSelected) {
283+
Image(
284+
modifier = Modifier.padding(start = 12.dp).size(20.dp),
285+
imageVector = MiuixIcons.Check,
286+
colorFilter = BlendModeColorFilter(
287+
dropdownColors.selectedContentColor,
288+
BlendMode.SrcIn
289+
),
290+
contentDescription = null,
291+
)
292+
}
262293
}
263294
}
264295

0 commit comments

Comments
 (0)