@momo-kits/native-kits 0.157.5 → 0.158.1-beta.1-debug

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

@@ -0,0 +1,590 @@
+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.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.IntrinsicSize
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+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.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.Stable
+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.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.IntOffset
+import androidx.compose.ui.unit.IntRect
+import androidx.compose.ui.unit.IntSize
+import androidx.compose.ui.unit.LayoutDirection
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Popup
+import androidx.compose.ui.window.PopupPositionProvider
+import androidx.compose.ui.window.PopupProperties
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Radius
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.const.Typography
+import vn.momo.kits.const.scaleSize
+import vn.momo.kits.modifier.activeOpacityClickable
+import vn.momo.kits.modifier.conditional
+
+
+// region Types
+
+/**
+ * Tooltip placement relative to the anchor element.
+ */
+enum class TooltipPlacement {
+    TOP,
+    BOTTOM,
+    LEFT,
+    RIGHT,
+}
+
+/**
+ * Cross-axis alignment of the tooltip relative to the anchor.
+ */
+enum class TooltipAlign {
+    START,
+    CENTER,
+    END,
+}
+
+/**
+ * Describes a single action button displayed in the tooltip.
+ *
+ * @param title Text label for the button (used for text buttons).
+ * @param icon  Icon source for the button (used for icon buttons).
+ * @param onPress Callback invoked when the button is pressed.
+ */
+data class TooltipButton(
+    val title: String? = null,
+    val icon: String? = null,
+    val onPress: (() -> Unit)? = null,
+)
+
+
+/**
+ * State holder for controlling tooltip visibility imperatively.
+ * Equivalent to the React Native `useImperativeHandle` ref pattern.
+ */
+@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
+    }
+}
+
+/**
+ * Creates and remembers a [TooltipState].
+ */
+@Composable
+fun rememberTooltipState(): TooltipState {
+    return remember { TooltipState() }
+}
+private val TOOLTIP_OFFSET = Spacing.S
+private val ARROW_SIZE = 6.dp
+/**
+ * Custom [PopupPositionProvider] that positions the tooltip relative to the anchor.
+ *
+ * Mirrors the React Native `placementStyle` calculation:
+ * - TOP:    tooltip bottom edge sits at `anchorTop - TOOLTIP_OFFSET`
+ * - BOTTOM: tooltip top edge sits at `anchorBottom + TOOLTIP_OFFSET`
+ * - LEFT:   tooltip right edge sits at `anchorLeft - TOOLTIP_OFFSET`
+ * - RIGHT:  tooltip left edge sits at `anchorRight + TOOLTIP_OFFSET`
+ *
+ * Cross-axis alignment:
+ * - start:  tooltip aligns to anchor start edge
+ * - center: tooltip centers on anchor
+ * - end:    tooltip aligns to anchor end edge
+ */
+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
+        }
+    }
+}
+
+// endregion
+
+// region Tooltip Composable
+
+/**
+ * A tooltip component that wraps [content] (the anchor) and shows a positioned
+ * tooltip popup with title, description, close button, and action buttons.
+ *
+ * Port of the React Native `Tooltip` component.
+ *
+ * @param state            Controls visibility (use [rememberTooltipState]).
+ * @param title            Title text displayed in the tooltip header.
+ * @param description      Description text shown under the title.
+ * @param buttons          Action buttons rendered at the bottom.
+ * @param placement        Tooltip position relative to the anchor (default TOP).
+ * @param align            Cross-axis alignment (default CENTER).
+ * @param onVisibleChange  Callback when visibility changes.
+ * @param onPressClose     Callback when the close button (X) is pressed.
+ * @param modifier         Modifier for the anchor wrapper.
+ * @param content          The anchor element that the tooltip is attached to.
+ */
+@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() }
+
+    LaunchedEffect(state.isVisible) {
+        onVisibleChange?.invoke(state.isVisible)
+    }
+
+    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 const val MAX_BUTTON_LENGTH = 16
+
+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)
+    }
+}