@momo-kits/native-kits 0.168.1-beta.7-debug → 0.168.1-beta.8

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

@@ -1,501 +0,0 @@
-package vn.momo.kits.components
-
-import androidx.compose.foundation.Canvas
-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.*
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Paint
-import androidx.compose.ui.graphics.Path
-import androidx.compose.ui.graphics.PathEffect
-import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.unit.*
-import androidx.compose.ui.window.Popup
-import androidx.compose.ui.window.PopupPositionProvider
-import androidx.compose.ui.window.PopupProperties
-import kotlinx.coroutines.flow.drop
-import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.const.*
-import vn.momo.kits.modifier.activeOpacityClickable
-import vn.momo.kits.modifier.conditional
-
-
-enum class TooltipPlacement {
-    TOP,
-    BOTTOM,
-    LEFT,
-    RIGHT,
-}
-enum class TooltipAlign {
-    START,
-    CENTER,
-    END,
-}
-data class TooltipButton(
-    val title: String? = null,
-    val icon: String? = null,
-    val onPress: (() -> Unit)? = null,
-)
-@Stable
-class TooltipState {
-    var isVisible by mutableStateOf(false)
-        private set
-
-    /** Shows the tooltip. */
-    fun show() {
-        isVisible = true
-    }
-
-    /** Hides the tooltip. */
-    fun hide() {
-        isVisible = false
-    }
-
-    /** Toggles the tooltip visibility. */
-    fun toggle() {
-        isVisible = !isVisible
-    }
-}
-@Composable
-fun rememberTooltipState(): TooltipState {
-    return remember { TooltipState() }
-}
-private val TOOLTIP_OFFSET = Spacing.S
-private val ARROW_SIZE = 6.dp
-private class TooltipPositionProvider(
-    private val placement: TooltipPlacement,
-    private val align: TooltipAlign,
-    private val offsetPx: Int,
-) : PopupPositionProvider {
-
-    override fun calculatePosition(
-        anchorBounds: IntRect,
-        windowSize: IntSize,
-        layoutDirection: LayoutDirection,
-        popupContentSize: IntSize,
-    ): IntOffset {
-        val anchorX = anchorBounds.left
-        val anchorY = anchorBounds.top
-        val anchorW = anchorBounds.width
-        val anchorH = anchorBounds.height
-        val popW = popupContentSize.width
-        val popH = popupContentSize.height
-
-        var x: Int
-        var y: Int
-
-        when (placement) {
-            TooltipPlacement.TOP -> {
-                y = anchorY - popH - offsetPx
-                x = alignHorizontal(anchorX, anchorW, popW)
-            }
-
-            TooltipPlacement.BOTTOM -> {
-                y = anchorY + anchorH + offsetPx
-                x = alignHorizontal(anchorX, anchorW, popW)
-            }
-
-            TooltipPlacement.LEFT -> {
-                x = anchorX - popW - offsetPx
-                y = alignVertical(anchorY, anchorH, popH)
-            }
-
-            TooltipPlacement.RIGHT -> {
-                x = anchorX + anchorW + offsetPx
-                y = alignVertical(anchorY, anchorH, popH)
-            }
-        }
-
-        return IntOffset(x, y)
-    }
-    private fun alignHorizontal(anchorX: Int, anchorW: Int, popW: Int): Int {
-        return when (align) {
-            TooltipAlign.START -> anchorX
-            TooltipAlign.END -> anchorX + anchorW - popW
-            TooltipAlign.CENTER -> anchorX + (anchorW - popW) / 2
-        }
-    }
-    private fun alignVertical(anchorY: Int, anchorH: Int, popH: Int): Int {
-        return when (align) {
-            TooltipAlign.START -> anchorY
-            TooltipAlign.END -> anchorY + anchorH - popH
-            TooltipAlign.CENTER -> anchorY + (anchorH - popH) / 2
-        }
-    }
-}
-
-@Composable
-fun Tooltip(
-    state: TooltipState,
-    title: String? = null,
-    description: String,
-    buttons: List<TooltipButton> = emptyList(),
-    placement: TooltipPlacement = TooltipPlacement.TOP,
-    align: TooltipAlign = TooltipAlign.CENTER,
-    onVisibleChange: ((Boolean) -> Unit)? = null,
-    onPressClose: (() -> Unit)? = null,
-    modifier: Modifier = Modifier,
-    content: @Composable () -> Unit,
-) {
-    val density = LocalDensity.current
-    val offsetPx = with(density) { (TOOLTIP_OFFSET + ARROW_SIZE).roundToPx() }
-
-    val currentOnVisibleChange by rememberUpdatedState(onVisibleChange)
-    LaunchedEffect(state) {
-        // changes only, like RN: the initial value is not reported
-        snapshotFlow { state.isVisible }.drop(1).collect { currentOnVisibleChange?.invoke(it) }
-    }
-
-    Box(modifier = modifier) {
-        content()
-
-        if (state.isVisible) {
-            val positionProvider = remember(placement, align, offsetPx) {
-                TooltipPositionProvider(
-                    placement = placement,
-                    align = align,
-                    offsetPx = offsetPx,
-                )
-            }
-
-            Popup(
-                popupPositionProvider = positionProvider,
-                onDismissRequest = { state.hide() },
-                properties = PopupProperties(clippingEnabled = false),
-            ) {
-                TooltipPopupContent(
-                    title = title,
-                    description = description,
-                    buttons = buttons,
-                    placement = placement,
-                    align = align,
-                    onPressClose = onPressClose,
-                )
-            }
-        }
-    }
-}
-@Composable
-private fun TooltipPopupContent(
-    title: String?,
-    description: String?,
-    buttons: List<TooltipButton>,
-    placement: TooltipPlacement,
-    align: TooltipAlign,
-    onPressClose: (() -> Unit)? = null,
-) {
-    val tooltipMaxWidth = 300.dp
-    val tooltipShape = remember { RoundedCornerShape(Radius.S) }
-
-    Box(modifier = Modifier.wrapContentSize()) {
-        Column(
-            modifier = Modifier
-                .widthIn(max = tooltipMaxWidth)
-                .width(IntrinsicSize.Max)
-                .background(Colors.black_17, tooltipShape)
-                .clip(tooltipShape)
-                .conditional(IsShowBaseLineDebug) {
-                    border(1.dp, Colors.blue_03)
-                }
-                .padding(Spacing.M)
-        ) {
-            Row(Modifier.fillMaxWidth()) {
-                Column(modifier = Modifier.weight(1f)) {
-                    if (!title.isNullOrEmpty()) {
-                        Text(
-                            text = title,
-                            style = Typography.headerSSemibold,
-                            color = Colors.black_01,
-                            maxLines = 1,
-                            modifier = Modifier.padding(bottom = Spacing.XS),
-                            overflow = TextOverflow.Ellipsis,
-                        )
-                    }
-                    if (!description.isNullOrEmpty()) {
-                        Text(
-                            text = description,
-                            style = Typography.descriptionDefaultRegular,
-                            color = Colors.black_01,
-                            maxLines = 2,
-                            overflow = TextOverflow.Ellipsis,
-                        )
-                    }
-                }
-                if (onPressClose != null) {
-                    Spacer(Modifier.width(Spacing.M))
-                    Box(
-                        modifier = Modifier
-                            .size(20.dp)
-                            .activeOpacityClickable {
-                                onPressClose.invoke()
-                            }
-                    ) {
-                        Icon(
-                            source = "navigation_close",
-                            size = 20.dp,
-                            color = Colors.black_01,
-                        )
-                    }
-                }
-            }
-            if (buttons.isNotEmpty()) {
-                Spacer(Modifier.height(Spacing.M))
-                TooltipButtons(
-                    buttons = buttons,
-                    modifier = Modifier.align(Alignment.End),
-                )
-            }
-        }
-
-        TooltipArrow(
-            placement = placement,
-            align = align,
-            modifier = Modifier.matchParentSize(),
-        )
-    }
-}
-@Composable
-private fun TooltipArrow(
-    placement: TooltipPlacement,
-    align: TooltipAlign,
-    modifier: Modifier = Modifier,
-) {
-    val arrowWidth = ARROW_SIZE * 2
-    val arrowHeight = ARROW_SIZE
-    val arrowEdgeMargin = Spacing.M
-
-    val boxAlignment = when (placement) {
-        TooltipPlacement.TOP -> when (align) {
-            TooltipAlign.START -> Alignment.BottomStart
-            TooltipAlign.CENTER -> Alignment.BottomCenter
-            TooltipAlign.END -> Alignment.BottomEnd
-        }
-
-        TooltipPlacement.BOTTOM -> when (align) {
-            TooltipAlign.START -> Alignment.TopStart
-            TooltipAlign.CENTER -> Alignment.TopCenter
-            TooltipAlign.END -> Alignment.TopEnd
-        }
-
-        TooltipPlacement.LEFT -> when (align) {
-            TooltipAlign.START -> Alignment.TopEnd
-            TooltipAlign.CENTER -> Alignment.CenterEnd
-            TooltipAlign.END -> Alignment.BottomEnd
-        }
-
-        TooltipPlacement.RIGHT -> when (align) {
-            TooltipAlign.START -> Alignment.TopStart
-            TooltipAlign.CENTER -> Alignment.CenterStart
-            TooltipAlign.END -> Alignment.BottomStart
-        }
-    }
-
-    val canvasWidth = when (placement) {
-        TooltipPlacement.TOP, TooltipPlacement.BOTTOM -> arrowWidth
-        TooltipPlacement.LEFT, TooltipPlacement.RIGHT -> arrowHeight
-    }
-    val canvasHeight = when (placement) {
-        TooltipPlacement.TOP, TooltipPlacement.BOTTOM -> arrowHeight
-        TooltipPlacement.LEFT, TooltipPlacement.RIGHT -> arrowWidth
-    }
-
-    val arrowOverlap = 1.dp
-    val offsetX = when (placement) {
-        TooltipPlacement.LEFT -> arrowHeight - arrowOverlap
-        TooltipPlacement.RIGHT -> -arrowHeight + arrowOverlap
-        else -> when (align) {
-            TooltipAlign.START -> arrowEdgeMargin
-            TooltipAlign.END -> -arrowEdgeMargin
-            TooltipAlign.CENTER -> 0.dp
-        }
-    }
-    val offsetY = when (placement) {
-        TooltipPlacement.TOP -> arrowHeight - arrowOverlap
-        TooltipPlacement.BOTTOM -> -arrowHeight + arrowOverlap
-        else -> when (align) {
-            TooltipAlign.START -> arrowEdgeMargin
-            TooltipAlign.END -> -arrowEdgeMargin
-            TooltipAlign.CENTER -> 0.dp
-        }
-    }
-
-    val arrowColor = Colors.black_17
-
-    Box(modifier = modifier) {
-        Canvas(
-            modifier = Modifier
-                .align(boxAlignment)
-                .offset(x = offsetX, y = offsetY)
-                .size(width = canvasWidth, height = canvasHeight)
-        ) {
-            val w = size.width
-            val h = size.height
-            val path = Path().apply {
-                when (placement) {
-                    TooltipPlacement.TOP -> {
-                        moveTo(0f, 0f)
-                        lineTo(w, 0f)
-                        lineTo(w / 2f, h)
-                        close()
-                    }
-                    TooltipPlacement.BOTTOM -> {
-                        moveTo(0f, h)
-                        lineTo(w, h)
-                        lineTo(w / 2f, 0f)
-                        close()
-                    }
-                    TooltipPlacement.LEFT -> {
-                        moveTo(0f, 0f)
-                        lineTo(0f, h)
-                        lineTo(w, h / 2f)
-                        close()
-                    }
-                    TooltipPlacement.RIGHT -> {
-                        moveTo(w, 0f)
-                        lineTo(w, h)
-                        lineTo(0f, h / 2f)
-                        close()
-                    }
-                }
-            }
-            drawIntoCanvas { canvas ->
-                val paint = Paint().apply {
-                    color = arrowColor
-                    pathEffect = PathEffect.cornerPathEffect(2.dp.toPx())
-                }
-                canvas.drawPath(path, paint)
-            }
-        }
-    }
-}
-@Composable
-private fun TooltipButtons(buttons: List<TooltipButton>, modifier: Modifier = Modifier) {
-    Row(
-        modifier = modifier,
-        horizontalArrangement = Arrangement.End,
-        verticalAlignment = Alignment.CenterVertically,
-    ) {
-
-        if (buttons.size == 1) {
-            val btn = buttons[0]
-            TooltipSingleButton(btn)
-        } else if (buttons.size == 2) {
-            val primary = buttons[0]
-            val secondary = buttons[1]
-            val bothIcons = primary.icon != null && secondary.icon != null
-
-            if (bothIcons) {
-                TooltipIconButton(
-                    icon = secondary.icon,
-                    onPress = secondary.onPress ?: {},
-                )
-                Spacer(modifier = Modifier.width(Spacing.S))
-                TooltipIconButton(
-                    icon = primary.icon,
-                    onPress = primary.onPress ?: {},
-                )
-            } else {
-                TooltipSecondaryButton(
-                    title = secondary.title ?: "",
-                    onPress = secondary.onPress ?: {},
-                    modifier = Modifier.weight(1f, fill = false),
-                )
-                Spacer(modifier = Modifier.width(Spacing.S))
-                TooltipPrimaryButton(
-                    title = primary.title ?: "",
-                    onPress = primary.onPress ?: {},
-                )
-            }
-        } else {
-            buttons.forEachIndexed { index, btn ->
-                if (index > 0) {
-                    Spacer(modifier = Modifier.width(Spacing.XXS))
-                }
-                TooltipSingleButton(btn)
-            }
-        }
-    }
-}
-
-@Composable
-private fun TooltipSingleButton(btn: TooltipButton) {
-    if (btn.icon != null) {
-        TooltipIconButton(
-            icon = btn.icon,
-            onPress = btn.onPress ?: {},
-        )
-    } else {
-        TooltipPrimaryButton(
-            title = btn.title ?: "",
-            onPress = btn.onPress ?: {},
-        )
-    }
-}
-private fun String.limitWithEllipsis(max: Int = 16): String {
-    return if (length > max) take(max) + "…" else this
-}
-@Composable
-private fun TooltipPrimaryButton(
-    title: String,
-    onPress: () -> Unit,
-) {
-    Button(
-        onClick = onPress,
-        title = title.limitWithEllipsis(),
-        type = ButtonType.SECONDARY,
-        size = Size.MEDIUM,
-        isFull = false,
-    )
-}
-@Composable
-private fun TooltipSecondaryButton(
-    title: String,
-    onPress: () -> Unit,
-    modifier: Modifier = Modifier,
-) {
-    Box(
-        modifier = modifier
-            .activeOpacityClickable {
-                onPress()
-            }
-            .padding(horizontal = Spacing.M, vertical = Spacing.S),
-    ) {
-        Text(
-            text = title.limitWithEllipsis(),
-            color = Colors.black_01,
-            style = Typography.actionSBold,
-            maxLines = 1,
-            overflow = TextOverflow.Ellipsis,
-        )
-    }
-}
-@Composable
-private fun TooltipIconButton(
-    icon: String,
-    onPress: () -> Unit,
-) {
-    val iconButtonSize = scaleSize(36f).dp
-
-    Box(
-        modifier = Modifier
-            .size(iconButtonSize)
-            .background(Colors.black_01, RoundedCornerShape(Radius.XL))
-            .clip(RoundedCornerShape(Radius.XL))
-            .clickable(
-                interactionSource = remember { MutableInteractionSource() },
-                indication = null,
-                onClick = onPress,
-            ),
-        contentAlignment = Alignment.Center,
-    ) {
-        Icon(source = icon)
-    }
-}

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

