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

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

@@ -0,0 +1,348 @@
+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 = Colors.black_01,
+                                shape = RoundedCornerShape(Radius.XS)
+                            )
+                            .padding(horizontal = LABEL_PAD_H, vertical = LABEL_PAD_V)
+                    ) {
+                        Text(
+                            text = formatLabel(activeValue),
+                            style = Typography.descriptionXsRegular,
+                            color = theme.colors.text.default,
+                            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)
+                    .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)
+                        .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)
+    }
+}

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

@@ -0,0 +1,256 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.runtime.Composable
+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.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.Dp
+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.Radius
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.const.scaleSize
+import vn.momo.kits.modifier.activeOpacityClickable
+import vn.momo.kits.modifier.conditional
+
+// ---------------------------------------------------------------------------
+// Size variant
+// ---------------------------------------------------------------------------
+
+enum class StepperSize {
+    LARGE,
+    SMALL
+}
+
+private data class StepperSizeSpec(
+    val buttonSize: Dp,
+    val iconSize: Dp,
+    val numberMinWidth: Dp,
+    val numberHeight: Dp,
+)
+
+private val stepperSizeSpecs: Map<StepperSize, StepperSizeSpec> = mapOf(
+    StepperSize.LARGE to StepperSizeSpec(
+        buttonSize = 36.dp,
+        iconSize = 22.dp,
+        numberMinWidth = 32.dp,
+        numberHeight = 28.dp,
+    ),
+    StepperSize.SMALL to StepperSizeSpec(
+        buttonSize = 28.dp,
+        iconSize = 18.dp,
+        numberMinWidth = 28.dp,
+        numberHeight = 24.dp,
+    ),
+)
+
+// ---------------------------------------------------------------------------
+// Private sub-composables
+// ---------------------------------------------------------------------------
+
+@Composable
+private fun StepperButton(
+    sign: String = "+",
+    size: StepperSize = StepperSize.LARGE,
+    disabled: Boolean = false,
+    onPress: () -> Unit = {},
+    modifier: Modifier = Modifier,
+) {
+    val theme = AppTheme.current
+    val specs = remember(size) { stepperSizeSpecs[size] ?: stepperSizeSpecs[StepperSize.LARGE]!! }
+
+    val iconColor: Color = if (disabled) theme.colors.text.disable else theme.colors.primary
+    val iconName: String =
+        if (sign == "-") "24_navigation_minus_circle" else "24_navigation_plus_circle"
+
+    val clickableModifier: Modifier = if (!disabled) {
+        Modifier.activeOpacityClickable(onClick = onPress)
+    } else {
+        Modifier
+    }
+
+    Box(
+        modifier = modifier
+            .size(specs.buttonSize)
+            .background(color = theme.colors.background.disable, shape = CircleShape)
+            .then(clickableModifier)
+            .conditional(IsShowBaseLineDebug) { border(1.dp, Colors.blue_03) },
+        contentAlignment = Alignment.Center,
+    ) {
+        Icon(
+            source = iconName,
+            size = specs.iconSize,
+            color = iconColor,
+        )
+    }
+}
+
+@Composable
+private fun StepperNumberView(
+    value: Int,
+    size: StepperSize = StepperSize.LARGE,
+    disabled: Boolean = false,
+    editable: Boolean = false,
+    onValueChange: (String) -> Unit = {},
+    modifier: Modifier = Modifier,
+) {
+    val theme = AppTheme.current
+    val specs = remember(size) { stepperSizeSpecs[size] ?: stepperSizeSpecs[StepperSize.LARGE]!! }
+
+    val textColor: Color = if (disabled) theme.colors.text.disable else theme.colors.text.default
+    val borderColor: Color =
+        if (disabled) theme.colors.border.disable else theme.colors.border.default
+
+    val scaledFontSize = scaleSize(12.sp)
+
+    val textStyle = TextStyle(
+        color = textColor,
+        fontSize = scaledFontSize,
+        textAlign = TextAlign.Center,
+    )
+
+    Box(
+        modifier = modifier
+            .defaultMinSize(minWidth = specs.numberMinWidth)
+            .height(specs.numberHeight)
+            .border(
+                width = 1.dp,
+                color = borderColor,
+                shape = RoundedCornerShape(Radius.S),
+            )
+            .padding(horizontal = Spacing.XS)
+            .conditional(IsShowBaseLineDebug) { border(1.dp, Colors.blue_03) },
+        contentAlignment = Alignment.Center,
+    ) {
+        BasicTextField(
+            value = value.toString(),
+            onValueChange = { if (editable) onValueChange(it) },
+            enabled = editable && !disabled,
+            readOnly = !editable,
+            singleLine = true,
+            textStyle = textStyle,
+            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
+            decorationBox = { innerTextField -> innerTextField() },
+        )
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+/**
+ * Stepper — migrated from React Native Stepper.
+ *
+ * Layout: [− button] [value display] [+ button]
+ *
+ * @param defaultValue  Initial value (default 0). Clamped to [min]..[max] on first composition.
+ * @param min           Minimum allowed value (default 0). Minus button is auto-disabled at this bound.
+ * @param max           Maximum allowed value (default 100). Plus button is auto-disabled at this bound.
+ * @param step          Amount added/subtracted per button press (default 1).
+ * @param disabled      Disable state. Pass `true` to disable everything, or a [BooleanArray] of
+ *                      size >= 2 where index 0 = minus button, index 1 = plus button.
+ * @param size          Visual size variant: [StepperSize.LARGE] (default) or [StepperSize.SMALL].
+ * @param editable      When `true` the number display becomes a direct keyboard input (default false).
+ * @param onValueChange Callback invoked with the new [Int] value on every change.
+ * @param modifier      Modifier applied to the root [Row].
+ */
+@Composable
+fun Stepper(
+    defaultValue: Int = 0,
+    min: Int = 0,
+    max: Int = 100,
+    step: Int = 1,
+    disabled: Any = false,
+    size: StepperSize = StepperSize.LARGE,
+    editable: Boolean = false,
+    onValueChange: (Int) -> Unit = {},
+    modifier: Modifier = Modifier,
+) {
+    var value by remember(defaultValue) { mutableStateOf(defaultValue.coerceIn(min, max)) }
+
+    fun applyValue(raw: String) {
+        var parsed = raw.toIntOrNull() ?: 0
+        parsed = parsed.coerceIn(min, max)
+        value = parsed
+        onValueChange(parsed)
+    }
+
+    // Resolve per-part disabled state — mirrors RN getViewDisabledStatus()
+    val disabledMinus: Boolean
+    val disabledPlus: Boolean
+    val disabledNumber: Boolean
+
+    when {
+        disabled is BooleanArray && disabled.size >= 2 -> {
+            disabledMinus = disabled[0]
+            disabledPlus = disabled[1]
+            disabledNumber = disabled[0] && disabled[1]
+        }
+        disabled is Boolean && disabled -> {
+            disabledMinus = true
+            disabledPlus = true
+            disabledNumber = true
+        }
+        else -> {
+            disabledMinus = false
+            disabledPlus = false
+            disabledNumber = false
+        }
+    }
+
+    // Auto-disable buttons when the value is already at a bound
+    val effectiveMinusDisabled = disabledMinus || value <= min
+    val effectivePlusDisabled = disabledPlus || value >= max
+
+    Row(
+        modifier = modifier
+            .conditional(IsShowBaseLineDebug) { border(1.dp, Colors.blue_03) },
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        StepperButton(
+            sign = "-",
+            size = size,
+            disabled = effectiveMinusDisabled,
+            onPress = { applyValue((value - step).toString()) },
+        )
+
+        StepperNumberView(
+            value = value,
+            size = size,
+            disabled = disabledNumber,
+            editable = editable,
+            onValueChange = { applyValue(it) },
+            modifier = Modifier.padding(horizontal = Spacing.S),
+        )
+
+        StepperButton(
+            sign = "+",
+            size = size,
+            disabled = effectivePlusDisabled,
+            onPress = { applyValue((value + step).toString()) },
+        )
+    }
+}