Animations in DateTimeSelectorBlock

This commit is contained in:
sadellie 2023-08-01 23:45:40 +03:00
parent 9cf90560c0
commit 83288cb91e

View File

@ -19,6 +19,13 @@
package com.sadellie.unitto.feature.datedifference.components package com.sadellie.unitto.feature.datedifference.components
import android.text.format.DateFormat import android.text.format.DateFormat
import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.SizeTransform
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.animation.togetherWith
import androidx.compose.foundation.background import androidx.compose.foundation.background
import androidx.compose.foundation.clickable import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.interaction.MutableInteractionSource
@ -64,16 +71,26 @@ internal fun DateTimeSelectorBlock(
Text(title, style = MaterialTheme.typography.labelMedium) Text(title, style = MaterialTheme.typography.labelMedium)
if (DateFormat.is24HourFormat(LocalContext.current)) { if (DateFormat.is24HourFormat(LocalContext.current)) {
Text( AnimatedContent(
modifier = Modifier.clickable( targetState = dateTime.format(UnittoDateTimeFormatter.time24Formatter),
indication = rememberRipple(), label = "date time change",
interactionSource = remember { MutableInteractionSource() }, transitionSpec = {
onClick = onTimeClick slideInVertically { height -> height } + fadeIn() togetherWith
), slideOutVertically { height -> -height } + fadeOut() using
text = dateTime.format(UnittoDateTimeFormatter.time24Formatter), SizeTransform()
style = MaterialTheme.typography.displaySmall, }
maxLines = 1 ) { time ->
) Text(
modifier = Modifier.clickable(
indication = rememberRipple(),
interactionSource = remember { MutableInteractionSource() },
onClick = onTimeClick
),
text = time,
style = MaterialTheme.typography.displaySmall,
maxLines = 1
)
}
} else { } else {
Column( Column(
modifier = Modifier.clickable( modifier = Modifier.clickable(
@ -82,28 +99,56 @@ internal fun DateTimeSelectorBlock(
onClick = onTimeClick onClick = onTimeClick
) )
) { ) {
Text( AnimatedContent(
text = dateTime.format(UnittoDateTimeFormatter.time12Formatter1), targetState = dateTime,
style = MaterialTheme.typography.displaySmall, transitionSpec = {
maxLines = 1 slideInVertically { height -> height } + fadeIn() togetherWith
) slideOutVertically { height -> -height } + fadeOut() using
Text( SizeTransform()
text = dateTime.format(UnittoDateTimeFormatter.time12Formatter2), }
style = MaterialTheme.typography.bodyLarge, ) { time ->
maxLines = 1 Text(
) text = time.format(UnittoDateTimeFormatter.time12Formatter1),
style = MaterialTheme.typography.displaySmall,
maxLines = 1
)
}
AnimatedContent(
targetState = dateTime,
transitionSpec = {
slideInVertically { height -> height } + fadeIn() togetherWith
slideOutVertically { height -> -height } + fadeOut() using
SizeTransform()
}
) { time ->
Text(
text = time.format(UnittoDateTimeFormatter.time12Formatter2),
style = MaterialTheme.typography.bodyLarge,
maxLines = 1
)
}
} }
} }
Text( AnimatedContent(
modifier = Modifier.clickable( targetState = dateTime,
indication = rememberRipple(), transitionSpec = {
interactionSource = remember { MutableInteractionSource() }, slideInVertically { height -> height } + fadeIn() togetherWith
onClick = onDateClick slideOutVertically { height -> -height } + fadeOut() using
), SizeTransform()
text = dateTime.format(UnittoDateTimeFormatter.weekDayMonthYear), }
style = MaterialTheme.typography.bodySmall ) { date ->
) Text(
modifier = Modifier.clickable(
indication = rememberRipple(),
interactionSource = remember { MutableInteractionSource() },
onClick = onDateClick
),
text = date.format(UnittoDateTimeFormatter.weekDayMonthYear),
style = MaterialTheme.typography.bodySmall
)
}
} }
} }