A Number Control Composable for android Jetpack Compose UI with validators and animations

NumberControlComposable.kt

package com.rwsentosa.mobileapp.components

import androidx.annotation.DrawableRes
import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.ExperimentalAnimationApi
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.with
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.requiredWidth
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Icon
import androidx.compose.material.OutlinedButton
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment.Companion.Center
import androidx.compose.ui.Alignment.Companion.CenterVertically
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.rwsentosa.mobileapp.R
import kotlin.math.max
import kotlin.math.min

/**
 * Number control
 *
 * @param modifier
 * @param onValueChanged to consume the value of number control
 * @param onValidate a validator function, which should return [true] to consume the nextValue or [false] to reject
 *
 */
@OptIn(ExperimentalAnimationApi::class)
@Composable
fun NumberControl(
    modifier: Modifier = Modifier,
    onValueChanged: (Int) -> Unit = {},
    onValidate: (Int) -> Boolean = { true },
) {
    var number: Int by remember { mutableStateOf(0) }

    Row(
        modifier
            .height(IntrinsicSize.Min)
            .requiredWidth(128.dp),
        verticalAlignment = CenterVertically
    ) {

        // Minus
        NumberControlButton(R.drawable.ic_minus) {
            val nextValue = max(number - 1, 0)
            if (onValidate(nextValue)) {
                number = nextValue
                onValueChanged(number)
            }
        }

        Box(Modifier.weight(1f), contentAlignment = Center) {
            RotatingNumber(value = number, modifier = Modifier.fillMaxWidth())
        }

        // Plus
        NumberControlButton(R.drawable.ic_plus) {
            val nextValue = min(number + 1, Integer.MAX_VALUE)
            if (onValidate(nextValue)) {
                number = nextValue
                onValueChanged(number)
            }
        }
    }
}

@Composable
private fun NumberControlButton(
    @DrawableRes iconResourceId: Int,
    onClick: () -> Unit
) {
    OutlinedButton(
        shape = CircleShape,
        modifier = Modifier.size(36.dp),
        border = BorderStroke(0.5.dp, DARK_LIGHT),
        colors = ButtonDefaults.outlinedButtonColors(
            contentColor = BLACK_LIGHT,
            backgroundColor = Color.Transparent
        ),
        contentPadding = PaddingValues(8.dp),
        onClick = onClick
    ) {
        Icon(
            painter = painterResource(id = iconResourceId),
            contentDescription = ""
        )
    }
}

@Preview(
    showBackground = true
)
@Composable
fun PreviewNumberControl() {
    NumberControl()
}

RotatingNumber.kt

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun RotatingNumber(value: Int, modifier: Modifier = Modifier) {
    AnimatedContent(
        targetState = value,
        modifier = modifier,
        transitionSpec = {
            // Compare the incoming number with the previous number.
            if (targetState > initialState) {
                // If the target number is larger, it slides up and fades in
                // while the initial (smaller) number slides up and fades out.
                slideInVertically({ height -> height }) + fadeIn() with
                    slideOutVertically({ height -> -height }) + fadeOut()
            } else {
                // If the target number is smaller, it slides down and fades in
                // while the initial number slides down and fades out.
                slideInVertically({ height -> -height }) + fadeIn() with
                    slideOutVertically({ height -> height }) + fadeOut()
            }.using(SizeTransform(clip = false))
        }
    ) { targetNumber ->
        Text(
            text = targetNumber.toString(),
            style = bigStyle(),
            textAlign = TextAlign.Center,
        )
    }
}