@momo-kits/native-kits 0.157.1-beta.9 → 0.157.1-com.1-debug

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

@@ -0,0 +1,96 @@
+package vn.momo.kits.components
+
+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.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.Colors
+import vn.momo.kits.modifier.conditional
+
+// Pre-computed shimmer colors to avoid repeated list creation
+private val shimmerColors = listOf(
+    Colors.black_05,
+    Colors.black_03,
+    Colors.black_05,
+)
+
+// Constants for better performance
+private const val SHADOW_BRUSH_PERCENTAGE = 0.6f
+private const val DEFAULT_DURATION_MILLIS = 1000
+
+@Composable
+fun Skeleton() {
+    BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
+        // Memoize width calculation
+        val maxWidthValue = remember(maxWidth) { maxWidth.value.toInt() }
+
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .background(Colors.black_05)
+                .conditional(IsShowBaseLineDebug) {
+                    border(1.dp, Colors.blue_03)
+                }
+                .shimmerLoadingAnimation(maxWidth = maxWidthValue)
+        )
+    }
+}
+
+@Composable
+fun Modifier.shimmerLoadingAnimation(
+    maxWidth: Int,
+    angleOfAxisY: Float = 0f,
+    durationMillis: Int = DEFAULT_DURATION_MILLIS,
+): Modifier {
+    // Memoize calculations to avoid repeated computations
+    val widthOfShadowBrush = remember(maxWidth) {
+        (maxWidth * SHADOW_BRUSH_PERCENTAGE).toInt()
+    }
+
+    val animationTarget = remember(durationMillis, widthOfShadowBrush) {
+        (durationMillis + widthOfShadowBrush).toFloat()
+    }
+
+    val transition = rememberInfiniteTransition(label = "shimmer")
+    val translateAnimation = transition.animateFloat(
+        initialValue = 0f,
+        targetValue = animationTarget,
+        animationSpec = infiniteRepeatable(
+            animation = tween(
+                durationMillis = durationMillis,
+                easing = LinearEasing,
+            ),
+            repeatMode = RepeatMode.Restart,
+        ),
+        label = "shimmerTranslate"
+    )
+
+    return drawBehind {
+        // Memoize brush creation by using remember in the calling composable
+        val startX = translateAnimation.value - widthOfShadowBrush
+        val endX = translateAnimation.value
+
+        drawRect(
+            brush = Brush.linearGradient(
+                colors = shimmerColors,
+                start = Offset(x = startX, y = 0f),
+                end = Offset(x = endX, y = angleOfAxisY)
+            )
+        )
+    }
+}

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

