@momo-kits/native-kits 0.167.1-duo.18-debug → 0.167.1-duo.19

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/BottomSheet.kt

@@ -1,338 +0,0 @@
-package vn.momo.kits.navigation
-
-import androidx.compose.animation.core.Animatable
-import androidx.compose.animation.core.CubicBezierEasing
-import androidx.compose.animation.core.tween
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.gestures.detectDragGestures
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.BoxWithConstraints
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxHeight
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.heightIn
-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.absolutePadding
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.DisposableEffect
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Brush
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.input.pointer.pointerInput
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.unit.IntOffset
-import androidx.compose.ui.unit.dp
-import kotlinx.coroutines.launch
-import vn.momo.kits.components.Divider
-import vn.momo.kits.components.Icon
-import vn.momo.kits.components.Text
-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.application.LocalContext
-import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.const.AppNavigationBar
-import vn.momo.kits.const.Typography
-import vn.momo.kits.navigation.tracking.ScreenTracker
-import vn.momo.kits.modifier.conditional
-import vn.momo.kits.modifier.noFeedbackClickable
-import vn.momo.kits.platform.BackHandler
-import vn.momo.kits.platform.getScreenHeight
-import vn.momo.kits.layout.getScreenLayout
-
-// iPhone Duo inner display: center the sheet instead of spanning the width (RN BottomSheet).
-private val DUO_REGULAR_MIN_WIDTH = 600.dp
-
-@Composable
-internal fun BottomSheet(
-    content: @Composable () -> Unit,
-    header: BottomHeader,
-    isSurface: Boolean = false,
-    barrierDismissible: Boolean = true,
-    draggable: Boolean = true,
-    useBottomInset: Boolean = true,
-    footerComponent: (@Composable () -> Unit)? = null,
-    onDismiss: (() -> Unit)?
-) {
-    val layout = getScreenLayout()
-    val isDuo = layout.isIPhoneDuoDevice
-    val isDuoCentered = isDuo && layout.width >= DUO_REGULAR_MIN_WIDTH
-    // the screen is the outer display on iPhone Duo, even when unfolded
-    val screenHeightDp = if (isDuo) layout.height else getScreenHeight()
-    val screenHeightPx = with(LocalDensity.current) { screenHeightDp.toPx() }
-    val sheetOffset = remember { Animatable(screenHeightPx) }
-
-    val backgroundAlpha = remember { Animatable(0f) }
-    val dynamicAlpha = ((1f - (sheetOffset.value / screenHeightPx)).coerceIn(0f, 1f)) * 0.3f
-    val alpha = backgroundAlpha.value + dynamicAlpha
-
-    val sheetCloseOffset = with(LocalDensity.current) { 100.dp.toPx() }
-
-    val coroutineScope = rememberCoroutineScope()
-
-    val maxApi = LocalMaxApi.current
-    val context = LocalContext.current
-
-    DisposableEffect(Unit) {
-        ScreenTracker.trackPopupDisplayed(
-            maxApi = maxApi,
-            context = context,
-            parentScreenName = ScreenTracker.getLastScreenName()
-        )
-        onDispose { }
-    }
-
-    suspend fun openEvent(){
-        backgroundAlpha.animateTo(
-            targetValue = 0.3f,
-            animationSpec = tween(
-                durationMillis = 100,
-                easing = CubicBezierEasing(0.05f, 0.7f, 0.1f, 1f)
-            )
-        )
-        sheetOffset.animateTo(
-            targetValue = 0f,
-            animationSpec = tween(
-                durationMillis = 350,
-                easing = CubicBezierEasing(0.05f, 0.7f, 0.1f, 1f)
-            )
-        )
-    }
-
-    fun closeEvent(){
-        coroutineScope.launch {
-            sheetOffset.animateTo(
-                targetValue = screenHeightPx,
-                animationSpec = tween(
-                    durationMillis = 200,
-                    easing = CubicBezierEasing(0.3f, 0.0f, 0.8f, 0.15f)
-                )
-            )
-            backgroundAlpha.animateTo(
-                targetValue = 0f,
-                animationSpec = tween(
-                    durationMillis = 100,
-                    easing = CubicBezierEasing(0.3f, 0.0f, 0.8f, 0.15f)
-                )
-            )
-            OverplayComponentRegistry.hardClearAfterDismiss()
-        }
-    }
-
-    LaunchedEffect(Unit) {
-        openEvent()
-    }
-
-    DisposableEffect(Unit) {
-        OverplayComponentRegistry.bindClose { closeEvent() }
-        onDispose {
-            onDismiss?.invoke()
-        }
-    }
-
-    BackHandler(true){
-        closeEvent()
-    }
-
-    BoxWithConstraints(
-        modifier = Modifier
-            .fillMaxSize()
-            .background(Color.Black.copy(alpha = alpha))
-            .noFeedbackClickable {
-                if(barrierDismissible) closeEvent()
-            }
-    ) {
-        val parentHeight = with(LocalDensity.current) { constraints.maxHeight.toDp() }
-        val maxHeight = if (isDuo) {
-            parentHeight - maxOf(layout.duoTopInset, Spacing.XL)
-        } else {
-            parentHeight - 90.dp
-        }
-        // landscape side buttons span the full height; in portrait the side status bar only covers the top
-        val sideInset = isDuo && !isDuoCentered && layout.width > layout.height
-
-        Box(
-            modifier = Modifier
-                .align(Alignment.BottomCenter)
-                .offset { IntOffset(x = 0, y = sheetOffset.value.toInt()) }
-                .then(
-                    if (isDuoCentered) {
-                        // keeps the portrait width in landscape, like system sheets
-                        Modifier.width(
-                            minOf(
-                                minOf(layout.width, layout.height) - Spacing.L * 2,
-                                layout.width - maxOf(layout.insetLeft, layout.insetRight, Spacing.L) * 2,
-                            )
-                        )
-                    } else {
-                        Modifier.fillMaxWidth()
-                    }
-                )
-                .heightIn(max = maxHeight)
-                .background(
-                    color = if (isSurface) AppTheme.current.colors.background.surface else AppTheme.current.colors.background.default,
-                    shape = RoundedCornerShape(topStart = Radius.M, topEnd = Radius.M)
-                )
-                .conditional(IsShowBaseLineDebug) {
-                    border(1.dp, Colors.blue_03)
-                }
-                .noFeedbackClickable {  },
-            contentAlignment = Alignment.BottomCenter
-        ) {
-            val bottomInset = if (useBottomInset) {
-                (AppNavigationBar.current - keyboardSizeState().value).coerceAtLeast(0.dp)
-            } else 0.dp
-            Column(
-                Modifier
-                    .padding(bottom = bottomInset)
-                    .conditional(sideInset) {
-                        absolutePadding(left = layout.insetLeft, right = layout.insetRight)
-                    }
-            ) {
-                Box(
-                    modifier = Modifier
-                        .height(72.dp)
-                        .fillMaxWidth()
-                        .conditional(draggable) {
-                            pointerInput(Unit) {
-                                detectDragGestures(
-                                    onDrag = { change, dragAmount ->
-                                        change.consume()
-                                        coroutineScope.launch {
-                                            val newOffset = (sheetOffset.value + dragAmount.y).coerceAtLeast(0f)
-                                            sheetOffset.snapTo(newOffset)
-                                        }
-                                    },
-                                    onDragEnd = {
-                                        coroutineScope.launch {
-                                            if (sheetOffset.value > sheetCloseOffset) {
-                                                closeEvent()
-                                            } else {
-                                                sheetOffset.animateTo(0f)
-                                            }
-                                        }
-                                    }
-                                )
-                            }
-                        }
-                ) {
-                    Column(
-                        modifier = Modifier
-                            .fillMaxSize()
-                            .padding(horizontal = Spacing.M),
-                        horizontalAlignment = Alignment.CenterHorizontally
-                    ) {
-                        Spacer(Modifier.height(8.dp))
-                        Box(
-                            modifier = Modifier
-                                .height(4.dp)
-                                .width(40.dp)
-                                .background(
-                                    color = Colors.black_06,
-                                    shape = RoundedCornerShape(Radius.S)
-                                )
-                        )
-                        Spacer(Modifier.height(4.dp))
-                        Box(Modifier.fillMaxWidth().height(56.dp), contentAlignment = Alignment.Center){
-                            when (header) {
-                                is BottomHeader.Title -> {
-                                    Row(modifier = Modifier.fillMaxSize(), verticalAlignment = Alignment.CenterVertically) {
-                                        Box(Modifier.size(24.dp))
-                                        Box(Modifier.fillMaxHeight().weight(1f), contentAlignment = Alignment.Center){
-                                            Text(
-                                                text = header.data,
-                                                color = Colors.black_17,
-                                                style = Typography.headerDefaultBold
-                                            )
-                                        }
-                                        Box(Modifier
-                                            .size(24.dp)
-                                            .noFeedbackClickable {
-                                                closeEvent()
-                                            },
-                                            contentAlignment = Alignment.Center
-                                        ){
-                                            Icon(source = "navigation_close")
-                                        }
-                                    }
-                                }
-                                is BottomHeader.Custom -> {
-                                    header.content()
-                                }
-                            }
-                        }
-                    }
-                }
-                Divider()
-                if (footerComponent != null) {
-                    Box(Modifier.weight(1f, fill = false)) {
-                        content()
-                    }
-                    BottomSheetFooter(footerComponent)
-                } else if (isDuo) {
-                    // content shrinks so a tall sheet keeps its header
-                    Box(Modifier.weight(1f, fill = false)) {
-                        content()
-                    }
-                } else {
-                    content()
-                }
-            }
-        }
-    }
-}
-
-@Composable
-private fun BottomSheetFooter(footerComponent: @Composable () -> Unit) {
-    val shadowBrush = remember {
-        Brush.verticalGradient(
-            colors = listOf(Color.Transparent, Color.Black.copy(alpha = 0.05f))
-        )
-    }
-
-    Box {
-        Box(
-            Modifier
-                .fillMaxWidth()
-                .background(AppTheme.current.colors.background.surface)
-                .conditional(IsShowBaseLineDebug) {
-                    border(1.dp, Colors.blue_03)
-                }
-                .padding(vertical = Spacing.S)
-        ) {
-            footerComponent()
-        }
-
-        Box(
-            modifier = Modifier
-                .fillMaxWidth()
-                .height(6.dp)
-                .offset(x = 0.dp, y = (-6).dp)
-                .background(shadowBrush)
-        )
-    }
-}
-
-sealed class BottomHeader {
-    data class Title(
-        val data: String = "Bottom Sheet Title",
-    ) : BottomHeader()
-
-    data class Custom(
-        val content: @Composable () -> Unit
-    ) : BottomHeader()
-}

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/HostBackGestureBridge.kt

