Updated on 2026-08-14

This commit is contained in:
Tangem 2023-11-15 15:15:19 +03:00
parent e9ab4751af
commit 9aa49f2357
6 changed files with 185 additions and 0 deletions

View file

@ -0,0 +1,78 @@
package com.tangem.core.ui.components.rows
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import com.tangem.core.ui.R
import com.tangem.core.ui.components.SpacerH28
import com.tangem.core.ui.components.rows.states.ActionRowState
import com.tangem.core.ui.res.TangemTheme
/**
* Simple clickable action row, without input and icon
*
* https://www.figma.com/file/14ISV23YB1yVW1uNVwqrKv/Android?type=design&node-id=2100-807&mode=design&t=Ygv5sohTTHYAQcBS-4
*/
@Composable
fun SimpleActionRow(state: ActionRowState, modifier: Modifier = Modifier) {
Box(
modifier = modifier
.background(color = TangemTheme.colors.background.action)
.height(TangemTheme.dimens.size44)
.fillMaxWidth(),
) {
Column(
modifier = Modifier
.padding(end = TangemTheme.dimens.spacing48)
.align(Alignment.CenterStart),
verticalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing8),
) {
Text(
text = state.title,
style = TangemTheme.typography.caption2,
color = TangemTheme.colors.text.secondary,
)
Text(
text = state.description,
style = TangemTheme.typography.body2,
color = TangemTheme.colors.text.primary1,
)
}
Icon(
painter = painterResource(id = R.drawable.ic_chevron_right_24),
contentDescription = null,
modifier = Modifier
.align(alignment = Alignment.CenterEnd)
.padding(end = TangemTheme.dimens.spacing12),
tint = TangemTheme.colors.icon.informative,
)
}
}
@Preview
@Composable
private fun SimpleActionRowPreview() {
val state = ActionRowState(
title = "Title",
description = "Description",
onClick = {},
)
Column {
TangemTheme(isDark = false) {
SimpleActionRow(state)
}
SpacerH28()
TangemTheme(isDark = false) {
SimpleActionRow(state)
}
}
}

View file

@ -0,0 +1,7 @@
package com.tangem.core.ui.components.rows.states
data class ActionRowState(
val title: String,
val description: String,
val onClick: () -> Unit,
)

View file

@ -0,0 +1,5 @@
package com.tangem.feature.swap.models.states
import com.tangem.core.ui.components.bottomsheets.TangemBottomSheetConfigContent
class ChooseFeeBottomSheetConfig : TangemBottomSheetConfigContent

View file

@ -0,0 +1,8 @@
package com.tangem.feature.swap.models.states
import com.tangem.core.ui.components.rows.states.ActionRowState
data class FeeItemState(
val id: String,
val actionRowState: ActionRowState,
)

View file

@ -0,0 +1,26 @@
package com.tangem.feature.swap.ui
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.tangem.core.ui.components.bottomsheets.TangemBottomSheet
import com.tangem.core.ui.components.bottomsheets.TangemBottomSheetConfig
import com.tangem.core.ui.res.TangemTheme
import com.tangem.feature.swap.models.states.ChooseFeeBottomSheetConfig
@Composable
fun ChooseFeeBottomSheet(config: TangemBottomSheetConfig) {
TangemBottomSheet(config) { content: ChooseFeeBottomSheetConfig ->
ChooseFeeBottomSheetContent(content = content)
}
}
@Suppress("UnusedPrivateMember")
@Composable
private fun ChooseFeeBottomSheetContent(content: ChooseFeeBottomSheetConfig) {
Column(
modifier = Modifier.background(TangemTheme.colors.background.primary),
) {
}
}

View file

@ -0,0 +1,61 @@
package com.tangem.feature.swap.ui
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.tangem.core.ui.components.SpacerH24
import com.tangem.core.ui.components.rows.SimpleActionRow
import com.tangem.core.ui.components.rows.states.ActionRowState
import com.tangem.core.ui.res.TangemTheme
import com.tangem.feature.swap.models.states.FeeItemState
@Composable
fun FeeItem(state: FeeItemState) {
Box(
modifier = Modifier
.background(
color = TangemTheme.colors.background.action,
shape = TangemTheme.shapes.roundedCornersXMedium,
)
.clickable(
onClick = state.actionRowState.onClick,
)
.fillMaxWidth()
.defaultMinSize(minHeight = TangemTheme.dimens.size68),
) {
SimpleActionRow(
modifier = Modifier.padding(
start = TangemTheme.dimens.spacing12,
top = TangemTheme.dimens.spacing12,
),
state = state.actionRowState,
)
}
}
@Preview
@Composable
private fun FeeItemPreview() {
val state = FeeItemState(
id = "id",
actionRowState = ActionRowState(
title = "Title",
description = "Description",
onClick = {},
),
)
Column {
TangemTheme(isDark = false) {
FeeItem(state = state)
}
SpacerH24()
TangemTheme(isDark = true) {
FeeItem(state = state)
}
}
}