@momo-kits/native-kits 0.157.7 → 0.157.8-debug

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

@@ -0,0 +1,108 @@
+package vn.momo.kits.components
+
+import androidx.compose.animation.core.FastOutSlowInEasing
+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.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+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.modifier.conditional
+import vn.momo.kits.platform.LottieAnimation
+
+enum class LoaderType {
+    DOT, SPINNER
+}
+
+@Composable
+fun Loader(
+    type: LoaderType = LoaderType.DOT,
+    tintColor: Color? = null,
+    modifier: Modifier = Modifier
+) {
+    when (type) {
+        LoaderType.DOT -> DotLoader(tintColor = tintColor, modifier = modifier)
+        LoaderType.SPINNER -> SpinnerLoader(tintColor = tintColor, modifier = modifier)
+    }
+}
+
+@Composable
+fun DotLoader(
+    tintColor: Color? = null,
+    modifier: Modifier = Modifier
+) {
+    LottieAnimation(
+        path = "files/dot_loading",
+        tintColor = tintColor,
+        modifier = modifier
+            .size(width = 52.dp, height = 18.dp)
+            .conditional(IsShowBaseLineDebug) {
+                border(1.dp, Colors.blue_03)
+            }
+    )
+}
+
+@Composable
+fun SpinnerLoader(
+    tintColor: Color? = null,
+    modifier: Modifier = Modifier
+) {
+    LottieAnimation(
+        path = "files/lottie_circle_loader",
+        tintColor = tintColor,
+        modifier = modifier
+            .size(24.dp)
+            .conditional(IsShowBaseLineDebug) {
+                border(1.dp, Colors.blue_03)
+            }
+    )
+}
+
+@Composable
+fun ProgressBar(
+    percent: Float = 0f,
+    color: Color? = null,
+    modifier: Modifier = Modifier
+) {
+    val clampedPercent = percent.coerceIn(0f, 100f)
+    val animatedProgress by animateFloatAsState(
+        targetValue = clampedPercent / 100f,
+        animationSpec = tween(durationMillis = 200, easing = FastOutSlowInEasing),
+        label = "progressAnimation"
+    )
+
+    val trackColor = AppTheme.current.colors.background.default
+    val fillColor = color ?: AppTheme.current.colors.primary
+
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(4.dp)
+            .clip(RoundedCornerShape(Radius.XXS))
+            .background(trackColor)
+            .conditional(IsShowBaseLineDebug) {
+                border(1.dp, Colors.blue_03)
+            }
+    ) {
+        Box(
+            modifier = Modifier
+                .fillMaxWidth(animatedProgress)
+                .height(4.dp)
+                .clip(RoundedCornerShape(Radius.XXS))
+                .background(fillColor)
+        )
+    }
+}

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

@@ -0,0 +1,56 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+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.ui.Modifier
+import androidx.compose.ui.graphics.Color
+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.Spacing
+import vn.momo.kits.modifier.conditional
+
+@Composable
+fun Dot(active: Boolean = false, activeColor: Color, modifier: Modifier = Modifier) {
+    return if (active) {
+        Box(
+            modifier = modifier.size(width = 12.dp, height = 4.dp).background(
+                color = activeColor,
+                shape = RoundedCornerShape(4.dp)
+            )
+        )
+    } else {
+        Box(
+            modifier = modifier.size(4.dp)
+                .background(
+                    color = AppTheme.current.colors.background.pressed,
+                    shape = RoundedCornerShape(4.dp)
+                )
+        )
+    }
+}
+
+@Composable
+fun PaginationDot(
+    activeIndex: Int = 0,
+    dataLength: Int = 3
+) {
+    Row(modifier = Modifier.conditional(IsShowBaseLineDebug) {
+        border(1.dp, Colors.blue_03)
+    }) {
+        for (i in 0 until dataLength) {
+            Dot(
+                i == activeIndex,
+                AppTheme.current.colors.primary,
+                modifier = Modifier.padding(end = if (i != dataLength - 1) Spacing.XS else 0.dp)
+            )
+        }
+    }
+}

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

