@momo-kits/native-kits 0.163.1-beta.8 → 0.163.1-beta.9-debug

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

@@ -0,0 +1,203 @@
+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.*
+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.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+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.const.Typography
+import vn.momo.kits.modifier.conditional
+
+enum class TitleType { Card, Section }
+enum class TitleSize { Small, Medium, Large }
+enum class IconAlign { Top, Center, Bottom }
+enum class ButtonSize { Small, Large }
+
+@Composable
+fun Title(
+    title: String,
+    type: TitleType = TitleType.Section,
+    size: TitleSize = TitleSize.Medium,
+    icon: String? = null,
+    iconColor: Color? = null,
+    iconAlign: IconAlign = IconAlign.Top,
+    showRightAction: Boolean = false,
+    showTrailingAction: Boolean = false,
+    badgeLabel: String? = null,
+    buttonTitle: String? = null,
+    buttonSize: ButtonSize = ButtonSize.Small,
+    onPressRightAction: () -> Unit = {},
+    onPressTrailingAction: () -> Unit = {},
+    textOnly: Boolean = false,
+    description: String? = null,
+    modifier: Modifier = Modifier
+) {
+    val theme = AppTheme.current
+    val textStyle: TextStyle = when (type) {
+        TitleType.Card -> when (size) {
+            TitleSize.Small -> TextStyle(fontSize = 14.sp, lineHeight = 20.sp)
+            TitleSize.Medium -> TextStyle(fontSize = 16.sp, lineHeight = 22.sp)
+            TitleSize.Large -> TextStyle(fontSize = 18.sp, lineHeight = 26.sp)
+        }
+
+        TitleType.Section -> when (size) {
+            TitleSize.Small -> TextStyle(
+                fontSize = 16.sp,
+                lineHeight = 24.sp,
+                fontWeight = FontWeight.Bold
+            )
+
+            TitleSize.Medium -> TextStyle(
+                fontSize = 18.sp,
+                lineHeight = 26.sp,
+                fontWeight = FontWeight.Bold
+            )
+
+            TitleSize.Large -> TextStyle(
+                fontSize = 20.sp,
+                lineHeight = 28.sp,
+                fontWeight = FontWeight.Bold
+            )
+        }
+    }
+
+    if (textOnly) {
+        Text(
+            text = title,
+            style = textStyle,
+            modifier = modifier
+        )
+        return
+    }
+
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(IntrinsicSize.Min)
+            .conditional(IsShowBaseLineDebug) {
+                border(1.dp, Colors.blue_03)
+            }
+            .padding(8.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        icon?.let {
+            Column(
+                modifier = Modifier.fillMaxHeight().padding(end = Spacing.S),
+                verticalArrangement = when (iconAlign) {
+                    IconAlign.Top -> Arrangement.Top
+                    IconAlign.Center -> Arrangement.Center
+                    IconAlign.Bottom -> Arrangement.Bottom
+                },
+            ) {
+                // Icon
+                Icon(
+                    source = it,
+                    color = iconColor ?: theme.colors.text.default,
+                    modifier = Modifier.size(24.dp)
+                )
+            }
+        }
+
+        Column(
+            modifier = Modifier.weight(1f)
+        ) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    modifier = if (showTrailingAction) Modifier else Modifier.weight(1f),
+                ) {
+                    Text(
+                        text = title,
+                        style = textStyle,
+                        maxLines = if (showTrailingAction || badgeLabel != null) 1 else 2,
+                    )
+
+                    // Badge
+                    badgeLabel?.let {
+                        Spacer(modifier = Modifier.width(4.dp))
+                        Badge(
+                            label = it
+                        )
+                    }
+
+                }
+
+                // Trailing action (icon)
+                if (showTrailingAction && !showRightAction) {
+                    Spacer(modifier = Modifier.width(8.dp))
+                    Box(
+                        modifier = Modifier
+                            .size(24.dp)
+                            .background(
+                                color = if (type == TitleType.Section) Colors.black_06.copy(0.6f) else Colors.black_06.copy(
+                                    0.3f
+                                ),
+                                shape = RoundedCornerShape(12.dp)
+                            )
+                            .clickable { onPressTrailingAction() },
+                        contentAlignment = Alignment.Center
+                    ) {
+                        Icon(
+                            source = "arrow_chevron_right_small",
+                            size = 18.dp
+                        )
+                    }
+                }
+            }
+
+            // Description
+            description?.let {
+                Spacer(modifier = Modifier.height(4.dp))
+                Text(
+                    text = it,
+                    style = Typography.descriptionDefaultRegular,
+                    color = theme.colors.text.secondary
+                )
+            }
+        }
+
+        // Right action (button or icon)
+        if (showRightAction && !showTrailingAction) {
+            Spacer(modifier = Modifier.width(8.dp))
+            if (buttonTitle != null) {
+                Text(
+                    text = buttonTitle,
+                    style = if (buttonSize === ButtonSize.Small) Typography.actionXsBold else Typography.actionSBold,
+                    color = theme.colors.primary,
+                    modifier = Modifier.clickable { onPressRightAction() }
+                )
+            } else {
+                Box(
+                    modifier = Modifier
+                        .size(24.dp)
+                        .background(
+                            color = Colors.pink_03.copy(alpha = 0.1f),
+                            shape = RoundedCornerShape(12.dp)
+                        )
+                        .clickable { onPressRightAction() },
+                    contentAlignment = Alignment.Center
+                ) {
+                    Icon(
+                        source = "arrow_chevron_right_small",
+                        modifier = Modifier.size(22.dp),
+                        color = theme.colors.primary
+                    )
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,498 @@
+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 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() }
+
+    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 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)
+    }
+}