@momo-kits/native-kits 0.157.5-debug → 0.157.6-debug

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

@@ -0,0 +1,192 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.horizontalScroll
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.CornerRadius
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.PathEffect
+import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.AppTheme
+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.modifier.conditional
+
+data class UploadImage(
+    val uri: String? = null,
+    val loading: Boolean = false,
+)
+
+@Composable
+fun Uploader(
+    images: List<UploadImage>,
+    modifier: Modifier = Modifier,
+    numberOfImages: Int = 1,
+    disabled: Boolean = false,
+    width: Dp = 64.dp,
+    height: Dp = 64.dp,
+    onAdd: () -> Unit = {},
+    onCancel: ((image: UploadImage, index: Int) -> Unit)? = null,
+    onPressImage: (image: UploadImage, index: Int) -> Unit = { _, _ -> },
+) {
+    val shouldShowPicker = remember(images.size, numberOfImages) {
+        images.size < numberOfImages
+    }
+
+    Row(
+        modifier = modifier
+            .conditional(IsShowBaseLineDebug) { border(1.dp, Colors.blue_03) },
+        horizontalArrangement = Arrangement.spacedBy(Spacing.S),
+        verticalAlignment = Alignment.Top,
+    ) {
+        if (shouldShowPicker) {
+            UploaderPickerCell(
+                disabled = disabled,
+                width = width,
+                height = height,
+                onAdd = onAdd,
+            )
+        }
+
+        Row(
+            modifier = Modifier.horizontalScroll(rememberScrollState()),
+            horizontalArrangement = Arrangement.spacedBy(Spacing.S),
+        ) {
+            images.forEachIndexed { index, image ->
+                UploaderImageItem(
+                    image = image,
+                    width = width,
+                    height = height,
+                    index = index,
+                    onCancel = onCancel,
+                    onPressImage = { onPressImage(image, index) },
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun UploaderPickerCell(
+    disabled: Boolean,
+    width: Dp,
+    height: Dp,
+    onAdd: () -> Unit,
+) {
+    val theme = AppTheme.current
+    val mainColor = if (disabled) theme.colors.text.disable else theme.colors.text.hint
+    val borderColor = if (disabled) theme.colors.border.disable else theme.colors.border.default
+
+    Box(
+        modifier = Modifier
+            .size(width = width, height = height)
+            .clip(RoundedCornerShape(Radius.XS))
+            .dashedBorder(color = borderColor, radius = Radius.XS)
+            .activeOpacityClickable(enabled = !disabled, onClick = onAdd),
+        contentAlignment = Alignment.Center,
+    ) {
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.spacedBy(Spacing.XXS),
+        ) {
+            Icon(
+                source = "16_navigation_plus",
+                color = mainColor,
+                size = 16.dp,
+            )
+            Text(
+                text = "Thêm hình",
+                style = Typography.descriptionXsRegular,
+                color = mainColor,
+            )
+        }
+    }
+}
+
+@Composable
+private fun UploaderImageItem(
+    image: UploadImage,
+    width: Dp,
+    height: Dp,
+    index: Int,
+    onCancel: ((image: UploadImage, index: Int) -> Unit)?,
+    onPressImage: () -> Unit,
+) {
+    Box(
+        modifier = Modifier
+            .size(width = width, height = height)
+            .activeOpacityClickable(onClick = onPressImage),
+    ) {
+        Image(
+            source = image.uri ?: "",
+            modifier = Modifier
+                .fillMaxSize()
+                .clip(RoundedCornerShape(Radius.XS)),
+        )
+
+        if (onCancel != null && !image.loading) {
+            Icon(
+                source = "navigation_close_circle_full",
+                size = 16.dp,
+                color = null,
+                modifier = Modifier
+                    .align(Alignment.TopEnd)
+                    .padding(top = Spacing.XXS, end = Spacing.XXS)
+                    .activeOpacityClickable { onCancel(image, index) },
+            )
+        }
+
+        if (image.loading) {
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .clip(RoundedCornerShape(Radius.XS))
+                    .background(Color(0x66FFFFFF)),
+                contentAlignment = Alignment.Center,
+            ) {
+                Skeleton()
+            }
+        }
+    }
+}
+
+private fun Modifier.dashedBorder(
+    color: Color,
+    radius: Dp,
+    strokeWidth: Dp = 1.dp,
+    dashWidth: Float = 10f,
+    dashGap: Float = 6f,
+): Modifier = this.drawBehind {
+    val strokePx = strokeWidth.toPx()
+    val pathEffect = PathEffect.dashPathEffect(floatArrayOf(dashWidth, dashGap), 0f)
+    val cornerRadiusPx = radius.toPx()
+    drawRoundRect(
+        color = color,
+        style = Stroke(
+            width = strokePx,
+            pathEffect = pathEffect,
+        ),
+        cornerRadius = CornerRadius(cornerRadiusPx, cornerRadiusPx),
+    )
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/const/Spacing.kt

@@ -10,4 +10,7 @@ object Spacing {
     val L = 16.dp
     val XL = 24.dp
     val XXL = 32.dp
+    val Size3XL = 48.dp
+    val Size4XL = 56.dp
+    val Size5XL = 64.dp
 }

package/compose/src/commonMain/kotlin/vn/momo/kits/const/Theme.kt

@@ -19,6 +19,7 @@ data class Background(
 data class ColorScheme(
     val primary: Color,
     val secondary: Color,
+    val gradient: Color,
     val background: Background,
     val text: TextColors,
     val border: BorderColors,
@@ -71,6 +72,7 @@ val defaultTheme = Theme(
     colors = ColorScheme(
         primary = Colors.pink_03,
         secondary = Colors.pink_07,
+        gradient = Color(0xFFFDCADE),
         background = Background(
             default = Color(0xFFF2F2F6),
             surface = Colors.black_01,
@@ -87,7 +89,7 @@ val defaultTheme = Theme(
         ),
         border = BorderColors(
             default = Colors.black_04,
-            disable = Colors.black_03
+            disable = Colors.black_02
         ),
         success = ColorSet(
             primary = Colors.green_03,
@@ -127,10 +129,11 @@ val darkTheme = Theme(
     colors = ColorScheme(
         primary = Colors.pink_04,
         secondary = Colors.pink_08,
+        gradient = Color(0xFFFDCADE),
         background = Background(
             default = Color(0xFF121212),
             surface = Color(0xFF1E1E1E),
-            tonal = Colors.pink_08,
+            tonal = Colors.pink_10,
             pressed = Color(0xFF1A1A1A),
             selected = Colors.pink_11,
             disable = Color(0xFF303030)

package/compose/src/commonMain/kotlin/vn/momo/kits/modifier/AutomationId.kt

@@ -5,21 +5,12 @@ import androidx.compose.ui.node.ModifierNodeElement
 import androidx.compose.ui.node.SemanticsModifierNode
 import androidx.compose.ui.semantics.SemanticsPropertyReceiver
 import androidx.compose.ui.semantics.contentDescription
-import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTag
 import vn.momo.kits.platform.getPlatformName
+import vn.momo.kits.platform.semantics
 
 fun Modifier.setAutomationId(accessibilityId: String, label: String? = null): Modifier {
-    return if (getPlatformName() == "Android") {
-        semantics {
-            contentDescription = accessibilityId
-        }
-    } else {
-        semantics {
-            testTag = accessibilityId
-            contentDescription = label ?: accessibilityId
-        }
-    }
+    return this.semantics(accessibilityId)
 }
 
 /**

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

@@ -39,4 +39,8 @@ expect fun LottieAnimation(
 
 expect fun NativePaint.setColor(
     color: Color = Color.Black
-)
+)
+
+expect fun Modifier.semantics(
+    accessibilityId: String
+) : Modifier

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

@@ -16,6 +16,8 @@ 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.semantics.SemanticsPropertyKey
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import cocoapods.lottie_ios.CompatibleAnimation
@@ -146,4 +148,14 @@ fun Color.toUIColor(): UIColor {
 
 actual fun NativePaint.setColor(color: Color){
     this.color = color.toArgb()
+}
+
+private val TestAutomationId = SemanticsPropertyKey<String>(
+    name = "TestAutomationId"
+)
+
+actual fun Modifier.semantics(accessibilityId: String): Modifier {
+    return this.semantics(mergeDescendants = false) {
+        this[TestAutomationId] = accessibilityId
+    }
 }

package/gradle.properties

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

package/ios/Popup/PopupPromotion.swift

@@ -27,11 +27,11 @@ public struct PopupPromotion: View {
                     .resizable()
                     .placeholder {
                         Color.gray
-                            .aspectRatio(0.5625, contentMode: .fit)
+                            .aspectRatio(0.72, contentMode: .fit)
                             .frame(maxWidth: UIScreen.main.bounds.width - Spacing.XL * 2)
                             .clipped()
                     }
-                    .aspectRatio(0.5625, contentMode: .fit)
+                    .aspectRatio(0.72, contentMode: .fit)
                     .frame(maxWidth: UIScreen.main.bounds.width - Spacing.XL * 2, alignment: .center)
                     .clipped()
                     .onTapGesture {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.157.5-debug",
+  "version": "0.157.6-debug",
   "private": false,
   "dependencies": {},
   "devDependencies": {},