@@ -0,0 +1,41 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.conditional
+
+@Composable
+fun PaginationNumber(
+    activeIndex: Int = 0,
+    dataLength: Int = 2
+) {
+    BoxWithConstraints(
+        modifier = Modifier.background(
+            color = Color(0x33000000),
+            shape = RoundedCornerShape(Spacing.L)
+        )
+        .conditional(IsShowBaseLineDebug) {
+            border(1.dp, Colors.blue_03)
+        },
+        contentAlignment = Alignment.Center
+    ) {
+        Text(
+            modifier = Modifier.padding(horizontal = Spacing.S),
+            text = "${1 + activeIndex}/$dataLength",
+            color = Colors.black_01,
+            style = Typography.labelDefaultMedium
+        )
+    }
+}

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

@@ -0,0 +1,92 @@
+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.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+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.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.Spacing
+import vn.momo.kits.modifier.conditional
+
+val INDICATOR_WIDTH = 24.dp
+val PROGRESS_WIDTH = 72.dp
+
+// Memoized offset calculation to avoid repeated computations during scroll
+private fun calculateOffset(currentPosition: Int, maxBound: Int): Dp {
+    return if (maxBound == 0) 0.dp else {
+        (PROGRESS_WIDTH - INDICATOR_WIDTH) * (currentPosition / maxBound.toFloat())
+    }
+}
+
+@Composable
+fun PaginationScroll(
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit
+) {
+    val scrollState = rememberScrollState()
+    val theme = AppTheme.current
+
+    // Use derivedStateOf to optimize scroll position calculations
+    val indicatorOffset by remember {
+        derivedStateOf {
+            calculateOffset(scrollState.value, scrollState.maxValue)
+        }
+    }
+
+    // Cache theme colors to avoid repeated access
+    val (progressBackground, indicatorColor) = remember(theme) {
+        theme.colors.background.pressed to theme.colors.primary
+    }
+
+    Column(horizontalAlignment = Alignment.CenterHorizontally) {
+        Row(
+            modifier = modifier
+                .fillMaxWidth()
+                .conditional(IsShowBaseLineDebug) {
+                    border(1.dp, Colors.blue_03)
+                }
+                .padding(bottom = Spacing.L)
+                .horizontalScroll(scrollState)
+        ) {
+            content()
+        }
+
+        // Progress indicator
+        Box(
+            modifier = Modifier
+                .clip(RoundedCornerShape(Spacing.XS))
+                .width(PROGRESS_WIDTH)
+                .height(4.dp)
+                .background(color = progressBackground)
+        ) {
+            Box(
+                modifier = Modifier
+                    .offset(x = indicatorOffset)
+                    .clip(RoundedCornerShape(Spacing.XS))
+                    .width(INDICATOR_WIDTH)
+                    .height(4.dp)
+                    .background(color = indicatorColor)
+            )
+        }
+    }
+}

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

@@ -0,0 +1,40 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.modifier.conditional
+
+@Composable
+fun PaginationWhiteDot(
+    activeIndex: Int = 0,
+    dataLength: Int = 3
+) {
+    Row(
+        modifier = Modifier.background(
+            color = Color(0x33000000),
+            shape = RoundedCornerShape(Spacing.S)
+        )
+        .conditional(IsShowBaseLineDebug) {
+            border(1.dp, Colors.blue_03)
+        }
+        .padding(Spacing.XS)
+    ) {
+        for (i in 0 until dataLength) {
+            Dot(
+                i == activeIndex,
+                Colors.black_01,
+                modifier = Modifier.padding(end = if (i != dataLength - 1) Spacing.XS else 0.dp)
+            )
+        }
+    }
+}

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

@@ -0,0 +1,352 @@
+package vn.momo.kits.components
+
+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.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.aspectRatio
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.text.TextLayoutResult
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Radius
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.conditional
+import vn.momo.kits.modifier.setAutomationId
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Dp
+import vn.momo.kits.application.AppLanguage
+import kotlin.math.min
+
+data class PopupAction(
+    val title: String,
+    val onPress: (() -> Unit)?,
+)
+
+enum class PopupActionDirection {
+    ROW,
+    COLUMN,
+    AUTO
+}
+
+private fun heightForLines(
+    layout: TextLayoutResult,
+    targetLines: Float
+): Float {
+    val clampedLines = targetLines.coerceAtLeast(1f)
+    val wholeLines = kotlin.math.floor(clampedLines).toInt()
+    val fractionalPart = clampedLines - wholeLines
+
+    val baseLineIndex = (wholeLines - 1)
+        .coerceAtLeast(0)
+        .coerceAtMost(layout.lineCount - 1)
+
+    var heightPx = layout.getLineBottom(baseLineIndex)
+
+    if (fractionalPart > 0f) {
+        val nextLineIndex = (baseLineIndex + 1)
+            .coerceAtMost(layout.lineCount - 1)
+        val nextBottomPx = layout.getLineBottom(nextLineIndex)
+        heightPx += (nextBottomPx - heightPx) * fractionalPart
+    }
+    return heightPx
+}
+
+data class PopupNotifyProps(
+    val image: String = "",
+    val title: String = "Title",
+    val description: String = "Description",
+    val error: String = "",
+    val primary: PopupAction? = null,
+    val secondary: PopupAction? = null,
+    val buttonDirection: PopupActionDirection = PopupActionDirection.ROW,
+    val onIconClose: () -> Unit,
+    val isShowCloseIcon: Boolean = true,
+)
+
+@Composable
+fun PopupNotify(
+    props: PopupNotifyProps,
+) {
+    var isScroll by remember { mutableStateOf(false) }
+    val layoutResult = remember { mutableStateOf<TextLayoutResult?>(null) }
+
+    val density = LocalDensity.current
+    var scrollHeight: Dp by remember { mutableStateOf(0.dp) }
+
+    LaunchedEffect(layoutResult.value) {
+        if ((layoutResult.value?.lineCount ?: 0) > 3) {
+            isScroll = true
+        }
+    }
+
+    val language = AppLanguage.current ?: "vi"
+    val errorCode: Map<String, String> = mapOf("vi" to "Mã lỗi: ", "en" to "Error code: ")
+
+    LaunchedEffect(layoutResult.value) {
+        layoutResult.value?.let { v ->
+            // cap visible height at ~8.5 lines
+            val textPx = v.size.height.toFloat()
+            val capPx  = heightForLines(v, 8.5f)
+
+            isScroll = textPx >= capPx
+            scrollHeight = with(density) { min(textPx, capPx).toDp() }
+        }
+    }
+
+    val content: @Composable (Modifier) -> Unit = if (isScroll) {
+        { modifier ->
+            LazyColumn(
+                modifier = modifier.height(scrollHeight)
+            ) {
+                item {
+                    Text(
+                        text = props.description,
+                        onTextLayout = { layoutResult.value = it },
+                        style = Typography.bodyDefaultRegular
+                    )
+                }
+            }
+        }
+    } else {
+        { modifier ->
+            Box(modifier = modifier) {
+                Text(
+                    text = props.description,
+                    onTextLayout = { layoutResult.value = it },
+                    style = Typography.bodyDefaultRegular
+                )
+            }
+        }
+    }
+
+    fun onClose(callback: (() -> Unit)?) {
+        callback?.invoke()
+    }
+
+    Box(
+        Modifier.setAutomationId("popup_notify"), contentAlignment = Alignment.TopEnd
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 12.dp)
+                .clip(RoundedCornerShape(Radius.L))
+                .background(
+                    AppTheme.current.colors.background.surface,
+                    RoundedCornerShape(Radius.L)
+                )
+                .conditional(IsShowBaseLineDebug) {
+                    border(1.dp, Colors.blue_03)
+                }
+        ) {
+            if(props.image.isNotEmpty()) {
+                Image(
+                    source = props.image,
+                    modifier = Modifier.fillMaxWidth().aspectRatio(1.777f),
+                    options = Options(alignment = Alignment.Center)
+                )
+            }
+
+            Column(modifier = Modifier.padding(Spacing.XL)) {
+                Text(
+                    style = Typography.headerDefaultBold,
+                    maxLines = 2,
+                    text = props.title,
+                    modifier = Modifier.setAutomationId("title_popup_permission")
+                )
+                content(Modifier.padding(top = Spacing.S))
+                if (props.error.isNotEmpty()) {
+                    Text(
+                        text = errorCode[language] + props.error,
+                        style = Typography.descriptionXsRegular,
+                        color = AppTheme.current.colors.text.hint,
+                        maxLines = 1,
+                        modifier = Modifier.padding(top = Spacing.S)
+                    )
+                }
+            }
+
+            Box(
+                modifier = Modifier.padding(horizontal = Spacing.XL)
+                    .padding(bottom = Spacing.XL)
+            ) {
+                BuildAction(props.primary, props.secondary, props.buttonDirection, onAction = { callback ->
+                    onClose(callback)
+                })
+            }
+        }
+
+        if(props.isShowCloseIcon) {
+            Box(
+                Modifier
+                    .width(22.dp)
+                    .height(22.dp)
+                    .offset(x = -(1).dp, y = (-11).dp)
+                    .background(
+                        color = AppTheme.current.colors.text.default,
+                        shape = RoundedCornerShape(Radius.M)
+                    )
+                    .border(
+                        width = 2.dp,
+                        color = AppTheme.current.colors.background.surface,
+                        shape = RoundedCornerShape(Radius.M)
+                    )
+                    .clip(RoundedCornerShape(100))
+                    .clickable(
+                        interactionSource = remember { MutableInteractionSource() },
+                        indication = null,
+                        onClick = { onClose { props.onIconClose() } }
+                    ),
+                contentAlignment = Alignment.Center
+            ) {
+                Icon(
+                    source = "navigation_close",
+                    color = AppTheme.current.colors.background.surface,
+                    size = 16.dp,
+                    modifier = Modifier.setAutomationId("ic_popup_close")
+                )
+            }
+        }
+    }
+}
+
+@Composable
+fun BuildAction(
+    primary: PopupAction?,
+    secondary: PopupAction?,
+    buttonDirection: PopupActionDirection = PopupActionDirection.ROW,
+    onAction: (onPress: (() -> Unit)?) -> Unit,
+) {
+    val closeAction = remember { mutableStateOf("button_action") }
+    when (buttonDirection) {
+        PopupActionDirection.AUTO -> {
+            if (secondary != null && (secondary.title.length > 12 || primary?.title?.length!! > 12)) {
+                renderColumn(
+                    secondary = secondary,
+                    onAction = onAction,
+                    closeAction = closeAction,
+                    primary = primary
+                )
+            } else {
+                renderRow(
+                    secondary = secondary,
+                    onAction = onAction,
+                    closeAction = closeAction,
+                    primary = primary
+                )
+            }
+        }
+
+        PopupActionDirection.ROW -> renderRow(
+            secondary = secondary,
+            onAction = onAction,
+            closeAction = closeAction,
+            primary = primary
+        )
+
+        else -> renderColumn(
+            secondary = secondary,
+            onAction = onAction,
+            closeAction = closeAction,
+            primary = primary
+        )
+    }
+}
+
+@Composable
+fun renderRow(
+    secondary: PopupAction?,
+    closeAction: MutableState<String>,
+    primary: PopupAction?,
+    onAction: (onPress: (() -> Unit)?) -> Unit,
+) {
+    Row(horizontalArrangement = Arrangement.Center) {
+        secondary?.let {
+            Box(Modifier.weight(1f)) {
+                Button(
+                    size = Size.MEDIUM,
+                    onClick = {
+                        closeAction.value = "button_action"
+                        onAction(it.onPress)
+                    },
+                    title = it.title,
+                    type = ButtonType.TEXT,
+                    modifier = Modifier.setAutomationId("btn_popup_cancel")
+                )
+            }
+            Spacer(modifier = Modifier.width(Spacing.S))
+        }
+        Box(Modifier.weight(1f)) {
+            Button(
+                size = Size.MEDIUM,
+                onClick = {
+                    closeAction.value = "button_action"
+                    onAction(primary?.onPress)
+                },
+                title = primary?.title ?: "",
+                modifier = Modifier.setAutomationId("btn_popup_allow")
+            )
+        }
+    }
+}
+
+@Composable
+fun renderColumn(
+    secondary: PopupAction?,
+    closeAction: MutableState<String>,
+    primary: PopupAction?,
+    onAction: (onPress: (() -> Unit)?) -> Unit,
+) {
+    Column(horizontalAlignment = Alignment.CenterHorizontally) {
+        Button(
+            size = Size.MEDIUM,
+            onClick = {
+                closeAction.value = "button_action"
+                onAction(primary?.onPress)
+            },
+            title = primary?.title ?: "",
+            modifier = Modifier.setAutomationId("btn_popup_allow")
+        )
+        secondary?.let {
+            Spacer(modifier = Modifier.height(Spacing.S))
+            secondary.let {
+                Button(
+                    size = Size.MEDIUM,
+                    onClick = {
+                        closeAction.value = "button_action"
+                        onAction(it.onPress)
+                    },
+                    title = it.title,
+                    type = ButtonType.TEXT,
+                    modifier = Modifier.setAutomationId("btn_popup_cancel")
+                )
+            }
+        }
+    }
+}
+