secant-android-wallet/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/Text.kt

204 lines
5.3 KiB
Kotlin

package co.electriccoin.zcash.ui.design.component
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.text.style.TextOverflow
import co.electriccoin.zcash.ui.design.R
import co.electriccoin.zcash.ui.design.theme.ZcashTheme
@Composable
fun Header(
text: String,
modifier: Modifier = Modifier,
textAlign: TextAlign = TextAlign.Start,
color: Color = ZcashTheme.colors.onBackgroundHeader,
) {
Text(
text = text,
color = color,
textAlign = textAlign,
modifier = modifier,
style = MaterialTheme.typography.headlineLarge,
)
}
@Composable
@Suppress("LongParameterList")
fun BodySmall(
text: String,
modifier: Modifier = Modifier,
maxLines: Int = Int.MAX_VALUE,
overflow: TextOverflow = TextOverflow.Clip,
textAlign: TextAlign = TextAlign.Start,
color: Color = MaterialTheme.colorScheme.onBackground,
) {
Text(
text = text,
color = color,
maxLines = maxLines,
overflow = overflow,
textAlign = textAlign,
modifier = modifier,
style = MaterialTheme.typography.bodyMedium,
)
}
@Composable
@Suppress("LongParameterList")
fun Body(
text: String,
modifier: Modifier = Modifier,
maxLines: Int = Int.MAX_VALUE,
overflow: TextOverflow = TextOverflow.Clip,
textAlign: TextAlign = TextAlign.Start,
color: Color = MaterialTheme.colorScheme.onBackground,
) {
Text(
text = text,
color = color,
maxLines = maxLines,
overflow = overflow,
textAlign = textAlign,
modifier = modifier,
style = MaterialTheme.typography.bodyLarge,
)
}
@Composable
@Suppress("LongParameterList")
fun TitleLarge(
text: String,
modifier: Modifier = Modifier,
maxLines: Int = Int.MAX_VALUE,
overflow: TextOverflow = TextOverflow.Clip,
textAlign: TextAlign = TextAlign.Start,
color: Color = MaterialTheme.colorScheme.onBackground,
) {
Text(
text = text,
color = color,
maxLines = maxLines,
overflow = overflow,
textAlign = textAlign,
modifier = modifier,
style = MaterialTheme.typography.titleLarge,
)
}
@Composable
fun Small(
text: String,
modifier: Modifier = Modifier,
textAlign: TextAlign = TextAlign.Start,
color: Color = MaterialTheme.colorScheme.onBackground,
) {
Text(
text = text,
color = color,
textAlign = textAlign,
modifier = modifier,
style = MaterialTheme.typography.bodyMedium,
)
}
@Composable
fun ListItem(
text: String,
modifier: Modifier = Modifier
) {
Text(
text = text,
style = ZcashTheme.extendedTypography.listItem,
color = MaterialTheme.colorScheme.onBackground,
modifier = modifier
)
}
@Composable
fun ListHeader(
text: String,
modifier: Modifier = Modifier
) {
Text(
text = text,
style = ZcashTheme.extendedTypography.listItem,
color = ZcashTheme.colors.onBackgroundHeader,
modifier = modifier
)
}
@Composable
fun Reference(
text: String,
modifier: Modifier = Modifier,
textAlign: TextAlign = TextAlign.Start,
onClick: () -> Unit
) {
Box(
modifier =
Modifier
.wrapContentSize()
.clip(RoundedCornerShape(ZcashTheme.dimens.topAppBarActionRippleCorner))
.clickable { onClick() }
) {
Text(
text = text,
style =
MaterialTheme.typography.bodyLarge
.merge(
TextStyle(
color = ZcashTheme.colors.reference,
textAlign = textAlign,
textDecoration = TextDecoration.Underline
)
),
modifier = modifier
)
}
}
/**
* Pass amount of ZECs you want to display and the component appends ZEC symbol to it. We're using
* a custom font here, which is Roboto modified to replace the dollar symbol with the ZEC symbol internally.
*
* @param amount of ZECs to be displayed
* @param modifier to modify the Text UI element as needed
*/
@Composable
fun HeaderWithZecIcon(
amount: String,
modifier: Modifier = Modifier
) {
Text(
text = stringResource(R.string.amount_with_zec_currency_symbol, amount),
style = ZcashTheme.extendedTypography.zecBalance,
color = MaterialTheme.colorScheme.onBackground,
modifier = modifier
)
}
@Composable
fun BodyWithFiatCurrencySymbol(
amount: String,
modifier: Modifier = Modifier
) {
Text(
text = amount,
style = MaterialTheme.typography.bodyLarge,
color = MaterialTheme.colorScheme.onBackground,
modifier = modifier
)
}