@momo-kits/native-kits 0.162.2-beta.21-debug → 0.162.2-beta.22-debug

package/compose/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.162.2-beta.21-debug"
+        version = "0.162.2-beta.22-debug"
         summary = "IOS Shared module"
         homepage = "https://momo.vn"
         ios.deploymentTarget = "15.0"

package/compose/src/commonMain/kotlin/vn/momo/kits/application/HeaderRight.kt

@@ -139,7 +139,7 @@ private fun ToolkitHeaderRight(
     }
 
     fun onPressClose() {
-        api?.request("dismissAll", "", { _ -> })
+        api?.request("dismissAll", "")
     }
 
     fun onPressMore() {

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

@@ -20,6 +20,8 @@ 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.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
@@ -143,9 +145,10 @@ fun RenderIcon(
     icon: String = "",
     forceLoading: Boolean = false,
     textColor: Color? = null,
+    iconOnly: Boolean = false,
 ) {
     val iconSize = remember(size) { getIconSize(size) }
-    val margin = remember(size) { getIconSpace(size) }
+    val margin = remember(size, iconOnly) { if (iconOnly) 0.dp else getIconSpace(size) }
     val color = if (useTintColor) textColor else Color.Unspecified
 
     val modifier = Modifier.padding(
@@ -246,6 +249,12 @@ fun getButtonBackgroundColor(
 private fun Color.withLoading(loading: Boolean): Color =
     this.copy(alpha = if (loading) 0.75f else 1f)
 
+/**
+ * When [iconOnly] is true the label is hidden and the button collapses to a compact,
+ * icon-sized box (it ignores [isFull] and always wraps its content). [title] stays
+ * required and is exposed as the button's accessibility label. Supply the glyph via
+ * [iconLeft] (preferred) or [iconRight]; while [loading] the spinner replaces the icon.
+ */
 @Composable
 fun Button(
     onClick: () -> Unit,
@@ -257,6 +266,7 @@ fun Button(
     loading: Boolean = false,
     useTintColor: Boolean = true,
     isFull: Boolean = true,
+    iconOnly: Boolean = false,
     modifier: Modifier = Modifier,
 ) {
     val radius = remember(size) { size.value.radius }
@@ -264,6 +274,7 @@ fun Button(
     val loadingOnLeft = remember(iconLeft, iconRight) {
         shouldLoadingOnLeft(iconLeft, iconRight)
     }
+    val iconOnlyIcon = remember(iconLeft, iconRight) { iconLeft.ifEmpty { iconRight } }
 
     val sizeSpecs = remember(size) { size.value }
 
@@ -302,7 +313,7 @@ fun Button(
     val bgColor = getButtonBackgroundColor(loading, type)
     val textColor = getTextColor(loading, type)
 
-    val rootModifier = if (isFull) {
+    val rootModifier = if (isFull && !iconOnly) {
         Modifier
             .fillMaxWidth()
             .wrapContentHeight()
@@ -311,7 +322,11 @@ fun Button(
     }
 
     Box(
-        modifier = rootModifier.then(clickableModifier),
+        modifier = rootModifier
+            .then(clickableModifier)
+            .conditional(iconOnly) {
+                semantics(mergeDescendants = true) { contentDescription = title }
+            },
         contentAlignment = Alignment.Center
     ) {
         // Visual background (shrinks on press)
@@ -334,23 +349,35 @@ fun Button(
             horizontalArrangement = Arrangement.Center,
             verticalAlignment = Alignment.CenterVertically,
         ) {
-            RenderIcon(
-                size = size,
-                isIconLeft = true,
-                useTintColor = useTintColor,
-                icon = iconLeft,
-                forceLoading = loading && loadingOnLeft,
-                textColor = textColor
-            )
-            RenderTitle(size, title, textColor = textColor)
-            RenderIcon(
-                size = size,
-                isIconLeft = false,
-                useTintColor = useTintColor,
-                icon = iconRight,
-                forceLoading = loading && !loadingOnLeft,
-                textColor = textColor
-            )
+            if (iconOnly) {
+                RenderIcon(
+                    size = size,
+                    isIconLeft = true,
+                    useTintColor = useTintColor,
+                    icon = iconOnlyIcon,
+                    forceLoading = loading,
+                    textColor = textColor,
+                    iconOnly = true
+                )
+            } else {
+                RenderIcon(
+                    size = size,
+                    isIconLeft = true,
+                    useTintColor = useTintColor,
+                    icon = iconLeft,
+                    forceLoading = loading && loadingOnLeft,
+                    textColor = textColor
+                )
+                RenderTitle(size, title, textColor = textColor)
+                RenderIcon(
+                    size = size,
+                    isIconLeft = false,
+                    useTintColor = useTintColor,
+                    icon = iconRight,
+                    forceLoading = loading && !loadingOnLeft,
+                    textColor = textColor
+                )
+            }
         }
     }
 }

package/gradle.properties

@@ -18,7 +18,7 @@ kotlin.apple.xcodeCompatibility.nowarn=true
 name="ComposeKits"
 group=vn.momo.kits
 artifact.id=kits
-version=0.162.2-beta.20
+version=0.162.2-beta.22
 
 repo=GitLab
 url=https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven

package/ios/Button/Button.swift

@@ -125,7 +125,12 @@ public struct Button: View {
     var iconRight: AnyView?
     var isFull: Bool
     var loading: Bool
+    var iconOnly: Bool
 
+    /// When `iconOnly` is true the label is hidden and the button collapses to a compact,
+    /// icon-sized box (it ignores `isFull`). `title` stays required and is exposed as the
+    /// accessibility label. Supply the glyph via `iconLeft` (preferred) or `iconRight`;
+    /// while `loading` the spinner replaces the icon.
     public init(
         title: String = "",
         action: @escaping () -> Void,
@@ -134,7 +139,8 @@ public struct Button: View {
         iconLeft: AnyView? = nil,
         iconRight: AnyView? = nil,
         isFull: Bool = true,
-        loading: Bool = false
+        loading: Bool = false,
+        iconOnly: Bool = false
     ) {
         self.title = title
         self.action = action
@@ -144,6 +150,7 @@ public struct Button: View {
         self.iconRight = iconRight
         self.isFull = isFull
         self.loading = loading
+        self.iconOnly = iconOnly
     }
 
     private func shouldLoadingOnLeft(_ left: AnyView?, _ right: AnyView?) -> Bool {
@@ -166,35 +173,46 @@ public struct Button: View {
         let border = type.borderColor
         let borderWidth = type.borderWidth
 
-        SwiftUI.Button(action: {
+        let button = SwiftUI.Button(action: {
             if !loading, type != .disabled {
                 action()
             }
         }) {
             HStack(spacing: size.iconSpacing) {
-                if loading && loadingOnLeft {
-                    LottieView(name: "lottie_circle_loader", loopMode: .loop)
-                        .frame(width: size.iconSize, height: size.iconSize)
-                        .colorMultiply(fg)
-
-                } else if let iconLeft = iconLeft {
-                    iconLeft.frame(width: size.iconSize, height: size.iconSize)
-                }
-
-                MomoText(title, typography: size.typographyStyle, color: fg)
-                    .lineLimit(1)
-                    .truncationMode(.tail)
-
-                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)
+                if iconOnly {
+                    if loading {
+                        LottieView(name: "lottie_circle_loader", loopMode: .loop)
+                            .frame(width: size.iconSize, height: size.iconSize)
+                            .colorMultiply(fg)
+
+                    } else if let icon = iconLeft ?? iconRight {
+                        icon.frame(width: size.iconSize, height: size.iconSize)
+                    }
+                } else {
+                    if loading && loadingOnLeft {
+                        LottieView(name: "lottie_circle_loader", loopMode: .loop)
+                            .frame(width: size.iconSize, height: size.iconSize)
+                            .colorMultiply(fg)
+
+                    } else if let iconLeft = iconLeft {
+                        iconLeft.frame(width: size.iconSize, height: size.iconSize)
+                    }
+
+                    MomoText(title, typography: size.typographyStyle, color: fg)
+                        .lineLimit(1)
+                        .truncationMode(.tail)
+
+                    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: isFull ? .infinity : nil)
+            .frame(maxWidth: isFull && !iconOnly ? .infinity : nil)
             .padding(.horizontal, size.padding)
             .frame(height: size.height)
             .background(bg)
@@ -206,5 +224,11 @@ public struct Button: View {
             .opacity(loading ? 0.75 : 1)
         }
         .disabled(type == .disabled || loading)
+
+        if iconOnly {
+            button.accessibilityLabel(Text(title))
+        } else {
+            button
+        }
     }
 }

package/local.properties

@@ -0,0 +1,8 @@
+## This file must *NOT* be checked into Version Control Systems,
+# as it contains information specific to your local configuration.
+#
+# Location of the SDK. This is only used by Gradle.
+# For customization when using a Version Control System, please read the
+# header note.
+#Wed Aug 21 14:20:12 ICT 2024
+sdk.dir=/Users/huynhdung/Library/Android/sdk

package/package.json

@@ -1,8 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.162.2-beta.21-debug",
+  "version": "0.162.2-beta.22-debug",
   "private": false,
-  "dependencies": {},
-  "devDependencies": {},
   "license": "MoMo"
 }