diff --git a/libraries/quantity-picker-compose/src/main/java/com/trendyol/uicomponents/quantitypicker/QuantityAddIcon.kt b/libraries/quantity-picker-compose/src/main/java/com/trendyol/uicomponents/quantitypicker/QuantityAddIcon.kt index 4cfd73f..67d5217 100644 --- a/libraries/quantity-picker-compose/src/main/java/com/trendyol/uicomponents/quantitypicker/QuantityAddIcon.kt +++ b/libraries/quantity-picker-compose/src/main/java/com/trendyol/uicomponents/quantitypicker/QuantityAddIcon.kt @@ -1,13 +1,26 @@ package com.trendyol.uicomponents.quantitypicker +import androidx.compose.animation.Animatable +import androidx.compose.animation.core.tween +import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.CircleShape import androidx.compose.material.Icon import androidx.compose.runtime.Composable +import androidx.compose.runtime.LaunchedEffect +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.rememberCoroutineScope +import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.painterResource import androidx.compose.ui.unit.dp +import kotlinx.coroutines.launch @Composable internal fun QuantityAddIcon( @@ -15,17 +28,52 @@ internal fun QuantityAddIcon( quantityData: QuantityPickerViewData, onAddClick: (() -> Unit)? ) { + val coroutineScope = rememberCoroutineScope() + var targetBackgroundColor by remember { + mutableStateOf(icons.addIconBackgroundColor ?: Color.White) + } + var iconTintColor by remember { mutableStateOf(Color.White) } + val animatedBackgroundColor = remember { Animatable(targetBackgroundColor) } + + LaunchedEffect(key1 = quantityData.currentQuantity) { + iconTintColor = quantityData.getAddIconColor(icons, quantityData.currentQuantity) + } + + val setTargetBackgroundColor: (color: Color) -> Unit = remember { + { color -> + if (targetBackgroundColor != color) { + targetBackgroundColor = color + coroutineScope.launch { + animatedBackgroundColor.animateTo( + targetValue = targetBackgroundColor, + animationSpec = tween(500) + ) + } + } + } + } + + LaunchedEffect(key1 = quantityData.currentQuantity) { + setTargetBackgroundColor.invoke(quantityData.getBackgroundColor(icons)) + } + Icon( painter = painterResource(id = icons.addIconResId), - tint = quantityData.getAddIconColor(icons.iconColor, icons.disabledColor), + tint = iconTintColor, contentDescription = null, modifier = Modifier + .clip(CircleShape) + .background(animatedBackgroundColor.value) + .padding(8.dp) .clickable( - enabled = quantityData.isAddButtonEnabled(), - onClick = { onAddClick?.invoke() }, - interactionSource = MutableInteractionSource(), indication = null, + interactionSource = MutableInteractionSource(), + enabled = quantityData.isAddButtonEnabled(), + onClick = { + setTargetBackgroundColor.invoke(Color.White) + iconTintColor = icons.iconColor + onAddClick?.invoke() + } ) - .padding(8.dp) ) } \ No newline at end of file diff --git a/libraries/quantity-picker-compose/src/main/java/com/trendyol/uicomponents/quantitypicker/QuantityIcons.kt b/libraries/quantity-picker-compose/src/main/java/com/trendyol/uicomponents/quantitypicker/QuantityIcons.kt index e7031ba..25805b2 100644 --- a/libraries/quantity-picker-compose/src/main/java/com/trendyol/uicomponents/quantitypicker/QuantityIcons.kt +++ b/libraries/quantity-picker-compose/src/main/java/com/trendyol/uicomponents/quantitypicker/QuantityIcons.kt @@ -10,6 +10,7 @@ data class QuantityIcons( @DrawableRes val removeIconResId: Int? = R.drawable.ic_trash, val iconColor: Color, val disabledColor: Color, + val addIconBackgroundColor: Color? = null, ) { companion object { val default = QuantityIcons( diff --git a/libraries/quantity-picker-compose/src/main/java/com/trendyol/uicomponents/quantitypicker/QuantityPicker.kt b/libraries/quantity-picker-compose/src/main/java/com/trendyol/uicomponents/quantitypicker/QuantityPicker.kt index b78f074..5ead80b 100644 --- a/libraries/quantity-picker-compose/src/main/java/com/trendyol/uicomponents/quantitypicker/QuantityPicker.kt +++ b/libraries/quantity-picker-compose/src/main/java/com/trendyol/uicomponents/quantitypicker/QuantityPicker.kt @@ -201,4 +201,13 @@ private fun PreviewSubtractButtonDisabledQuantityPicker() { QuantityPicker( quantityData = QuantityPickerViewData(currentQuantity = 2, minQuantity = 3), ) +} + +@Preview +@Composable +private fun PreviewAddButtonVisibleQuantityPicker() { + QuantityPicker( + icons = QuantityIcons.default.copy(addIconBackgroundColor = QuantityPickerDefaults.defaultColor), + quantityData = QuantityPickerViewData(currentQuantity = 0), + ) } \ No newline at end of file diff --git a/libraries/quantity-picker-compose/src/main/java/com/trendyol/uicomponents/quantitypicker/QuantityPickerViewData.kt b/libraries/quantity-picker-compose/src/main/java/com/trendyol/uicomponents/quantitypicker/QuantityPickerViewData.kt index 2153c75..7897736 100644 --- a/libraries/quantity-picker-compose/src/main/java/com/trendyol/uicomponents/quantitypicker/QuantityPickerViewData.kt +++ b/libraries/quantity-picker-compose/src/main/java/com/trendyol/uicomponents/quantitypicker/QuantityPickerViewData.kt @@ -15,10 +15,25 @@ data class QuantityPickerViewData( return maxQuantity != -1 } - fun getAddIconColor(iconTintColor: Color, disableTintColor: Color): Color { - return if (isAddButtonEnabled()) iconTintColor else disableTintColor + fun getAddIconColor( + icons: QuantityIcons, + currentQuantity: Int + ): Color { + val iconColor = if (currentQuantity == 0 && icons.addIconBackgroundColor != null) { + Color.White + } else { + icons.iconColor + } + return if (isAddButtonEnabled()) iconColor else icons.disabledColor } + fun getBackgroundColor( + icons: QuantityIcons + ): Color = if (currentQuantity == 0) { + icons.addIconBackgroundColor ?: Color.White + } else Color.White + + fun isSubtractButtonEnabled(): Boolean { return (currentQuantity > minQuantity) } diff --git a/sample-compose/src/main/java/com/trendyol/uicomponents/samplecompose/QuantityPickerScreen.kt b/sample-compose/src/main/java/com/trendyol/uicomponents/samplecompose/QuantityPickerScreen.kt index 2d9e9a3..af29cff 100644 --- a/sample-compose/src/main/java/com/trendyol/uicomponents/samplecompose/QuantityPickerScreen.kt +++ b/sample-compose/src/main/java/com/trendyol/uicomponents/samplecompose/QuantityPickerScreen.kt @@ -15,6 +15,8 @@ import androidx.compose.runtime.remember import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp +import com.trendyol.uicomponents.quantitypicker.QuantityIcons +import com.trendyol.uicomponents.quantitypicker.QuantityPickerDefaults import com.trendyol.uicomponents.quantitypicker.QuantityPickerDirection import com.trendyol.uicomponents.quantitypicker.QuantityPickerViewData import com.trendyol.uicomponents.samplecompose.ui.productcard.ProductCard @@ -150,6 +152,9 @@ private fun ProductSliderSection() { ) { items(products) { product -> ProductCard( + quantityPickerIcons = QuantityIcons.default.copy( + addIconBackgroundColor = QuantityPickerDefaults.defaultColor + ), productData = product, modifier = Modifier.padding( end = 14.dp, diff --git a/sample-compose/src/main/java/com/trendyol/uicomponents/samplecompose/ui/productcard/ProductCard.kt b/sample-compose/src/main/java/com/trendyol/uicomponents/samplecompose/ui/productcard/ProductCard.kt index c1ad856..31d2e09 100644 --- a/sample-compose/src/main/java/com/trendyol/uicomponents/samplecompose/ui/productcard/ProductCard.kt +++ b/sample-compose/src/main/java/com/trendyol/uicomponents/samplecompose/ui/productcard/ProductCard.kt @@ -13,6 +13,7 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.res.painterResource import androidx.compose.ui.unit.dp +import com.trendyol.uicomponents.quantitypicker.QuantityIcons import com.trendyol.uicomponents.quantitypicker.QuantityPicker import com.trendyol.uicomponents.quantitypicker.QuantityPickerDirection import com.trendyol.uicomponents.sample.compose.R @@ -22,6 +23,7 @@ import com.trendyol.uicomponents.samplecompose.ui.theme.Typography fun ProductCard( modifier: Modifier = Modifier, productData: ProductCardData, + quantityPickerIcons: QuantityIcons = QuantityIcons.default, direction: QuantityPickerDirection = QuantityPickerDirection.VERTICAL, onAddClick: ((ProductCardData) -> Unit), onSubtractClick: ((ProductCardData) -> Unit) @@ -52,6 +54,7 @@ fun ProductCard( val pickerAlignment = if (direction == QuantityPickerDirection.VERTICAL) Alignment.TopEnd else Alignment.TopStart QuantityPicker( + icons = quantityPickerIcons, modifier = modifier.align(pickerAlignment), direction = direction, quantityData = productData.quantityData,