@@ -1,58 +0,0 @@
-package vn.momo.kits.navigation
-
-interface HostBackTarget {
-    fun canPop(): Boolean
-
-    fun onBack()
-
-    fun backStarted()
-    fun backProgressed(progress: Float)
-    fun backCompleted()
-    fun backCancelled()
-}
-
-object HostBackGestureBridge {
-    private val targets = mutableListOf<HostBackTarget>()
-    private var gestureTarget: HostBackTarget? = null
-
-    var shouldUseFloatingArrowBack: Boolean = false
-
-    fun checkCanPop(): Boolean = targets.isNotEmpty()
-
-    fun canPopInner(): Boolean = top()?.canPop() == true
-
-    fun pop() {
-        top()?.onBack()
-    }
-
-    fun started() {
-        val target = top() ?: return
-        gestureTarget = target
-        target.backStarted()
-    }
-
-    fun progressed(progress: Float) {
-        gestureTarget?.backProgressed(progress.coerceIn(0f, 1f))
-    }
-
-    fun completed() {
-        (gestureTarget ?: top())?.backCompleted()
-        gestureTarget = null
-    }
-
-    fun cancelled() {
-        gestureTarget?.backCancelled()
-        gestureTarget = null
-    }
-
-    fun attach(target: HostBackTarget) {
-        targets += target
-    }
-
-    fun detach(target: HostBackTarget) {
-        targets -= target
-        if (gestureTarget === target) gestureTarget = null
-    }
-
-    private fun top(): HostBackTarget? = targets.lastOrNull()
-}

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/ModalScreen.kt

