Updated on 2026-08-14

This commit is contained in:
Tangem 2026-04-01 17:41:23 +03:00
parent 97f41bd800
commit 8c8e00e7b4
6 changed files with 50 additions and 31 deletions

View file

@ -2,6 +2,7 @@ package com.tangem.core.ui.ds.tabs
import android.content.res.Configuration
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
@ -13,6 +14,7 @@ import androidx.compose.runtime.*
import androidx.compose.runtime.snapshots.SnapshotStateList
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.layout.onGloballyPositioned
@ -52,7 +54,6 @@ fun TangemSegmentedPicker(
items = tangemSegmentedPickerUM.items,
modifier = modifier,
initialSelectedItem = tangemSegmentedPickerUM.initialSelectedItem,
hasSeparator = tangemSegmentedPickerUM.hasSeparator,
isFixed = tangemSegmentedPickerUM.isFixed,
isAltSurface = tangemSegmentedPickerUM.isAltSurface,
onClick = onClick,
@ -66,7 +67,6 @@ fun TangemSegmentedPicker(
* @param items List of TangemSegmentUM representing the segments in the picker.
* @param modifier Modifier to be applied to the segmented picker.
* @param initialSelectedItem Optional TangemSegmentUM representing the initially selected segment.
* @param hasSeparator Boolean indicating whether there is a separator between segments.
* @param isFixed Boolean indicating whether the picker has a fixed width.
* @param isAltSurface Boolean indicating whether to use an alternative surface style.
* @param onClick Lambda function to be invoked when a segment is clicked.
@ -76,7 +76,6 @@ fun TangemSegmentedPicker(
items: ImmutableList<TangemSegmentUM>,
modifier: Modifier = Modifier,
initialSelectedItem: TangemSegmentUM? = null,
hasSeparator: Boolean = false,
isFixed: Boolean = false,
isAltSurface: Boolean = false,
minSegmentWidth: Dp = Dp.Unspecified,
@ -91,11 +90,6 @@ fun TangemSegmentedPicker(
val segmentHeight = remember { mutableStateOf(0.dp) }
val shape = RoundedCornerShape(TangemTheme.dimens2.x25)
val spacing = if (hasSeparator) {
TangemTheme.dimens2.x4
} else {
TangemTheme.dimens2.x1
}
Box(
modifier = modifier
@ -113,12 +107,8 @@ fun TangemSegmentedPicker(
itemsWidths = itemsWidths,
selectedIndex = selectedIndex.value,
segmentHeight = segmentHeight.value,
spacing = spacing,
)
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(spacing),
) {
Row(verticalAlignment = Alignment.CenterVertically) {
items.fastForEachIndexed { index, item ->
Segment(
item = item,
@ -135,15 +125,34 @@ fun TangemSegmentedPicker(
}
},
)
if (index != items.lastIndex) {
val selected by selectedIndex
val alpha by animateFloatAsState(
targetValue = if (selected == index || selected == index + 1) 0f else 1f,
animationSpec = tween(durationMillis = 300),
label = "separatorAlpha",
)
Box(
Modifier
.alpha(alpha)
.width(0.5.dp)
.height(20.dp)
.background(
color = TangemTheme.colors2.border.neutral.tertiary.copy(alpha = 0.1f),
),
)
}
}
}
}
}
@Composable
private fun SegmentSelection(itemsWidths: SnapshotStateList<Dp>, selectedIndex: Int, segmentHeight: Dp, spacing: Dp) {
private fun SegmentSelection(itemsWidths: SnapshotStateList<Dp>, selectedIndex: Int, segmentHeight: Dp) {
val indicatorOffset by animateDpAsState(
targetValue = itemsWidths.take(selectedIndex).fold(0.dp, Dp::plus) + spacing * selectedIndex,
targetValue = itemsWidths.take(selectedIndex).fold(0.dp, Dp::plus),
animationSpec = tween(durationMillis = 300),
label = "indicatorOffset",
)
@ -228,7 +237,6 @@ private fun TangemSegmentedPicker_Preview(@PreviewParameter(PreviewProvider::cla
) {
TangemSegmentedPicker(
isFixed = params.isFixed,
hasSeparator = params.hasSeparator,
isAltSurface = params.isAltSurface,
items = params.items,
initialSelectedItem = params.items.last(),
@ -248,25 +256,21 @@ private class PreviewProvider : PreviewParameterProvider<TangemSegmentedPickerUM
get() = sequenceOf(
TangemSegmentedPickerUM(
items = items,
hasSeparator = false,
isFixed = false,
isAltSurface = false,
),
TangemSegmentedPickerUM(
items = items,
hasSeparator = true,
isFixed = false,
isAltSurface = true,
),
TangemSegmentedPickerUM(
items = items,
hasSeparator = false,
isFixed = true,
isAltSurface = false,
),
TangemSegmentedPickerUM(
items = items,
hasSeparator = true,
isFixed = true,
isAltSurface = true,
),

View file

@ -8,14 +8,12 @@ import kotlinx.collections.immutable.ImmutableList
*
* @param items List of TangemSegmentUM representing the segments in the picker.
* @param initialSelectedItem Optional TangemSegmentUM representing the initially selected segment.
* @param hasSeparator Boolean indicating whether there is a separator between segments.
* @param isFixed Boolean indicating whether the picker has a fixed width.
* @param isAltSurface Boolean indicating whether to use an alternative surface style.
*/
data class TangemSegmentedPickerUM(
val items: ImmutableList<TangemSegmentUM>,
val initialSelectedItem: TangemSegmentUM? = null,
val hasSeparator: Boolean = false,
val isFixed: Boolean = false,
val isAltSurface: Boolean = false,
)

View file

@ -94,7 +94,7 @@ private fun lightThemeColors2(): TangemColors2 {
neutral = TangemColors2.Border.Neutral(
primary = TangemColorPalette.Light3,
secondary = TangemColorPalette.Light5,
tertiary = TangemColorPalette.Light_10,
tertiary = TangemColorPalette.Dark_10,
quaternary = TangemColorPalette.Dark_10,
),
status = TangemColors2.Border.Status(

View file

@ -32,6 +32,8 @@ import com.tangem.core.ui.components.buttons.segmentedbutton.SegmentedButtons
import com.tangem.core.ui.components.currency.icon.CoinIcon
import com.tangem.core.ui.components.marketprice.PriceChangeInPercent
import com.tangem.core.ui.components.marketprice.PriceChangeType
import com.tangem.core.ui.ds.tabs.TangemSegmentUM
import com.tangem.core.ui.ds.tabs.TangemSegmentedPicker
import com.tangem.core.ui.event.EventEffect
import com.tangem.core.ui.event.StateEvent
import com.tangem.core.ui.extensions.TextReference
@ -49,6 +51,7 @@ import com.tangem.features.feed.ui.market.detailed.state.InfoBottomSheetContent
import com.tangem.features.feed.ui.market.detailed.state.MarketsTokenDetailsUM
import com.tangem.features.feed.ui.market.detailed.state.SecurityScoreBottomSheetContent
import kotlinx.collections.immutable.persistentListOf
import kotlinx.collections.immutable.toImmutableList
import kotlinx.coroutines.flow.distinctUntilChanged
import com.tangem.core.ui.R as CoreR
@ -245,6 +248,26 @@ private fun IntervalSelector(
onIntervalClick: (PriceChangeInterval) -> Unit,
modifier: Modifier = Modifier,
) {
if (LocalRedesignEnabled.current) {
val items = remember {
PriceChangeInterval.entries
.map { TangemSegmentUM(it.toString(), it.getText()) }.toImmutableList()
}
val selectedItem = remember(trendInterval) {
items.firstOrNull { it.id == trendInterval.toString() }
}
TangemSegmentedPicker(
items = items,
initialSelectedItem = selectedItem,
isFixed = true,
modifier = modifier,
onClick = { onIntervalClick(PriceChangeInterval.valueOf(it.id)) },
)
return
}
SegmentedButtons(
config = persistentListOf(
PriceChangeInterval.H24,
@ -296,7 +319,6 @@ private fun ShowPriceSubtitleEffect(lazyListState: LazyListState, onShouldShowPr
}
}
@Composable
fun PriceChangeInterval.getText(): TextReference {
return when (this) {
PriceChangeInterval.H24 -> resourceReference(R.string.markets_selector_interval_24h_title)

View file

@ -146,7 +146,6 @@ private fun InsightsBlockV2(state: InsightsUM, modifier: Modifier = Modifier) {
TangemSegmentedPicker(
items = segmentItems,
initialSelectedItem = segmentItems.first(),
hasSeparator = true,
isFixed = false,
isAltSurface = true,
minSegmentWidth = 48.dp,

View file

@ -45,15 +45,12 @@ private val items5 = persistentListOf(
private data class PickerConfig(
val label: String,
val hasSeparator: Boolean,
val isFixed: Boolean,
)
private val configs = listOf(
PickerConfig("Default", hasSeparator = false, isFixed = false),
PickerConfig("Separator", hasSeparator = true, isFixed = false),
PickerConfig("Fixed", hasSeparator = false, isFixed = true),
PickerConfig("Fixed + Separator", hasSeparator = true, isFixed = true),
PickerConfig("Default", isFixed = false),
PickerConfig("Fixed", isFixed = true),
)
@Composable
@ -119,7 +116,6 @@ private fun PickerRow(config: PickerConfig, isAltSurface: Boolean) {
)
TangemSegmentedPicker(
items = items4,
hasSeparator = config.hasSeparator,
isFixed = config.isFixed,
isAltSurface = isAltSurface,
onClick = {},