Squashable unit selection button

This commit is contained in:
Sad Ellie 2023-05-23 10:22:00 +03:00
parent 71c89d9062
commit 9a06fb4d75
3 changed files with 11 additions and 24 deletions

View File

@ -37,6 +37,7 @@ import androidx.compose.ui.unit.Dp
fun Modifier.squashable( fun Modifier.squashable(
onClick: () -> Unit = {}, onClick: () -> Unit = {},
onLongClick: (() -> Unit)? = null, onLongClick: (() -> Unit)? = null,
enabled: Boolean = true,
interactionSource: MutableInteractionSource, interactionSource: MutableInteractionSource,
cornerRadiusRange: IntRange, cornerRadiusRange: IntRange,
role: Role = Role.Button, role: Role = Role.Button,
@ -55,12 +56,14 @@ fun Modifier.squashable(
interactionSource = interactionSource, interactionSource = interactionSource,
indication = rememberRipple(), indication = rememberRipple(),
role = role, role = role,
enabled = enabled
) )
} }
fun Modifier.squashable( fun Modifier.squashable(
onClick: () -> Unit = {}, onClick: () -> Unit = {},
onLongClick: (() -> Unit)? = null, onLongClick: (() -> Unit)? = null,
enabled: Boolean = true,
interactionSource: MutableInteractionSource, interactionSource: MutableInteractionSource,
cornerRadiusRange: ClosedRange<Dp>, cornerRadiusRange: ClosedRange<Dp>,
role: Role = Role.Button, role: Role = Role.Button,
@ -79,5 +82,6 @@ fun Modifier.squashable(
interactionSource = interactionSource, interactionSource = interactionSource,
indication = rememberRipple(), indication = rememberRipple(),
role = role, role = role,
enabled = enabled
) )
} }

View File

@ -44,6 +44,7 @@ fun UnittoButton(
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
onClick: () -> Unit, onClick: () -> Unit,
onLongClick: (() -> Unit)? = null, onLongClick: (() -> Unit)? = null,
enabled: Boolean = true,
containerColor: Color, containerColor: Color,
contentColor: Color = contentColorFor(containerColor), contentColor: Color = contentColorFor(containerColor),
border: BorderStroke? = null, border: BorderStroke? = null,
@ -56,11 +57,12 @@ fun UnittoButton(
onClick = onClick, onClick = onClick,
onLongClick = onLongClick, onLongClick = onLongClick,
interactionSource = interactionSource, interactionSource = interactionSource,
cornerRadiusRange = 30..50 cornerRadiusRange = 30..50,
enabled = enabled
), ),
color = containerColor, color = containerColor,
contentColor = contentColor, contentColor = contentColor,
border = border border = border,
) { ) {
CompositionLocalProvider(LocalContentColor provides contentColor) { CompositionLocalProvider(LocalContentColor provides contentColor) {
ProvideTextStyle(value = MaterialTheme.typography.labelLarge) { ProvideTextStyle(value = MaterialTheme.typography.labelLarge) {

View File

@ -21,30 +21,22 @@ package com.sadellie.unitto.feature.converter.components
import android.annotation.SuppressLint import android.annotation.SuppressLint
import androidx.compose.animation.AnimatedContent import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.SizeTransform import androidx.compose.animation.SizeTransform
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.animateIntAsState
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideInVertically import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically import androidx.compose.animation.slideOutVertically
import androidx.compose.animation.togetherWith import androidx.compose.animation.togetherWith
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import com.sadellie.unitto.core.base.R import com.sadellie.unitto.core.base.R
import com.sadellie.unitto.core.ui.common.UnittoButton
/** /**
* Button to select a unit * Button to select a unit
@ -60,23 +52,12 @@ internal fun UnitSelectionButton(
onClick: () -> Unit = {}, onClick: () -> Unit = {},
label: Int?, label: Int?,
) { ) {
val interactionSource = remember { MutableInteractionSource() } UnittoButton(
val isPressed by interactionSource.collectIsPressedAsState()
val cornerRadius: Int by animateIntAsState(
targetValue = if (isPressed) 30 else 50,
animationSpec = tween(easing = FastOutSlowInEasing),
)
Button(
modifier = modifier, modifier = modifier,
shape = RoundedCornerShape(cornerRadius),
onClick = onClick, onClick = onClick,
enabled = label != null, enabled = label != null,
colors = ButtonDefaults.buttonColors( containerColor = MaterialTheme.colorScheme.primaryContainer,
containerColor = MaterialTheme.colorScheme.primaryContainer
),
contentPadding = PaddingValues(vertical = 16.dp, horizontal = 8.dp), contentPadding = PaddingValues(vertical = 16.dp, horizontal = 8.dp),
interactionSource = interactionSource
) { ) {
AnimatedContent( AnimatedContent(
targetState = label ?: 0, targetState = label ?: 0,