@@ -1,176 +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.layout.Arrangement
-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.padding
-import androidx.compose.foundation.layout.width
-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.draw.clip
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.unit.dp
-import vn.momo.kits.application.LocalDesignSystemConfig
-import vn.momo.kits.application.LocalLocalize
-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.noFeedbackClickable
-
-val defaultBanner = TrustBannerData(
-    content = mapOf(
-        "vi" to "An toàn tài sản & Bảo mật thông tin của bạn là ưu tiên hàng đầu của MoMo.",
-        "en" to "Ensuring financial security and data privacy is MoMo's highest priority."
-    ),
-    subContent = mapOf(
-        "vi" to "Tìm hiểu thêm",
-        "en" to "Learn more"
-    ),
-    pciImage = "https://static.momocdn.net/app/img/kits/trustBanner/pci_dss.png",
-    sslImage = "https://static.momocdn.net/app/img/kits/trustBanner/ssl.png",
-    urlConfig = "login_and_security",
-    icons = listOf(
-        "https://static.momocdn.net/app/img/kits/trustBanner/ic_viettinbank.png",
-        "https://static.momocdn.net/app/img/kits/trustBanner/ic_agribank.png",
-        "https://static.momocdn.net/app/img/kits/trustBanner/ic_vietcombank.png",
-        "https://static.momocdn.net/app/img/kits/trustBanner/ic_bidv.png"
-    ),
-    momoImage = "https://static.momocdn.net/app/img/kits/trustBanner/ic_secu.png"
-)
-
-const val backgroundBlue = 0xFFF2F8FF
-const val contentColor = 0xFF484848
-const val subContentColor = 0xFFEB2F96
-
-data class TrustBannerData(
-    val content: Map<String, String> = mapOf("vi" to "", "en" to ""),
-    val subContent: Map<String, String> = mapOf("vi" to "", "en" to ""),
-    val pciImage: String? = null,
-    val momoImage: String? = null,
-    val sslImage: String? = null,
-    val icons: List<String>? = null,
-    val urlConfig: String = ""
-)
-
-@Composable
-fun TrustBanner(
-    serviceName: String = "",
-    screenName: String = "",
-    onPress: ((Map<String, String>) -> Unit)? = null,
-    trackEvent: ((String, Map<String, String>) -> Unit)? = null
-) {
-    val localize = LocalLocalize.current
-    val trustBanner = LocalDesignSystemConfig.current?.trustBanner ?: defaultBanner
-    val trackParams = mapOf(
-        "service_name" to serviceName,
-        "screen_name" to screenName,
-        "component_name" to "logo_trust",
-        "url_config" to trustBanner.urlConfig
-    )
-
-    Row(
-        modifier = Modifier
-            .clip(RoundedCornerShape(12.dp))
-            .background(color = Color(backgroundBlue))
-            .conditional(IsShowBaseLineDebug) {
-                border(1.dp, Colors.blue_03)
-            }
-            .padding(12.dp)
-            .then(
-                if (onPress != null) {
-                    Modifier.clickable {
-                        trackEvent?.invoke(
-                            "service_component_clicked", trackParams
-                        )
-
-                        onPress(
-                            mapOf(
-                                "service_name" to serviceName,
-                                "screen_name" to screenName,
-                                "url_config" to trustBanner.urlConfig,
-                            )
-                        )
-
-                    }
-                } else {
-                    Modifier.noFeedbackClickable {
-                        trackEvent?.invoke(
-                            "service_component_clicked", trackParams
-                        )
-                    }
-                }
-            )
-    ) {
-        if (trustBanner.momoImage != null) {
-            Image(
-                source = trustBanner.momoImage,
-                modifier = Modifier
-                    .width(64.dp)
-                    .height(64.dp)
-            )
-        }
-        Column(
-            modifier = Modifier
-                .padding(start = 10.dp)
-        ) {
-            Text(
-                text = localize.translateData(trustBanner.content),
-                modifier = Modifier.padding(bottom = 8.dp),
-                color = Color(contentColor),
-                style = Typography.descriptionDefaultRegular,
-                maxLines = 2
-            )
-            Row(
-                modifier = Modifier.fillMaxWidth(),
-                horizontalArrangement = Arrangement.SpaceBetween
-            ) {
-                Row(
-                    verticalAlignment = Alignment.CenterVertically,
-                ) {
-                    Text(
-                        text = localize.translateData(trustBanner.subContent),
-                        color = Color(subContentColor),
-                        style = Typography.actionXsBold,
-                        maxLines = 2
-                    )
-                    Icon(
-                        source = "https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/16_arrow_chevron_right_small.png",
-                        color = Color(subContentColor),
-                    )
-                }
-                Row {
-                    if (trustBanner.pciImage != null) {
-                        Image(
-                            source = trustBanner.pciImage, modifier = Modifier
-                                .padding(end = 4.dp)
-                                .width(27.dp)
-                                .height(20.dp), options = Options(
-                                contentScale = ContentScale.Fit,
-                            )
-                        )
-                    }
-                    if (trustBanner.sslImage != null) {
-                        Image(
-                            source = trustBanner.sslImage, modifier = Modifier
-                                .width(52.dp)
-                                .height(20.dp),
-                            options = Options(
-                                contentScale = ContentScale.Fit,
-                            )
-                        )
-                    }
-
-                }
-            }
-        }
-    }
-}