diff --git a/composeApp/src/commonMain/kotlin/com.alorma.compose.settings.sample.shared/SettingsScreen.kt b/composeApp/src/commonMain/kotlin/com.alorma.compose.settings.sample.shared/SettingsScreen.kt index 05cc8737..fb1924ef 100644 --- a/composeApp/src/commonMain/kotlin/com.alorma.compose.settings.sample.shared/SettingsScreen.kt +++ b/composeApp/src/commonMain/kotlin/com.alorma.compose.settings.sample.shared/SettingsScreen.kt @@ -20,6 +20,7 @@ import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp +import com.alorma.compose.settings.sample.shared.internal.MultiChoiceAlertDialog import com.alorma.compose.settings.sample.shared.internal.SampleData import com.alorma.compose.settings.sample.shared.internal.SampleSection import com.alorma.compose.settings.sample.shared.internal.SingleChoiceAlertDialog @@ -54,12 +55,12 @@ fun SettingsScreen(settings: Settings) { title = { Text(text = "Show icon") }, onCheckedChange = { iconState.value = it }, ) + SettingsSelectorsSample(settings, iconState.value) SettingsSwitchSampleSection(settings, iconState.value) SettingsCheckboxSampleSection(settings, iconState.value) SettingsTriStateCheckboxSampleSection(settings, iconState.value) SettingsMenuLinkSectionSample(iconState.value) SettingsSliderSectionSample(settings, iconState.value) - SettingsSelectorsSample(settings, iconState.value) } } } @@ -345,5 +346,53 @@ private fun SettingsSelectorsSample( }, ) } + + val selectMultipleChoiceDisk = rememberStringSettingState( + key = "multiChoice", + settings = settings, + ) + + val showMultiChoiceDialog = remember { mutableStateOf(false) } + + SettingsMenuLink( + title = { Text(text = "Multi choice (Disk)") }, + subtitle = { + val selectedItems = items.filter { selectMultipleChoiceDisk.value?.contains(it.key) ?: false } + if (selectedItems.isEmpty()) { + Text(text = "No item selected") + } else if (selectedItems.size == 1) { + Text(text = "Item selected: ${selectedItems.first().title}") + } else { + Text(text = "Items selected: ${selectedItems.joinToString(", ") { it.title }}") + } + }, + onClick = { showMultiChoiceDialog.value = true }, + icon = iconSampleOrNull(showIcon), + action = if (selectMultipleChoiceDisk.value == null) { + null + } else { + { + IconButton( + onClick = { selectMultipleChoiceDisk.value = null }, + ) { + Icon( + imageVector = Icons.Default.Delete, + contentDescription = null, + ) + } + } + }, + ) + + if (showMultiChoiceDialog.value) { + MultiChoiceAlertDialog( + items = items, + selectedItemKeys = selectMultipleChoiceDisk.value?.split("|").orEmpty(), + onItemsSelected = { selectedItemKey -> + selectMultipleChoiceDisk.value = selectedItemKey.joinToString("|") + showMultiChoiceDialog.value = false + }, + ) + } } } diff --git a/composeApp/src/commonMain/kotlin/com.alorma.compose.settings.sample.shared/internal/LabelCheckbox.kt b/composeApp/src/commonMain/kotlin/com.alorma.compose.settings.sample.shared/internal/LabelCheckbox.kt new file mode 100644 index 00000000..5002e51c --- /dev/null +++ b/composeApp/src/commonMain/kotlin/com.alorma.compose.settings.sample.shared/internal/LabelCheckbox.kt @@ -0,0 +1,27 @@ +package com.alorma.compose.settings.sample.shared.internal + +import androidx.compose.foundation.clickable +import androidx.compose.material3.Checkbox +import androidx.compose.material3.ListItem +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.semantics.Role + +@Composable +internal fun LabelCheckbox( + item: SampleItem, + isSelected: Boolean, + onSelected: () -> Unit, +) { + ListItem( + modifier = Modifier.clickable( + role = Role.RadioButton, + onClick = onSelected, + onClickLabel = item.title, + ), + headlineContent = { Text(text = item.title) }, + supportingContent = { Text(text = item.description) }, + trailingContent = { Checkbox(checked = isSelected, onCheckedChange = null) }, + ) +} \ No newline at end of file diff --git a/composeApp/src/commonMain/kotlin/com.alorma.compose.settings.sample.shared/internal/MultiChoiceAlertDialog.kt b/composeApp/src/commonMain/kotlin/com.alorma.compose.settings.sample.shared/internal/MultiChoiceAlertDialog.kt new file mode 100644 index 00000000..72aa33cb --- /dev/null +++ b/composeApp/src/commonMain/kotlin/com.alorma.compose.settings.sample.shared/internal/MultiChoiceAlertDialog.kt @@ -0,0 +1,71 @@ +package com.alorma.compose.settings.sample.shared.internal + +import androidx.compose.foundation.layout.Column +import androidx.compose.material3.AlertDialog +import androidx.compose.material3.Text +import androidx.compose.material3.TextButton +import androidx.compose.runtime.Composable +import androidx.compose.runtime.mutableStateListOf +import androidx.compose.runtime.remember + +@Composable +internal fun MultiChoiceAlertDialog( + selectedItemKeys: List = emptyList(), + onItemsSelected: (List) -> Unit, + items: List +) { + val userSelectedItems = remember { + mutableStateListOf(*selectedItemKeys.toTypedArray()) + } + + AlertDialog( + onDismissRequest = { onItemsSelected(selectedItemKeys.toSet().toList()) }, + title = { Text(text = "Multi choice") }, + text = { + Column { + items.forEach { sampleItem -> + val isSelected = sampleItem.key in userSelectedItems + LabelCheckbox( + item = sampleItem, + isSelected = isSelected, + onSelected = { + if (userSelectedItems.contains(sampleItem.key)) { + userSelectedItems.remove(sampleItem.key) + } else { + userSelectedItems.add(sampleItem.key) + } + }, + ) + } + } + }, + confirmButton = if (userSelectedItems.isEmpty()) { + { + TextButton( + onClick = { onItemsSelected(emptyList()) }, + ) { + Text(text = "Cancel") + } + } + } else { + { + TextButton( + onClick = { onItemsSelected(userSelectedItems.toSet().toList()) }, + ) { + Text(text = "Select") + } + } + }, + dismissButton = if (userSelectedItems.isEmpty()) { + null + } else { + { + TextButton( + onClick = { onItemsSelected(emptyList()) }, + ) { + Text(text = "Clear") + } + } + }, + ) +} diff --git a/composeApp/src/commonMain/kotlin/com.alorma.compose.settings.sample.shared/internal/SingleChoiceAlertDialog.kt b/composeApp/src/commonMain/kotlin/com.alorma.compose.settings.sample.shared/internal/SingleChoiceAlertDialog.kt index bb5d81a3..9dd07de0 100644 --- a/composeApp/src/commonMain/kotlin/com.alorma.compose.settings.sample.shared/internal/SingleChoiceAlertDialog.kt +++ b/composeApp/src/commonMain/kotlin/com.alorma.compose.settings.sample.shared/internal/SingleChoiceAlertDialog.kt @@ -34,7 +34,6 @@ internal fun SingleChoiceAlertDialog( confirmButton = if (userSelectedItem.value == null) { { TextButton( - enabled = userSelectedItem.value == null, onClick = { onItemSelected(null) }, ) { Text(text = "Cancel") @@ -43,7 +42,6 @@ internal fun SingleChoiceAlertDialog( } else { { TextButton( - enabled = userSelectedItem.value != null, onClick = { onItemSelected(userSelectedItem.value) }, ) { Text(text = "Select") @@ -55,7 +53,6 @@ internal fun SingleChoiceAlertDialog( } else { { TextButton( - enabled = userSelectedItem.value != null, onClick = { onItemSelected(null) }, ) { Text(text = "Clear")