From a90254baa605d781a58350c7aefc120c2f556dce Mon Sep 17 00:00:00 2001 From: David Perez Date: Tue, 31 Oct 2023 13:49:19 -0500 Subject: [PATCH] Add reusable BitwardenTextRow (#185) --- .../components/BitwardenExternalLinkRow.kt | 66 +++------------- .../platform/components/BitwardenTextRow.kt | 78 +++++++++++++++++++ 2 files changed, 90 insertions(+), 54 deletions(-) create mode 100644 app/src/main/java/com/x8bit/bitwarden/ui/platform/components/BitwardenTextRow.kt diff --git a/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/BitwardenExternalLinkRow.kt b/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/BitwardenExternalLinkRow.kt index 7b7e4aea0a..911f271b57 100644 --- a/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/BitwardenExternalLinkRow.kt +++ b/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/BitwardenExternalLinkRow.kt @@ -1,28 +1,12 @@ package com.x8bit.bitwarden.ui.platform.components -import androidx.compose.foundation.clickable -import androidx.compose.foundation.interaction.MutableInteractionSource -import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.defaultMinSize -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.padding -import androidx.compose.material.ripple.rememberRipple -import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable -import androidx.compose.runtime.remember -import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.painterResource -import androidx.compose.ui.semantics.contentDescription -import androidx.compose.ui.semantics.semantics import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.unit.dp import com.x8bit.bitwarden.R import com.x8bit.bitwarden.ui.platform.base.util.Text import com.x8bit.bitwarden.ui.platform.base.util.asText @@ -34,52 +18,26 @@ import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme * @param text The label for the row as a [Text]. * @param onClick The callback when the row is clicked. * @param modifier The modifier to be applied to the layout. + * @param withDivider Indicates if a divider should be drawn on the bottom of the row, defaults + * to `true`. */ @Composable fun BitwardenExternalLinkRow( text: Text, onClick: () -> Unit, modifier: Modifier = Modifier, + withDivider: Boolean = true, ) { - val resources = LocalContext.current.resources - Box( - contentAlignment = Alignment.BottomCenter, - modifier = modifier - .clickable( - interactionSource = remember { MutableInteractionSource() }, - indication = rememberRipple(color = MaterialTheme.colorScheme.primary), - onClick = onClick, - ) - .semantics(mergeDescendants = true) { - contentDescription = text.toString(resources) - }, + BitwardenTextRow( + text = text, + onClick = onClick, + modifier = modifier, + withDivider = withDivider, ) { - Row( - modifier = Modifier - .defaultMinSize(minHeight = 56.dp) - .padding(start = 16.dp, end = 24.dp, top = 8.dp, bottom = 8.dp) - .fillMaxWidth(), - horizontalArrangement = Arrangement.SpaceBetween, - verticalAlignment = Alignment.CenterVertically, - ) { - Text( - modifier = Modifier - .padding(end = 16.dp) - .weight(1f), - text = text(), - style = MaterialTheme.typography.bodyLarge, - color = MaterialTheme.colorScheme.onSurface, - ) - Icon( - painter = painterResource(id = R.drawable.ic_external_link), - contentDescription = null, - tint = MaterialTheme.colorScheme.onSurface, - ) - } - HorizontalDivider( - modifier = Modifier.padding(start = 16.dp), - thickness = 1.dp, - color = MaterialTheme.colorScheme.outlineVariant, + Icon( + painter = painterResource(id = R.drawable.ic_external_link), + contentDescription = null, + tint = MaterialTheme.colorScheme.onSurface, ) } } diff --git a/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/BitwardenTextRow.kt b/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/BitwardenTextRow.kt new file mode 100644 index 0000000000..154ecfbd53 --- /dev/null +++ b/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/BitwardenTextRow.kt @@ -0,0 +1,78 @@ +package com.x8bit.bitwarden.ui.platform.components + +import androidx.compose.foundation.clickable +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.defaultMinSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.material.ripple.rememberRipple +import androidx.compose.material3.HorizontalDivider +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.semantics.semantics +import androidx.compose.ui.unit.dp +import com.x8bit.bitwarden.ui.platform.base.util.Text + +/** + * Represents a clickable row of text and can contains an optional [content] that appears to the + * right of the [text]. + * + * @param text The label for the row as a [Text]. + * @param onClick The callback when the row is clicked. + * @param modifier The modifier to be applied to the layout. + * @param withDivider Indicates if a divider should be drawn on the bottom of the row, defaults + * to `false`. + * @param content The content of the [BitwardenTextRow]. + */ +@Composable +fun BitwardenTextRow( + text: Text, + onClick: () -> Unit, + modifier: Modifier = Modifier, + withDivider: Boolean = false, + content: (@Composable () -> Unit)? = null, +) { + Box( + contentAlignment = Alignment.BottomCenter, + modifier = modifier + .clickable( + interactionSource = remember { MutableInteractionSource() }, + indication = rememberRipple(color = MaterialTheme.colorScheme.primary), + onClick = onClick, + ) + .semantics(mergeDescendants = true) { }, + ) { + Row( + modifier = Modifier + .defaultMinSize(minHeight = 56.dp) + .padding(start = 16.dp, end = 24.dp, top = 8.dp, bottom = 8.dp) + .fillMaxWidth(), + horizontalArrangement = Arrangement.SpaceBetween, + verticalAlignment = Alignment.CenterVertically, + ) { + Text( + modifier = Modifier + .padding(end = 16.dp) + .weight(1f), + text = text(), + style = MaterialTheme.typography.bodyLarge, + color = MaterialTheme.colorScheme.onSurface, + ) + content?.invoke() + } + if (withDivider) { + HorizontalDivider( + modifier = Modifier.padding(start = 16.dp), + thickness = 1.dp, + color = MaterialTheme.colorScheme.outlineVariant, + ) + } + } +}