Use custom RadioButton
This commit is contained in:
parent
00752d851a
commit
91e92a5cc4
3 changed files with 99 additions and 7 deletions
|
|
@ -90,6 +90,7 @@ internal fun PollAnswers(
|
||||||
answerItems: ImmutableList<PollAnswerItem>,
|
answerItems: ImmutableList<PollAnswerItem>,
|
||||||
onAnswerSelected: (PollAnswer) -> Unit,
|
onAnswerSelected: (PollAnswer) -> Unit,
|
||||||
) {
|
) {
|
||||||
|
|
||||||
answerItems.forEach { answerItem ->
|
answerItems.forEach { answerItem ->
|
||||||
PollAnswerView(
|
PollAnswerView(
|
||||||
answerItem = answerItem,
|
answerItem = answerItem,
|
||||||
|
|
|
||||||
|
|
@ -24,6 +24,10 @@ import androidx.compose.foundation.layout.height
|
||||||
import androidx.compose.foundation.layout.size
|
import androidx.compose.foundation.layout.size
|
||||||
import androidx.compose.foundation.layout.width
|
import androidx.compose.foundation.layout.width
|
||||||
import androidx.compose.foundation.selection.selectable
|
import androidx.compose.foundation.selection.selectable
|
||||||
|
import androidx.compose.material.icons.Icons
|
||||||
|
import androidx.compose.material.icons.filled.CheckCircle
|
||||||
|
import androidx.compose.material.icons.filled.RadioButtonUnchecked
|
||||||
|
import androidx.compose.material3.IconButtonDefaults
|
||||||
import androidx.compose.runtime.Composable
|
import androidx.compose.runtime.Composable
|
||||||
import androidx.compose.ui.Alignment
|
import androidx.compose.ui.Alignment
|
||||||
import androidx.compose.ui.Modifier
|
import androidx.compose.ui.Modifier
|
||||||
|
|
@ -33,8 +37,9 @@ import androidx.compose.ui.semantics.Role
|
||||||
import androidx.compose.ui.unit.dp
|
import androidx.compose.ui.unit.dp
|
||||||
import io.element.android.libraries.designsystem.preview.DayNightPreviews
|
import io.element.android.libraries.designsystem.preview.DayNightPreviews
|
||||||
import io.element.android.libraries.designsystem.preview.ElementPreview
|
import io.element.android.libraries.designsystem.preview.ElementPreview
|
||||||
|
import io.element.android.libraries.designsystem.theme.components.Icon
|
||||||
|
import io.element.android.libraries.designsystem.theme.components.IconToggleButton
|
||||||
import io.element.android.libraries.designsystem.theme.components.LinearProgressIndicator
|
import io.element.android.libraries.designsystem.theme.components.LinearProgressIndicator
|
||||||
import io.element.android.libraries.designsystem.theme.components.RadioButton
|
|
||||||
import io.element.android.libraries.designsystem.theme.components.Text
|
import io.element.android.libraries.designsystem.theme.components.Text
|
||||||
import io.element.android.libraries.theme.ElementTheme
|
import io.element.android.libraries.theme.ElementTheme
|
||||||
import io.element.android.libraries.ui.strings.CommonPlurals
|
import io.element.android.libraries.ui.strings.CommonPlurals
|
||||||
|
|
@ -54,11 +59,25 @@ fun PollAnswerView(
|
||||||
role = Role.RadioButton,
|
role = Role.RadioButton,
|
||||||
)
|
)
|
||||||
) {
|
) {
|
||||||
RadioButton(
|
IconToggleButton(
|
||||||
modifier = Modifier.size(22.dp),
|
modifier = Modifier.size(22.dp),
|
||||||
selected = answerItem.isSelected,
|
checked = answerItem.isSelected,
|
||||||
onClick = null // null recommended for accessibility with screenreaders
|
colors = IconButtonDefaults.iconToggleButtonColors(
|
||||||
)
|
contentColor = ElementTheme.colors.iconSecondary,
|
||||||
|
checkedContentColor = ElementTheme.colors.iconPrimary,
|
||||||
|
disabledContentColor = ElementTheme.colors.iconDisabled,
|
||||||
|
),
|
||||||
|
onCheckedChange = { onClick() },
|
||||||
|
) {
|
||||||
|
Icon(
|
||||||
|
imageVector = if (answerItem.isSelected) {
|
||||||
|
Icons.Default.CheckCircle
|
||||||
|
} else {
|
||||||
|
Icons.Default.RadioButtonUnchecked
|
||||||
|
},
|
||||||
|
contentDescription = null,
|
||||||
|
)
|
||||||
|
}
|
||||||
Spacer(modifier = Modifier.width(12.dp))
|
Spacer(modifier = Modifier.width(12.dp))
|
||||||
Column {
|
Column {
|
||||||
Row {
|
Row {
|
||||||
|
|
@ -93,7 +112,7 @@ fun PollAnswerView(
|
||||||
@Composable
|
@Composable
|
||||||
internal fun PollAnswerViewNoResultsPreview() = ElementPreview {
|
internal fun PollAnswerViewNoResultsPreview() = ElementPreview {
|
||||||
PollAnswerView(
|
PollAnswerView(
|
||||||
answerItem = aPollAnswerItem(),
|
answerItem = aPollAnswerItem(isSelected = true),
|
||||||
onClick = { },
|
onClick = { },
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
@ -102,7 +121,7 @@ internal fun PollAnswerViewNoResultsPreview() = ElementPreview {
|
||||||
@Composable
|
@Composable
|
||||||
internal fun PollAnswerViewWithResultPreview() = ElementPreview {
|
internal fun PollAnswerViewWithResultPreview() = ElementPreview {
|
||||||
PollAnswerView(
|
PollAnswerView(
|
||||||
answerItem = aPollAnswerItem(isDisclosed = true),
|
answerItem = aPollAnswerItem(isDisclosed = false),
|
||||||
onClick = { }
|
onClick = { }
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
/*
|
||||||
|
* 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.theme.components
|
||||||
|
|
||||||
|
import androidx.compose.foundation.interaction.MutableInteractionSource
|
||||||
|
import androidx.compose.material.icons.Icons
|
||||||
|
import androidx.compose.material.icons.filled.CheckCircle
|
||||||
|
import androidx.compose.material.icons.filled.RadioButtonUnchecked
|
||||||
|
import androidx.compose.material3.IconButtonDefaults
|
||||||
|
import androidx.compose.material3.IconToggleButtonColors
|
||||||
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.runtime.getValue
|
||||||
|
import androidx.compose.runtime.mutableStateOf
|
||||||
|
import androidx.compose.runtime.remember
|
||||||
|
import androidx.compose.runtime.setValue
|
||||||
|
import androidx.compose.ui.Modifier
|
||||||
|
import androidx.compose.ui.tooling.preview.Preview
|
||||||
|
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
|
||||||
|
import io.element.android.libraries.designsystem.preview.PreviewGroup
|
||||||
|
|
||||||
|
@Composable
|
||||||
|
fun IconToggleButton(
|
||||||
|
checked: Boolean,
|
||||||
|
onCheckedChange: (Boolean) -> Unit,
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
enabled: Boolean = true,
|
||||||
|
colors: IconToggleButtonColors = IconButtonDefaults.iconToggleButtonColors(),
|
||||||
|
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
|
||||||
|
content: @Composable () -> Unit
|
||||||
|
) {
|
||||||
|
androidx.compose.material3.IconToggleButton(
|
||||||
|
checked = checked,
|
||||||
|
onCheckedChange = onCheckedChange,
|
||||||
|
modifier = modifier,
|
||||||
|
enabled = enabled,
|
||||||
|
colors = colors,
|
||||||
|
interactionSource = interactionSource,
|
||||||
|
content = content,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
@Preview(group = PreviewGroup.Toggles)
|
||||||
|
@Composable
|
||||||
|
internal fun IconToggleButtonPreview() = ElementThemedPreview(vertical = false) { ContentToPreview() }
|
||||||
|
|
||||||
|
@Composable
|
||||||
|
private fun ContentToPreview() {
|
||||||
|
var checked by remember { mutableStateOf(false) }
|
||||||
|
IconToggleButton(
|
||||||
|
checked = checked,
|
||||||
|
onCheckedChange = { checked = !checked },
|
||||||
|
) {
|
||||||
|
Icon(
|
||||||
|
imageVector = if (checked) Icons.Default.CheckCircle else Icons.Default.RadioButtonUnchecked,
|
||||||
|
contentDescription = "IconToggleButton"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue