@momo-kits/native-kits 0.162.1-beta.5 → 0.162.1-nativeimage.2-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/NativeImage.kt

@@ -0,0 +1,74 @@
+package vn.momo.kits.components
+
+
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.Colors
+import vn.momo.kits.modifier.conditional
+
+
+fun isGifImage(source: Any): Boolean {
+    if (source is String) {
+        return source.contains(".gif") ||
+                source.contains(".webp") ||
+                source.contains(".apng") ||
+                source.contains(".avif")
+    }
+    return false
+}
+
+private val urlCache = mutableMapOf<String, String>()
+
+@Composable
+fun NativeImage(
+    source: Any,
+    modifier: Modifier = Modifier,
+    options: Options? = null,
+    loading: Boolean = true
+) {
+    BoxWithConstraints(
+        modifier = modifier
+            .conditional(IsShowBaseLineDebug) {
+                border(1.dp, Colors.blue_03)
+            }
+            .semantics { contentDescription = "img|$source" },
+    ) {
+        val density = LocalDensity.current
+        val urlToLoad = remember(source, maxWidth, maxHeight, density) {
+            when (source) {
+                is String -> {
+                    // Check cache first
+                    val cacheKey = "$source|${maxWidth}|${density.density}"
+                    urlCache[cacheKey] ?: run {
+                        val processedUrl = processImageUrl(source, maxWidth, density)
+                        urlCache[cacheKey] = processedUrl
+                        processedUrl
+                    }
+                }
+
+                else -> source
+            }
+        }
+
+        NativeImageWrapper(urlToLoad, modifier, options, loading)
+
+    }
+}
+
+
+@Composable
+expect fun BoxScope.NativeImageWrapper(
+    urlToLoad: Any,
+    modifier: Modifier = Modifier,
+    options: Options? = null,
+    loading: Boolean = true,
+)

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)
+            )
+        }
+    }
+}