@momo-kits/native-kits 0.161.1-beta.15-debug → 0.161.2-beta.1

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

@@ -1,241 +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.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-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.width
-import androidx.compose.foundation.layout.wrapContentSize
-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.MutableState
-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.focus.onFocusChanged
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.input.KeyboardType
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import androidx.compose.ui.zIndex
-import vn.momo.kits.const.AppTheme
-import vn.momo.kits.const.Spacing
-import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.const.Colors
-import vn.momo.kits.const.Typography
-import vn.momo.kits.const.scaleSize
-import vn.momo.kits.modifier.conditional
-
-const val MAX_LENGTH = 300
-val DEFAULT_HEIGHT = 104.dp
-
-@Composable
-fun InputTextArea(
-    text: MutableState<String> = remember { mutableStateOf("") },
-    maxLength: Int = MAX_LENGTH,
-    height: Dp = DEFAULT_HEIGHT,
-    floatingValue: String = "",
-    floatingValueColor: Color = AppTheme.current.colors.text.hint,
-    floatingIcon: String = "",
-    floatingIconColor: Color = AppTheme.current.colors.text.default,
-    placeholder: String = "",
-    size: InputSize = InputSize.SMALL,
-    onChangeText: (String) -> Unit = {},
-    error: String = "",
-    errorSpacing: Boolean = false,
-    disabled: Boolean = false,
-    icon: String = "",
-    iconColor: Color = AppTheme.current.colors.text.default,
-    onRightIconPressed: () -> Unit = {},
-    onFocus: () -> Unit = {},
-    onBlur: () -> Unit = {},
-    loading: Boolean = false,
-    required: Boolean = false,
-    fontWeight: InputFontWeight = InputFontWeight.REGULAR,
-    keyboardType: KeyboardType = KeyboardType.Text,
-) {
-    var isFocused by remember { mutableStateOf(false) }
-    var isBlurred = false
-    val disabledColor = AppTheme.current.colors.text.disable
-    var textColor = AppTheme.current.colors.text.default
-    var placeholderColor = AppTheme.current.colors.text.hint
-    var iconTintColor = iconColor
-    val floatingTitleColor = when {
-        disabled -> AppTheme.current.colors.text.disable
-        else -> floatingValueColor
-    }
-    val floatingIconTintColor = when {
-        disabled -> AppTheme.current.colors.text.disable
-        else -> floatingIconColor
-    }
-
-    if (disabled) {
-        textColor = disabledColor
-        placeholderColor = disabledColor
-        iconTintColor = disabledColor
-    }
-
-    val fontSize = 16.sp
-    val lineHeight = 24.sp
-    val scaleFontSize = scaleSize(16.sp)
-    val scaleLineHeight = scaleSize(24.sp)
-    val scaleHeight = scaleSize(height)
-
-    Column(modifier = Modifier.conditional(IsShowBaseLineDebug) {
-        border(1.dp, Colors.blue_03)
-    }) {
-        BasicTextField(
-            enabled = !disabled,
-            singleLine = false,
-            value = text.value,
-            textStyle = TextStyle(
-                color = textColor,
-                fontSize = scaleFontSize,
-                lineHeight = scaleLineHeight,
-                fontWeight = fontWeight.value
-            ),
-            keyboardOptions = KeyboardOptions.Default.copy(keyboardType = keyboardType),
-            modifier = Modifier.height(scaleHeight).onFocusChanged {
-                isFocused = it.isFocused
-                if (it.isFocused) {
-                    onFocus()
-                }
-                if (!it.isFocused && isBlurred) onBlur()
-                if (it.isFocused && !isBlurred) isBlurred = true
-            },
-            onValueChange = {
-                if (it.length <= maxLength) {
-                    onChangeText(it)
-                }
-            },
-            decorationBox = { innerTextField ->
-                // Floating Icon
-                if (floatingValue.isNotEmpty() || floatingIcon.isNotEmpty()) {
-                    Box(
-                        modifier = Modifier.wrapContentSize()
-                            .offset(y = (-scaleHeight / 2), x = (Spacing.S))
-                            .background(AppTheme.current.colors.background.surface)
-                            .zIndex(10f),
-                    ) {
-                        Row(
-                            modifier = Modifier
-                                .padding(horizontal = Spacing.S),
-                            verticalAlignment = Alignment.CenterVertically
-                        ) {
-                            Text(
-                                floatingValue,
-                                style = Typography.labelSMedium,
-                                color = floatingTitleColor
-                            )
-                            if (required) {
-                                Text(
-                                    "*",
-                                    style = Typography.labelSMedium,
-                                    color = AppTheme.current.colors.error.primary,
-                                )
-                            }
-                            if (floatingIcon.isNotEmpty()) {
-                                Icon(
-                                    source = floatingIcon,
-                                    modifier = Modifier.padding(start = Spacing.XS),
-                                    size = 16.dp,
-                                    color = floatingIconTintColor
-                                )
-                            }
-                        }
-                    }
-                }
-                //input box wrapper
-                Box(
-                    modifier = Modifier.fillMaxWidth()
-                        .background(
-                            AppTheme.current.colors.background.surface,
-                            RoundedCornerShape(size.values.borderRadius)
-                        )
-                        .border(
-                            1.dp,
-                            getBorderColor(isFocused, error, disabled),
-                            RoundedCornerShape(size.values.borderRadius)
-                        ),
-                    contentAlignment = Alignment.TopStart
-                ) {
-                    Column {
-                        Row(
-                            modifier = Modifier.weight(1f).padding(
-                                start = Spacing.M,
-                                end = Spacing.M,
-                                top = Spacing.M
-                            ),
-                            verticalAlignment = Alignment.Top
-                        ) {
-                            Box(Modifier.weight(1f)) {
-                                if (text.value.isEmpty()) {
-                                    Text(
-                                        text = placeholder,
-                                        style = TextStyle(
-                                            fontSize = fontSize,
-                                            lineHeight = lineHeight,
-                                            fontWeight = fontWeight.value
-                                        ),
-                                        color = placeholderColor
-                                    )
-                                }
-                                innerTextField()
-                            }
-                            if (isFocused && text.value.isNotEmpty()) {
-                                Row {
-                                    Spacer(Modifier.width(Spacing.XS))
-                                    Icon(
-                                        source = "24_navigation_close_circle_full",
-                                        size = 16.dp,
-                                        color = AppTheme.current.colors.text.hint,
-                                        modifier = Modifier.clickable(
-                                            onClick = {
-                                                text.value = ""
-                                                onChangeText.invoke("")
-                                            },
-                                            interactionSource = remember { MutableInteractionSource() },
-                                            indication = null
-                                        )
-                                    )
-                                }
-                            }
-                            RenderRightIcon(loading, icon, iconTintColor, onRightIconPressed)
-                        }
-
-                        Box(
-                            modifier = Modifier
-                                .fillMaxWidth()
-                                .padding(end = Spacing.M),
-                            contentAlignment = Alignment.CenterEnd
-                        ) {
-                            Text(
-                                "${text.value.length}/$maxLength",
-                                style = Typography.descriptionXsRegular,
-                                color = AppTheme.current.colors.text.hint
-                            )
-                        }
-                        Spacer(Modifier.height(Spacing.M))
-                    }
-                }
-            },
-        )
-        // show error
-        ErrorView(error, errorSpacing, "")
-    }
-}

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