@@ -1,137 +0,0 @@
-package vn.momo.kits.navigation
-
-import androidx.compose.animation.core.Animatable
-import androidx.compose.animation.core.CubicBezierEasing
-import androidx.compose.animation.core.tween
-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.fillMaxSize
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.wrapContentSize
-import androidx.compose.runtime.*
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.alpha
-import androidx.compose.ui.draw.scale
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.unit.dp
-import kotlinx.coroutines.launch
-import vn.momo.kits.application.LocalContext
-import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.const.Colors
-import vn.momo.kits.modifier.conditional
-import vn.momo.kits.modifier.noFeedbackClickable
-import vn.momo.kits.navigation.tracking.ScreenTracker
-import vn.momo.kits.platform.BackHandler
-import vn.momo.kits.layout.getScreenLayout
-
-@Composable
-internal fun ModalScreen(
-    content: @Composable () -> Unit,
-    barrierDismissible: Boolean = true,
-    onDismiss: (() -> Unit)? = null
-) {
-    val navigator = LocalNavigator.current
-
-    val alpha = remember { Animatable(0f) }
-    val scale = remember { Animatable(0.8f) }
-
-    val coroutineScope = rememberCoroutineScope()
-
-    val maxApi = LocalMaxApi.current
-    val context = LocalContext.current
-
-    DisposableEffect(Unit) {
-        ScreenTracker.trackPopupDisplayed(
-            maxApi = maxApi,
-            context = context,
-            parentScreenName = ScreenTracker.getLastScreenName()
-        )
-        onDispose { }
-    }
-
-    fun openEvent() {
-        coroutineScope.launch {
-            launch {
-                alpha.animateTo(
-                    targetValue = 1f,
-                    animationSpec = tween(durationMillis = 250)
-                )
-            }
-            launch {
-                scale.animateTo(
-                    targetValue = 1f,
-                    animationSpec = tween(
-                        durationMillis = 250,
-                        easing = CubicBezierEasing(0.2f, 0.0f, 0f, 1f)
-                    )
-                )
-            }
-        }
-    }
-
-    fun closeEvent() {
-        coroutineScope.launch {
-            alpha.animateTo(
-                targetValue = 0f,
-                animationSpec = tween(durationMillis = 200)
-            )
-            scale.animateTo(
-                targetValue = 0.8f,
-                animationSpec = tween(durationMillis = 200)
-            )
-            OverplayComponentRegistry.hardClearAfterDismiss()
-        }
-    }
-
-    LaunchedEffect(Unit) {
-        openEvent()
-    }
-
-    DisposableEffect(Unit) {
-        OverplayComponentRegistry.bindClose { closeEvent() }
-        onDispose {
-            onDismiss?.invoke()
-        }
-    }
-
-    BackHandler(enabled = true) {
-        closeEvent()
-    }
-
-    val layout = getScreenLayout()
-
-    Box(
-        modifier = Modifier
-            .fillMaxSize()
-            .background(Color.Black.copy(alpha = 0.6f * alpha.value))
-            .noFeedbackClickable {
-                if(barrierDismissible) closeEvent()
-            }
-            // center below the side status bar and above the home indicator
-            .conditional(layout.isIPhoneDuoDevice) {
-                padding(top = layout.duoTopInset, bottom = layout.insetBottom)
-            },
-        contentAlignment = Alignment.Center
-    ) {
-        Box(
-            modifier = Modifier
-                .scale(scale.value)
-                .alpha(alpha.value)
-                .wrapContentSize()
-                .conditional(IsShowBaseLineDebug) {
-                    border(1.dp, Colors.blue_03)
-                }
-                .clickable(
-                    indication = null,
-                    interactionSource = remember { MutableInteractionSource() }
-                ) {},
-        contentAlignment = Alignment.Center
-        ) {
-            content()
-        }
-    }
-}

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/Navigation.kt

