@momo-kits/native-kits 0.151.2-test.12 → 0.151.2-test.13

package/compose/src/androidMain/kotlin/vn/momo/kits/platform/Platform.android.kt

@@ -3,18 +3,25 @@ package vn.momo.kits.platform
 import android.annotation.SuppressLint
 import android.content.res.Resources
 import android.graphics.BlurMaskFilter
+import android.graphics.PorterDuff
+import android.graphics.PorterDuffColorFilter
 import android.os.Build
-import androidx.compose.ui.graphics.Color
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.NativePaint
+import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import com.airbnb.lottie.LottieProperty
+import com.airbnb.lottie.compose.LottieAnimation
 import com.airbnb.lottie.compose.LottieCompositionSpec
 import com.airbnb.lottie.compose.LottieConstants
 import com.airbnb.lottie.compose.rememberLottieComposition
+import com.airbnb.lottie.compose.rememberLottieDynamicProperties
+import com.airbnb.lottie.compose.rememberLottieDynamicProperty
 import vn.momo.kits.const.AppNavigationBar
 import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.utils.readJson
@@ -61,13 +68,30 @@ actual fun getAndroidBuildVersion(): Int = Build.VERSION.SDK_INT
 actual fun LottieAnimation(
     path: String,
     tintColor: Color?,
+    bgColor: Color?,
     modifier: Modifier
 ) {
-    val composition by rememberLottieComposition(LottieCompositionSpec.JsonString(readJson(path)))
+    val composition by rememberLottieComposition(
+        LottieCompositionSpec.JsonString(readJson(path))
+    )
+
+    val colorFilter = PorterDuffColorFilter(
+        tintColor?.toArgb() ?: Color.White.toArgb(),
+        PorterDuff.Mode.SRC_ATOP
+    )
+
+    val dynamicProperties = rememberLottieDynamicProperties(
+        rememberLottieDynamicProperty(
+            property = LottieProperty.COLOR_FILTER,
+            value = colorFilter,
+            keyPath = arrayOf("**")
+        )
+    )
 
-    com.airbnb.lottie.compose.LottieAnimation(
+    LottieAnimation(
         composition = composition,
-        modifier = modifier,
         iterations = LottieConstants.IterateForever,
+        dynamicProperties = if (tintColor != null ) dynamicProperties else null,
+        modifier = modifier
     )
 }

package/compose/src/commonMain/kotlin/vn/momo/kits/components/Button.kt

@@ -12,10 +12,11 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
@@ -106,8 +107,9 @@ fun getIconSpace(size: Size): Dp {
 }
 
 @Composable
-fun getTextColor(type: ButtonType): Color {
+fun getTextColor(loading: Boolean, type: ButtonType): Color {
     val theme = AppTheme.current
+
     return remember(type, theme) {
         when (type) {
             ButtonType.DISABLED -> theme.colors.text.disable
@@ -117,28 +119,28 @@ fun getTextColor(type: ButtonType): Color {
             ButtonType.TONAL -> theme.colors.primary
             ButtonType.DANGER -> Colors.black_01
             ButtonType.TEXT -> theme.colors.primary
-        }
+        }.withLoading(loading)
     }
 }
 
 @Composable
 fun RenderTitle(size: Size, title: String = "", type: ButtonType) {
     val style = remember(size) { getStyle(size) }
-    val color = getTextColor(type)
+    val color = TextColor.current
     Text(style = style, text = title, color = color, overflow = TextOverflow.Ellipsis, maxLines = 1)
 }
 
 @Composable
 fun RenderLeading(
-    loading: Boolean,
     size: Size,
     useTintColor: Boolean = true,
-    type: ButtonType,
     iconLeft: String = "",
 ) {
+    val loading = IsLoading.current
+    val bgColor = BackgroundColor.current
     val iconSize = remember(size) { getIconSize(size) }
     val marginRight = remember(size) { getIconSpace(size) }
-    val color = if (useTintColor) getTextColor(type) else Color.Unspecified
+    val color = if (useTintColor) TextColor.current else Color.Unspecified
 
     Row(
         verticalAlignment = Alignment.CenterVertically,
@@ -148,6 +150,8 @@ fun RenderLeading(
             Box(Modifier.padding(end = marginRight)) {
                 LottieAnimation(
                     modifier = Modifier.size(iconSize),
+                    bgColor = bgColor,
+                    tintColor = color,
                     path = "files/lottie_circle_loader"
                 )
             }
@@ -169,9 +173,8 @@ fun RenderTrailing(
     iconRight: String,
     size: Size,
     useTintColor: Boolean,
-    type: ButtonType,
 ) {
-    val color = if (useTintColor) getTextColor(type) else Color.Unspecified
+    val color = if (useTintColor) TextColor.current else Color.Unspecified
     val marginLeft = remember(size) { getIconSpace(size) }
 
     if (iconRight.isNotEmpty()) {
@@ -192,39 +195,60 @@ fun getTypeStyle(
     size: Size,
 ): Modifier {
     val theme = AppTheme.current
+    val bgColor = BackgroundColor.current
     val radius = remember(size) { size.value.radius }
+    val modifier = Modifier.background(bgColor)
 
     return remember(type, color, theme, radius) {
         when (type) {
-            ButtonType.DISABLED -> Modifier.background(theme.colors.background.disable)
+            ButtonType.DISABLED -> modifier
                 .border(0.dp, Color.Unspecified, RoundedCornerShape(radius))
 
-            ButtonType.PRIMARY -> Modifier.background(theme.colors.primary)
+            ButtonType.PRIMARY -> modifier
                 .border(0.dp, Color.Unspecified, RoundedCornerShape(radius))
 
-            ButtonType.SECONDARY -> Modifier
-                .background(theme.colors.background.surface)
+            ButtonType.SECONDARY -> modifier
                 .border(1.dp, theme.colors.border.default, RoundedCornerShape(radius))
 
-            ButtonType.OUTLINE -> Modifier
-                .background(theme.colors.background.surface)
+            ButtonType.OUTLINE -> modifier
                 .border(
                     1.dp,
                     color ?: theme.colors.primary,
                     RoundedCornerShape(radius)
                 )
 
-            ButtonType.TONAL -> Modifier.background(theme.colors.background.tonal)
+            ButtonType.TONAL -> modifier
                 .border(0.dp, Color.Unspecified, RoundedCornerShape(radius))
 
-            ButtonType.DANGER -> Modifier.background(theme.colors.error.primary)
+            ButtonType.DANGER -> modifier
                 .border(0.dp, Color.Unspecified, RoundedCornerShape(radius))
 
-            ButtonType.TEXT -> Modifier
+            ButtonType.TEXT -> modifier
         }
     }
 }
 
+@Composable
+fun getButtonBackgroundColor(
+    loading: Boolean,
+    type: ButtonType
+): Color {
+    val theme = AppTheme.current
+
+    return when (type) {
+        ButtonType.DISABLED -> theme.colors.background.disable.withLoading(loading)
+        ButtonType.PRIMARY -> theme.colors.primary.withLoading(loading)
+        ButtonType.SECONDARY -> theme.colors.background.surface.withLoading(loading)
+        ButtonType.OUTLINE -> theme.colors.background.surface.withLoading(loading)
+        ButtonType.TONAL -> theme.colors.background.tonal.withLoading(loading)
+        ButtonType.DANGER -> theme.colors.error.primary.withLoading(loading)
+        ButtonType.TEXT -> Color.Unspecified
+    }
+}
+
+fun Color.withLoading(loading: Boolean): Color =
+    this.copy(alpha = if (loading) 0.75f else 1f)
+
 /**
  * @param onClick called when this button is clicked
  * @param type [ButtonType] that define the type of button.
@@ -266,30 +290,36 @@ fun Button(
     )
 
     val sizeSpecs = remember(size) { size.value }
-
-    Row(
-        modifier = customModifier
-            .then(getTypeStyle(type, size = size))
-            .padding(horizontal = sizeSpecs.padding)
-            .defaultMinSize(minWidth = sizeSpecs.width)
-            .height(sizeSpecs.height)
-            .alpha(if(loading) 0.75f else 1f),
-        horizontalArrangement = Arrangement.Center,
-        verticalAlignment = Alignment.CenterVertically,
-    ) {
-        RenderLeading(
-            loading,
-            size,
-            useTintColor,
-            type,
-            iconLeft = iconLeft
-        )
-        RenderTitle(size, title, type = type)
-        RenderTrailing(
-            size = size,
-            useTintColor = useTintColor,
-            type = type,
-            iconRight = iconRight
-        )
+    CompositionLocalProvider(
+        IsLoading provides loading,
+        BackgroundColor provides getButtonBackgroundColor(loading, type),
+        TextColor provides getTextColor(loading, type)
+    ){
+        Row(
+            modifier = customModifier
+                .then(getTypeStyle(type, size = size))
+                .padding(horizontal = sizeSpecs.padding)
+                .defaultMinSize(minWidth = sizeSpecs.width)
+                .height(sizeSpecs.height),
+            horizontalArrangement = Arrangement.Center,
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            RenderLeading(
+                size = size,
+                useTintColor = useTintColor,
+                iconLeft = iconLeft
+            )
+            RenderTitle(size, title, type = type)
+            RenderTrailing(
+                size = size,
+                useTintColor = useTintColor,
+                iconRight = iconRight
+            )
+        }
     }
 }
+
+private val IsLoading = staticCompositionLocalOf<Boolean> { false }
+private val BackgroundColor = staticCompositionLocalOf<Color> { Color.Transparent }
+private val TextColor = staticCompositionLocalOf<Color> { Color.Transparent }
+

package/compose/src/commonMain/kotlin/vn/momo/kits/platform/Platform.kt

@@ -33,5 +33,6 @@ expect fun getAndroidBuildVersion(): Int
 expect fun LottieAnimation(
     path: String,
     tintColor: Color? = null,
+    bgColor: Color? = null,
     modifier: Modifier = Modifier
 )

package/compose/src/iosMain/kotlin/vn/momo/kits/platform/Platform.ios.kt

@@ -14,11 +14,13 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.NativePaint
+import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.interop.UIKitView
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import cocoapods.lottie_ios.CompatibleAnimation
 import cocoapods.lottie_ios.CompatibleAnimationView
+import cocoapods.lottie_ios.CompatibleAnimationKeypath
 import kotlinx.cinterop.ExperimentalForeignApi
 import kotlinx.cinterop.get
 import kotlinx.cinterop.memScoped
@@ -66,6 +68,7 @@ actual fun getAndroidBuildVersion(): Int = 999
 actual fun LottieAnimation(
     path: String,
     tintColor: Color?,
+    bgColor: Color?,
     modifier: Modifier
 ) {
     var animation by remember { mutableStateOf<CompatibleAnimation?>(null) }
@@ -84,10 +87,38 @@ actual fun LottieAnimation(
                 {
                     CompatibleAnimationView(value).also {
                         it.translatesAutoresizingMaskIntoConstraints = true
-                        it.setBackgroundColor(UIColor.whiteColor)
+                        it.setBackgroundColor(bgColor?.toUIColor() ?: UIColor.whiteColor)
                         it.setLoopAnimationCount(-1.0)
                         it.setAnimationSpeed(1.0)
 
+                        if (tintColor != null) {
+                            val uiColor = tintColor.toUIColor()
+
+                            it.setColorValue(
+                                uiColor,
+                                CompatibleAnimationKeypath("**.Fill 1.Color")
+                            )
+                            it.setColorValue(
+                                uiColor,
+                                CompatibleAnimationKeypath("**.Fill.Color")
+                            )
+                            it.setColorValue(
+                                uiColor,
+                                CompatibleAnimationKeypath("**.Color")
+                            )
+
+                            it.setColorValue(
+                                uiColor,
+                                CompatibleAnimationKeypath("**.Stroke 1.Color")
+                            )
+                            it.setColorValue(
+                                uiColor,
+                                CompatibleAnimationKeypath("**.Stroke.Color")
+                            )
+                        }
+
+
+
                         it.play()
                     }
                 }
@@ -101,4 +132,20 @@ actual fun LottieAnimation(
             }
         }
     }
+}
+
+fun Color.toUIColor(): UIColor {
+    val argb = this.toArgb()
+
+    val a = ((argb shr 24) and 0xFF) / 255.0
+    val r = ((argb shr 16) and 0xFF) / 255.0
+    val g = ((argb shr 8) and 0xFF) / 255.0
+    val b = (argb and 0xFF) / 255.0
+
+    return UIColor(
+        red = r,
+        green = g,
+        blue = b,
+        alpha = a
+    )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.151.2-test.12",
+  "version": "0.151.2-test.13",
   "private": false,
   "dependencies": {
     "@momo-platform/native-max-api": "1.0.18"