@momo-kits/native-kits 0.150.1-beta.3 → 0.151.2-test.1

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

@@ -1,9 +1,11 @@
+package vn.momo.kits.components
+
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
@@ -12,15 +14,15 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import vn.momo.kits.components.Icon
-import vn.momo.kits.components.Text
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Typography
+import vn.momo.kits.const.scaleSize
 import vn.momo.kits.modifier.activeOpacityClickable
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.setAutomationId
@@ -55,10 +57,13 @@ fun Chip(
         ChipSize.LARGE -> ChipDefaults.Large
     }
 
+    val (height, horizontal, iconSize, iconSpacing) =
+        listOf(scaleSize(dims.height), scaleSize(dims.horizontal), scaleSize(dims.iconSize), scaleSize(dims.iconSpacing))
+
     Row(
         modifier
             .wrapContentWidth()
-            .wrapContentHeight()
+            .height(height)
             .clip(RoundedCornerShape(Radius.L))
             .background(bg)
             .conditional(selected) {
@@ -67,12 +72,12 @@ fun Chip(
             .activeOpacityClickable {
                 onClick()
             }
-            .padding(horizontal = dims.horizontal, vertical = dims.vertical)
+            .padding(horizontal = horizontal)
             .conditional(accessibilityLabel != null) {
                 setAutomationId(accessibilityLabel.toString())
             },
         verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.spacedBy(dims.iconSpacing)
+        horizontalArrangement = Arrangement.spacedBy(iconSpacing)
     ) {
         if (iconLeft != null) {
             Icon(source = iconLeft, size = dims.iconSize, color = leftTint)
@@ -81,6 +86,7 @@ fun Chip(
         if (!label.isNullOrEmpty()) {
             Text(
                 text = label,
+                textAlign = TextAlign.Center,
                 color = textColor,
                 style = when (size) {
                     ChipSize.SMALL -> Typography.labelSMedium
@@ -92,7 +98,7 @@ fun Chip(
         }
 
         if (iconRight != null) {
-            Icon(source = iconRight, size = dims.iconSize, color = rightTint)
+            Icon(source = iconRight, size = iconSize, color = rightTint)
         }
     }
 }
@@ -102,23 +108,23 @@ enum class ChipSize { SMALL, LARGE }
 object ChipDefaults {
     @Immutable
     data class Dimensions(
+        val height: Dp,
         val horizontal: Dp,
-        val vertical: Dp,
         val iconSize: Dp,
         val iconSpacing: Dp,
     )
 
     val Large = Dimensions(
+        height = 32.dp,
         horizontal = 12.dp,
-        vertical = 8.dp,
         iconSize = 20.dp,
-        iconSpacing = 8.dp,
+        iconSpacing = 4.dp,
     )
 
     val Small = Dimensions(
+        height = 24.dp,
         horizontal = 10.dp,
-        vertical = 6.dp,
         iconSize = 16.dp,
-        iconSpacing = 6.dp,
+        iconSpacing = 4.dp,
     )
 }

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

@@ -7,6 +7,7 @@ import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.sp
 import org.jetbrains.compose.resources.Font
 import org.jetbrains.compose.resources.FontResource
@@ -58,6 +59,15 @@ fun scaleSize(size: Float): Float {
     )
 }
 
+@Composable
+fun scaleSize(size: Dp): Dp {
+    val density = LocalDensity.current
+    val px = with(density) { size.toPx() }
+    val scaledPx = scaleSize(px)
+    return with(density) { scaledPx.toDp() }
+}
+
+
 @OptIn(InternalResourceApi::class)
 @Composable
 fun getFont(font: FontResource): FontFamily {

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/BottomSheet.kt

@@ -101,7 +101,6 @@ internal fun BottomSheet(
                 )
             )
             navigator.pop()
-            OverplayComponentRegistry.hardClearAfterDismiss()
         }
     }
 

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/ModalScreen.kt

@@ -67,7 +67,6 @@ internal fun ModalScreen(
                 animationSpec = tween(durationMillis = 200)
             )
             navigator.pop()
-            OverplayComponentRegistry.hardClearAfterDismiss()
         }
     }
 

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/Navigator.kt

@@ -7,7 +7,6 @@ import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.navigation.NavController
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers
-import kotlinx.coroutines.IO
 import kotlinx.coroutines.SupervisorJob
 import kotlinx.coroutines.cancel
 import kotlinx.coroutines.delay
@@ -19,7 +18,7 @@ class Navigator(
     private val navController: NavController,
     private val maxApi: IMaxApi?
 ) {
-    private val scope = CoroutineScope(SupervisorJob() + Dispatchers.IO)
+    private val scope = CoroutineScope(SupervisorJob() + Dispatchers.Main)
 
     fun push(content: @Composable () -> Unit, options: NavigationOptions? = null) {
         val route = DynamicScreenRegistry.register(content, options)
@@ -35,23 +34,26 @@ class Navigator(
         }
     }
 
-    fun pop(count: Int = 1) {
-        repeat(count) {
-            if (OverplayComponentRegistry.isOverplayShowing()){
-                OverplayComponentRegistry.clear()
-            } else {
-                if (navController.previousBackStackEntry != null){
-                    navController.popBackStack()
-                    scope.launch {
+    fun pop(count: Int = 1, callBack: (() -> Unit)? = null) {
+        scope.launch {
+            repeat(count) {
+                if (OverplayComponentRegistry.isOverplayShowing()){
+                    OverplayComponentRegistry.clear()
+                    delay(300L)
+                    OverplayComponentRegistry.hardClearAfterDismiss()
+                } else {
+                    if (navController.previousBackStackEntry != null){
+                        navController.popBackStack()
                         delay(300L)
                         DynamicScreenRegistry.getLatestScreen()?.let { it1 ->
                             DynamicScreenRegistry.unregisterScreen(it1.id)
                         }
+                    } else {
+                        maxApi?.dismiss {  }
                     }
-                } else {
-                    maxApi?.dismiss {  }
                 }
             }
+            callBack?.invoke()
         }
     }
 

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/component/Header.kt

@@ -126,14 +126,16 @@ fun RowScope.renderHeaderContent(headerTitle: HeaderTitle, tintIconColor: Color)
             is HeaderTitle.Default -> {
                 HeaderTitle(
                     title = headerTitle.title,
-                    color = tintIconColor,
-                    modifier = Modifier.fillMaxWidth(),
-                    textAlign = TextAlign.Start
+                    color = tintIconColor
                 )
             }
             is HeaderTitle.Journey -> {}
             is HeaderTitle.Location -> {}
-            is HeaderTitle.User -> {}
+            is HeaderTitle.User -> {
+                HeaderUser(
+                    data = headerTitle
+                )
+            }
         }
     }
 }
@@ -161,9 +163,8 @@ sealed class HeaderTitle {
         val title: String,
         val subTitle: String? = null,
         val image: List<String>? = null,
-        val dotColor: String? = null,
-        val verify: Boolean = false,
-        val tintColor: String? = null,
+        val dotColor: Color? = null,
+        val tintColor: Color? = null,
         val onPress: (() -> Unit)? = null,
         val icons: List<String> = emptyList(),
         val isLoading: Boolean = false

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/component/HeaderTitle.kt

@@ -1,5 +1,6 @@
 package vn.momo.kits.navigation.component
 
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -13,14 +14,12 @@ import vn.momo.kits.const.Typography
 @Composable
 fun HeaderTitle(
     title: String = "",
-    modifier: Modifier = Modifier,
-    textAlign: TextAlign = TextAlign.Start,
     color: Color? = null,
 ) {
     Text(
-        modifier = Modifier.then(modifier).zIndex(1f),
+        modifier = Modifier.fillMaxWidth().zIndex(1f),
         text = title,
-        textAlign = textAlign,
+        textAlign = TextAlign.Start,
         style = Typography.actionSBold.copy(
             fontSize = 15.sp,
             lineHeight = 22.sp,

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/component/HeaderUser.kt

@@ -0,0 +1,385 @@
+package vn.momo.kits.navigation.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+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.Spacer
+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.layout.widthIn
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Immutable
+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.clipToBounds
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import vn.momo.kits.components.Image
+import vn.momo.kits.components.Options
+import vn.momo.kits.components.Skeleton
+import vn.momo.kits.components.Text
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.const.Typography
+import vn.momo.kits.const.scaleSize
+import vn.momo.kits.modifier.activeOpacityClickable
+import vn.momo.kits.navigation.component.HeaderTitle.User
+import vn.momo.kits.platform.getScreenDimensions
+
+@Composable
+fun HeaderUser(
+    data: HeaderTitle
+) {
+    if (data !is User) return
+
+    if (data.isLoading) {
+        return TitleUserShimmer()
+    }
+
+    val maxWidth = getScreenDimensions().width.dp - scaleSize(172.dp)- (data.icons.size * 16).dp
+
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(vertical = Spacing.XS)
+            .activeOpacityClickable(enabled = data.onPress != null, onClick = { data.onPress?.invoke() }),
+        horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Row(
+            modifier = Modifier.widthIn(max = maxWidth),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Box(modifier = Modifier.size(Spacing.XXL)) {
+                AvatarGroup(urls = AvatarUrls(data.image ?: listOf()), title = data.title)
+                if (data.dotColor != null) {
+                    Box(
+                        modifier = Modifier
+                            .align(Alignment.BottomEnd)
+                            .size(10.dp)
+                            .clip(CircleShape)
+                            .background(data.dotColor)
+                    )
+                }
+            }
+
+            Spacer(Modifier.width(6.dp))
+
+            Column(modifier = Modifier.weight(1f, fill = false)) {
+                Row(verticalAlignment = Alignment.CenterVertically) {
+                    Text(
+                        text = data.title,
+                        color = data.tintColor,
+                        style = Typography.actionXsBold,
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis
+                    )
+                    if (data.icons.isNotEmpty()) {
+                        Spacer(Modifier.width(6.dp))
+                        Row(verticalAlignment = Alignment.CenterVertically) {
+                            data.icons.forEach { icon ->
+                                RemoteIcon16(url = icon)
+                            }
+                        }
+                    }
+                }
+
+                if (!data.subTitle.isNullOrEmpty()) {
+                    Spacer(Modifier.height(2.dp))
+                    Text(
+                        text = data.subTitle,
+                        color = data.tintColor,
+                        style = Typography.descriptionXsRegular,
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun TitleUserShimmer() {
+    val theme = AppTheme.current
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(vertical = Spacing.XS),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Box(
+            modifier = Modifier
+                .size(Spacing.XXL)
+                .clip(CircleShape)
+                .background(theme.colors.border.default)
+        ) {
+            Skeleton()
+        }
+        Spacer(Modifier.width(Spacing.M / 2))
+        Column(modifier = Modifier.fillMaxWidth()) {
+            Box(
+                modifier = Modifier
+                    .height(18.dp)
+                    .width(120.dp)
+                    .clip(RoundedCornerShape(8.dp))
+            ) { Skeleton() }
+            Spacer(Modifier.height(Spacing.XXS))
+            Box(
+                modifier = Modifier
+                    .height(12.dp)
+                    .width(120.dp)
+                    .clip(RoundedCornerShape(8.dp))
+            ) { Skeleton() }
+        }
+    }
+}
+
+@Composable
+private fun AvatarGroup(
+    urls: AvatarUrls?,
+    title: String? = null,
+    size: Dp = Spacing.XXL
+) {
+    val theme = AppTheme.current
+    val modifierBorder = remember {
+        Modifier.clip(CircleShape).border(width = (0.5).dp, color = theme.colors.border.default, shape = CircleShape)
+    }
+
+    when (urls?.items?.size) {
+        0 -> InitialsAvatar(
+            modifier = modifierBorder,
+            name = title ?: "",
+            fallbackInitials = null,
+            size = size
+        )
+        1 -> SingleAvatar(modifier = modifierBorder, urls.items[0], size)
+        2 -> TwoAvatar(modifier = modifierBorder, urls, size)
+        3 -> ThreeAvatar(modifier = modifierBorder, urls, size)
+        4 -> FourAvatar(modifier = modifierBorder, urls, size)
+        else -> ManyAvatar(modifier = modifierBorder, urls!!, size)
+    }
+}
+
+@Composable
+private fun SingleAvatar(modifier: Modifier = Modifier, url: String, size: Dp) {
+    Image(
+        source = url,
+        options = Options(
+            contentScale = ContentScale.Crop
+        ),
+        modifier = modifier
+            .size(size)
+    )
+}
+
+@Composable
+private fun TwoAvatar(modifier: Modifier = Modifier, urls: AvatarUrls, size: Dp) {
+    val child = 24.dp
+    Box(modifier = Modifier.size(size)) {
+        Image(
+            source = urls.items[0],
+            options = Options(
+                contentScale = ContentScale.Crop
+            ),
+            modifier = modifier
+                .size(child)
+                .align(Alignment.TopEnd)
+        )
+        Image(
+            source = urls.items[1],
+            options = Options(
+                contentScale = ContentScale.Crop
+            ),
+            modifier = modifier
+                .size(child)
+                .align(Alignment.BottomStart)
+        )
+    }
+}
+
+@Composable
+private fun ThreeAvatar(modifier: Modifier = Modifier, urls: AvatarUrls, size: Dp) {
+    val child = 16.dp
+    Box(modifier = Modifier.size(size).padding(2.dp)) {
+        Image(
+            source = urls.items[0],
+            options = Options(
+                contentScale = ContentScale.Crop
+            ),
+            modifier = modifier
+                .size(child)
+                .align(Alignment.BottomEnd)
+        )
+        Image(
+            source = urls.items[1],
+            options = Options(
+                contentScale = ContentScale.Crop
+            ),
+            modifier = modifier
+                .size(child)
+                .align(Alignment.TopCenter)
+        )
+        Image(
+            source = urls.items[2],
+            options = Options(
+                contentScale = ContentScale.Crop
+            ),
+            modifier = modifier
+                .size(child)
+                .align(Alignment.BottomStart)
+        )
+    }
+}
+
+@Composable
+private fun FourAvatar(modifier: Modifier = Modifier, urls: AvatarUrls, size: Dp) {
+    val child = 16.dp
+    Box(modifier = Modifier.size(size).padding(1.dp)) {
+        Image(
+            source = urls.items[0],
+            options = Options(
+                contentScale = ContentScale.Crop
+            ),
+            modifier = modifier
+                .size(child)
+                .align(Alignment.BottomStart)
+        )
+        Image(
+            source = urls.items[1],
+            options = Options(
+                contentScale = ContentScale.Crop
+            ),
+            modifier = modifier
+                .size(child)
+                .align(Alignment.BottomEnd)
+        )
+        Image(
+            source = urls.items[2],
+            options = Options(
+                contentScale = ContentScale.Crop
+            ),
+            modifier = modifier
+                .size(child)
+                .align(Alignment.TopEnd)
+        )
+        Image(
+            source = urls.items[3],
+            options = Options(
+                contentScale = ContentScale.Crop
+            ),
+            modifier = modifier
+                .size(child)
+                .align(Alignment.TopStart)
+        )
+    }
+}
+
+@Composable
+private fun ManyAvatar(modifier: Modifier = Modifier, urls: AvatarUrls, size: Dp) {
+    val child = 16.dp
+    val more = urls.items.size - 3
+    Box(modifier = Modifier.size(size).padding(1.dp)) {
+        Image(
+            source = urls.items[0],
+            options = Options(
+                contentScale = ContentScale.Crop
+            ),
+            modifier = modifier
+                .size(child)
+                .align(Alignment.BottomStart)
+        )
+        Image(
+            source = urls.items[1],
+            options = Options(
+                contentScale = ContentScale.Crop
+            ),
+            modifier = modifier
+                .size(child)
+                .align(Alignment.TopEnd)
+        )
+        Image(
+            source = urls.items[2],
+            options = Options(
+                contentScale = ContentScale.Crop
+            ),
+            modifier = modifier
+                .size(child)
+                .align(Alignment.TopStart)
+        )
+        Box(
+            modifier = modifier
+                .size(child)
+                .align(Alignment.BottomEnd)
+                .background(Colors.pink_09)
+                .padding(1.dp)
+                .clipToBounds(),
+            contentAlignment = Alignment.Center
+        ) {
+            Text(
+                text = "+$more",
+                color = Colors.pink_03,
+                style = Typography.descriptionXsRegular.copy(fontSize = 8.sp),
+                maxLines = 1,
+                overflow = TextOverflow.Visible
+            )
+        }
+    }
+}
+
+@Composable
+private fun InitialsAvatar(
+    modifier: Modifier = Modifier,
+    name: String,
+    fallbackInitials: String? = null,
+    size: Dp = Spacing.XXL
+) {
+    val initials = remember(name, fallbackInitials) {
+        fallbackInitials ?: run {
+            val words = name.trim().split(Regex("\\s+")).takeLast(2)
+            words.joinToString("") { it.firstOrNull()?.uppercase() ?: "" }
+        }
+    }
+    Box(
+        modifier = modifier
+            .size(size)
+            .background(Colors.pink_09),
+        contentAlignment = Alignment.Center
+    ) {
+        Text(
+            text = initials,
+            color = Colors.pink_03,
+            style = Typography.descriptionXsRegular
+        )
+    }
+}
+
+@Composable
+private fun RemoteIcon16(url: String) {
+    Image(
+        source = url,
+        options = Options(
+            contentScale = ContentScale.Crop
+        ),
+        modifier = Modifier
+            .size(16.dp)
+            .clip(RoundedCornerShape(4.dp)),
+    )
+}
+
+@Immutable
+data class AvatarUrls(val items: List<String>)

package/package.json

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