Merge pull request #133 from Trendyol/feature/quantityPickerComposeAddIconColor

Feature/quantity picker compose add icon color

Author: burakztrk

libraries/quantity-picker-compose/src/main/java/com/trendyol/uicomponents/quantitypicker/QuantityAddIcon.kt

@@ -1,31 +1,89 @@
 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(
     icons: QuantityIcons,
     quantityData: QuantityPickerViewData,
     onAddClick: (() -> Unit)?
 ) {
+    val coroutineScope = rememberCoroutineScope()
+    var targetBackgroundColor by remember {
+        mutableStateOf(quantityData.getBackgroundColor(icons))
+    }
+    var iconTintColor by remember {
+        mutableStateOf(
+            quantityData.getAddIconColor(
+                icons,
+                quantityData.currentQuantity
+            )
+        )
+    }
+    val animatedBackgroundColor = remember { Animatable(targetBackgroundColor) }
+    val lastQuantityCount = remember { mutableStateOf(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) {
+        if (lastQuantityCount.value != quantityData.currentQuantity) {
+            lastQuantityCount.value = quantityData.currentQuantity
+            iconTintColor = quantityData.getAddIconColor(icons, 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 = {
+                    if (quantityData.currentQuantity == 0) {
+                        setTargetBackgroundColor.invoke(Color.White)
+                        iconTintColor = icons.iconColor
+                    }
+                    onAddClick?.invoke()
+                }
             )
-            .padding(8.dp)
     )
 }

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(

libraries/quantity-picker-compose/src/main/java/com/trendyol/uicomponents/quantitypicker/QuantityPicker.kt

@@ -5,12 +5,14 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
 
 @Composable
 fun QuantityPicker(
@@ -90,7 +92,10 @@ internal fun VerticalQuantityPicker(
         )
 
         AnimatedVisibility(visible = quantityData.currentQuantity > 0 || showLoading) {
-            Column(horizontalAlignment = Alignment.CenterHorizontally) {
+            Column(
+                modifier = Modifier.padding(top = 2.dp),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
                 QuantityText(
                     quantityData = quantityData,
                     shape = quantityTextShape,
@@ -138,7 +143,10 @@ internal fun HorizontalQuantityPicker(
     ) {
 
         AnimatedVisibility(visible = quantityData.currentQuantity > 0 || showLoading) {
-            Row(verticalAlignment = Alignment.CenterVertically) {
+            Row(
+                modifier = Modifier.padding(top = 2.dp),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
                 QuantitySubtractIcon(
                     icons = icons,
                     quantityData = quantityData,
@@ -157,7 +165,7 @@ internal fun HorizontalQuantityPicker(
         QuantityAddIcon(
             icons = icons,
             quantityData = quantityData,
-            onAddClick = onAddClick,
+            onAddClick = onAddClick
         )
     }
 }
@@ -201,4 +209,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),
+    )
 }

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)
     }

libraries/timeline-view-compose/build.gradle.kts

@@ -16,6 +16,14 @@ android {
         vectorDrawables.useSupportLibrary = true
     }
 
+    tasks.withType<org.jetbrains.kotlin.gradle.tasks.KotlinCompile> {
+        compilerOptions.freeCompilerArgs.addAll(
+            "-P",
+            "plugin:androidx.compose.compiler.plugins.kotlin:experimentalStrongSkipping=true",
+        )
+    }
+
+
     buildTypes {
         getByName<com.android.build.gradle.internal.dsl.BuildType>("release") {
             isMinifyEnabled = false

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,

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,