@@ -0,0 +1,360 @@
+package vn.momo.kits.components
+
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.spring
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+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.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+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.Color
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.IntOffset
+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.const.Typography
+import vn.momo.kits.modifier.conditional
+import vn.momo.kits.modifier.shadow
+import kotlin.math.abs
+import kotlin.math.min
+import kotlin.math.roundToInt
+
+// ── Design constants ─────────────────────────────────────────────────────────
+
+private val THUMB_SIZE         = 20.dp
+private val THUMB_BORDER       = 3.dp
+private val TRACK_HEIGHT       = 4.dp
+private val LABEL_PAD_H        = Spacing.XS
+private val LABEL_PAD_V        = Spacing.XXS
+private val LABEL_GAP          = Spacing.XS   // space between label and thumb top
+
+// ── Pure helpers (mirrors RN helpers.ts) ─────────────────────────────────────
+
+private fun clamp(value: Float, min: Float, max: Float): Float =
+    min(kotlin.math.max(value, min), max)
+
+/**
+ * Converts a raw touch position into a snapped slider value.
+ * Direct port of RN getValueForPosition().
+ */
+private fun getValueForPosition(
+    positionInView: Float,
+    containerWidth: Float,
+    thumbWidth: Float,
+    min: Float,
+    max: Float,
+    step: Float,
+): Float {
+    val availableSpace = containerWidth - thumbWidth
+    if (availableSpace <= 0f) return min
+    val relStepUnit = step / (max - min)
+    var relPosition = (positionInView - thumbWidth / 2f) / availableSpace
+    val relOffset = relPosition % relStepUnit
+    relPosition -= relOffset
+    if (relOffset / relStepUnit >= 0.5f) relPosition += relStepUnit
+    return clamp(min + (relPosition / relStepUnit).roundToInt() * step, min, max)
+}
+
+/** Direct port of RN isLowCloser(). */
+private fun isLowCloser(downX: Float, lowPosition: Float, highPosition: Float): Boolean {
+    if (lowPosition == highPosition) return downX < lowPosition
+    return abs(downX - lowPosition) < abs(downX - highPosition)
+}
+
+private fun valueToFraction(value: Float, min: Float, max: Float): Float {
+    if (max == min) return 0f
+    return clamp((value - min) / (max - min), 0f, 1f)
+}
+
+private fun formatLabel(value: Float): String =
+    if (value == value.toLong().toFloat()) value.toLong().toString()
+    else ((value * 10).toLong() / 10.0).toString()
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+/**
+ * Range slider (or single-thumb when [disableRange] = true), migrated from React Native.
+ *
+ * @param min               Minimum selectable value.
+ * @param max               Maximum selectable value.
+ * @param step              Snap increment between values.
+ * @param modifier          Modifier applied to the root container.
+ * @param low               Initial lower-thumb value (defaults to [min]).
+ * @param high              Initial upper-thumb value (defaults to [max]).
+ * @param minRange          Minimum required gap between low and high (default 0).
+ * @param disableRange      When true only the low thumb is shown (single-value mode).
+ * @param floatingLabel     When true a value label floats above the active thumb during drag.
+ * @param disabled          Non-interactive; rendered in the disabled colour.
+ * @param onValueChanged    Invoked with (low, high, byUser) on every value change.
+ * @param onSliderTouchStart Invoked when a drag gesture begins.
+ * @param onSliderTouchEnd   Invoked when a drag gesture ends.
+ */
+@Composable
+fun Slider(
+    min: Float,
+    max: Float,
+    step: Float,
+    modifier: Modifier = Modifier,
+    low: Float? = null,
+    high: Float? = null,
+    minRange: Float = 0f,
+    disableRange: Boolean = false,
+    floatingLabel: Boolean = false,
+    disabled: Boolean = false,
+    onValueChanged: (low: Float, high: Float, byUser: Boolean) -> Unit = { _, _, _ -> },
+    onSliderTouchStart: (low: Float, high: Float) -> Unit = { _, _ -> },
+    onSliderTouchEnd: (low: Float, high: Float) -> Unit = { _, _ -> },
+) {
+    val theme = AppTheme.current
+    val density = LocalDensity.current
+
+    // Validated, step-snapped initial values
+    val initLow = remember(low, min, max, step) {
+        clamp(low ?: min, min, max)
+    }
+    val initHigh = remember(high, min, max, step, disableRange) {
+        if (disableRange) max else clamp(high ?: max, min, max)
+    }
+
+    var lowValue  by remember { mutableFloatStateOf(initLow) }
+    var highValue by remember { mutableFloatStateOf(initHigh) }
+
+    // Smoothly animated display fractions
+    val lowFraction by animateFloatAsState(
+        targetValue = valueToFraction(lowValue, min, max),
+        animationSpec = spring(stiffness = 1200f),
+        label = "lowFraction"
+    )
+    val highFraction by animateFloatAsState(
+        targetValue = valueToFraction(highValue, min, max),
+        animationSpec = spring(stiffness = 1200f),
+        label = "highFraction"
+    )
+
+    var draggingLow by remember { mutableStateOf(true) }
+    var isDragging  by remember { mutableStateOf(false) }
+
+    val thumbColor       = if (disabled) theme.colors.text.disable else theme.colors.primary
+    val trackActiveColor = if (disabled) theme.colors.text.disable else theme.colors.primary
+    val trackInactiveColor = theme.colors.background.default
+
+    // trackWidthPx is the full pixel width of the BoxWithConstraints (incl. thumb padding)
+    var trackWidthPx by remember { mutableFloatStateOf(0f) }
+    val thumbSizePx   = with(density) { THUMB_SIZE.toPx() }
+
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .conditional(IsShowBaseLineDebug) { border(1.dp, Colors.blue_03) }
+    ) {
+        BoxWithConstraints(
+            modifier = Modifier
+                .fillMaxWidth()
+                .onGloballyPositioned { coords -> trackWidthPx = coords.size.width.toFloat() }
+                // ── Gesture handling ──────────────────────────────────────────
+                .pointerInput(disabled, min, max, step, minRange, disableRange) {
+                    if (disabled) return@pointerInput
+
+                    awaitPointerEventScope {
+                        while (true) {
+                            // Finger down
+                            val downEvent  = awaitPointerEvent()
+                            val downChange = downEvent.changes.firstOrNull() ?: continue
+                            val touchX     = downChange.position.x
+
+                            // Pick the closer thumb
+                            val lowCenterX  = thumbSizePx / 2f +
+                                    valueToFraction(lowValue,  min, max) * (trackWidthPx - thumbSizePx)
+                            val highCenterX = thumbSizePx / 2f +
+                                    valueToFraction(highValue, min, max) * (trackWidthPx - thumbSizePx)
+
+                            draggingLow = disableRange || isLowCloser(touchX, lowCenterX, highCenterX)
+                            isDragging  = true
+                            onSliderTouchStart(lowValue, highValue)
+
+                            // Apply initial press
+                            applyDrag(touchX, trackWidthPx, thumbSizePx,
+                                min, max, step, minRange, draggingLow,
+                                lowValue, highValue) { nl, nh ->
+                                lowValue  = nl
+                                highValue = nh
+                                onValueChanged(nl, nh, true)
+                            }
+
+                            // Track move / release
+                            while (true) {
+                                val moveEvent  = awaitPointerEvent()
+                                val moveChange = moveEvent.changes.firstOrNull() ?: break
+                                moveChange.consume()
+
+                                if (!moveChange.pressed) {
+                                    isDragging = false
+                                    onSliderTouchEnd(lowValue, highValue)
+                                    break
+                                }
+
+                                applyDrag(moveChange.position.x, trackWidthPx, thumbSizePx,
+                                    min, max, step, minRange, draggingLow,
+                                    lowValue, highValue) { nl, nh ->
+                                    lowValue  = nl
+                                    highValue = nh
+                                    onValueChanged(nl, nh, true)
+                                }
+                            }
+                        }
+                    }
+                }
+        ) {
+            val trackWidth    = maxWidth
+            val availableWidth = trackWidth - THUMB_SIZE
+
+            // ── Floating label ────────────────────────────────────────────────
+            if (floatingLabel && isDragging) {
+                val activeFraction = if (draggingLow) lowFraction else highFraction
+                val activeValue    = if (draggingLow) lowValue    else highValue
+                val labelOffsetDp  = availableWidth * activeFraction
+
+                Box(
+                    modifier = Modifier
+                        .align(Alignment.TopStart)
+                        .offset { IntOffset(x = with(density) { labelOffsetDp.toPx().roundToInt() }, y = 0) }
+                ) {
+                    Box(
+                        modifier = Modifier
+                            .background(
+                                color = theme.colors.text.default,
+                                shape = RoundedCornerShape(Radius.XS)
+                            )
+                            .padding(horizontal = LABEL_PAD_H, vertical = LABEL_PAD_V)
+                    ) {
+                        Text(
+                            text = formatLabel(activeValue),
+                            style = Typography.descriptionXsRegular,
+                            color = Colors.black_01,
+                            textAlign = TextAlign.Center
+                        )
+                    }
+                }
+            }
+
+            // Top padding pushes track + thumbs below the label when floatingLabel is on
+            val topPad = if (floatingLabel) THUMB_SIZE + LABEL_GAP else 0.dp
+
+            // ── Inactive track (full width) ───────────────────────────────────
+            Box(
+                modifier = Modifier
+                    .align(Alignment.TopStart)
+                    .padding(top = topPad + (THUMB_SIZE - TRACK_HEIGHT) / 2)
+                    .padding(horizontal = THUMB_SIZE / 2)
+                    .fillMaxWidth()
+                    .height(TRACK_HEIGHT)
+                    .clip(RoundedCornerShape(percent = 50))
+                    .background(trackInactiveColor)
+            )
+
+            // ── Active track (selected range / single value) ──────────────────
+            val activeStartFraction = if (disableRange) 0f else lowFraction
+            val activeEndFraction   = if (disableRange) lowFraction else highFraction
+            val activeStartDp  = THUMB_SIZE / 2 + availableWidth * activeStartFraction
+            val activeWidthDp  = availableWidth * (activeEndFraction - activeStartFraction)
+
+            if (activeWidthDp > 0.dp) {
+                Box(
+                    modifier = Modifier
+                        .align(Alignment.TopStart)
+                        .padding(top = topPad + (THUMB_SIZE - TRACK_HEIGHT) / 2)
+                        .offset(x = activeStartDp)
+                        .width(activeWidthDp)
+                        .height(TRACK_HEIGHT)
+                        .clip(RoundedCornerShape(percent = 50))
+                        .background(trackActiveColor)
+                )
+            }
+
+            // ── Low thumb ─────────────────────────────────────────────────────
+            Box(
+                modifier = Modifier
+                    .align(Alignment.TopStart)
+                    .padding(top = topPad)
+                    .offset(x = availableWidth * lowFraction)
+                    .shadow(
+                        color       = Color(0x33000000),
+                        borderRadius = 50.dp,
+                        blurRadius  = 6f,
+                        offsetY     = 2.dp
+                    )
+                    .size(THUMB_SIZE)
+                    .clip(RoundedCornerShape(percent = 100))
+                    .background(thumbColor)
+                    .border(THUMB_BORDER, theme.colors.background.surface, RoundedCornerShape(percent = 100))
+            )
+
+            // ── High thumb (range mode only) ──────────────────────────────────
+            if (!disableRange) {
+                Box(
+                    modifier = Modifier
+                        .align(Alignment.TopStart)
+                        .padding(top = topPad)
+                        .offset(x = availableWidth * highFraction)
+                        .shadow(
+                            color       = Color(0x33000000),
+                            borderRadius = 50.dp,
+                            blurRadius  = 6f,
+                            offsetY     = 2.dp
+                        )
+                        .size(THUMB_SIZE)
+                        .clip(RoundedCornerShape(percent = 100))
+                        .background(thumbColor)
+                        .border(THUMB_BORDER, theme.colors.background.surface, RoundedCornerShape(percent = 100))
+                )
+            }
+        }
+    }
+}
+
+// ── Private drag helper ───────────────────────────────────────────────────────
+
+private fun applyDrag(
+    positionX: Float,
+    trackWidthPx: Float,
+    thumbSizePx: Float,
+    min: Float,
+    max: Float,
+    step: Float,
+    minRange: Float,
+    isLow: Boolean,
+    currentLow: Float,
+    currentHigh: Float,
+    onUpdate: (Float, Float) -> Unit,
+) {
+    val snapped = getValueForPosition(positionX, trackWidthPx, thumbSizePx, min, max, step)
+    if (isLow) {
+        val newLow = clamp(snapped, min, currentHigh - minRange)
+        if (newLow != currentLow) onUpdate(newLow, currentHigh)
+    } else {
+        val newHigh = clamp(snapped, currentLow + minRange, max)
+        if (newHigh != currentHigh) onUpdate(currentLow, newHigh)
+    }
+}