Updated on 2026-08-14

This commit is contained in:
Tangem 2023-01-19 20:27:59 +08:00
parent 6d69a5706a
commit 9c1931f7d7
81 changed files with 686 additions and 981 deletions

View file

@ -41,10 +41,10 @@ import com.tangem.core.ui.res.TangemTheme
* */
@Composable
fun TextButton(
modifier: Modifier = Modifier,
text: String,
enabled: Boolean = true,
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
) {
TangemButton(
modifier = modifier,
@ -63,11 +63,11 @@ fun TextButton(
* */
@Composable
fun TextButtonIconLeft(
modifier: Modifier = Modifier,
text: String,
icon: Painter,
enabled: Boolean = true,
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
) {
TangemButton(
modifier = modifier,
@ -83,10 +83,10 @@ fun TextButtonIconLeft(
@Composable
fun WarningTextButton(
modifier: Modifier = Modifier,
text: String,
enabled: Boolean = true,
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
) {
TangemButton(
modifier = modifier,
@ -102,11 +102,11 @@ fun WarningTextButton(
@Composable
fun PrimaryButton(
modifier: Modifier = Modifier,
text: String,
onClick: () -> Unit,
modifier: Modifier = Modifier,
showProgress: Boolean = false,
enabled: Boolean = true,
onClick: () -> Unit,
) {
TangemButton(
modifier = modifier,
@ -124,12 +124,12 @@ fun PrimaryButton(
* */
@Composable
fun PrimaryButtonIconRight(
modifier: Modifier = Modifier,
text: String,
icon: Painter,
onClick: () -> Unit,
modifier: Modifier = Modifier,
showProgress: Boolean = false,
enabled: Boolean = true,
onClick: () -> Unit,
) {
TangemButton(
modifier = modifier,
@ -147,12 +147,12 @@ fun PrimaryButtonIconRight(
* */
@Composable
fun PrimaryButtonIconLeft(
modifier: Modifier = Modifier,
text: String,
icon: Painter,
onClick: () -> Unit,
modifier: Modifier = Modifier,
showProgress: Boolean = false,
enabled: Boolean = true,
onClick: () -> Unit,
) {
TangemButton(
modifier = modifier,
@ -167,11 +167,11 @@ fun PrimaryButtonIconLeft(
@Composable
fun SecondaryButton(
modifier: Modifier = Modifier,
text: String,
onClick: () -> Unit,
modifier: Modifier = Modifier,
showProgress: Boolean = false,
enabled: Boolean = true,
onClick: () -> Unit,
) {
TangemButton(
modifier = modifier,
@ -189,12 +189,12 @@ fun SecondaryButton(
* */
@Composable
fun SecondaryButtonIconRight(
modifier: Modifier = Modifier,
text: String,
icon: Painter,
onClick: () -> Unit,
modifier: Modifier = Modifier,
showProgress: Boolean = false,
enabled: Boolean = true,
onClick: () -> Unit,
) {
TangemButton(
modifier = modifier,
@ -212,12 +212,12 @@ fun SecondaryButtonIconRight(
* */
@Composable
fun SecondaryButtonIconLeft(
modifier: Modifier = Modifier,
text: String,
icon: Painter,
onClick: () -> Unit,
modifier: Modifier = Modifier,
showProgress: Boolean = false,
enabled: Boolean = true,
onClick: () -> Unit,
) {
TangemButton(
modifier = modifier,
@ -234,13 +234,13 @@ fun SecondaryButtonIconLeft(
@Suppress("LongParameterList")
@Composable
private fun TangemButton(
modifier: Modifier = Modifier,
text: String,
icon: TangemButtonIcon,
onClick: () -> Unit,
colors: ButtonColors,
showProgress: Boolean,
enabled: Boolean,
modifier: Modifier = Modifier,
size: TangemButtonSize = TangemButtonSize.Default,
elevation: ButtonElevation = TangemButtonsDefaults.elevation,
) {

View file

@ -26,104 +26,104 @@ import com.tangem.core.ui.res.textColor
@Preview(widthDp = 328, heightDp = 48, showBackground = true)
@Composable
fun Preview_PrimaryStartIconButton_Enabled_InLightTheme() {
private fun Preview_PrimaryStartIconButton_Enabled_InLightTheme() {
TangemTheme(isDark = false) {
PrimaryStartIconButton(
text = "Manage tokens",
iconResId = R.drawable.ic_tangem_24,
enabled = true,
onClicked = {},
onClick = {},
)
}
}
@Preview(widthDp = 328, heightDp = 48, showBackground = true)
@Composable
fun Preview_PrimaryStartIconButton_Enabled_InDarkTheme() {
private fun Preview_PrimaryStartIconButton_Enabled_InDarkTheme() {
TangemTheme(isDark = true) {
PrimaryStartIconButton(
text = "Manage tokens",
iconResId = R.drawable.ic_tangem_24,
enabled = true,
onClicked = {},
onClick = {},
)
}
}
@Preview(widthDp = 328, heightDp = 48, showBackground = true)
@Composable
fun Preview_PrimaryStartIconButton_Disabled_InLightTheme() {
private fun Preview_PrimaryStartIconButton_Disabled_InLightTheme() {
TangemTheme(isDark = false) {
PrimaryStartIconButton(
text = "Manage tokens",
iconResId = R.drawable.ic_tangem_24,
enabled = false,
onClicked = {},
onClick = {},
)
}
}
@Preview(widthDp = 328, heightDp = 48, showBackground = true)
@Composable
fun Preview_PrimaryStartIconButton_Disabled_InDarkTheme() {
private fun Preview_PrimaryStartIconButton_Disabled_InDarkTheme() {
TangemTheme(isDark = true) {
PrimaryStartIconButton(
text = "Manage tokens",
iconResId = R.drawable.ic_tangem_24,
enabled = false,
onClicked = {},
onClick = {},
)
}
}
@Preview(widthDp = 328, heightDp = 48, showBackground = true)
@Composable
fun Preview_PrimaryEndIconButton_Enabled_InLightTheme() {
private fun Preview_PrimaryEndIconButton_Enabled_InLightTheme() {
TangemTheme(isDark = false) {
PrimaryEndIconButton(
text = "Manage tokens",
iconResId = R.drawable.ic_tangem_24,
enabled = true,
onClicked = {},
onClick = {},
)
}
}
@Preview(widthDp = 328, heightDp = 48, showBackground = true)
@Composable
fun Preview_PrimaryEndIconButton_Enabled_InDarkTheme() {
private fun Preview_PrimaryEndIconButton_Enabled_InDarkTheme() {
TangemTheme(isDark = true) {
PrimaryEndIconButton(
text = "Manage tokens",
iconResId = R.drawable.ic_tangem_24,
enabled = true,
onClicked = {},
onClick = {},
)
}
}
@Preview(widthDp = 328, heightDp = 48, showBackground = true)
@Composable
fun Preview_PrimaryEndIconButton_Disabled_InLightTheme() {
private fun Preview_PrimaryEndIconButton_Disabled_InLightTheme() {
TangemTheme(isDark = false) {
PrimaryEndIconButton(
text = "Manage tokens",
iconResId = R.drawable.ic_tangem_24,
enabled = false,
onClicked = {},
onClick = {},
)
}
}
@Preview(widthDp = 328, heightDp = 48, showBackground = true)
@Composable
fun Preview_PrimaryEndIconButton_Disabled_InDarkTheme() {
private fun Preview_PrimaryEndIconButton_Disabled_InDarkTheme() {
TangemTheme(isDark = true) {
PrimaryEndIconButton(
text = "Manage tokens",
iconResId = R.drawable.ic_tangem_24,
enabled = false,
onClicked = {},
onClick = {},
)
}
}
@ -135,7 +135,7 @@ fun Preview_PrimaryEndIconButton_Disabled_InDarkTheme() {
* @param text button text
* @param iconResId button icon res id
* @param enabled controls the enabled state of the button
* @param onClicked the lambda to be invoked when this button is pressed
* @param onClick the lambda to be invoked when this button is pressed
*
* @see <a href = "https://www.figma.com/file/14ISV23YB1yVW1uNVwqrKv/Android?node-id=233%3A258&t=WdN5XpixzZLlQAZO-4"
* >Figma component</a>
@ -143,20 +143,23 @@ fun Preview_PrimaryEndIconButton_Disabled_InDarkTheme() {
@Deprecated("Use PrimaryButtonIconRight instead")
@Composable
fun PrimaryStartIconButton(
modifier: Modifier = Modifier,
text: String,
@DrawableRes iconResId: Int,
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
onClicked: () -> Unit,
) {
PrimaryButtonRow(modifier = modifier, enabled = enabled, onClicked = onClicked) {
Icon(
painter = painterResource(id = iconResId),
contentDescription = null,
)
Spacer(modifier = Modifier.width(dimensionResource(R.dimen.spacing8)))
Text(text = text)
}
PrimaryButtonRow(
modifier = modifier, enabled = enabled, onClick = onClick,
content = {
Icon(
painter = painterResource(id = iconResId),
contentDescription = null,
)
Spacer(modifier = Modifier.width(dimensionResource(R.dimen.spacing8)))
Text(text = text)
},
)
}
/**
@ -166,7 +169,7 @@ fun PrimaryStartIconButton(
* @param text button text
* @param iconResId button icon res id
* @param enabled controls the enabled state of the button
* @param onClicked the lambda to be invoked when this button is pressed
* @param onClick the lambda to be invoked when this button is pressed
*
* @see <a href = "https://www.figma.com/file/14ISV23YB1yVW1uNVwqrKv/Android?node-id=68%3A47&t=WdN5XpixzZLlQAZO-4"
* >Figma component</a>
@ -174,31 +177,34 @@ fun PrimaryStartIconButton(
@Deprecated("Use PrimaryButtonIconLeft instead")
@Composable
fun PrimaryEndIconButton(
modifier: Modifier = Modifier,
text: String,
@DrawableRes iconResId: Int,
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
onClicked: () -> Unit,
) {
PrimaryButtonRow(modifier = modifier, enabled = enabled, onClicked = onClicked) {
Text(text = text)
Spacer(modifier = Modifier.width(dimensionResource(R.dimen.spacing8)))
Icon(
painter = painterResource(id = iconResId),
contentDescription = null,
)
}
PrimaryButtonRow(
modifier = modifier, enabled = enabled, onClick = onClick,
content = {
Text(text = text)
Spacer(modifier = Modifier.width(dimensionResource(R.dimen.spacing8)))
Icon(
painter = painterResource(id = iconResId),
contentDescription = null,
)
},
)
}
@Composable
private fun PrimaryButtonRow(
modifier: Modifier,
enabled: Boolean,
onClicked: () -> Unit,
onClick: () -> Unit,
content: @Composable (RowScope.() -> Unit),
modifier: Modifier = Modifier,
) {
Button(
onClick = onClicked,
onClick = onClick,
modifier = modifier
.fillMaxWidth()
.height(dimensionResource(R.dimen.size48)),

View file

@ -8,6 +8,7 @@ import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
@ -39,7 +40,6 @@ import com.valentinilk.shimmer.shimmer
*/
@Composable
fun SmallInfoCard(
modifier: Modifier = Modifier,
startText: String,
endText: String,
isLoading: Boolean = false,
@ -50,7 +50,6 @@ fun SmallInfoCard(
elevation = TangemTheme.dimens.elevation2,
) {
CardInfoBox(
modifier = modifier,
startText = startText,
endText = endText,
isLoading = isLoading,
@ -70,7 +69,6 @@ fun SmallInfoCard(
*/
@Composable
fun SmallInfoCardWithWarning(
modifier: Modifier = Modifier,
startText: String,
endText: String,
warningText: String,
@ -81,8 +79,7 @@ fun SmallInfoCardWithWarning(
elevation = TangemTheme.dimens.elevation2,
) {
Column(
modifier = modifier
.fillMaxWidth(),
modifier = Modifier.fillMaxWidth(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
) {
@ -148,7 +145,6 @@ fun SmallInfoCardWithWarning(
*/
@Composable
fun CardWithIcon(
modifier: Modifier = Modifier,
title: String,
description: String,
icon: @Composable () -> Unit,
@ -160,7 +156,6 @@ fun CardWithIcon(
elevation = TangemTheme.dimens.elevation2,
) {
IconWithTitleAndDescription(
modifier = modifier,
title = title,
description = description,
icon = icon,
@ -188,10 +183,9 @@ fun IconWithTitleAndDescription(
description: String,
icon: @Composable () -> Unit,
additionalContent: @Composable () -> Unit = {},
modifier: Modifier = Modifier,
) {
Row(
modifier = modifier
modifier = Modifier
.wrapContentHeight()
.fillMaxWidth()
.padding(
@ -244,15 +238,14 @@ fun IconWithTitleAndDescription(
@Composable
private fun CardInfoBox(
modifier: Modifier = Modifier,
startText: String,
endText: String,
isLoading: Boolean = false,
) {
Row(
modifier = modifier
modifier = Modifier
.fillMaxWidth()
.height(TangemTheme.dimens.size48)
.heightIn(TangemTheme.dimens.size48)
.padding(
horizontal = TangemTheme.dimens.spacing16,
vertical = TangemTheme.dimens.spacing12,
@ -325,7 +318,7 @@ private fun CardsPreview() {
@Preview(showBackground = true)
@Composable
fun Preview_Cards_InLightTheme() {
private fun Preview_Cards_InLightTheme() {
TangemTheme(isDark = false) {
CardsPreview()
}
@ -333,7 +326,7 @@ fun Preview_Cards_InLightTheme() {
@Preview(showBackground = true)
@Composable
fun Preview_InfoCardWithWarning_InDarkTheme() {
private fun Preview_InfoCardWithWarning_InDarkTheme() {
TangemTheme(isDark = true) {
CardsPreview()
}
@ -341,7 +334,7 @@ fun Preview_InfoCardWithWarning_InDarkTheme() {
@Preview(widthDp = 328, heightDp = 48, showBackground = true)
@Composable
fun Preview_SimpleInfoCard_InLightTheme() {
private fun Preview_SimpleInfoCard_InLightTheme() {
TangemTheme(isDark = false) {
SmallInfoCard(startText = "Balance", endText = "0.4405434 BTC")
}
@ -349,7 +342,7 @@ fun Preview_SimpleInfoCard_InLightTheme() {
@Preview(widthDp = 328, heightDp = 48, showBackground = true)
@Composable
fun Preview_SimpleInfoCard_InDarkTheme() {
private fun Preview_SimpleInfoCard_InDarkTheme() {
TangemTheme(isDark = true) {
SmallInfoCard(startText = "Balance", endText = "0.4405434 BTC")
}

View file

@ -16,7 +16,7 @@ import androidx.compose.ui.unit.sp
import com.tangem.core.ui.res.TangemTheme
@Composable
fun CurrencyPlaceholderIcon(modifier: Modifier = Modifier, id: String) {
fun CurrencyPlaceholderIcon(id: String, modifier: Modifier = Modifier) {
val letterColor: Color = TangemTheme.colors.text.primary2
val circleColor: Color = TangemTheme.colors.icon.secondary
@ -42,7 +42,7 @@ fun CurrencyPlaceholderIcon(modifier: Modifier = Modifier, id: String) {
@Preview(showBackground = true, heightDp = 40, widthDp = 40)
@Composable
fun Preview_CurrencyPlaceholderIcon_InLightTheme() {
private fun Preview_CurrencyPlaceholderIcon_InLightTheme() {
TangemTheme(isDark = false) {
CurrencyPlaceholderIcon(id = "DAI")
}
@ -50,7 +50,7 @@ fun Preview_CurrencyPlaceholderIcon_InLightTheme() {
@Preview(showBackground = true, heightDp = 40, widthDp = 40)
@Composable
fun Preview_CurrencyPlaceholderIcon_InDarkTheme() {
private fun Preview_CurrencyPlaceholderIcon_InDarkTheme() {
TangemTheme(isDark = true) {
CurrencyPlaceholderIcon(id = "DAI")
}

View file

@ -24,12 +24,11 @@ import com.tangem.core.ui.res.TangemTheme
*/
@Composable
fun BasicDialog(
modifier: Modifier = Modifier,
message: String,
title: String? = null,
confirmButton: DialogButton,
dismissButton: DialogButton? = null,
onDismissDialog: () -> Unit,
title: String? = null,
dismissButton: DialogButton? = null,
) {
AlertDialog(
text = {
@ -68,8 +67,7 @@ fun BasicDialog(
}
},
shape = TangemTheme.shapes.roundedCornersLarge,
modifier = modifier
.padding(TangemTheme.dimens.spacing24),
modifier = Modifier.padding(TangemTheme.dimens.spacing24),
)
}
@ -79,13 +77,8 @@ data class DialogButton(
)
@Composable
fun SimpleOkDialog(
modifier: Modifier = Modifier,
message: String,
onDismissDialog: () -> Unit,
) {
fun SimpleOkDialog(message: String, onDismissDialog: () -> Unit) {
BasicDialog(
modifier = modifier,
message = message,
confirmButton = DialogButton(onClick = onDismissDialog),
onDismissDialog = onDismissDialog,
@ -95,23 +88,28 @@ fun SimpleOkDialog(
// region Preview
@Composable
private fun SimpleOkDialogPreview() = SimpleOkDialog(
message = "All protected passwords will be deleted from the " +
"secure storage, you must enter the wallet password to work with the app.",
) {}
private fun SimpleOkDialogPreview() {
SimpleOkDialog(
message = "All protected passwords will be deleted from the " +
"secure storage, you must enter the wallet password to work with the app.",
) {}
}
@Composable
private fun BasicDialogPreview() = BasicDialog(
message = "All protected passwords will be deleted from the secure storage, you must enter the wallet password " +
"to work with the app",
title = "Attention",
confirmButton = DialogButton {},
dismissButton = DialogButton {},
) {}
private fun BasicDialogPreview() {
BasicDialog(
message = "All protected passwords will be deleted from the secure storage, you must enter the wallet " +
"password to work with the app",
title = "Attention",
confirmButton = DialogButton {},
dismissButton = DialogButton {},
onDismissDialog = {},
)
}
@Preview(showBackground = true)
@Composable
fun Preview_SimpleOkDialog_InLightTheme() {
private fun Preview_SimpleOkDialog_InLightTheme() {
TangemTheme(isDark = false) {
SimpleOkDialogPreview()
}
@ -119,7 +117,7 @@ fun Preview_SimpleOkDialog_InLightTheme() {
@Preview(showBackground = true)
@Composable
fun Preview_BasicDialog_InLightTheme() {
private fun Preview_BasicDialog_InLightTheme() {
TangemTheme(isDark = false) {
BasicDialogPreview()
}
@ -127,7 +125,7 @@ fun Preview_BasicDialog_InLightTheme() {
@Preview(showBackground = true)
@Composable
fun Preview_SimpleOkDialog_InDarkTheme() {
private fun Preview_SimpleOkDialog_InDarkTheme() {
TangemTheme(isDark = true) {
SimpleOkDialogPreview()
}
@ -135,7 +133,7 @@ fun Preview_SimpleOkDialog_InDarkTheme() {
@Preview(showBackground = true)
@Composable
fun Preview_BasicDialog_InDarkTheme() {
private fun Preview_BasicDialog_InDarkTheme() {
TangemTheme(isDark = true) {
BasicDialogPreview()
}

View file

@ -16,10 +16,10 @@ import androidx.compose.ui.unit.sp
@Composable
fun ResizableText(
text: String,
fontSizeRange: FontSizeRange,
modifier: Modifier = Modifier,
color: Color = Color.Unspecified,
style: TextStyle = LocalTextStyle.current,
fontSizeRange: FontSizeRange,
) {
val fontSizeValue = remember { mutableStateOf(fontSizeRange.max.value) }
val readyToDraw = remember { mutableStateOf(false) }

View file

@ -46,15 +46,15 @@ import com.tangem.core.ui.res.TangemTheme
*/
@Composable
fun ResultScreenContent(
modifier: Modifier = Modifier,
resultMessage: String,
onButtonClick: () -> Unit,
modifier: Modifier = Modifier,
@StringRes title: Int = R.string.common_success,
resultColor: Color = TangemTheme.colors.icon.accent,
@DrawableRes icon: Int = R.drawable.ic_check_24,
@DrawableRes secondaryButtonIcon: Int? = null,
@StringRes secondaryButtonText: Int? = null,
onSecondaryButtonClick: (() -> Unit)? = null,
onButtonClick: () -> Unit,
) {
Column(
modifier = modifier
@ -92,8 +92,6 @@ fun ResultScreenContent(
secondaryButtonText = secondaryButtonText,
secondaryButtonIcon = secondaryButtonIcon,
onSecondaryButtonClick = onSecondaryButtonClick,
modifier = Modifier
.fillMaxWidth(),
)
SpacerH12()
}
@ -142,23 +140,22 @@ fun SuccessImage(
@Composable
private fun SecondaryButtonForResultScreen(
modifier: Modifier = Modifier,
@StringRes secondaryButtonText: Int,
onSecondaryButtonClick: () -> Unit,
@DrawableRes secondaryButtonIcon: Int? = null,
onSecondaryButtonClick: (() -> Unit),
) {
if (secondaryButtonIcon != null) {
SecondaryButtonIconLeft(
text = stringResource(id = secondaryButtonText),
icon = painterResource(id = secondaryButtonIcon),
onClick = onSecondaryButtonClick,
modifier = modifier,
modifier = Modifier.fillMaxWidth(),
)
} else {
SecondaryButton(
text = stringResource(id = secondaryButtonText),
onClick = onSecondaryButtonClick,
modifier = modifier,
modifier = Modifier.fillMaxWidth(),
)
}
}
@ -177,7 +174,7 @@ private fun SuccessScreenPreview() {
@Preview(showBackground = true)
@Composable
fun Preview_SuccessScreenContent_InLightTheme() {
private fun Preview_SuccessScreenContent_InLightTheme() {
TangemTheme(isDark = false) {
SuccessScreenPreview()
}
@ -185,7 +182,7 @@ fun Preview_SuccessScreenContent_InLightTheme() {
@Preview(showBackground = true)
@Composable
fun Preview_SuccessScreenContent_InDarkTheme() {
private fun Preview_SuccessScreenContent_InDarkTheme() {
TangemTheme(isDark = true) {
SuccessScreenPreview()
}

View file

@ -50,9 +50,9 @@ import com.tangem.core.ui.res.TangemTypography
* */
@Composable
fun OutlineTextField(
modifier: Modifier = Modifier,
value: TextFieldValue,
onValueChange: (TextFieldValue) -> Unit,
modifier: Modifier = Modifier,
label: String? = null,
placeholder: String? = null,
caption: String? = null,
@ -82,10 +82,10 @@ fun OutlineTextField(
@Suppress("LongMethod")
@Composable
private fun TangemTextField(
modifier: Modifier = Modifier,
value: TextFieldValue,
singleLine: Boolean,
onValueChange: (TextFieldValue) -> Unit,
modifier: Modifier = Modifier,
label: String? = null,
placeholder: String? = null,
caption: String? = null,
@ -331,6 +331,7 @@ internal data class TangemTextFieldColors(
return rememberUpdatedState(if (isError) errorCursorColor else cursorColor)
}
@Suppress("TopLevelComposableFunctions")
@Composable
fun captionColor(enabled: Boolean, isError: Boolean): State<Color> {
return rememberUpdatedState(

View file

@ -25,13 +25,11 @@ import com.tangem.core.ui.res.TangemTheme
*/
@Composable
fun WarningCard(
modifier: Modifier = Modifier,
title: String,
description: String,
icon: @Composable (() -> Unit)? = null,
) {
WarningCardSurface(
modifier = modifier,
content = {
WarningBody(
title = title,
@ -54,14 +52,12 @@ fun WarningCard(
*/
@Composable
fun ClickableWarningCard(
modifier: Modifier = Modifier,
title: String,
description: String,
icon: @Composable (() -> Unit)? = null,
onClick: () -> Unit,
) {
WarningCardSurface(
modifier = modifier,
content = {
WarningBody(title = title, description = description, icon = icon) {
SpacerW12()
@ -88,14 +84,12 @@ fun ClickableWarningCard(
*/
@Composable
fun RefreshableWaringCard(
modifier: Modifier = Modifier,
title: String,
description: String,
icon: @Composable (() -> Unit)? = null,
onClick: () -> Unit,
) {
WarningCardSurface(
modifier = modifier,
content = {
WarningBody(title = title, description = description, icon = icon) {
SpacerW12()
@ -114,14 +108,12 @@ fun RefreshableWaringCard(
@Composable
private fun WarningBody(
modifier: Modifier = Modifier,
title: String,
description: String,
icon: @Composable (() -> Unit)? = null,
additionalContent: @Composable () -> Unit = {},
) {
IconWithTitleAndDescription(
modifier = modifier,
title = title,
description = description,
additionalContent = additionalContent,
@ -136,7 +128,6 @@ private fun WarningBody(
@Composable
private fun WarningCardSurface(
modifier: Modifier = Modifier,
onClick: (() -> Unit)? = null,
content: @Composable () -> Unit,
) {
@ -144,7 +135,7 @@ private fun WarningCardSurface(
shape = RoundedCornerShape(TangemTheme.dimens.size12),
color = TangemTheme.colors.background.primary,
elevation = TangemTheme.dimens.elevation2,
modifier = modifier.clickable(
modifier = Modifier.clickable(
enabled = onClick != null,
onClick = onClick ?: {},
),
@ -158,7 +149,7 @@ private fun WarningCardSurface(
// region Preview
@Composable
fun WarningsPreview() {
private fun WarningsPreview() {
Column(modifier = Modifier.fillMaxWidth()) {
WarningCard(
title = "Exchange rate has expired",
@ -181,7 +172,7 @@ fun WarningsPreview() {
@Preview(showBackground = true)
@Composable
fun Preview_Warning_InLightTheme() {
private fun Preview_Warning_InLightTheme() {
TangemTheme(isDark = false) {
WarningsPreview()
}
@ -189,7 +180,7 @@ fun Preview_Warning_InLightTheme() {
@Preview(showBackground = true)
@Composable
fun Preview_Warning_InDarkTheme() {
private fun Preview_Warning_InDarkTheme() {
TangemTheme(isDark = true) {
WarningsPreview()
}

View file

@ -2,7 +2,7 @@ package com.tangem.core.ui.components.appbar
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.Icon
@ -35,7 +35,7 @@ fun AppBarWithAdditionalButtons(
Box(
modifier = Modifier
.fillMaxWidth()
.height(TangemTheme.dimens.size56)
.heightIn(TangemTheme.dimens.size56)
.padding(all = TangemTheme.dimens.spacing16),
) {
if (startButton != null) {
@ -72,7 +72,7 @@ fun AppBarWithAdditionalButtons(
@Preview(widthDp = 360, heightDp = 56, showBackground = true)
@Composable
fun Preview_AppBarWithAdditionalButtons_InLightTheme() {
private fun Preview_AppBarWithAdditionalButtons_InLightTheme() {
TangemTheme(isDark = false) {
AppBarWithAdditionalButtons(
text = "Tangem",
@ -90,7 +90,7 @@ fun Preview_AppBarWithAdditionalButtons_InLightTheme() {
@Preview(widthDp = 360, heightDp = 56, showBackground = true)
@Composable
fun Preview_AppBarWithAdditionalButtons_InDarkTheme() {
private fun Preview_AppBarWithAdditionalButtons_InDarkTheme() {
TangemTheme(isDark = true) {
AppBarWithAdditionalButtons(
text = "Tangem",
@ -108,7 +108,7 @@ fun Preview_AppBarWithAdditionalButtons_InDarkTheme() {
@Preview(widthDp = 360, heightDp = 56, showBackground = true)
@Composable
fun Preview_AppBarWithOnlyStartButtons_InLightTheme() {
private fun Preview_AppBarWithOnlyStartButtons_InLightTheme() {
TangemTheme(isDark = false) {
AppBarWithAdditionalButtons(
text = "Tangem",
@ -122,7 +122,7 @@ fun Preview_AppBarWithOnlyStartButtons_InLightTheme() {
@Preview(widthDp = 360, heightDp = 56, showBackground = true)
@Composable
fun Preview_AppBarWithOnlyStartButtons_InDarkTheme() {
private fun Preview_AppBarWithOnlyStartButtons_InDarkTheme() {
TangemTheme(isDark = true) {
AppBarWithAdditionalButtons(
text = "Tangem",
@ -136,7 +136,7 @@ fun Preview_AppBarWithOnlyStartButtons_InDarkTheme() {
@Preview(widthDp = 360, heightDp = 56, showBackground = true)
@Composable
fun Preview_AppBarWithOnlyEndButtons_InLightTheme() {
private fun Preview_AppBarWithOnlyEndButtons_InLightTheme() {
TangemTheme(isDark = false) {
AppBarWithAdditionalButtons(
text = "Tangem",
@ -150,7 +150,7 @@ fun Preview_AppBarWithOnlyEndButtons_InLightTheme() {
@Preview(widthDp = 360, heightDp = 56, showBackground = true)
@Composable
fun Preview_AppBarWithOnlyEndButtons_InDarkTheme() {
private fun Preview_AppBarWithOnlyEndButtons_InDarkTheme() {
TangemTheme(isDark = true) {
AppBarWithAdditionalButtons(
text = "Tangem",

View file

@ -30,9 +30,9 @@ import com.tangem.core.ui.res.TangemTheme
*/
@Composable
fun AppBarWithBackButton(
onBackClick: () -> Unit,
text: String? = null,
@DrawableRes iconRes: Int? = null,
onBackClick: () -> Unit,
) {
Row(
modifier = Modifier
@ -63,7 +63,7 @@ fun AppBarWithBackButton(
@Preview(widthDp = 360, heightDp = 56, showBackground = true)
@Composable
fun PreviewAppBarWithBackButtonInLightTheme() {
private fun PreviewAppBarWithBackButtonInLightTheme() {
TangemTheme(isDark = false) {
AppBarWithBackButton(text = "Title", onBackClick = {})
}
@ -71,7 +71,7 @@ fun PreviewAppBarWithBackButtonInLightTheme() {
@Preview(widthDp = 360, heightDp = 56, showBackground = true)
@Composable
fun PreviewAppBarWithBackButtonInDarkTheme() {
private fun PreviewAppBarWithBackButtonInDarkTheme() {
TangemTheme(isDark = true) {
AppBarWithBackButton(text = "Title", onBackClick = {})
}

View file

@ -45,8 +45,8 @@ import com.tangem.core.ui.res.TangemTheme
* @param expandedInitially whether the search is expanded on launch
* @param tint tint for most of the visual elements of toolbar
* @param onBackClick action when close button is clicked
* @param onSearchChanged action when search is modified
* @param onSearchDisplayClosed action when search is closed
* @param onSearchChange action when search is modified
* @param onSearchDisplayClose action when search is closed
*
* @see <a href =
* "https://www.figma.com/file/Vs6SkVsFnUPsSCNwlnVf5U/Android-%E2%80%93-UI?node-id=1123%3A4068&t=xj8BBj5DfCWn2Mli-1"
@ -54,36 +54,32 @@ import com.tangem.core.ui.res.TangemTheme
*/
@Composable
fun ExpandableSearchView(
modifier: Modifier = Modifier,
onBackClick: () -> Unit,
onSearchChange: (String) -> Unit,
onSearchDisplayClose: () -> Unit,
title: String? = null,
placeholderSearchText: String = "",
expandedInitially: Boolean = false,
tint: Color = TangemTheme.colors.text.primary1,
onBackClick: () -> Unit,
onSearchChanged: (String) -> Unit,
onSearchDisplayClosed: () -> Unit,
) {
val (expanded, onExpandedChanged) = remember {
mutableStateOf(expandedInitially)
}
Crossfade(targetState = expanded) { isSearchFieldVisible ->
if (isSearchFieldVisible) {
ExpandedSearchView(
placeholderSearchText = placeholderSearchText,
onSearchChanged = onSearchChanged,
onSearchDisplayClosed = onSearchDisplayClosed,
onExpandedChanged = onExpandedChanged,
modifier = modifier,
onSearchChange = onSearchChange,
onSearchDisplayClose = onSearchDisplayClose,
onExpandedChange = onExpandedChanged,
tint = tint,
)
} else {
CollapsedSearchView(
title = title,
onBackClick = onBackClick,
onExpandedChanged = onExpandedChanged,
modifier = modifier,
onExpandedChange = onExpandedChanged,
tint = tint,
)
}
@ -92,14 +88,13 @@ fun ExpandableSearchView(
@Composable
private fun CollapsedSearchView(
modifier: Modifier = Modifier,
title: String? = null,
onBackClick: () -> Unit,
onExpandedChanged: (Boolean) -> Unit,
onExpandedChange: (Boolean) -> Unit,
title: String? = null,
tint: Color = TangemTheme.colors.background.primary,
) {
Row(
modifier = modifier
modifier = Modifier
.background(TangemTheme.colors.background.primary)
.padding(TangemTheme.dimens.spacing16)
.fillMaxWidth(),
@ -128,7 +123,7 @@ private fun CollapsedSearchView(
tint = tint,
contentDescription = null,
modifier = Modifier
.clickable { onExpandedChanged(true) },
.clickable { onExpandedChange(true) },
)
}
}
@ -136,10 +131,9 @@ private fun CollapsedSearchView(
@Composable
private fun ExpandedSearchView(
placeholderSearchText: String,
onSearchChanged: (String) -> Unit,
onSearchDisplayClosed: () -> Unit,
onExpandedChanged: (Boolean) -> Unit,
modifier: Modifier = Modifier,
onSearchChange: (String) -> Unit,
onSearchDisplayClose: () -> Unit,
onExpandedChange: (Boolean) -> Unit,
tint: Color = TangemTheme.colors.background.primary,
) {
val focusManager = LocalFocusManager.current
@ -152,7 +146,7 @@ private fun ExpandedSearchView(
var textFieldValue by remember { mutableStateOf(TextFieldValue("", TextRange("".length))) }
Row(
modifier = modifier
modifier = Modifier
.background(TangemTheme.colors.background.primary)
.fillMaxWidth(),
horizontalArrangement = Arrangement.Start,
@ -160,8 +154,8 @@ private fun ExpandedSearchView(
) {
IconButton(
onClick = {
onExpandedChanged(false)
onSearchDisplayClosed()
onExpandedChange(false)
onSearchDisplayClose()
},
) {
Icon(
@ -174,7 +168,7 @@ private fun ExpandedSearchView(
value = textFieldValue,
onValueChange = {
textFieldValue = it
onSearchChanged(it.text)
onSearchChange(it.text)
},
singleLine = true,
modifier = Modifier
@ -200,29 +194,29 @@ private fun ExpandedSearchView(
@Preview
@Composable
fun CollapsedSearchViewPreview() {
private fun CollapsedSearchViewPreview() {
TangemTheme {
ExpandableSearchView(
title = "Choose Token",
onBackClick = {},
placeholderSearchText = "Search",
onSearchChanged = {},
onSearchDisplayClosed = {},
onSearchChange = {},
onSearchDisplayClose = {},
)
}
}
@Preview
@Composable
fun ExpandedSearchViewPreview() {
private fun ExpandedSearchViewPreview() {
TangemTheme {
ExpandableSearchView(
title = "Choose Token",
onBackClick = {},
placeholderSearchText = "Search",
onSearchChanged = {},
onSearchChange = {},
expandedInitially = true,
onSearchDisplayClosed = {},
onSearchDisplayClose = {},
)
}
}

View file

@ -52,6 +52,7 @@ abstract class ComposeBottomSheetFragment<ScreenState> : BottomSheetDialogFragme
setContent {
TangemTheme {
ScreenContent(
state = provideState().value,
modifier = Modifier
.fillMaxWidth()
.let {
@ -61,19 +62,20 @@ abstract class ComposeBottomSheetFragment<ScreenState> : BottomSheetDialogFragme
color = TangemTheme.colors.background.plain,
shape = TangemTheme.shapes.bottomSheet,
),
state = provideState().value,
)
}
}
}
}
@Suppress("TopLevelComposableFunctions")
@Composable
protected abstract fun provideState(): State<ScreenState>
@Suppress("TopLevelComposableFunctions")
@Composable
protected abstract fun ScreenContent(
modifier: Modifier,
state: ScreenState,
modifier: Modifier,
)
}

View file

@ -36,22 +36,21 @@ abstract class ComposeFragment<ScreenState> : Fragment() {
}
ScreenContent(
state = provideState().value,
modifier = Modifier
.fillMaxSize()
.background(color = backgroundColor),
state = provideState().value,
)
}
}
}
}
@Suppress("TopLevelComposableFunctions")
@Composable
protected abstract fun provideState(): State<ScreenState>
@Suppress("TopLevelComposableFunctions")
@Composable
protected abstract fun ScreenContent(
modifier: Modifier,
state: ScreenState,
)
protected abstract fun ScreenContent(state: ScreenState, modifier: Modifier)
}