@momo-kits/native-kits 0.152.1-beta.1 → 0.152.1-beta.2

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

@@ -1,7 +1,13 @@
 package vn.momo.kits.components
 
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
@@ -10,15 +16,19 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.getValue
 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.graphics.graphicsLayer
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
@@ -28,7 +38,6 @@ import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
-import vn.momo.kits.modifier.activeOpacityClickable
 import vn.momo.kits.platform.LottieAnimation
 
 enum class ButtonType {
@@ -75,7 +84,6 @@ enum class Size(val value: ButtonSpecs) {
     )
 }
 
-// Cache for style calculations to avoid repeated computations
 private val styleCache = mapOf(
     Size.LARGE to Typography.actionDefaultBold,
     Size.MEDIUM to Typography.actionSBold,
@@ -98,13 +106,8 @@ fun getStyle(size: Size): TextStyle {
     return styleCache[size] ?: Typography.actionDefaultBold
 }
 
-fun getIconSize(size: Size): Dp {
-    return iconSizeCache[size] ?: 24.dp
-}
-
-fun getIconSpace(size: Size): Dp {
-    return iconSpaceCache[size] ?: Spacing.S
-}
+fun getIconSize(size: Size): Dp = iconSizeCache[size] ?: 24.dp
+fun getIconSpace(size: Size): Dp = iconSpaceCache[size] ?: Spacing.S
 
 @Composable
 fun getTextColor(loading: Boolean, type: ButtonType): Color {
@@ -127,67 +130,66 @@ fun getTextColor(loading: Boolean, type: ButtonType): Color {
 fun RenderTitle(size: Size, title: String = "", type: ButtonType) {
     val style = remember(size) { getStyle(size) }
     val color = TextColor.current
-    Text(style = style, text = title, color = color, overflow = TextOverflow.Ellipsis, maxLines = 1)
+    Text(
+        style = style,
+        text = title,
+        color = color,
+        overflow = TextOverflow.Ellipsis,
+        maxLines = 1
+    )
 }
 
 @Composable
-fun RenderLeading(
+fun RenderIcon(
     size: Size,
+    isIconLeft: Boolean,
     useTintColor: Boolean = true,
-    iconLeft: String = "",
+    icon: String = "",
+    forceLoading: Boolean = false
 ) {
-    val loading = IsLoading.current
     val bgColor = BackgroundColor.current
     val iconSize = remember(size) { getIconSize(size) }
-    val marginRight = remember(size) { getIconSpace(size) }
+    val margin = remember(size) { getIconSpace(size) }
     val color = if (useTintColor) TextColor.current else Color.Unspecified
 
-    Row(
-        verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.Center
-    ) {
-        if (loading) {
-            Box(Modifier.padding(end = marginRight)) {
-                LottieAnimation(
-                    modifier = Modifier.size(iconSize),
-                    bgColor = bgColor,
-                    tintColor = color,
-                    path = "files/lottie_circle_loader"
-                )
-            }
-        } else {
-            if (iconLeft.isNotEmpty()) {
-                Icon(
-                    source = iconLeft,
-                    color = color,
-                    size = iconSize,
-                    modifier = Modifier.padding(end = marginRight)
-                )
-            }
-        }
-    }
-}
+    val showLoading = forceLoading
 
-@Composable
-fun RenderTrailing(
-    iconRight: String,
-    size: Size,
-    useTintColor: Boolean,
-) {
-    val color = if (useTintColor) TextColor.current else Color.Unspecified
-    val marginLeft = remember(size) { getIconSpace(size) }
+    val modifier = Modifier.padding(
+        start = if (isIconLeft) 0.dp else margin,
+        end = if (isIconLeft) margin else 0.dp
+    )
 
-    if (iconRight.isNotEmpty()) {
-        val iconSize = remember(size) { getIconSize(size) }
+    if (showLoading) {
+        Box(modifier) {
+            LottieAnimation(
+                modifier = Modifier.size(iconSize),
+                bgColor = bgColor,
+                tintColor = color,
+                path = "files/lottie_circle_loader"
+            )
+        }
+    } else if (icon.isNotEmpty()) {
         Icon(
-            source = iconRight,
+            source = icon,
             color = color,
             size = iconSize,
-            modifier = Modifier.padding(start = marginLeft)
+            modifier = modifier
         )
     }
 }
 
+private fun shouldLoadingOnLeft(iconLeft: String, iconRight: String): Boolean {
+    val hasLeft = iconLeft.isNotEmpty()
+    val hasRight = iconRight.isNotEmpty()
+    return when {
+        !hasLeft && !hasRight -> true
+        hasLeft && !hasRight -> true
+        !hasLeft && hasRight -> false
+        hasLeft && hasRight -> false
+        else -> true
+    }
+}
+
 @Composable
 fun getTypeStyle(
     type: ButtonType,
@@ -211,11 +213,7 @@ fun getTypeStyle(
                 .border(1.dp, theme.colors.border.default, RoundedCornerShape(radius))
 
             ButtonType.OUTLINE -> modifier
-                .border(
-                    1.dp,
-                    color ?: theme.colors.primary,
-                    RoundedCornerShape(radius)
-                )
+                .border(1.dp, color ?: theme.colors.primary, RoundedCornerShape(radius))
 
             ButtonType.TONAL -> modifier
                 .border(0.dp, Color.Unspecified, RoundedCornerShape(radius))
@@ -251,15 +249,6 @@ fun getButtonBackgroundColor(
 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.
- * @param iconRight [String] the icon at the right of title
- * @param iconLeft [String] the icon at the left of title
- * @param title [String] title of button
- * @param loading [Boolean] used when you want to use loading animation
- * @param useTintColor [Boolean] controls color of the icon.
- */
 @Composable
 fun Button(
     onClick: () -> Unit,
@@ -275,52 +264,81 @@ fun Button(
 ) {
     val radius = remember(size) { size.value.radius }
     val isEnabled = remember(type) { type != ButtonType.DISABLED }
+    val loadingOnLeft = remember(iconLeft, iconRight) {
+        shouldLoadingOnLeft(iconLeft, iconRight)
+    }
+
+    val sizeSpecs = remember(size) { size.value }
+
+    val interactionSource = remember { MutableInteractionSource() }
+    val isPressed by interactionSource.collectIsPressedAsState()
+
+    val animatedPadding by animateDpAsState(
+        targetValue = if (isPressed && isEnabled && !loading) 2.dp else 0.dp,
+        animationSpec = tween(100),
+        label = "pressPadding"
+    )
+
+    val targetAlpha = if (isPressed && isEnabled && !loading) 0.5f else 1f
+    val alpha by animateFloatAsState(
+        targetValue = targetAlpha,
+        animationSpec = tween(100),
+        label = "buttonPressAlpha"
+    )
 
-    val customModifier = remember(isFull, radius, isEnabled, modifier) {
-        if (isFull) {
+    val clickableModifier =
+        if (isEnabled && !loading) {
             modifier
-                .fillMaxWidth()
+                .then(if (isFull) Modifier.fillMaxWidth() else Modifier)
                 .clip(RoundedCornerShape(radius))
+                .clickable(
+                    enabled = isEnabled && !loading,
+                    interactionSource = interactionSource,
+                    indication = null,
+                    onClick = onClick
+                )
+                .alpha(alpha)
         } else {
             modifier
+                .then(if (isFull) Modifier.fillMaxWidth() else Modifier)
                 .clip(RoundedCornerShape(radius))
         }
-    }.activeOpacityClickable(
-        activeOpacity = 0.5f,
-        enabled = isEnabled && !loading,
-        onClick = onClick
-    )
 
-    val sizeSpecs = remember(size) { size.value }
     CompositionLocalProvider(
         IsLoading provides loading,
         BackgroundColor provides getButtonBackgroundColor(loading, type),
         TextColor provides getTextColor(loading, type)
-    ){
+    ) {
         Row(
-            modifier = customModifier
+            modifier = clickableModifier
+                .padding(horizontal = animatedPadding)
+                .clip(RoundedCornerShape(radius))
                 .then(getTypeStyle(type, size = size))
                 .padding(horizontal = sizeSpecs.padding)
-                .defaultMinSize(minWidth = sizeSpecs.width)
                 .height(sizeSpecs.height),
             horizontalArrangement = Arrangement.Center,
             verticalAlignment = Alignment.CenterVertically,
         ) {
-            RenderLeading(
+            RenderIcon(
                 size = size,
+                isIconLeft = true,
                 useTintColor = useTintColor,
-                iconLeft = iconLeft
+                icon = iconLeft,
+                forceLoading = loading && loadingOnLeft
             )
             RenderTitle(size, title, type = type)
-            RenderTrailing(
+            RenderIcon(
                 size = size,
+                isIconLeft = false,
                 useTintColor = useTintColor,
-                iconRight = iconRight
+                icon = iconRight,
+                forceLoading = loading && !loadingOnLeft
             )
         }
     }
 }
 
+
 private val IsLoading = staticCompositionLocalOf<Boolean> { false }
 private val BackgroundColor = staticCompositionLocalOf<Color> { Color.Transparent }
 private val TextColor = staticCompositionLocalOf<Color> { Color.Transparent }

package/ios/Button/Button.swift

@@ -6,11 +6,11 @@ import Lottie
 
 public enum ButtonType {
     case primary
-    case danger
-    case tonal
-    case text
     case secondary
+    case tonal
     case outline
+    case danger
+    case text
     case disabled
 }
 
@@ -27,70 +27,103 @@ public struct ButtonStyleData {
     let content: Color
     let border: Color?
     let borderWidth: CGFloat
+}
 
-    public init(
-        background: Color,
-        content: Color,
-        border: Color? = nil,
-        borderWidth: CGFloat = 1
-    ) {
-        self.background = background
-        self.content = content
-        self.border = border
-        self.borderWidth = borderWidth
+public extension ButtonType {
+    func backgroundColor(loading: Bool) -> Color {
+        switch self {
+        case .disabled: return Colors.black05.opacity(loading ? 0.75 : 1)
+        case .primary:  return Colors.primary.opacity(loading ? 0.75 : 1)
+        case .secondary: return Colors.card.opacity(loading ? 0.75 : 1)
+        case .outline: return Colors.card.opacity(loading ? 0.75 : 1)
+        case .tonal: return Colors.primaryLight.opacity(loading ? 0.75 : 1)
+        case .danger: return Colors.error.opacity(loading ? 0.75 : 1)
+        case .text: return .clear
+        }
     }
-}
 
-// MARK: - ButtonType Extension (Style mapping)
+    func contentColor(loading: Bool) -> Color {
+        switch self {
+        case .disabled: return Colors.black06.opacity(loading ? 0.75 : 1)
+        case .primary: return Colors.black01
+        case .secondary: return Colors.black17
+        case .outline: return Colors.primary
+        case .tonal: return Colors.primary
+        case .danger: return Colors.black01
+        case .text: return Colors.primary
+        }
+    }
 
-public extension ButtonType {
-    var style: ButtonStyleData {
+    var borderColor: Color? {
         switch self {
-        case .primary:
-            return ButtonStyleData(
-                background: Colors.primary,
-                content: Colors.black01
-            )
-        case .danger:
-            return ButtonStyleData(
-                background: Colors.error,
-                content: Colors.black01
-            )
-        case .tonal:
-            return ButtonStyleData(
-                background: Colors.primaryLight,
-                content: Colors.primary
-            )
-        case .text:
-            return ButtonStyleData(
-                background: .clear,
-                content: Colors.primary
-            )
-        case .secondary:
-            return ButtonStyleData(
-                background: Colors.black01,
-                content: Colors.black17,
-                border: Colors.black04
-            )
-        case .outline:
-            return ButtonStyleData(
-                background: Colors.card,
-                content: Colors.primary,
-                border: Colors.primary
-            )
-        case .disabled:
-            return ButtonStyleData(
-                background: Colors.black05,
-                content: Colors.black06
-            )
+        case .outline: return Colors.primary
+        case .secondary: return Colors.black04
+        default: return nil
+        }
+    }
+
+    var borderWidth: CGFloat {
+        switch self {
+        case .outline: return 1
+        case .secondary: return 1
+        default: return 0
         }
     }
 }
 
-// MARK: - Button View
+extension ButtonSize {
+    var height: CGFloat {
+        switch self {
+        case .large: return 48
+        case .medium: return 36
+        case .small: return 28
+        }
+    }
+
+    var padding: CGFloat {
+        switch self {
+        case .large: return Spacing.L
+        case .medium: return Spacing.M
+        case .small: return Spacing.S
+        }
+    }
+
+    var radius: CGFloat {
+        Radius.S
+    }
+
+    var iconSize: CGFloat {
+        switch self {
+        case .large: return 24
+        case .medium, .small: return 16
+        }
+    }
+
+    var iconSpacing: CGFloat {
+        switch self {
+        case .small: return Spacing.XS
+        case .medium, .large: return Spacing.S
+        }
+    }
+
+    var font: Font {
+        switch self {
+        case .large: return .system(size: 16, weight: .bold)
+        case .medium: return .system(size: 14, weight: .bold)
+        case .small: return .system(size: 12, weight: .bold)
+        }
+    }
+}
 
 public struct Button: View {
-    // MARK: Lifecycle
+
+    var title: String
+    var action: () -> Void
+    var type: ButtonType
+    var size: ButtonSize
+    var iconLeft: AnyView?
+    var iconRight: AnyView?
+    var loading: Bool
 
     public init(
         title: String = "",
@@ -110,86 +143,68 @@ public struct Button: View {
         self.loading = loading
     }
 
-    // MARK: Internal
-
-    var title: String
-    var action: () -> Void
-    var type: ButtonType
-    var size: ButtonSize
-    var iconLeft: AnyView?
-    var iconRight: AnyView?
-    var loading: Bool
-
-    // MARK: Private Helpers
-
-    private var iconSize: CGFloat {
-        switch size {
-        case .large: return 24
-        case .medium, .small: return 16
-        }
-    }
+    private func shouldLoadingOnLeft(_ left: AnyView?, _ right: AnyView?) -> Bool {
+        let hasLeft = left != nil
+        let hasRight = right != nil
 
-    private func height(for size: ButtonSize) -> CGFloat {
-        switch size {
-        case .large: return 48
-        case .medium: return 36
-        case .small: return 28
+        switch (hasLeft, hasRight) {
+        case (false, false): return true
+        case (true, false): return true
+        case (false, true): return false
+        case (true, true): return false
         }
     }
 
-    private func padding(for size: ButtonSize) -> CGFloat {
-        switch size {
-        case .large: return Spacing.L
-        case .medium: return Spacing.M
-        case .small: return Spacing.S
-        }
-    }
+    public var body: some View {
 
-    private func renderTitle(title: String, size: ButtonSize) -> Text {
-        switch size {
-        case .large:
-            return Text(title).font(.system(size: 16, weight: .bold))
-        case .medium:
-            return Text(title).font(.system(size: 14, weight: .bold))
-        case .small:
-            return Text(title).font(.system(size: 12, weight: .bold))
-        }
-    }
+        let loadingOnLeft = shouldLoadingOnLeft(iconLeft, iconRight)
 
-    // MARK: View
+        let bg = type.backgroundColor(loading: loading)
+        let fg = type.contentColor(loading: loading)
+        let border = type.borderColor
+        let borderWidth = type.borderWidth
 
-    public var body: some View {
-        let style = type.style
+        SwiftUI.Button(action: {
+            if !loading && type != .disabled {
+                action()
+            }
+        }) {
+            HStack(spacing: size.iconSpacing) {
 
-        SwiftUI.Button(action: action) {
-            HStack(spacing: 8) {
-                if loading {
+                if loading && loadingOnLeft {
                     LottieView(name: "lottie_circle_loader", loopMode: .loop)
-                        .frame(width: iconSize, height: iconSize)
-                        .colorMultiply(style.content)
+                        .frame(width: size.iconSize, height: size.iconSize)
+                        .colorMultiply(fg)
+
                 } else if let iconLeft = iconLeft {
-                    iconLeft.frame(width: iconSize, height: iconSize)
+                    iconLeft.frame(width: size.iconSize, height: size.iconSize)
                 }
 
-                renderTitle(title: title, size: size)
+                Text(title)
+                    .font(size.font)
+                    .foregroundColor(fg)
                     .lineLimit(1)
                     .truncationMode(.tail)
 
-                if let iconRight = iconRight {
-                    iconRight.frame(width: iconSize, height: iconSize)
+                if loading && !loadingOnLeft {
+                    LottieView(name: "lottie_circle_loader", loopMode: .loop)
+                        .frame(width: size.iconSize, height: size.iconSize)
+                        .colorMultiply(fg)
+
+                } else if let iconRight = iconRight {
+                    iconRight.frame(width: size.iconSize, height: size.iconSize)
                 }
             }
             .frame(maxWidth: .infinity)
-            .padding(.horizontal, padding(for: size))
-            .frame(height: height(for: size))
-            .background(style.background)
-            .foregroundColor(style.content)
+            .padding(.horizontal, size.padding)
+            .frame(height: size.height)
+            .background(bg)
             .overlay(
-                RoundedRectangle(cornerRadius: Radius.S)
-                    .stroke(style.border ?? .clear, lineWidth: style.border != nil ? style.borderWidth : 0)
+                RoundedRectangle(cornerRadius: size.radius)
+                    .stroke(border ?? .clear, lineWidth: border != nil ? borderWidth : 0)
             )
-            .clipShape(RoundedRectangle(cornerRadius: Radius.S))
-            .opacity(loading ? 0.75 : 1.0)
+            .clipShape(RoundedRectangle(cornerRadius: size.radius))
+            .opacity(loading ? 0.75 : 1)
         }
         .disabled(type == .disabled || loading)
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.152.1-beta.1",
+  "version": "0.152.1-beta.2",
   "private": false,
   "dependencies": {
     "@momo-platform/native-max-api": "1.0.18"

package/build/kotlin/commonizedNativeDistributionLocation.txt

@@ -1 +0,0 @@
-/Users/huynhdung/.konan/kotlin-native-prebuilt-macos-aarch64-2.1.0/klib/commonized/2.1.0