@momo-kits/native-kits 0.168.1-beta.16-debug → 0.168.1-beta.18

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

@@ -1,370 +0,0 @@
-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.rememberScrollState
-import androidx.compose.foundation.verticalScroll
-import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.runtime.*
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.text.TextLayoutResult
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
-import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.application.LocalLocalize
-import vn.momo.kits.const.*
-import vn.momo.kits.modifier.conditional
-import vn.momo.kits.modifier.setAutomationId
-import vn.momo.kits.layout.duoModalMaxHeight
-import vn.momo.kits.layout.duoModalMaxWidth
-import vn.momo.kits.layout.getScreenLayout
-import kotlin.math.min
-
-data class PopupAction(
-    val title: String,
-    val onPress: (() -> Unit)?,
-)
-
-enum class PopupActionDirection {
-    ROW,
-    COLUMN,
-    AUTO
-}
-
-// Card width cap on iPhone Duo (the modal bounds, RN Popup/utils.ts); unbounded elsewhere.
-@Composable
-internal fun popupMaxWidth(): Dp {
-    val layout = getScreenLayout()
-    return if (layout.isIPhoneDuoDevice) layout.duoModalMaxWidth else Dp.Unspecified
-}
-
-// The modal bounds already keep iPhone Duo popups off the edges, so their own side padding goes.
-@Composable
-internal fun popupHorizontalPadding(padding: Dp): Dp =
-    if (getScreenLayout().isIPhoneDuoDevice) 0.dp else padding
-
-// Tallest a popup gets on iPhone Duo, landscape and the inner display included; null elsewhere.
-@Composable
-internal fun popupMaxHeight(): Dp? {
-    val layout = getScreenLayout()
-    return if (layout.isIPhoneDuoDevice) layout.duoModalMaxHeight else null
-}
-
-// Rounder on iPhone Duo, closer to its system alerts.
-@Composable
-internal fun popupRadius(): Dp = if (getScreenLayout().isIPhoneDuoDevice) Radius.XL else Radius.L
-
-private fun heightForLines(
-    layout: TextLayoutResult,
-): Float {
-    val clampedLines = (8.5f).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
-        }
-    }
-
-    LaunchedEffect(layoutResult.value) {
-        layoutResult.value?.let { v ->
-            // cap visible height at ~8.5 lines
-            val textPx = v.size.height.toFloat()
-            val capPx  = heightForLines(v)
-
-            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()
-    }
-
-    val maxHeight = popupMaxHeight()
-    val bodyScrollState = rememberScrollState()
-    val horizontalPadding = popupHorizontalPadding(12.dp)
-    val shape = RoundedCornerShape(popupRadius())
-
-    Box(
-        Modifier.setAutomationId("popup_notify"), contentAlignment = Alignment.TopEnd
-    ) {
-        Column(
-            modifier = Modifier
-                .widthIn(max = popupMaxWidth())
-                .fillMaxWidth()
-                .padding(horizontal = horizontalPadding)
-                .clip(shape)
-                .background(AppTheme.current.colors.background.surface, shape)
-                .conditional(IsShowBaseLineDebug) {
-                    border(1.dp, Colors.blue_03)
-                }
-                .conditional(maxHeight != null) {
-                    heightIn(max = maxHeight ?: Dp.Unspecified)
-                }
-        ) {
-            // scrolls when iPhone Duo landscape is too short; actions stay visible
-            Column(
-                Modifier.conditional(maxHeight != null) {
-                    weight(1f, fill = false).verticalScroll(bodyScrollState)
-                }
-            ) {
-                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 = LocalLocalize.current.translate("errorCode") + 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)
-                    // centered on the card's top right corner
-                    .offset(x = 11.dp - horizontalPadding, 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
-internal 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 ?: 0) > 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
-internal 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
-internal 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")
-                )
-            }
-        }
-    }
-}
-

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

@@ -1,108 +0,0 @@
-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.*
-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.layout.ContentScale
-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.modifier.conditional
-import vn.momo.kits.modifier.setAutomationId
-import vn.momo.kits.utils.ifNotNull
-
-private const val ASPECT_RATIO = 0.72f
-private val CLOSE_ROW_HEIGHT = Spacing.S + 40.dp
-
-@Composable
-fun PopupPromotion(
-    source: String = "",
-    onPress: (() -> Unit) = {},
-    onClose: (() -> Unit) = {},
-) {
-    val maxHeight = popupMaxHeight()
-    var maxWidth = popupMaxWidth()
-    if (maxHeight != null) {
-        // fit the portrait image by height when iPhone Duo leaves too little room
-        maxWidth = minOf(maxWidth, (maxHeight - CLOSE_ROW_HEIGHT) * ASPECT_RATIO)
-    }
-
-    Column(Modifier
-        .widthIn(max = maxWidth)
-        .padding(horizontal = popupHorizontalPadding(Spacing.M))
-        .conditional(IsShowBaseLineDebug) {
-            border(1.dp, Colors.blue_03)
-        }
-        .setAutomationId("popup_notify")) {
-        source.ifNotNull(
-            Image(
-                source = source,
-                modifier = Modifier.fillMaxWidth()
-                    .aspectRatio(ASPECT_RATIO)
-                    .clickable(
-                        interactionSource = remember { MutableInteractionSource() },
-                        indication = null,
-                        onClick = onPress
-                    ),
-                options = Options(alignment =  Alignment.Center, contentScale = ContentScale.FillBounds)
-            ), null
-        )
-        Box(
-            modifier = Modifier
-                .padding(top = Spacing.S)
-                .fillMaxWidth()
-                .width(40.dp)
-                .height(40.dp),
-            contentAlignment = Alignment.Center
-        ) {
-            Box(
-                modifier = Modifier
-                    .width(40.dp)
-                    .height(40.dp)
-                    .clickable(
-                        interactionSource = remember { MutableInteractionSource() },
-                        indication = null,
-                        onClick = onClose
-                    ),
-                contentAlignment = Alignment.Center
-            ) {
-                Box(
-                    Modifier
-                        .width(22.dp)
-                        .height(22.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))
-                    ,
-                    contentAlignment = Alignment.Center
-                ) {
-                    Icon(
-                        source = "navigation_close",
-                        color = AppTheme.current.colors.background.surface,
-                        size = 16.dp,
-                        modifier = Modifier.setAutomationId("ic_popup_close")
-                    )
-                }
-            }
-
-        }
-    }
-}