@@ -1,106 +0,0 @@
-package vn.momo.kits.navigation
-
-import androidx.compose.foundation.gestures.ScrollableState
-import androidx.compose.runtime.*
-import androidx.compose.ui.graphics.Color
-import vn.momo.kits.navigation.bottomtab.setBottomTabOption
-import vn.momo.kits.navigation.component.*
-
-class Navigation(
-    val id: Int = -1,
-    val bottomTabIndex: Int = -1,
-    val initOptions: NavigationOptions? = null,
-    private val registry: DynamicScreenRegistry? = null
-) {
-    private val _options = mutableStateOf(initOptions ?: NavigationOptions())
-    val currentOptions: State<NavigationOptions> get() = _options
-    val options: NavigationOptions get() = _options.value
-
-    private val _isBottomTabRoot = mutableStateOf(false)
-    internal val isBottomTabRoot: Boolean get() = _isBottomTabRoot.value
-    internal fun markAsBottomTabRoot() { _isBottomTabRoot.value = true }
-
-    fun setOptions(
-        onBackHandler: (() -> Unit)? = null,
-        hiddenBack: Boolean? = null,
-        headerBackProps: HeaderBackProps? = null,
-        headerTitle: HeaderTitle? = null,
-        titlePosition: TitlePosition? = null,
-        headerRight: HeaderRight? = null,
-        headerType: HeaderType? = null,
-        scrollData: ScrollData? = null,
-        backgroundColor: Color? = null,
-        tintColor: Color? = null,
-        footerComponent: (@Composable () -> Unit)? = null,
-        footerTransparent: Boolean? = null,
-        footerUseMargin: Boolean? = null,
-        floatingButtonProps: FloatingButtonProps? = null,
-        keyboardOptions: KeyboardOptions? = null
-    ) {
-        updateOptions(
-            options.copy(
-                onBackHandler = onBackHandler ?: options.onBackHandler,
-                hiddenBack = hiddenBack ?: options.hiddenBack,
-                headerBackProps = headerBackProps ?: options.headerBackProps,
-                headerTitle = headerTitle ?: options.headerTitle,
-                titlePosition = titlePosition ?: options.titlePosition,
-                headerRight = headerRight ?: options.headerRight,
-                headerType = headerType ?: options.headerType,
-                scrollData = scrollData ?: options.scrollData,
-                backgroundColor = backgroundColor ?: options.backgroundColor,
-                tintColor = tintColor ?: options.tintColor,
-                footerComponent = footerComponent ?: options.footerComponent,
-                footerTransparent = footerTransparent ?: options.footerTransparent,
-                footerUseMargin = footerUseMargin ?: options.footerUseMargin,
-                floatingButtonProps = floatingButtonProps ?: options.floatingButtonProps,
-                keyboardOptions = keyboardOptions ?: options.keyboardOptions,
-            )
-        )
-    }
-
-    fun setOptions(newOptions: NavigationOptions) {
-        updateOptions(newOptions)
-    }
-
-    private fun updateOptions(updated: NavigationOptions) {
-        _options.value = updated
-        if (bottomTabIndex != -1) setBottomTabOption(bottomTabIndex, updated)
-        if (id != -1) registry?.setOptions(id, updated)
-    }
-}
-
-val LocalNavigation = staticCompositionLocalOf<Navigation> {
-    error("No NavigationStack provided")
-}
-
-@Stable
-data class NavigationOptions(
-    val screenName: String? = null,
-    val onBackHandler: (() -> Unit)? = null,
-    val hiddenBack: Boolean = false,
-    val headerBackProps: HeaderBackProps = HeaderBackProps(),
-    val headerTitle: HeaderTitle = HeaderTitle.Default("Stack"),
-    val titlePosition: TitlePosition = TitlePosition.LEFT,
-    val headerRight: HeaderRight = HeaderRight.Toolkit(),
-    val headerType: HeaderType = HeaderType.Default(),
-    val scrollData: ScrollData = ScrollData(),
-    val backgroundColor: Color? = null,
-    val tintColor: Color? = null,
-    val footerComponent: @Composable (() -> Unit)? = null,
-    val footerTransparent: Boolean = false,
-    val footerUseMargin: Boolean = true,
-    val floatingButtonProps: FloatingButtonProps? = null,
-    val keyboardOptions: KeyboardOptions = KeyboardOptions()
-) {
-    internal fun hasFooter() : Boolean = footerComponent != null
-}
-
-data class KeyboardOptions(
-    val keyboardShouldPersistTaps: Boolean = false,
-    val useAvoidKeyboard: Boolean = true
-)
-data class ScrollData(
-    val scrollable: Boolean = true,
-    val scrollState: ScrollableState? = null,
-    val scrollToTopCallback: (() -> Unit)? = null,
-)