@@ -1,364 +0,0 @@
-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.Canvas
-import androidx.compose.foundation.OverscrollEffect
-import androidx.compose.foundation.background
-import androidx.compose.foundation.gestures.FlingBehavior
-import androidx.compose.foundation.gestures.ScrollableDefaults
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.LazyListLayoutInfo
-import androidx.compose.foundation.lazy.LazyListScope
-import androidx.compose.foundation.lazy.LazyListState
-import androidx.compose.foundation.lazy.rememberLazyListState
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.pullrefresh.PullRefreshIndicator
-import androidx.compose.material.pullrefresh.pullRefresh
-import androidx.compose.material.pullrefresh.rememberPullRefreshState
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.MutableState
-import androidx.compose.runtime.State
-import androidx.compose.runtime.mutableIntStateOf
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.snapshotFlow
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.composed
-import androidx.compose.ui.geometry.CornerRadius
-import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.geometry.Size
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.drawscope.rotate
-import androidx.compose.ui.hapticfeedback.HapticFeedbackType
-import androidx.compose.ui.layout.Measurable
-import androidx.compose.ui.layout.MeasureResult
-import androidx.compose.ui.layout.MeasureScope
-import androidx.compose.ui.layout.layout
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.platform.LocalHapticFeedback
-import androidx.compose.ui.unit.Constraints
-import androidx.compose.ui.unit.IntOffset
-import androidx.compose.ui.unit.dp
-import kotlinx.coroutines.flow.collect
-import kotlinx.coroutines.flow.combine
-import kotlinx.coroutines.flow.distinctUntilChanged
-import vn.momo.kits.const.Spacing
-import vn.momo.kits.modifier.conditional
-import vn.momo.kits.platform.getPlatformName
-
-private const val BOX_KEY = "LazyColumnWithBouncing_BOX_KEY"
-
-
-@OptIn(ExperimentalMaterialApi::class)
-@Composable
-fun overScrollWithPullToRefresh(
-    pullRefreshState: PullToRefreshCustomState?,
-): OverscrollEffect {
-    val density = LocalDensity.current
-    val hapticFeedback = LocalHapticFeedback.current
-
-    return remember(density) {
-        CupertinoOverscrollEffect(
-            pullRefreshState = if (pullRefreshState != null && pullRefreshState.sendHaptic != null) pullRefreshState
-            else pullRefreshState?.copy(
-                sendHaptic = {
-                    hapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)
-                }),
-            density = density.density,
-            applyClip = false,
-        )
-    }
-}
-
-@OptIn(ExperimentalMaterialApi::class)
-@Composable
-fun LazyColumnWithBouncing(
-    modifier: Modifier = Modifier,
-    modifierIndicator: Modifier = Modifier,
-    state: LazyListState = rememberLazyListState(),
-    contentPadding: PaddingValues = PaddingValues(0.dp),
-    reverseLayout: Boolean = false,
-    verticalArrangement: Arrangement.Vertical = if (!reverseLayout) Arrangement.Top else Arrangement.Bottom,
-    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
-    flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
-    userScrollEnabled: Boolean = true,
-    pullRefreshState: PullToRefreshCustomState? = null,
-    content: LazyListScope.() -> Unit,
-) {
-    val height = remember { mutableIntStateOf(0) }
-    val maxConstraint = remember { mutableIntStateOf(0) }
-
-    LaunchedEffect(Unit) {
-        val addOn = 1
-        combine(
-            snapshotFlow { maxConstraint.value }.distinctUntilChanged(),
-            snapshotFlow { state.layoutInfo }
-        ) { cHeight, layoutInfo ->
-            height.value = when {
-                height.value == 0 && (state.canScrollForward || state.canScrollBackward) -> 0
-                layoutInfo.viewportSize.height >= cHeight && height.value == 0 -> 0
-                layoutInfo.visibleItemsInfo.lastOrNull()?.key != BOX_KEY -> 0
-                else -> {
-                    val vH = layoutInfo.totalHeight
-                    (cHeight - (vH - height.value) + addOn).coerceIn(0, cHeight)
-                }
-            }
-        }.collect()
-    }
-
-    val measureLayout =
-        remember<MeasureScope.(Measurable, Constraints) -> MeasureResult>(maxConstraint) {
-            { m, c ->
-                val p = m.measure(c.copy(minHeight = 0))
-                maxConstraint.value = c.maxHeight
-                layout(p.width, p.height) {
-                    p.place(IntOffset.Zero)
-                }
-            }
-        }
-
-    if (getPlatformName() == "iOS") {
-
-        val overscroll = overScrollWithPullToRefresh(
-            pullRefreshState = remember {
-                pullRefreshState
-            })
-
-        Box {
-            IosIndicator(
-                effect = overscroll,
-                modifier = modifierIndicator.align(Alignment.TopCenter).padding(top = Spacing.L).size(24.dp),
-            )
-            LazyColumn(
-                modifier = modifier
-                    .layout(measure = measureLayout),
-                state = state,
-                contentPadding = contentPadding,
-                flingBehavior = flingBehavior,
-                horizontalAlignment = horizontalAlignment,
-                verticalArrangement = verticalArrangement,
-                reverseLayout = reverseLayout,
-                userScrollEnabled = userScrollEnabled,
-                overscrollEffect = overscroll,
-            ) {
-                content()
-                item(key = BOX_KEY) {
-                    FakeBox(height)
-                }
-            }
-        }
-    } else {
-        val pullState = rememberPullRefreshState(
-            refreshing = pullRefreshState?.refreshingState?.value ?: false,
-            onRefresh = {
-                pullRefreshState?.onRefresh()
-            },
-        )
-
-        Box(
-            contentAlignment = Alignment.TopCenter,
-            modifier = Modifier.conditional(pullRefreshState != null) {
-                pullRefresh(pullState)
-            }) {
-            LazyColumn(
-                modifier = modifier.calculateHeight(height),
-                state = state,
-                contentPadding = contentPadding,
-                flingBehavior = flingBehavior,
-                horizontalAlignment = horizontalAlignment,
-                verticalArrangement = verticalArrangement,
-                reverseLayout = reverseLayout,
-                userScrollEnabled = userScrollEnabled,
-            ) {
-                content()
-            }
-            if (pullRefreshState != null) {
-                PullRefreshIndicator(
-                    pullRefreshState.refreshingState.value,
-                    pullState,
-                    modifierIndicator.align(Alignment.TopCenter)
-                )
-            }
-
-        }
-    }
-}
-
-@Composable
-private fun IosIndicator(
-    effect: OverscrollEffect?,
-    modifier: Modifier = Modifier,
-) {
-    if (effect !is CupertinoOverscrollEffect) return
-    if (effect.pullRefreshState == null) return
-    val state = effect.pullRefreshState
-
-
-    SpinningProgressBarLoading(
-        progress = state.position, modifier = modifier
-    )
-}
-
-@Composable
-private fun SpinningProgressBarLoading(
-    progress: State<Float>, modifier: Modifier = Modifier
-) {
-    if (progress.value <= 0) {
-        return
-    }
-
-    val hapticFeedback = LocalHapticFeedback.current
-    val isSendHaptic = remember { mutableStateOf(false) }
-
-    val totalStep = 8
-    val stepAngle = 360f / totalStep
-    val baseOpacity = 1.0f / (totalStep + 2)
-    val minAlpha = 0.2f
-
-    val infiniteTransition = rememberInfiniteTransition()
-    val angle = infiniteTransition.animateFloat(
-        initialValue = 0f, targetValue = totalStep.toFloat(), animationSpec = infiniteRepeatable(
-            animation = tween(totalStep * 100, easing = LinearEasing),
-            repeatMode = RepeatMode.Restart
-        )
-    )
-
-    LaunchedEffect(Unit) {
-        snapshotFlow { progress.value }.collect {
-            if (it >= 1.0f && !isSendHaptic.value) {
-                hapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)
-                isSendHaptic.value = true
-            } else if (progress.value < 1.0f && isSendHaptic.value) {
-                isSendHaptic.value = false
-            }
-        }
-
-    }
-
-    Canvas(modifier = modifier) {
-        val percentage = progress.value
-        val clampedProgress = percentage.coerceIn(0f, 1f)
-        val value = (totalStep * clampedProgress).coerceIn(0f, totalStep.toFloat())
-        val integerPart = value.toInt()
-        val decimalPart = value - integerPart
-
-        if (integerPart <= 0) return@Canvas
-
-        val canvasWidth = size.width
-        val canvasHeight = size.height
-        val width = size.width * 0.3f
-        val height = size.height / 8
-        val cornerRadius = (width.coerceAtMost(height) / 2)
-
-        if (percentage >= 1f) {
-            for (i in 0..360 step 360 / totalStep) {
-                rotate(i.toFloat()) {
-                    drawRoundRect(
-                        color = Color.LightGray.copy(alpha = .7f),
-                        topLeft = Offset(canvasWidth - width, (canvasHeight - height) / 2),
-                        size = Size(width, height),
-                        cornerRadius = CornerRadius(cornerRadius, cornerRadius)
-                    )
-                }
-            }
-
-            val coefficient = 360f / totalStep
-
-            for (i in 1..4) {
-                rotate((angle.value.toInt() + i) * coefficient) {
-                    drawRoundRect(
-                        color = Color.Gray.copy(alpha = (0.2f + 0.2f * i).coerceIn(0f, 1f)),
-                        topLeft = Offset(canvasWidth - width, (canvasHeight - height) / 2),
-                        size = Size(width, height),
-                        cornerRadius = CornerRadius(cornerRadius, cornerRadius)
-                    )
-                }
-            }
-            return@Canvas
-        }
-
-        val topLeft = Offset(canvasWidth - width, (canvasHeight - height) / 2)
-        val rectSize = Size(width, height)
-        val cornerRadiusValue = CornerRadius(cornerRadius, cornerRadius)
-        repeat(integerPart) { i ->
-            val angle = i * stepAngle - 90f
-            val stepOpacity = 1f - (baseOpacity * i)
-
-            val alpha = if (i == integerPart - 1) {
-                (decimalPart * stepOpacity).coerceIn(minAlpha, 1f)
-            } else {
-                stepOpacity.coerceIn(minAlpha, 1f)
-            }
-
-            rotate(angle) {
-                drawRoundRect(
-                    color = Color.Gray.copy(alpha = alpha),
-                    topLeft = topLeft,
-                    size = rectSize,
-                    cornerRadius = cornerRadiusValue
-                )
-            }
-        }
-    }
-}
-
-@Composable
-private fun FakeBox(height: MutableState<Int>) {
-    Box(
-        modifier = Modifier
-            .dynamicHeight(height).fillMaxWidth().background(Color.Red),
-    )
-}
-
-private fun Modifier.calculateHeight(
-    height: MutableState<Int>,
-) = this.layout { m, c ->
-    val p = m.measure(
-        constraints = c.copy(
-            minHeight = 0
-        )
-    )
-    val vH = p.height
-    val cMaxHeight = c.maxHeight
-    val addOn = 0.5.dp.roundToPx()
-    var extraSpace = addOn + height.value
-    if (height.value == 0) {
-        extraSpace = 0
-    }
-    if (vH - extraSpace >= cMaxHeight && height.value != 0) {
-        height.value = 0
-    } else if (vH - extraSpace < cMaxHeight) {
-        height.value = cMaxHeight - (vH - extraSpace) + addOn
-    }
-
-    layout(c.maxWidth, cMaxHeight) {
-        p.place(IntOffset.Zero)
-    }
-}
-
-
-private fun Modifier.dynamicHeight(height: MutableState<Int>) = composed {
-    val measure = remember<MeasureScope.(Measurable, Constraints) -> MeasureResult>(this, height) {
-        { m, c ->
-            val p = m.measure(c)
-            layout(c.maxWidth, height.value) { p.place(IntOffset.Zero) }
-        }
-    }
-    this.layout(measure = measure)
-}
-
-private val LazyListLayoutInfo.totalHeight: Int
-    get() = visibleItemsInfo.sumOf { it.size }