@momo-kits/native-kits 0.167.1-duo.6 → 0.167.1-duo.7-debug

package/compose/src/commonMain/kotlin/vn/momo/kits/layout/ScreenLayout.kt

@@ -0,0 +1,187 @@
+package vn.momo.kits.layout
+
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.systemBars
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.compositionLocalOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.LocalLayoutDirection
+import androidx.compose.ui.platform.LocalWindowInfo
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.navigation.component.HEADER_HEIGHT
+import vn.momo.kits.platform.getScreenDimensions
+import vn.momo.kits.platform.isPhoneIdiom
+import vn.momo.kits.utils.getAppStatusBarHeight
+import vn.momo.kits.utils.horizontalSafeAreaInsets
+
+enum class SideBarEdge { LEFT, RIGHT }
+
+@Immutable
+data class SideBarLayout(
+    val edge: SideBarEdge,
+    val width: Dp,
+    // Preferred window y of the first control; the column is still kept above footer and bottom bars.
+    val top: Dp,
+)
+
+@Immutable
+data class ScreenLayout(
+    val width: Dp,
+    val height: Dp,
+    val isIPhoneDuo: Boolean,
+    // Raw top / bottom safe area; overlays and the Duo floating tab bar keep clear of them.
+    val insetTop: Dp,
+    val insetBottom: Dp,
+    val insetLeft: Dp,
+    val insetRight: Dp,
+    val contentWidth: Dp,
+    val headerHeight: Dp,
+    // 0 when the status bar is off the top edge, so the bar row fills the header and keeps the title centered.
+    val headerStatusBarHeight: Dp,
+    // iPhone Duo moves back and toolkit into a column in the side safe area; null while they stay in the bar.
+    val sideBar: SideBarLayout? = null,
+    // Port of RN `device.ts` isIPhoneDuo: the screen stays on the outer display, so Split View still matches.
+    val isIPhoneDuoDevice: Boolean = isIPhoneDuo,
+    // Portrait iPhone Duo puts the status bar in the side strip, about twice as tall as the strip is wide.
+    // Stored so it survives consumeHorizontalInsets().
+    val duoTopInset: Dp = insetTop,
+) {
+    val headerBarHeight: Dp get() = headerHeight - headerStatusBarHeight
+}
+
+// Measured by momo-kits RN (Layout/utils.ts) on the iOS 27.1 iPhone Duo simulator; keep both in sync.
+internal object DuoMetrics {
+    // Inner display is ~1.42, outer ~1.45; every slab iPhone is 1.77 or taller.
+    const val MAX_ASPECT_RATIO = 1.6f
+    val controlSize = 48.dp
+    val itemPitch = 50.dp
+    // Portrait: below the camera/clock cluster in the strip (ends near y 151).
+    val firstItemTop = 170.dp
+    // Inner display in landscape: below its status cluster (ends near y 98).
+    val firstItemTopLandscape = 120.dp
+    // Window height from which the inner display is in use (outer is 466pt tall in landscape, inner 669pt).
+    val innerMinHeight = 600.dp
+}
+
+// Widest short side of any single-display iPhone.
+private val IPHONE_MAX_SHORT_SIDE = 440.dp
+
+private val IPHONE_HEADER_MIN_HEIGHT = 72.dp
+
+// A smaller top inset means the status bar is not on the top edge.
+private val STATUS_BAR_MIN_INSET = 20.dp
+
+internal val LocalScreenLayout = compositionLocalOf<ScreenLayout?> { null }
+
+// Port of RN `useScreenLayout`; follows fold/unfold and rotation through the window size and safe area.
+@Composable
+fun getScreenLayout(): ScreenLayout =
+    LocalScreenLayout.current ?: calculateScreenLayout(getAppStatusBarHeight())
+
+@Composable
+internal fun calculateScreenLayout(topInset: Dp, parent: ScreenLayout? = null): ScreenLayout {
+    val isPhone = isPhoneIdiom()
+    if (parent != null) {
+        val (headerHeight, headerStatusBarHeight) = headerGeometry(topInset, isPhone)
+        return parent.copy(headerHeight = headerHeight, headerStatusBarHeight = headerStatusBarHeight)
+    }
+
+    val density = LocalDensity.current
+    val layoutDirection = LocalLayoutDirection.current
+    val size = LocalWindowInfo.current.containerSize
+    val insets = horizontalSafeAreaInsets
+    val leftPx = insets.getLeft(density, layoutDirection)
+    val rightPx = insets.getRight(density, layoutDirection)
+    val bottomPx = WindowInsets.systemBars.getBottom(density)
+    val screen = getScreenDimensions()
+
+    return remember(size, leftPx, rightPx, bottomPx, topInset, screen, density) {
+        with(density) {
+            val width = size.width.toDp()
+            val height = size.height.toDp()
+            screenLayoutOf(
+                width = width,
+                height = height,
+                insetLeft = leftPx.toDp(),
+                insetRight = rightPx.toDp(),
+                topInset = topInset,
+                bottomInset = bottomPx.toDp(),
+                isPhone = isPhone,
+                asymmetricInsets = leftPx != rightPx,
+                isDuoDevice = isPhone && maxOf(
+                    minOf(screen.width, screen.height).dp,
+                    minOf(width, height),
+                ) > IPHONE_MAX_SHORT_SIDE,
+            )
+        }
+    }
+}
+
+// Content inside the safe-area padding: the insets are spent and the side bar belongs to the screen.
+internal fun ScreenLayout.consumeHorizontalInsets(): ScreenLayout =
+    copy(width = contentWidth, insetLeft = 0.dp, insetRight = 0.dp, sideBar = null)
+
+private fun headerGeometry(topInset: Dp, isPhone: Boolean): Pair<Dp, Dp> {
+    val height = topInset + HEADER_HEIGHT.dp
+    if (!isPhone) return height to topInset
+    return maxOf(height, IPHONE_HEADER_MIN_HEIGHT) to if (topInset < STATUS_BAR_MIN_INSET) 0.dp else topInset
+}
+
+// Slab iPhones report equal side insets in landscape; iPhone Duo moves the status bar to one side.
+private fun isIPhoneDuoWindow(width: Dp, height: Dp, asymmetricInsets: Boolean): Boolean {
+    val shortSide = minOf(width, height)
+    if (shortSide <= 0.dp) return asymmetricInsets
+    return maxOf(width, height) / shortSide < DuoMetrics.MAX_ASPECT_RATIO || asymmetricInsets
+}
+
+private fun screenLayoutOf(
+    width: Dp,
+    height: Dp,
+    insetLeft: Dp,
+    insetRight: Dp,
+    topInset: Dp,
+    bottomInset: Dp,
+    isPhone: Boolean,
+    asymmetricInsets: Boolean,
+    isDuoDevice: Boolean,
+): ScreenLayout {
+    val (headerHeight, headerStatusBarHeight) = headerGeometry(topInset, isPhone)
+    val isIPhoneDuo = isPhone && isIPhoneDuoWindow(width, height, asymmetricInsets)
+
+    var sideBar: SideBarLayout? = null
+    val sideInset = maxOf(insetLeft, insetRight)
+    // narrower strips cannot host a control 12pt from the inner edge
+    if (isIPhoneDuo && sideInset >= DuoMetrics.controlSize + Spacing.M) {
+        // UIKit reports no usable status bar frame here (a 2pt top strip), so the spot is inferred like RN
+        val top = when {
+            topInset >= STATUS_BAR_MIN_INSET -> topInset + HEADER_HEIGHT.dp + Spacing.M
+            width > height && height >= DuoMetrics.innerMinHeight -> DuoMetrics.firstItemTopLandscape
+            else -> DuoMetrics.firstItemTop
+        }
+        sideBar = SideBarLayout(
+            edge = if (insetRight >= insetLeft) SideBarEdge.RIGHT else SideBarEdge.LEFT,
+            width = sideInset,
+            top = top,
+        )
+    }
+
+    return ScreenLayout(
+        width = width,
+        height = height,
+        isIPhoneDuo = isIPhoneDuo,
+        insetTop = topInset,
+        insetBottom = bottomInset,
+        insetLeft = insetLeft,
+        insetRight = insetRight,
+        contentWidth = width - insetLeft - insetRight,
+        headerHeight = headerHeight,
+        headerStatusBarHeight = headerStatusBarHeight,
+        sideBar = sideBar,
+        isIPhoneDuoDevice = isDuoDevice,
+        duoTopInset = maxOf(topInset, if (height > width) sideInset * 2 else 0.dp),
+    )
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/layout/Section.kt

@@ -0,0 +1,41 @@
+package vn.momo.kits.layout
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Image
+import vn.momo.kits.const.Spacing
+
+@Composable
+@OptIn(ExperimentalLayoutApi::class)
+fun Section(
+    useMargin: Boolean = true,
+    backgroundImage: String? = null,
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) {
+    val columns = gridColumns()
+    val gap = Spacing.M
+    val margin = if (useMargin) Spacing.M else 0.dp
+    Box(modifier = Modifier.fillMaxWidth().padding(horizontal = margin).then(modifier)) {
+        if (backgroundImage != null) {
+            Image(source = backgroundImage, modifier = Modifier.matchParentSize())
+        }
+        BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
+            CompositionLocalProvider(LocalGridContext provides gridContext(constraints.maxWidth, columns, gap)) {
+                FlowRow(
+                    horizontalArrangement = Arrangement.spacedBy(gap),
+                    verticalArrangement = Arrangement.spacedBy(gap),
+                ) { content() }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,52 @@
+package vn.momo.kits.modifier
+
+import androidx.compose.ui.Modifier
+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
+
+fun Modifier.setAutomationId(accessibilityId: String, mergeDescendants: Boolean = false): Modifier {
+    return if (getPlatformName() == "Android") {
+        semantics {
+            contentDescription = accessibilityId
+        }
+    } else {
+        semantics(mergeDescendants = mergeDescendants) {
+            testTag = accessibilityId
+        }
+    }}
+
+fun Modifier.kitsAutomationId(accessibilityId: String, label: String? = null) =
+    this then KitsAutomationIdElement(accessibilityId, label)
+
+private data class KitsAutomationIdElement(
+    private val accessibilityId: String,
+    private val label: String? = null,
+) : ModifierNodeElement<KitsAutomationIdNode>() {
+    override fun create(): KitsAutomationIdNode {
+        return KitsAutomationIdNode(accessibilityId, label)
+    }
+
+    override fun update(node: KitsAutomationIdNode) {
+        node.accessibilityId = accessibilityId
+        node.label = label
+    }
+}
+
+private class KitsAutomationIdNode(
+    var accessibilityId: String,
+    var label: String?,
+) : Modifier.Node(), SemanticsModifierNode {
+    override fun SemanticsPropertyReceiver.applySemantics() {
+        if (getPlatformName() == "Android") {
+            contentDescription = accessibilityId
+        } else {
+            testTag = accessibilityId
+            contentDescription = label ?: accessibilityId
+        }
+    }
+}

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

@@ -0,0 +1,66 @@
+package vn.momo.kits.modifier
+
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.semantics.Role
+
+fun Modifier.noFeedbackClickable(
+    enabled: Boolean = true, onClickLabel: String? = null, role: Role? = null, onClick: () -> Unit
+): Modifier = composed {
+    clickable(
+        interactionSource = remember { MutableInteractionSource() },
+        indication = null,
+        enabled,
+        onClickLabel,
+        role,
+        onClick
+    )
+}
+
+fun Modifier.activeOpacityClickable(
+    activeOpacity: Float = 0.2f,
+    enabled: Boolean = true,
+    onClickLabel: String? = null,
+    role: Role? = null,
+    onClick: () -> Unit
+): Modifier = composed {
+    val interactionSource = remember { MutableInteractionSource() }
+    val isPressed by interactionSource.collectIsPressedAsState()
+    val animatedAlpha by animateFloatAsState(
+        targetValue = if (isPressed) activeOpacity else 1f,
+        label = "ActiveOpacity"
+    )
+
+    this
+        .graphicsLayer { alpha = animatedAlpha }
+        .clickable(
+            interactionSource = interactionSource,
+            indication = null,
+            enabled,
+            onClickLabel,
+            role,
+            onClick
+        )
+}
+fun Modifier.hideKeyboardOnTap() = composed {
+    val focusManager = LocalFocusManager.current
+    val keyboardManager = LocalSoftwareKeyboardController.current
+
+    pointerInput(Unit) {
+        detectTapGestures {
+            keyboardManager?.hide()
+            focusManager.clearFocus()
+        }
+    }
+}

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

@@ -0,0 +1,11 @@
+package vn.momo.kits.modifier
+
+import androidx.compose.ui.Modifier
+
+fun Modifier.conditional(condition: Boolean, modifier: Modifier.() -> Modifier): Modifier {
+    return if (condition) {
+        then(modifier(Modifier))
+    } else {
+        this
+    }
+}

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

@@ -0,0 +1,104 @@
+package vn.momo.kits.modifier
+
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.RepeatMode
+import androidx.compose.animation.core.animateFloat
+import androidx.compose.animation.core.infiniteRepeatable
+import androidx.compose.animation.core.rememberInfiniteTransition
+import androidx.compose.animation.core.tween
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawWithContent
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.drawscope.clipRect
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.drawText
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.rememberTextMeasurer
+import androidx.compose.ui.unit.sp
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.Colors
+
+@Suppress("ExperimentalAnnotationRetention")
+@RequiresOptIn(
+    message = "This is internal API of native-kits, become internal in next sprint",
+    level = RequiresOptIn.Level.WARNING,
+)
+@Retention(AnnotationRetention.BINARY)
+@Target(
+    AnnotationTarget.CLASS,
+    AnnotationTarget.FUNCTION,
+    AnnotationTarget.PROPERTY,
+)
+annotation class InternalApi
+
+@Composable
+fun DeprecatedModifier(text: String = "Deprecated component"): Modifier = debugMarker(
+    label = text,
+    background = Colors.red_04.copy(alpha = 0.7f),
+    textColor = Colors.red_01,
+    animationLabel = "deprecatedMarquee",
+)
+
+@Composable
+private fun debugMarker(
+    label: String,
+    background: Color,
+    textColor: Color,
+    animationLabel: String,
+): Modifier {
+    if (!IsShowBaseLineDebug) return Modifier
+
+    val textMeasurer = rememberTextMeasurer()
+    val marquee = rememberInfiniteTransition(label = animationLabel)
+    val progress by marquee.animateFloat(
+        initialValue = 0f,
+        targetValue = 1f,
+        animationSpec = infiniteRepeatable(
+            animation = tween(durationMillis = 4000, easing = LinearEasing),
+            repeatMode = RepeatMode.Restart,
+        ),
+        label = "${animationLabel}Progress",
+    )
+
+    return Modifier.drawWithContent {
+        drawContent()
+        drawRect(color = background)
+
+        if (size.width <= 0f || size.height <= 0f) return@drawWithContent
+
+        val fontPx = (size.width * 0.1f).coerceIn(12.sp.toPx(), 20.sp.toPx())
+        val style = TextStyle(
+            color = textColor,
+            fontSize = fontPx.toSp(),
+            fontWeight = FontWeight.Bold,
+        )
+
+        val intrinsic = textMeasurer.measure(
+            text = label,
+            style = style,
+            maxLines = 1,
+            softWrap = false,
+        )
+        val textW = intrinsic.size.width
+        val textH = intrinsic.size.height
+        val y = (size.height - textH) / 2f
+
+        if (textW <= size.width) {
+            drawText(
+                textLayoutResult = intrinsic,
+                topLeft = Offset((size.width - textW) / 2f, y),
+            )
+        } else {
+            clipRect(right = size.width, bottom = size.height) {
+                val gap = textW * 0.5f
+                val travel = textW + gap
+                val x = -progress * travel
+                drawText(textLayoutResult = intrinsic, topLeft = Offset(x, y))
+                drawText(textLayoutResult = intrinsic, topLeft = Offset(x + travel, y))
+            }
+        }
+    }
+}

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

@@ -0,0 +1,48 @@
+package vn.momo.kits.modifier
+
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Paint
+import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.platform.setColor
+import vn.momo.kits.platform.setMaskFilter
+fun Modifier.shadow(
+    color: Color = Color.Black,
+    borderRadius: Dp = 0.dp,
+    blurRadius: Float = 0f,
+    offsetY: Dp = 0.dp,
+    offsetX: Dp = 0.dp,
+    spread: Dp = 0f.dp,
+    modifier: Modifier = Modifier
+) = this.then(
+    modifier.drawBehind {
+        this.drawIntoCanvas {
+            val paint = Paint()
+            val frameworkPaint = paint.asFrameworkPaint()
+            val spreadPixel = spread.toPx()
+            val leftPixel = (0f - spreadPixel) + offsetX.toPx()
+            val topPixel = (0f - spreadPixel) + offsetY.toPx()
+            val rightPixel = (this.size.width + spreadPixel)
+            val bottomPixel = (0f + spreadPixel) - offsetY.toPx()
+
+            if (blurRadius != 0f) {
+                frameworkPaint.setMaskFilter(blurRadius)
+            }
+
+            frameworkPaint.setColor(color)
+
+            it.drawRoundRect(
+                left = leftPixel,
+                top = topPixel,
+                right = rightPixel,
+                bottom = bottomPixel,
+                radiusX = borderRadius.toPx(),
+                radiusY = borderRadius.toPx(),
+                paint
+            )
+        }
+    }
+)

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

@@ -0,0 +1,51 @@
+package vn.momo.kits.modifier
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.State
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.Measurable
+import androidx.compose.ui.layout.MeasureResult
+import androidx.compose.ui.layout.MeasureScope
+import androidx.compose.ui.node.LayoutModifierNode
+import androidx.compose.ui.node.ModifierNodeElement
+import androidx.compose.ui.unit.Constraints
+import androidx.compose.ui.unit.IntOffset
+
+@Composable
+fun Modifier.dynamicSize(
+    widthState: State<Int>? = null,
+    heightState: State<Int>? = null,
+) = this then DynamicSizeElement(widthState, heightState)
+
+private data class DynamicSizeElement(
+    val widthState: State<Int>?,
+    val heightState: State<Int>?,
+) : ModifierNodeElement<DynamicSizeNode>() {
+    override fun create(): DynamicSizeNode {
+        return DynamicSizeNode(widthState, heightState)
+    }
+
+    override fun update(node: DynamicSizeNode) {
+        node.widthState = widthState
+        node.heightState = heightState
+    }
+
+}
+
+private class DynamicSizeNode(
+    var widthState: State<Int>?,
+    var heightState: State<Int>?,
+) : Modifier.Node(), LayoutModifierNode {
+    override fun MeasureScope.measure(
+        measurable: Measurable,
+        constraints: Constraints
+    ): MeasureResult {
+        val p = measurable.measure(constraints)
+        return layout(
+            width = widthState?.value ?: p.width,
+            height = heightState?.value ?: p.height,
+        ) {
+            p.place(IntOffset.Zero)
+        }
+    }
+}