Updated on 2026-08-14
This commit is contained in:
parent
97f41bd800
commit
8c8e00e7b4
6 changed files with 50 additions and 31 deletions
|
|
@ -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,
|
||||
),
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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 = {},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue