Improve list items: add lists to dialogs, rework ListItem customizations (#1119)
* Improve list items: - Create `ListItemContent`. - Create `ListItemStyle`. - Apply those to `ListItem` components. - Create helper list item components for checkboxes, switches, radio buttons. * Create single/multiple selection dialogs. * Create `SingleSelectionListItem` and `MultipleSelectionListItem` - Add `subtitle` to `AlertDialogContents`. - Fix paddings and margins inside dialogs. - Add `ListOption`. * Adds small delay before hiding the single selection dialog. --------- Co-authored-by: ElementBot <benoitm+elementbot@element.io>
This commit is contained in:
Jorge Martin Espinosa
GitHub
parent
cbeab3111d
commit
b326ca28cc
36 changed files with 1155 additions and 85 deletions
|
|
@ -0,0 +1,33 @@
|
|||
/*
|
||||
* Copyright (c) 2023 New Vector Ltd
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
package io.element.android.libraries.designsystem.components.dialogs
|
||||
|
||||
import kotlinx.collections.immutable.ImmutableList
|
||||
import kotlinx.collections.immutable.toImmutableList
|
||||
|
||||
/**
|
||||
* Used to store the visual data for a list option.
|
||||
*/
|
||||
data class ListOption(
|
||||
val title: String,
|
||||
val subtitle: String? = null,
|
||||
)
|
||||
|
||||
/** Creates an immutable list of [ListOption]s from the given [values], using them as titles. */
|
||||
fun listOptionOf(vararg values: String): ImmutableList<ListOption> {
|
||||
return values.map { ListOption(it) }.toImmutableList()
|
||||
}
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
/*
|
||||
* Copyright (c) 2023 New Vector Ltd
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
package io.element.android.libraries.designsystem.components.dialogs
|
||||
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.lazy.LazyColumn
|
||||
import androidx.compose.foundation.lazy.itemsIndexed
|
||||
import androidx.compose.material3.AlertDialog
|
||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.runtime.toMutableStateList
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.res.stringResource
|
||||
import androidx.compose.ui.unit.dp
|
||||
import com.airbnb.android.showkase.annotation.ShowkaseComposable
|
||||
import io.element.android.libraries.designsystem.components.list.CheckboxListItem
|
||||
import io.element.android.libraries.designsystem.preview.DayNightPreviews
|
||||
import io.element.android.libraries.designsystem.preview.ElementPreview
|
||||
import io.element.android.libraries.designsystem.preview.PreviewGroup
|
||||
import io.element.android.libraries.designsystem.theme.components.DialogPreview
|
||||
import io.element.android.libraries.designsystem.theme.components.ListSupportingText
|
||||
import io.element.android.libraries.designsystem.theme.components.SimpleAlertDialogContent
|
||||
import io.element.android.libraries.ui.strings.CommonStrings
|
||||
import kotlinx.collections.immutable.ImmutableList
|
||||
import kotlinx.collections.immutable.persistentListOf
|
||||
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
@Composable
|
||||
fun MultipleSelectionDialog(
|
||||
options: ImmutableList<ListOption>,
|
||||
onConfirmClicked: (List<Int>) -> Unit,
|
||||
onDismissRequest: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
confirmButtonTitle: String = stringResource(CommonStrings.action_confirm),
|
||||
dismissButtonTitle: String = stringResource(CommonStrings.action_cancel),
|
||||
title: String? = null,
|
||||
subtitle: String? = null,
|
||||
initialSelection: ImmutableList<Int> = persistentListOf(),
|
||||
) {
|
||||
val decoratedSubtitle: @Composable (() -> Unit)? = subtitle?.let {
|
||||
@Composable {
|
||||
ListSupportingText(
|
||||
text = it,
|
||||
modifier = Modifier.padding(start = 8.dp)
|
||||
)
|
||||
}
|
||||
}
|
||||
AlertDialog(
|
||||
modifier = modifier,
|
||||
onDismissRequest = onDismissRequest,
|
||||
) {
|
||||
MultipleSelectionDialogContent(
|
||||
title = title,
|
||||
subtitle = decoratedSubtitle,
|
||||
options = options,
|
||||
confirmButtonTitle = confirmButtonTitle,
|
||||
onConfirmClicked = onConfirmClicked,
|
||||
dismissButtonTitle = dismissButtonTitle,
|
||||
onDismissRequest = onDismissRequest,
|
||||
initialSelected = initialSelection,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
internal fun MultipleSelectionDialogContent(
|
||||
options: ImmutableList<ListOption>,
|
||||
confirmButtonTitle: String,
|
||||
onConfirmClicked: (List<Int>) -> Unit,
|
||||
dismissButtonTitle: String,
|
||||
onDismissRequest: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
title: String? = null,
|
||||
initialSelected: ImmutableList<Int> = persistentListOf(),
|
||||
subtitle: @Composable (() -> Unit)? = null,
|
||||
) {
|
||||
val selectedOptionIndexes = remember { initialSelected.toMutableStateList() }
|
||||
|
||||
fun isSelected(index: Int) = selectedOptionIndexes.any { it == index }
|
||||
|
||||
SimpleAlertDialogContent(
|
||||
title = title,
|
||||
subtitle = subtitle,
|
||||
modifier = modifier,
|
||||
submitText = confirmButtonTitle,
|
||||
onSubmitClicked = {
|
||||
onConfirmClicked(selectedOptionIndexes.toList())
|
||||
},
|
||||
cancelText = dismissButtonTitle,
|
||||
onCancelClicked = onDismissRequest,
|
||||
applyPaddingToContents = false,
|
||||
) {
|
||||
LazyColumn {
|
||||
itemsIndexed(options) { index, option ->
|
||||
CheckboxListItem(
|
||||
headline = option.title,
|
||||
checked = isSelected(index),
|
||||
onChange = {
|
||||
if (isSelected(index)) {
|
||||
selectedOptionIndexes.remove(index)
|
||||
} else {
|
||||
selectedOptionIndexes.add(index)
|
||||
}
|
||||
},
|
||||
supportingText = option.subtitle,
|
||||
compactLayout = true,
|
||||
modifier = Modifier.padding(start = 8.dp)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@DayNightPreviews
|
||||
@ShowkaseComposable(group = PreviewGroup.Dialogs)
|
||||
@Composable
|
||||
internal fun MultipleSelectionDialogContentPreview() {
|
||||
ElementPreview(showBackground = false) {
|
||||
DialogPreview {
|
||||
val options = persistentListOf(
|
||||
ListOption("Option 1", "Supporting line text lorem ipsum dolor sit amet, consectetur."),
|
||||
ListOption("Option 2"),
|
||||
ListOption("Option 3"),
|
||||
)
|
||||
MultipleSelectionDialogContent(
|
||||
title = "Dialog title",
|
||||
options = options,
|
||||
onConfirmClicked = {},
|
||||
onDismissRequest = {},
|
||||
confirmButtonTitle = "Save",
|
||||
dismissButtonTitle = "Cancel",
|
||||
initialSelected = persistentListOf(0),
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
/*
|
||||
* Copyright (c) 2023 New Vector Ltd
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
package io.element.android.libraries.designsystem.components.dialogs
|
||||
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.lazy.LazyColumn
|
||||
import androidx.compose.foundation.lazy.itemsIndexed
|
||||
import androidx.compose.material3.AlertDialog
|
||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.res.stringResource
|
||||
import androidx.compose.ui.unit.dp
|
||||
import com.airbnb.android.showkase.annotation.ShowkaseComposable
|
||||
import io.element.android.libraries.designsystem.components.list.RadioButtonListItem
|
||||
import io.element.android.libraries.designsystem.preview.DayNightPreviews
|
||||
import io.element.android.libraries.designsystem.preview.ElementPreview
|
||||
import io.element.android.libraries.designsystem.preview.PreviewGroup
|
||||
import io.element.android.libraries.designsystem.theme.components.DialogPreview
|
||||
import io.element.android.libraries.designsystem.theme.components.ListSupportingText
|
||||
import io.element.android.libraries.designsystem.theme.components.SimpleAlertDialogContent
|
||||
import io.element.android.libraries.ui.strings.CommonStrings
|
||||
import kotlinx.collections.immutable.ImmutableList
|
||||
import kotlinx.collections.immutable.persistentListOf
|
||||
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
@Composable
|
||||
fun SingleSelectionDialog(
|
||||
options: ImmutableList<ListOption>,
|
||||
onOptionSelected: (Int) -> Unit,
|
||||
onDismissRequest: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
title: String? = null,
|
||||
subtitle: String? = null,
|
||||
dismissButtonTitle: String = stringResource(CommonStrings.action_cancel),
|
||||
initialSelection: Int? = null,
|
||||
) {
|
||||
val decoratedSubtitle: @Composable (() -> Unit)? = subtitle?.let {
|
||||
@Composable {
|
||||
ListSupportingText(
|
||||
text = it,
|
||||
modifier = Modifier.padding(start = 8.dp)
|
||||
)
|
||||
}
|
||||
}
|
||||
AlertDialog(
|
||||
modifier = modifier,
|
||||
onDismissRequest = onDismissRequest,
|
||||
) {
|
||||
SingleSelectionDialogContent(
|
||||
title = title,
|
||||
subtitle = decoratedSubtitle,
|
||||
options = options,
|
||||
onOptionSelected = onOptionSelected,
|
||||
dismissButtonTitle = dismissButtonTitle,
|
||||
onDismissRequest = onDismissRequest,
|
||||
initialSelection = initialSelection,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
internal fun SingleSelectionDialogContent(
|
||||
options: ImmutableList<ListOption>,
|
||||
onOptionSelected: (Int) -> Unit,
|
||||
onDismissRequest: () -> Unit,
|
||||
dismissButtonTitle: String,
|
||||
modifier: Modifier = Modifier,
|
||||
title: String? = null,
|
||||
initialSelection: Int? = null,
|
||||
subtitle: @Composable (() -> Unit)? = null,
|
||||
) {
|
||||
SimpleAlertDialogContent(
|
||||
title = title,
|
||||
subtitle = subtitle,
|
||||
modifier = modifier,
|
||||
cancelText = dismissButtonTitle,
|
||||
onCancelClicked = onDismissRequest,
|
||||
applyPaddingToContents = false,
|
||||
) {
|
||||
LazyColumn {
|
||||
itemsIndexed(options) { index, option ->
|
||||
RadioButtonListItem(
|
||||
headline = option.title,
|
||||
supportingText = option.subtitle,
|
||||
selected = index == initialSelection,
|
||||
onSelected = { onOptionSelected(index) },
|
||||
compactLayout = true,
|
||||
modifier = Modifier.padding(start = 8.dp)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@DayNightPreviews
|
||||
@ShowkaseComposable(group = PreviewGroup.Dialogs)
|
||||
@Composable
|
||||
internal fun SingleSelectionDialogContentPreview() {
|
||||
ElementPreview(showBackground = false) {
|
||||
DialogPreview {
|
||||
val options = persistentListOf(
|
||||
ListOption("Option 1"),
|
||||
ListOption("Option 2"),
|
||||
ListOption("Option 3"),
|
||||
)
|
||||
SingleSelectionDialogContent(
|
||||
title = "Dialog title",
|
||||
options = options,
|
||||
onOptionSelected = {},
|
||||
onDismissRequest = {},
|
||||
dismissButtonTitle = "Cancel",
|
||||
initialSelection = 0
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
/*
|
||||
* Copyright (c) 2023 New Vector Ltd
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
package io.element.android.libraries.designsystem.components.list
|
||||
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import io.element.android.libraries.designsystem.theme.components.ListItem
|
||||
import io.element.android.libraries.designsystem.theme.components.ListItemStyle
|
||||
import io.element.android.libraries.designsystem.theme.components.Text
|
||||
|
||||
@Composable
|
||||
fun CheckboxListItem(
|
||||
headline: String,
|
||||
checked: Boolean,
|
||||
onChange: (Boolean) -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
supportingText: String? = null,
|
||||
trailingContent: ListItemContent? = null,
|
||||
enabled: Boolean = true,
|
||||
style: ListItemStyle = ListItemStyle.Default,
|
||||
compactLayout: Boolean = false,
|
||||
) {
|
||||
ListItem(
|
||||
modifier = modifier,
|
||||
headlineContent = { Text(headline) },
|
||||
supportingContent = supportingText?.let { @Composable { Text(it) } },
|
||||
leadingContent = ListItemContent.Checkbox(checked, null, enabled, compact = compactLayout),
|
||||
trailingContent = trailingContent,
|
||||
style = style,
|
||||
enabled = enabled,
|
||||
onClick = { onChange(!checked) },
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
/*
|
||||
* Copyright (c) 2023 New Vector Ltd
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
package io.element.android.libraries.designsystem.components.list
|
||||
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.layout.widthIn
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.text.style.TextOverflow
|
||||
import androidx.compose.ui.unit.DpSize
|
||||
import androidx.compose.ui.unit.dp
|
||||
import io.element.android.libraries.designsystem.theme.components.IconSource
|
||||
import io.element.android.libraries.designsystem.theme.components.ListItem
|
||||
import io.element.android.libraries.designsystem.theme.components.Checkbox as CheckboxComponent
|
||||
import io.element.android.libraries.designsystem.theme.components.Icon as IconComponent
|
||||
import io.element.android.libraries.designsystem.theme.components.RadioButton as RadioButtonComponent
|
||||
import io.element.android.libraries.designsystem.theme.components.Switch as SwitchComponent
|
||||
import io.element.android.libraries.designsystem.theme.components.Text as TextComponent
|
||||
|
||||
/**
|
||||
* This is a helper to set default leading and trailing content for [ListItem]s.
|
||||
*/
|
||||
sealed interface ListItemContent {
|
||||
/**
|
||||
* Default Switch content for [ListItem].
|
||||
* @param checked The current state of the switch.
|
||||
* @param onChange Callback when the switch is toggled: it should only be set to override the default click behaviour in the [ListItem].
|
||||
* @param enabled Whether the switch is enabled or not.
|
||||
*/
|
||||
data class Switch(
|
||||
val checked: Boolean,
|
||||
val onChange: ((Boolean) -> Unit)? = null,
|
||||
val enabled: Boolean = true
|
||||
) : ListItemContent
|
||||
|
||||
/**
|
||||
* Default Checkbox content for [ListItem].
|
||||
* @param checked The current state of the checkbox.
|
||||
* @param onChange Callback when the checkbox is toggled: it should only be set to override the default click behaviour in the [ListItem].
|
||||
* @param enabled Whether the checkbox is enabled or not.
|
||||
* @param compact Reduces the size of the component to make the wrapping [ListItem] smaller.
|
||||
* This is especially useful when the [ListItem] is used inside a Dialog. `false` by default.
|
||||
*/
|
||||
data class Checkbox(
|
||||
val checked: Boolean,
|
||||
val onChange: ((Boolean) -> Unit)? = null,
|
||||
val enabled: Boolean = true,
|
||||
val compact: Boolean = false
|
||||
) : ListItemContent
|
||||
|
||||
/**
|
||||
* Default RadioButton content for [ListItem].
|
||||
* @param selected The current state of the radio button.
|
||||
* @param onClick Callback when the radio button is toggled: it should only be set to override the default click behaviour in the [ListItem].
|
||||
* @param enabled Whether the radio button is enabled or not.
|
||||
* @param compact Reduces the size of the component to make the wrapping [ListItem] smaller.
|
||||
* This is especially useful when the [ListItem] is used inside a Dialog. `false` by default.
|
||||
*/
|
||||
data class RadioButton(
|
||||
val selected: Boolean,
|
||||
val onClick: (() -> Unit)? = null,
|
||||
val enabled: Boolean = true,
|
||||
val compact: Boolean = false
|
||||
) : ListItemContent
|
||||
|
||||
/**
|
||||
* Default Icon content for [ListItem]. Sets the Icon component to a predefined size.
|
||||
* @param iconSource The icon to display, using [IconSource.getPainter].
|
||||
*/
|
||||
data class Icon(val iconSource: IconSource) : ListItemContent
|
||||
|
||||
/**
|
||||
* Default Text content for [ListItem]. Sets the Text component to a max size and clips overflow.
|
||||
* @param text The text to display.
|
||||
*/
|
||||
data class Text(val text: String) : ListItemContent
|
||||
|
||||
/** Displays any custom content. */
|
||||
data class Custom(val content: @Composable () -> Unit) : ListItemContent
|
||||
|
||||
@Composable
|
||||
fun View() {
|
||||
when (this) {
|
||||
is Switch -> SwitchComponent(
|
||||
checked = checked,
|
||||
onCheckedChange = onChange,
|
||||
enabled = enabled
|
||||
)
|
||||
is Checkbox -> CheckboxComponent(
|
||||
modifier = if (compact) Modifier.size(maxCompactSize) else Modifier,
|
||||
checked = checked,
|
||||
onCheckedChange = onChange,
|
||||
enabled = enabled
|
||||
)
|
||||
is RadioButton -> RadioButtonComponent(
|
||||
modifier = if (compact) Modifier.size(maxCompactSize) else Modifier,
|
||||
selected = selected,
|
||||
onClick = onClick,
|
||||
enabled = enabled
|
||||
)
|
||||
is Icon -> IconComponent(
|
||||
modifier = Modifier.size(maxCompactSize),
|
||||
painter = iconSource.getPainter(),
|
||||
contentDescription = iconSource.contentDescription
|
||||
)
|
||||
is Text -> TextComponent(modifier = Modifier.widthIn(max = 128.dp), text = text, maxLines = 1, overflow = TextOverflow.Ellipsis)
|
||||
is Custom -> content()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private val maxCompactSize = DpSize(24.dp, 24.dp)
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
/*
|
||||
* Copyright (c) 2023 New Vector Ltd
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
package io.element.android.libraries.designsystem.components.list
|
||||
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.derivedStateOf
|
||||
import androidx.compose.runtime.getValue
|
||||
import androidx.compose.runtime.mutableStateOf
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.runtime.saveable.rememberSaveable
|
||||
import androidx.compose.runtime.setValue
|
||||
import androidx.compose.runtime.toMutableStateList
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import io.element.android.libraries.designsystem.components.dialogs.ListOption
|
||||
import io.element.android.libraries.designsystem.components.dialogs.MultipleSelectionDialog
|
||||
import io.element.android.libraries.designsystem.components.dialogs.listOptionOf
|
||||
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
|
||||
import io.element.android.libraries.designsystem.preview.PreviewGroup
|
||||
import io.element.android.libraries.designsystem.theme.components.ListItem
|
||||
import io.element.android.libraries.designsystem.theme.components.Text
|
||||
import kotlinx.collections.immutable.ImmutableList
|
||||
import kotlinx.collections.immutable.persistentListOf
|
||||
import kotlinx.collections.immutable.toImmutableList
|
||||
|
||||
@Composable
|
||||
fun MultipleSelectionListItem(
|
||||
headline: String,
|
||||
options: ImmutableList<ListOption>,
|
||||
onSelectionChanged: (List<Int>) -> Unit,
|
||||
resultFormatter: (List<Int>) -> String?,
|
||||
modifier: Modifier = Modifier,
|
||||
supportingText: String? = null,
|
||||
leadingContent: ListItemContent? = null,
|
||||
selected: ImmutableList<Int> = persistentListOf(),
|
||||
displayResultInTrailingContent: Boolean = false,
|
||||
) {
|
||||
val selectedIndexes = remember(selected) { selected.toMutableStateList() }
|
||||
val selectedItemsText by remember { derivedStateOf { resultFormatter(selectedIndexes) } }
|
||||
|
||||
val decoratedSupportedText: @Composable (() -> Unit)? = when {
|
||||
!selectedItemsText.isNullOrBlank() && !displayResultInTrailingContent -> {
|
||||
@Composable {
|
||||
Text(selectedItemsText!!)
|
||||
}
|
||||
}
|
||||
supportingText != null -> {
|
||||
@Composable {
|
||||
Text(supportingText)
|
||||
}
|
||||
}
|
||||
else -> null
|
||||
}
|
||||
|
||||
val trailingContent: ListItemContent? = if (!selectedItemsText.isNullOrBlank() && displayResultInTrailingContent) {
|
||||
ListItemContent.Text(selectedItemsText!!)
|
||||
} else {
|
||||
null
|
||||
}
|
||||
|
||||
var displaySelectionDialog by rememberSaveable { mutableStateOf(false) }
|
||||
|
||||
ListItem(
|
||||
modifier = modifier,
|
||||
headlineContent = { Text(text = headline) },
|
||||
supportingContent = decoratedSupportedText,
|
||||
leadingContent = leadingContent,
|
||||
trailingContent = trailingContent,
|
||||
onClick = { displaySelectionDialog = true }
|
||||
)
|
||||
|
||||
if (displaySelectionDialog) {
|
||||
MultipleSelectionDialog(
|
||||
title = headline,
|
||||
options = options,
|
||||
onConfirmClicked = { newSelectedIndexes ->
|
||||
if (newSelectedIndexes != selectedIndexes.toList()) {
|
||||
onSelectionChanged(newSelectedIndexes)
|
||||
selectedIndexes.clear()
|
||||
selectedIndexes.addAll(newSelectedIndexes)
|
||||
}
|
||||
displaySelectionDialog = false
|
||||
},
|
||||
onDismissRequest = { displaySelectionDialog = false },
|
||||
initialSelection = selectedIndexes.toImmutableList(),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Preview("Multiple selection List item - no selection", group = PreviewGroup.ListItems)
|
||||
@Composable
|
||||
internal fun MutipleSelectionListItemPreview() {
|
||||
ElementThemedPreview {
|
||||
val options = listOptionOf("Option 1", "Option 2", "Option 3")
|
||||
MultipleSelectionListItem(
|
||||
headline = "Headline",
|
||||
options = options,
|
||||
onSelectionChanged = {},
|
||||
supportingText = "Supporting text",
|
||||
resultFormatter = { result -> formatResult(result, options) },
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Preview("Multiple selection List item - selection in supporting text", group = PreviewGroup.ListItems)
|
||||
@Composable
|
||||
internal fun MutipleSelectionListItemSelectedPreview() {
|
||||
ElementThemedPreview {
|
||||
val options = listOptionOf("Option 1", "Option 2", "Option 3")
|
||||
val selected = persistentListOf<Int>(0, 2)
|
||||
MultipleSelectionListItem(
|
||||
headline = "Headline",
|
||||
options = options,
|
||||
onSelectionChanged = {},
|
||||
supportingText = "Supporting text",
|
||||
resultFormatter = {
|
||||
val selectedValues = formatResult(it, options)
|
||||
"Selected: $selectedValues"
|
||||
},
|
||||
selected = selected,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Preview("Multiple selection List item - selection in trailing content", group = PreviewGroup.ListItems)
|
||||
@Composable
|
||||
internal fun MutipleSelectionListItemSelectedTrailingContentPreview() {
|
||||
ElementThemedPreview {
|
||||
val options = listOptionOf("Option 1", "Option 2", "Option 3")
|
||||
val selected = persistentListOf<Int>(0, 2)
|
||||
MultipleSelectionListItem(
|
||||
headline = "Headline",
|
||||
options = options,
|
||||
onSelectionChanged = {},
|
||||
supportingText = "Supporting text",
|
||||
resultFormatter = { selected.size.toString() },
|
||||
displayResultInTrailingContent = true,
|
||||
selected = selected,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
private fun formatResult(result: List<Int>, options: ImmutableList<ListOption>): String? {
|
||||
return options.mapIndexedNotNull { index, value -> value.title.takeIf { result.contains(index) } }.joinToString(", ").takeIf { it.isNotEmpty() }
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
/*
|
||||
* Copyright (c) 2023 New Vector Ltd
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
package io.element.android.libraries.designsystem.components.list
|
||||
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import io.element.android.libraries.designsystem.theme.components.ListItem
|
||||
import io.element.android.libraries.designsystem.theme.components.ListItemStyle
|
||||
import io.element.android.libraries.designsystem.theme.components.Text
|
||||
|
||||
@Composable
|
||||
fun RadioButtonListItem(
|
||||
headline: String,
|
||||
selected: Boolean,
|
||||
onSelected: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
supportingText: String? = null,
|
||||
trailingContent: ListItemContent? = null,
|
||||
style: ListItemStyle = ListItemStyle.Default,
|
||||
enabled: Boolean = true,
|
||||
compactLayout: Boolean = false,
|
||||
) {
|
||||
ListItem(
|
||||
modifier = modifier,
|
||||
headlineContent = { Text(headline) },
|
||||
supportingContent = supportingText?.let { @Composable { Text(it) } },
|
||||
leadingContent = ListItemContent.RadioButton(selected, null, enabled, compact = compactLayout),
|
||||
trailingContent = trailingContent,
|
||||
style = style,
|
||||
enabled = enabled,
|
||||
onClick = onSelected,
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,174 @@
|
|||
/*
|
||||
* Copyright (c) 2023 New Vector Ltd
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
package io.element.android.libraries.designsystem.components.list
|
||||
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.derivedStateOf
|
||||
import androidx.compose.runtime.getValue
|
||||
import androidx.compose.runtime.mutableStateOf
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.runtime.rememberCoroutineScope
|
||||
import androidx.compose.runtime.saveable.rememberSaveable
|
||||
import androidx.compose.runtime.setValue
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import io.element.android.libraries.designsystem.components.dialogs.ListOption
|
||||
import io.element.android.libraries.designsystem.components.dialogs.SingleSelectionDialog
|
||||
import io.element.android.libraries.designsystem.components.dialogs.listOptionOf
|
||||
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
|
||||
import io.element.android.libraries.designsystem.preview.PreviewGroup
|
||||
import io.element.android.libraries.designsystem.theme.components.ListItem
|
||||
import io.element.android.libraries.designsystem.theme.components.Text
|
||||
import kotlinx.collections.immutable.ImmutableList
|
||||
import kotlinx.coroutines.delay
|
||||
import kotlinx.coroutines.launch
|
||||
import kotlin.time.Duration.Companion.seconds
|
||||
|
||||
@Composable
|
||||
fun SingleSelectionListItem(
|
||||
headline: String,
|
||||
options: ImmutableList<ListOption>,
|
||||
onSelectionChanged: (Int) -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
supportingText: String? = null,
|
||||
leadingContent: ListItemContent? = null,
|
||||
resultFormatter: (Int) -> String? = { options.getOrNull(it)?.title },
|
||||
selected: Int? = null,
|
||||
displayResultInTrailingContent: Boolean = false,
|
||||
) {
|
||||
val coroutineScope = rememberCoroutineScope()
|
||||
|
||||
var selectedIndex by rememberSaveable(selected) { mutableStateOf(selected) }
|
||||
val selectedItem by remember { derivedStateOf { selectedIndex?.let { resultFormatter(it) } } }
|
||||
val decoratedSupportedText: @Composable (() -> Unit)? = if (!selectedItem.isNullOrBlank() && !displayResultInTrailingContent) {
|
||||
@Composable {
|
||||
Text(selectedItem!!)
|
||||
}
|
||||
} else {
|
||||
supportingText?.let {
|
||||
@Composable {
|
||||
Text(it)
|
||||
}
|
||||
}
|
||||
}
|
||||
val trailingContent: ListItemContent? = if (!selectedItem.isNullOrBlank() && displayResultInTrailingContent) {
|
||||
ListItemContent.Text(selectedItem!!)
|
||||
} else {
|
||||
null
|
||||
}
|
||||
|
||||
var displaySelectionDialog by rememberSaveable { mutableStateOf(false) }
|
||||
|
||||
ListItem(
|
||||
modifier = modifier,
|
||||
headlineContent = { Text(text = headline) },
|
||||
supportingContent = decoratedSupportedText,
|
||||
leadingContent = leadingContent,
|
||||
trailingContent = trailingContent,
|
||||
onClick = { displaySelectionDialog = true }
|
||||
)
|
||||
|
||||
if (displaySelectionDialog) {
|
||||
SingleSelectionDialog(
|
||||
title = headline,
|
||||
options = options,
|
||||
onOptionSelected = { index ->
|
||||
if (index != selectedIndex) {
|
||||
onSelectionChanged(index)
|
||||
selectedIndex = index
|
||||
}
|
||||
// Delay hiding the dialog for a bit so the new state is displayed in it before being dismissed
|
||||
coroutineScope.launch {
|
||||
delay(0.5.seconds)
|
||||
displaySelectionDialog = false
|
||||
}
|
||||
},
|
||||
onDismissRequest = { displaySelectionDialog = false },
|
||||
initialSelection = selectedIndex,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Preview("Single selection List item - no selection", group = PreviewGroup.ListItems)
|
||||
@Composable
|
||||
internal fun SingleSelectionListItemPreview() {
|
||||
ElementThemedPreview {
|
||||
SingleSelectionListItem(
|
||||
headline = "Headline",
|
||||
options = listOptionOf("Option 1", "Option 2", "Option 3"),
|
||||
onSelectionChanged = {},
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Preview("Single selection List item - no selection, supporting text", group = PreviewGroup.ListItems)
|
||||
@Composable
|
||||
internal fun SingleSelectionListItemUnselectedWithSupportingTextPreview() {
|
||||
ElementThemedPreview {
|
||||
SingleSelectionListItem(
|
||||
headline = "Headline",
|
||||
options = listOptionOf("Option 1", "Option 2", "Option 3"),
|
||||
supportingText = "Supporting text",
|
||||
onSelectionChanged = {},
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Preview("Single selection List item - selection in supporting text", group = PreviewGroup.ListItems)
|
||||
@Composable
|
||||
internal fun SingleSelectionListItemSelectedInSupportingTextPreview() {
|
||||
ElementThemedPreview {
|
||||
SingleSelectionListItem(
|
||||
headline = "Headline",
|
||||
options = listOptionOf("Option 1", "Option 2", "Option 3"),
|
||||
supportingText = "Supporting text",
|
||||
onSelectionChanged = {},
|
||||
selected = 1,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Preview("Single selection List item - selection in trailing content", group = PreviewGroup.ListItems)
|
||||
@Composable
|
||||
internal fun SingleSelectionListItemSelectedInTrailingContentPreview() {
|
||||
ElementThemedPreview {
|
||||
SingleSelectionListItem(
|
||||
headline = "Headline",
|
||||
options = listOptionOf("Option 1", "Option 2", "Option 3"),
|
||||
supportingText = "Supporting text",
|
||||
onSelectionChanged = {},
|
||||
selected = 1,
|
||||
displayResultInTrailingContent = true,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Preview("Single selection List item - custom formatter", group = PreviewGroup.ListItems)
|
||||
@Composable
|
||||
internal fun SingleSelectionListItemCustomFormattertPreview() {
|
||||
ElementThemedPreview {
|
||||
SingleSelectionListItem(
|
||||
headline = "Headline",
|
||||
options = listOptionOf("Option 1", "Option 2", "Option 3"),
|
||||
supportingText = "Supporting text",
|
||||
onSelectionChanged = {},
|
||||
resultFormatter = { "Selected index: $it"},
|
||||
selected = 1,
|
||||
displayResultInTrailingContent = true,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
/*
|
||||
* Copyright (c) 2023 New Vector Ltd
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
package io.element.android.libraries.designsystem.components.list
|
||||
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import io.element.android.libraries.designsystem.theme.components.ListItem
|
||||
import io.element.android.libraries.designsystem.theme.components.ListItemStyle
|
||||
import io.element.android.libraries.designsystem.theme.components.Text
|
||||
|
||||
@Composable
|
||||
fun SwitchListItem(
|
||||
headline: String,
|
||||
value: Boolean,
|
||||
onChange: (Boolean) -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
supportingText: String? = null,
|
||||
leadingContent: ListItemContent? = null,
|
||||
enabled: Boolean = true,
|
||||
style: ListItemStyle = ListItemStyle.Default,
|
||||
) {
|
||||
ListItem(
|
||||
modifier = modifier,
|
||||
headlineContent = { Text(headline) },
|
||||
supportingContent = supportingText?.let { @Composable { Text(it) } },
|
||||
leadingContent = leadingContent,
|
||||
trailingContent = ListItemContent.Switch(value, null, enabled),
|
||||
style = style,
|
||||
enabled = enabled,
|
||||
onClick = { onChange(!value) },
|
||||
)
|
||||
}
|
||||
|
|
@ -16,6 +16,7 @@
|
|||
|
||||
package io.element.android.libraries.designsystem.theme.components
|
||||
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.Column
|
||||
|
|
@ -55,11 +56,49 @@ internal fun SimpleAlertDialogContent(
|
|||
onCancelClicked: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
title: String? = null,
|
||||
subtitle: @Composable (() -> Unit)? = null,
|
||||
submitText: String? = null,
|
||||
onSubmitClicked: () -> Unit = {},
|
||||
thirdButtonText: String? = null,
|
||||
onThirdButtonClicked: () -> Unit = {},
|
||||
applyPaddingToContents: Boolean = true,
|
||||
icon: @Composable (() -> Unit)? = null,
|
||||
) {
|
||||
SimpleAlertDialogContent(
|
||||
content = {
|
||||
Text(
|
||||
text = content,
|
||||
style = ElementTheme.materialTypography.bodyMedium,
|
||||
)
|
||||
},
|
||||
cancelText = cancelText,
|
||||
onCancelClicked = onCancelClicked,
|
||||
modifier = modifier,
|
||||
title = title,
|
||||
subtitle = subtitle,
|
||||
submitText = submitText,
|
||||
onSubmitClicked = onSubmitClicked,
|
||||
thirdButtonText = thirdButtonText,
|
||||
onThirdButtonClicked = onThirdButtonClicked,
|
||||
icon = icon,
|
||||
applyPaddingToContents = applyPaddingToContents,
|
||||
)
|
||||
}
|
||||
|
||||
@Composable
|
||||
internal fun SimpleAlertDialogContent(
|
||||
cancelText: String,
|
||||
onCancelClicked: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
title: String? = null,
|
||||
subtitle: @Composable (() -> Unit)? = null,
|
||||
submitText: String? = null,
|
||||
onSubmitClicked: () -> Unit = {},
|
||||
thirdButtonText: String? = null,
|
||||
onThirdButtonClicked: () -> Unit = {},
|
||||
applyPaddingToContents: Boolean = true,
|
||||
icon: @Composable (() -> Unit)? = null,
|
||||
content: @Composable () -> Unit,
|
||||
) {
|
||||
AlertDialogContent(
|
||||
buttons = {
|
||||
|
|
@ -99,12 +138,8 @@ internal fun SimpleAlertDialogContent(
|
|||
)
|
||||
}
|
||||
},
|
||||
text = {
|
||||
Text(
|
||||
text = content,
|
||||
style = ElementTheme.materialTypography.bodyMedium,
|
||||
)
|
||||
},
|
||||
subtitle = subtitle,
|
||||
content = content,
|
||||
shape = DialogContentDefaults.shape,
|
||||
containerColor = DialogContentDefaults.containerColor,
|
||||
iconContentColor = DialogContentDefaults.iconContentColor,
|
||||
|
|
@ -117,6 +152,7 @@ internal fun SimpleAlertDialogContent(
|
|||
// TextButtons will not consume this provided content color value, and will used their
|
||||
// own defined or default colors.
|
||||
buttonContentColor = MaterialTheme.colorScheme.primary,
|
||||
applyPaddingToContents = applyPaddingToContents,
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -128,7 +164,8 @@ internal fun AlertDialogContent(
|
|||
buttons: @Composable () -> Unit,
|
||||
icon: (@Composable () -> Unit)?,
|
||||
title: (@Composable () -> Unit)?,
|
||||
text: @Composable (() -> Unit)?,
|
||||
subtitle: @Composable (() -> Unit)?,
|
||||
content: @Composable (() -> Unit)?,
|
||||
shape: Shape,
|
||||
containerColor: Color,
|
||||
tonalElevation: Dp,
|
||||
|
|
@ -137,6 +174,7 @@ internal fun AlertDialogContent(
|
|||
titleContentColor: Color,
|
||||
textContentColor: Color,
|
||||
modifier: Modifier = Modifier,
|
||||
applyPaddingToContents: Boolean = true,
|
||||
) {
|
||||
Surface(
|
||||
modifier = modifier,
|
||||
|
|
@ -145,12 +183,21 @@ internal fun AlertDialogContent(
|
|||
tonalElevation = tonalElevation,
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier.padding(DialogContentDefaults.externalPadding)
|
||||
modifier = Modifier.padding(
|
||||
if (applyPaddingToContents) {
|
||||
// We can just apply the same padding to the whole dialog contents
|
||||
DialogContentDefaults.externalPadding
|
||||
} else {
|
||||
// We should only apply vertical padding in this case, every component will apply the horizontal content individually
|
||||
DialogContentDefaults.externalVerticalPadding
|
||||
}
|
||||
)
|
||||
) {
|
||||
icon?.let {
|
||||
CompositionLocalProvider(LocalContentColor provides iconContentColor) {
|
||||
Box(
|
||||
Modifier
|
||||
.then(if (applyPaddingToContents) Modifier else Modifier.padding(DialogContentDefaults.externalHorizontalPadding))
|
||||
.padding(DialogContentDefaults.iconPadding)
|
||||
.align(Alignment.CenterHorizontally)
|
||||
) {
|
||||
|
|
@ -165,6 +212,12 @@ internal fun AlertDialogContent(
|
|||
Box(
|
||||
// Align the title to the center when an icon is present.
|
||||
Modifier
|
||||
.then(
|
||||
if (applyPaddingToContents)
|
||||
Modifier
|
||||
else
|
||||
Modifier.padding(DialogContentDefaults.externalHorizontalPadding)
|
||||
)
|
||||
.padding(DialogContentDefaults.titlePadding)
|
||||
.align(
|
||||
if (icon == null) {
|
||||
|
|
@ -179,23 +232,28 @@ internal fun AlertDialogContent(
|
|||
}
|
||||
}
|
||||
}
|
||||
text?.let {
|
||||
subtitle?.invoke()
|
||||
content?.let {
|
||||
CompositionLocalProvider(LocalContentColor provides textContentColor) {
|
||||
val textStyle =
|
||||
MaterialTheme.typography.bodyMedium
|
||||
val textStyle = MaterialTheme.typography.bodyMedium
|
||||
ProvideTextStyle(textStyle) {
|
||||
Box(
|
||||
Modifier
|
||||
.weight(weight = 1f, fill = false)
|
||||
// We don't apply padding here if it wasn't applied to the root component, this allows us to have a full width content
|
||||
.padding(DialogContentDefaults.textPadding)
|
||||
.align(Alignment.Start)
|
||||
) {
|
||||
text()
|
||||
content()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Box(modifier = Modifier.align(Alignment.End)) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.then(if (applyPaddingToContents) Modifier else Modifier.padding(DialogContentDefaults.externalHorizontalPadding))
|
||||
.align(Alignment.End)
|
||||
) {
|
||||
CompositionLocalProvider(LocalContentColor provides buttonContentColor) {
|
||||
val textStyle =
|
||||
MaterialTheme.typography.labelLarge
|
||||
|
|
@ -304,6 +362,7 @@ private fun AlertDialogFlowRow(
|
|||
internal fun DialogPreview(content: @Composable () -> Unit) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.background(ElementTheme.materialColors.onSurfaceVariant)
|
||||
.sizeIn(minWidth = DialogMinWidth, maxWidth = DialogMaxWidth)
|
||||
.padding(20.dp),
|
||||
propagateMinConstraints = true
|
||||
|
|
@ -313,8 +372,11 @@ internal fun DialogPreview(content: @Composable () -> Unit) {
|
|||
}
|
||||
|
||||
internal object DialogContentDefaults {
|
||||
private val externalPaddingDp = 24.dp
|
||||
val shape = RoundedCornerShape(12.dp)
|
||||
val externalPadding = PaddingValues(all = 24.dp)
|
||||
val externalPadding = PaddingValues(all = externalPaddingDp)
|
||||
val externalHorizontalPadding = PaddingValues(horizontal = externalPaddingDp)
|
||||
val externalVerticalPadding = PaddingValues(vertical = externalPaddingDp)
|
||||
val titlePadding = PaddingValues(bottom = 16.dp)
|
||||
val iconPadding = PaddingValues(bottom = 8.dp)
|
||||
val textPadding = PaddingValues(bottom = 16.dp)
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ import androidx.compose.runtime.Composable
|
|||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.graphics.ImageBitmap
|
||||
import androidx.compose.ui.graphics.painter.Painter
|
||||
import androidx.compose.ui.graphics.vector.ImageVector
|
||||
import androidx.compose.ui.res.painterResource
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
|
|
@ -123,6 +124,21 @@ fun Icon(
|
|||
)
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun Icon(
|
||||
painter: Painter,
|
||||
contentDescription: String?,
|
||||
modifier: Modifier = Modifier,
|
||||
tint: Color = LocalContentColor.current,
|
||||
) {
|
||||
androidx.compose.material3.Icon(
|
||||
painter = painter,
|
||||
contentDescription = contentDescription,
|
||||
modifier = modifier,
|
||||
tint = tint
|
||||
)
|
||||
}
|
||||
|
||||
@Preview(group = PreviewGroup.Icons)
|
||||
@Composable
|
||||
internal fun IconImageVectorPreview() =
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ package io.element.android.libraries.designsystem.theme.components
|
|||
import androidx.compose.foundation.clickable
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.outlined.Share
|
||||
import androidx.compose.material3.ListItemColors
|
||||
import androidx.compose.material3.ListItemDefaults
|
||||
import androidx.compose.material3.LocalContentColor
|
||||
import androidx.compose.material3.LocalTextStyle
|
||||
|
|
@ -29,9 +30,11 @@ import androidx.compose.runtime.mutableStateOf
|
|||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.runtime.setValue
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.text.style.TextOverflow
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.unit.dp
|
||||
import io.element.android.libraries.designsystem.components.list.ListItemContent
|
||||
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
|
||||
import io.element.android.libraries.designsystem.preview.PreviewGroup
|
||||
import io.element.android.libraries.theme.ElementTheme
|
||||
|
|
@ -55,35 +58,27 @@ fun ListItem(
|
|||
headlineContent: @Composable () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
supportingContent: @Composable (() -> Unit)? = null,
|
||||
leadingContent: @Composable (() -> Unit)? = null,
|
||||
trailingContent: @Composable (() -> Unit)? = null,
|
||||
leadingContent: ListItemContent? = null,
|
||||
trailingContent: ListItemContent? = null,
|
||||
style: ListItemStyle = ListItemStyle.Default,
|
||||
enabled: Boolean = true,
|
||||
onClick: (() -> Unit)? = null,
|
||||
) {
|
||||
val headlineColor = if (enabled) when (style) {
|
||||
ListItemStyle.Destructive -> ElementTheme.colors.textCriticalPrimary
|
||||
else -> ElementTheme.colors.textPrimary
|
||||
} else {
|
||||
// We cannot apply a disabled color by default: https://issuetracker.google.com/issues/280480132
|
||||
ElementTheme.colors.textDisabled
|
||||
}
|
||||
val colors = ListItemDefaults.colors(
|
||||
containerColor = Color.Transparent,
|
||||
headlineColor = style.headlineColor(),
|
||||
leadingIconColor = style.leadingIconColor(),
|
||||
trailingIconColor = style.trailingIconColor(),
|
||||
supportingColor = style.supportingTextColor(),
|
||||
disabledHeadlineColor = ListItemDefaultColors.headlineDisabled,
|
||||
disabledLeadingIconColor = ListItemDefaultColors.iconDisabled,
|
||||
disabledTrailingIconColor = ListItemDefaultColors.iconDisabled,
|
||||
)
|
||||
|
||||
val supportingContentColor = if (enabled) {
|
||||
ElementTheme.materialColors.onSurfaceVariant
|
||||
} else {
|
||||
// We cannot apply a disabled color by default: https://issuetracker.google.com/issues/280480132
|
||||
ElementTheme.colors.textDisabled
|
||||
}
|
||||
|
||||
val leadingTrailingContentColor = if (enabled) when (style) {
|
||||
ListItemStyle.Primary -> ElementTheme.colors.iconPrimary
|
||||
ListItemStyle.Destructive -> ElementTheme.colors.iconCriticalPrimary
|
||||
else -> ElementTheme.colors.iconTertiary
|
||||
} else {
|
||||
// We cannot apply a disabled color by default: https://issuetracker.google.com/issues/280480132
|
||||
ElementTheme.colors.iconDisabled
|
||||
}
|
||||
// We cannot just pass the disabled colors, they must be set manually: https://issuetracker.google.com/issues/280480132
|
||||
val headlineColor = if (enabled) colors.headlineColor else colors.disabledHeadlineColor
|
||||
val leadingContentColor = if (enabled) colors.leadingIconColor else colors.disabledLeadingIconColor
|
||||
val trailingContentColor = if (enabled) colors.trailingIconColor else colors.disabledTrailingIconColor
|
||||
|
||||
val decoratedHeadlineContent: @Composable () -> Unit = {
|
||||
CompositionLocalProvider(
|
||||
|
|
@ -97,7 +92,6 @@ fun ListItem(
|
|||
{
|
||||
CompositionLocalProvider(
|
||||
LocalTextStyle provides ElementTheme.materialTypography.bodyMedium,
|
||||
LocalContentColor provides supportingContentColor,
|
||||
) {
|
||||
content()
|
||||
}
|
||||
|
|
@ -106,31 +100,31 @@ fun ListItem(
|
|||
val decoratedLeadingContent: (@Composable () -> Unit)? = leadingContent?.let { content ->
|
||||
{
|
||||
CompositionLocalProvider(
|
||||
LocalContentColor provides leadingTrailingContentColor,
|
||||
LocalContentColor provides leadingContentColor,
|
||||
) {
|
||||
content()
|
||||
content.View()
|
||||
}
|
||||
}
|
||||
}
|
||||
val decoratedTrailingContent: (@Composable () -> Unit)? = trailingContent?.let { content ->
|
||||
{
|
||||
CompositionLocalProvider(
|
||||
LocalContentColor provides leadingTrailingContentColor,
|
||||
LocalTextStyle provides ElementTheme.typography.fontBodyMdRegular,
|
||||
LocalContentColor provides trailingContentColor,
|
||||
) {
|
||||
content()
|
||||
content.View()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
androidx.compose.material3.ListItem(
|
||||
headlineContent = decoratedHeadlineContent,
|
||||
modifier = modifier.clickable(enabled = enabled && onClick != null, onClick = onClick ?: {}),
|
||||
modifier = Modifier.clickable(enabled = enabled && onClick != null, onClick = onClick ?: {}).then(modifier),
|
||||
overlineContent = null,
|
||||
supportingContent = decoratedSupportingContent,
|
||||
leadingContent = decoratedLeadingContent,
|
||||
trailingContent = decoratedTrailingContent,
|
||||
colors = ListItemDefaults.colors(), // These aren't really used since we need the workaround for the disabled state color
|
||||
colors = colors,
|
||||
tonalElevation = 0.dp,
|
||||
shadowElevation = 0.dp,
|
||||
)
|
||||
|
|
@ -143,6 +137,47 @@ sealed interface ListItemStyle {
|
|||
object Default : ListItemStyle
|
||||
object Primary: ListItemStyle
|
||||
object Destructive : ListItemStyle
|
||||
|
||||
@Composable fun headlineColor() = when (this) {
|
||||
Default, Primary -> ListItemDefaultColors.headline
|
||||
Destructive -> ElementTheme.colors.textCriticalPrimary
|
||||
}
|
||||
|
||||
@Composable fun supportingTextColor() = when (this) {
|
||||
Default, Primary -> ListItemDefaultColors.supportingText
|
||||
// FIXME once we have a defined color for this value
|
||||
Destructive -> ElementTheme.colors.textCriticalPrimary.copy(alpha = 0.8f)
|
||||
}
|
||||
|
||||
@Composable fun leadingIconColor() = when (this) {
|
||||
Default -> ListItemDefaultColors.icon
|
||||
Primary -> ElementTheme.colors.iconPrimary
|
||||
Destructive -> ElementTheme.colors.iconCriticalPrimary
|
||||
}
|
||||
|
||||
@Composable fun trailingIconColor() = when (this) {
|
||||
Default -> ListItemDefaultColors.icon
|
||||
Primary -> ElementTheme.colors.iconPrimary
|
||||
Destructive -> ElementTheme.colors.iconCriticalPrimary
|
||||
}
|
||||
}
|
||||
|
||||
object ListItemDefaultColors {
|
||||
val headline: Color @Composable get() = ElementTheme.colors.textPrimary
|
||||
val headlineDisabled: Color @Composable get() = ElementTheme.colors.textDisabled
|
||||
val supportingText: Color @Composable get() = ElementTheme.materialColors.onSurfaceVariant
|
||||
val icon: Color @Composable get() = ElementTheme.colors.iconTertiary
|
||||
val iconDisabled: Color @Composable get() = ElementTheme.colors.iconDisabled
|
||||
|
||||
val colors: ListItemColors @Composable get() = ListItemDefaults.colors(
|
||||
headlineColor = headline,
|
||||
supportingColor = supportingText,
|
||||
leadingIconColor = icon,
|
||||
trailingIconColor = icon,
|
||||
disabledHeadlineColor = headlineDisabled,
|
||||
disabledLeadingIconColor = iconDisabled,
|
||||
disabledTrailingIconColor = iconDisabled,
|
||||
)
|
||||
}
|
||||
|
||||
// region: Simple list item
|
||||
|
|
@ -335,8 +370,9 @@ private object PreviewItems {
|
|||
@Composable
|
||||
fun ThreeLinesListItemPreview(
|
||||
modifier: Modifier = Modifier,
|
||||
leadingContent: @Composable (() -> Unit)? = null,
|
||||
trailingContent: @Composable (() -> Unit)? = null,
|
||||
style: ListItemStyle = ListItemStyle.Default,
|
||||
leadingContent: ListItemContent? = null,
|
||||
trailingContent: ListItemContent? = null,
|
||||
) {
|
||||
ElementThemedPreview {
|
||||
ListItem(
|
||||
|
|
@ -344,6 +380,7 @@ private object PreviewItems {
|
|||
supportingContent = PreviewItems.text(),
|
||||
leadingContent = leadingContent,
|
||||
trailingContent = trailingContent,
|
||||
style = style,
|
||||
modifier = modifier,
|
||||
)
|
||||
}
|
||||
|
|
@ -352,8 +389,9 @@ private object PreviewItems {
|
|||
@Composable
|
||||
fun TwoLinesListItemPreview(
|
||||
modifier: Modifier = Modifier,
|
||||
leadingContent: @Composable (() -> Unit)? = null,
|
||||
trailingContent: @Composable (() -> Unit)? = null,
|
||||
style: ListItemStyle = ListItemStyle.Default,
|
||||
leadingContent: ListItemContent? = null,
|
||||
trailingContent: ListItemContent? = null,
|
||||
) {
|
||||
ElementThemedPreview {
|
||||
ListItem(
|
||||
|
|
@ -361,6 +399,7 @@ private object PreviewItems {
|
|||
supportingContent = PreviewItems.textSingleLine(),
|
||||
leadingContent = leadingContent,
|
||||
trailingContent = trailingContent,
|
||||
style = style,
|
||||
modifier = modifier,
|
||||
)
|
||||
}
|
||||
|
|
@ -369,9 +408,9 @@ private object PreviewItems {
|
|||
@Composable
|
||||
fun OneLineListItemPreview(
|
||||
modifier: Modifier = Modifier,
|
||||
leadingContent: @Composable (() -> Unit)? = null,
|
||||
trailingContent: @Composable (() -> Unit)? = null,
|
||||
style: ListItemStyle = ListItemStyle.Default,
|
||||
leadingContent: ListItemContent? = null,
|
||||
trailingContent: ListItemContent? = null,
|
||||
enabled: Boolean = true,
|
||||
) {
|
||||
ElementThemedPreview {
|
||||
|
|
@ -402,25 +441,22 @@ private object PreviewItems {
|
|||
}
|
||||
|
||||
@Composable
|
||||
fun checkbox() = @Composable {
|
||||
fun checkbox(): ListItemContent {
|
||||
var checked by remember { mutableStateOf(false) }
|
||||
Checkbox(checked = checked, onCheckedChange = { checked = !checked })
|
||||
return ListItemContent.Checkbox(checked = checked, onChange = { checked = !checked })
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun radioButton() = @Composable {
|
||||
fun radioButton(): ListItemContent {
|
||||
var checked by remember { mutableStateOf(false) }
|
||||
RadioButton(selected = checked, onClick = { checked = !checked })
|
||||
return ListItemContent.RadioButton(selected = checked, onClick = { checked = !checked })
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun switch() = @Composable {
|
||||
fun switch() : ListItemContent {
|
||||
var checked by remember { mutableStateOf(false) }
|
||||
Switch(checked = checked, onCheckedChange = { checked = !checked })
|
||||
return ListItemContent.Switch(checked = checked, onChange = { checked = !checked })
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun icon() = @Composable {
|
||||
Icon(imageVector = Icons.Outlined.Share, contentDescription = null)
|
||||
}
|
||||
fun icon() = ListItemContent.Icon(iconSource = IconSource.Vector(Icons.Outlined.Share))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
|
|||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.filled.Share
|
||||
import androidx.compose.material.icons.outlined.Share
|
||||
import androidx.compose.material3.LocalContentColor
|
||||
import androidx.compose.material3.LocalTextStyle
|
||||
import androidx.compose.runtime.Composable
|
||||
|
|
@ -32,6 +33,7 @@ import androidx.compose.ui.text.AnnotatedString
|
|||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.unit.Dp
|
||||
import androidx.compose.ui.unit.dp
|
||||
import io.element.android.libraries.designsystem.components.list.ListItemContent
|
||||
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
|
||||
import io.element.android.libraries.designsystem.preview.PreviewGroup
|
||||
import io.element.android.libraries.theme.ElementTheme
|
||||
|
|
@ -249,7 +251,7 @@ internal fun ListSupportingTextDefaultPaddingPreview() {
|
|||
internal fun ListSupportingTextSmallPaddingPreview() {
|
||||
ElementThemedPreview {
|
||||
Column {
|
||||
ListItem(headlineContent = { Text("A title") }, leadingContent = { Icon(Icons.Default.Share, null) })
|
||||
ListItem(headlineContent = { Text("A title") }, leadingContent = ListItemContent.Icon(IconSource.Vector(Icons.Outlined.Share)))
|
||||
ListSupportingText(
|
||||
text = "Supporting line text lorem ipsum dolor sit amet, consectetur. Read more",
|
||||
contentPadding = ListSupportingTextDefaults.Padding.SmallLeadingContent,
|
||||
|
|
@ -263,7 +265,7 @@ internal fun ListSupportingTextSmallPaddingPreview() {
|
|||
internal fun ListSupportingTextLargePaddingPreview() {
|
||||
ElementThemedPreview {
|
||||
Column {
|
||||
ListItem(headlineContent = { Text("A title") }, leadingContent = { Switch(checked = true, onCheckedChange = null) })
|
||||
ListItem(headlineContent = { Text("A title") }, leadingContent = ListItemContent.Switch(checked = true, onChange = {}))
|
||||
ListSupportingText(
|
||||
text = "Supporting line text lorem ipsum dolor sit amet, consectetur. Read more",
|
||||
contentPadding = ListSupportingTextDefaults.Padding.LargeLeadingContent,
|
||||
|
|
|
|||
|
|
@ -50,7 +50,8 @@ private fun ContentToPreview() {
|
|||
buttons = { /*TODO*/ },
|
||||
icon = { /*TODO*/ },
|
||||
title = { /*TODO*/ },
|
||||
text = { DatePicker(state = state, showModeToggle = true) },
|
||||
subtitle = null,
|
||||
content = { DatePicker(state = state, showModeToggle = true) },
|
||||
shape = AlertDialogDefaults.shape,
|
||||
containerColor = AlertDialogDefaults.containerColor,
|
||||
tonalElevation = AlertDialogDefaults.TonalElevation,
|
||||
|
|
|
|||
|
|
@ -39,7 +39,8 @@ internal fun TimePickerHorizontalPreview() {
|
|||
buttons = { /*TODO*/ },
|
||||
icon = { /*TODO*/ },
|
||||
title = { /*TODO*/ },
|
||||
text = { TimePicker(state = rememberTimePickerState(), layoutType = TimePickerLayoutType.Horizontal) },
|
||||
subtitle = null,
|
||||
content = { TimePicker(state = rememberTimePickerState(), layoutType = TimePickerLayoutType.Horizontal) },
|
||||
shape = AlertDialogDefaults.shape,
|
||||
containerColor = AlertDialogDefaults.containerColor,
|
||||
tonalElevation = AlertDialogDefaults.TonalElevation,
|
||||
|
|
@ -60,7 +61,8 @@ internal fun TimePickerVerticalPreviewLight() {
|
|||
buttons = { /*TODO*/ },
|
||||
icon = { /*TODO*/ },
|
||||
title = { /*TODO*/ },
|
||||
text = { TimePicker(state = rememberTimePickerState(), layoutType = TimePickerLayoutType.Vertical) },
|
||||
subtitle = null,
|
||||
content = { TimePicker(state = rememberTimePickerState(), layoutType = TimePickerLayoutType.Vertical) },
|
||||
shape = AlertDialogDefaults.shape,
|
||||
containerColor = AlertDialogDefaults.containerColor,
|
||||
tonalElevation = AlertDialogDefaults.TonalElevation,
|
||||
|
|
@ -85,7 +87,8 @@ internal fun TimePickerVerticalPreviewDark() {
|
|||
buttons = { /*TODO*/ },
|
||||
icon = { /*TODO*/ },
|
||||
title = { /*TODO*/ },
|
||||
text = { TimePicker(state = pickerState, layoutType = TimePickerLayoutType.Vertical) },
|
||||
subtitle = null,
|
||||
content = { TimePicker(state = pickerState, layoutType = TimePickerLayoutType.Vertical) },
|
||||
shape = AlertDialogDefaults.shape,
|
||||
containerColor = AlertDialogDefaults.containerColor,
|
||||
tonalElevation = AlertDialogDefaults.TonalElevation,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue