@momo-kits/native-kits 0.167.1-beta.16-debug → 0.167.1-beta.17

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

@@ -1,595 +0,0 @@
-package vn.momo.kits.navigation
-
-import androidx.compose.animation.animateColorAsState
-import androidx.compose.foundation.ScrollState
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.gestures.ScrollableState
-import androidx.compose.foundation.gestures.animateScrollBy
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.ColumnScope
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.asPaddingValues
-import androidx.compose.foundation.layout.aspectRatio
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.ime
-import androidx.compose.foundation.layout.imePadding
-import androidx.compose.foundation.layout.offset
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.lazy.LazyListState
-import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.State
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableIntStateOf
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberUpdatedState
-import androidx.compose.runtime.snapshotFlow
-import androidx.compose.runtime.staticCompositionLocalOf
-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.graphics.lerp
-import androidx.compose.ui.layout.onGloballyPositioned
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.lerp
-import androidx.compose.ui.zIndex
-import kotlinx.coroutines.flow.Flow
-import kotlinx.coroutines.flow.filter
-import kotlinx.coroutines.launch
-import vn.momo.kits.components.InputSearch
-import vn.momo.kits.const.AppNavigationBar
-import vn.momo.kits.const.AppStatusBar
-import vn.momo.kits.const.AppTheme
-import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.const.Colors
-import vn.momo.kits.const.Spacing
-import vn.momo.kits.modifier.conditional
-import vn.momo.kits.modifier.hideKeyboardOnTap
-import vn.momo.kits.navigation.bottomtab.BOTTOM_TAB_BAR_HEIGHT
-import vn.momo.kits.navigation.component.FABPosition
-import vn.momo.kits.navigation.component.FloatingButton
-import vn.momo.kits.navigation.component.HEADER_HEIGHT
-import vn.momo.kits.navigation.component.Header
-import vn.momo.kits.navigation.component.HeaderBackground
-import vn.momo.kits.navigation.component.HeaderRight
-import vn.momo.kits.navigation.component.HeaderType
-import vn.momo.kits.navigation.component.InputSearchType
-import vn.momo.kits.platform.BackHandler
-import vn.momo.kits.platform.supportsImePadding
-import vn.momo.kits.navigation.tracking.ScreenTracker
-import vn.momo.kits.navigation.tracking.ScreenTrackingState
-import kotlinx.coroutines.delay
-import vn.momo.kits.application.LocalContext
-import kotlin.time.Clock
-import kotlin.time.Duration.Companion.milliseconds
-import kotlin.time.ExperimentalTime
-
-internal val LocalFooterHeightPx = staticCompositionLocalOf { mutableIntStateOf(0) }
-internal val LocalHeaderRightWidthPx = staticCompositionLocalOf { mutableIntStateOf(0) }
-
-@Composable
-private fun bottomTabBarInset(): Dp {
-    if (LocalNavigation.current.bottomTabIndex == -1) return 0.dp
-    val keyboard = keyboardSizeState().value
-    return (BOTTOM_TAB_BAR_HEIGHT.dp + Spacing.S - keyboard).coerceAtLeast(0.dp)
-}
-
-@OptIn(ExperimentalMaterialApi::class, ExperimentalTime::class)
-@Composable
-internal fun StackScreen(
-    content: @Composable () -> Unit,
-    navigationOptions: NavigationOptions? = null,
-    id: Int = -1,
-    name: String = "",
-    bottomTabIndex: Int = -1,
-    onBackHandler: (() -> Unit)? = null,
-) {
-    val navigator = LocalNavigator.current
-    val maxApi = LocalMaxApi.current
-    val context = LocalContext.current
-    val statusBar = AppStatusBar.current
-    val density = LocalDensity.current
-    val screenRegistry = LocalDynamicScreenRegistry.current
-    val navigation = remember { Navigation(id = id, bottomTabIndex = bottomTabIndex, initOptions = navigationOptions, registry = screenRegistry) }
-
-    val options by navigation.currentOptions
-    val isBottomTabChild = bottomTabIndex != -1
-    val isBottomTabRoot = navigation.isBottomTabRoot
-
-    // Auto tracking state
-    val trackingState = remember {
-        ScreenTrackingState().apply {
-            time = Clock.System.now().toEpochMilliseconds()
-        }
-    }
-
-    // Determine action: push or back
-    val action = remember {
-        if (ScreenTracker.getLastScreenName() != null) "push" else "back"
-    }
-
-    // Auto tracking effects
-    LaunchedEffect(name) {
-        // Track screen navigated immediately
-        ScreenTracker.trackScreenNavigated(
-            maxApi = maxApi,
-            context = context,
-            screenName = name,
-            action = action,
-            state = trackingState
-        )
-
-        // Track screen displayed after 2 seconds (debounce)
-        delay(2000.milliseconds)
-        val loadTime = Clock.System.now().toEpochMilliseconds() - trackingState.time
-        ScreenTracker.trackScreenDisplayed(
-            maxApi = maxApi,
-            context = context,
-            screenName = name,
-            duration = loadTime,
-            state = trackingState
-        )
-
-        // Track screen interacted after displayed
-        val interactionTime = Clock.System.now().toEpochMilliseconds() - trackingState.time
-        ScreenTracker.trackScreenInteracted(
-            maxApi = maxApi,
-            context = context,
-            screenName = name,
-            duration = interactionTime - loadTime,
-            totalDuration = interactionTime,
-            state = trackingState
-        )
-    }
-
-    val limit = with(density) {
-        (statusBar + HEADER_HEIGHT.dp).toPx()
-    }.toInt()
-
-    val lazyListState = options.scrollData.scrollState as? LazyListState
-    val (scrollState, _) = if (lazyListState != null)
-        lazyListState.proxyScrollState(limit, 1)
-    else
-        (options.scrollData.scrollState as? ScrollState ?: rememberScrollState()).proxyLimitedScrollState(limit, 1)
-    val snapState: ScrollableState = lazyListState ?: scrollState
-
-    val footerHeightPx = remember { mutableIntStateOf(0) }
-    val headerRightWidthPx = remember { mutableIntStateOf(0) }
-
-    if (navigation.options.scrollData.scrollToTopCallback != null) {
-        RegisterScrollToTop(navigation.options.scrollData.scrollToTopCallback)
-    }
-
-    val canPop = navigator.canPop()
-
-    val hasCustomBackHandling = !SwipeBackConfig.enabled ||
-            OverplayComponentRegistry.isOverplayShowing() ||
-            !canPop
-
-    BackHandler(hasCustomBackHandling) { navigator.onBackSafe() }
-
-    CompositionLocalProvider(
-        StackScreenScrollableState provides options.scrollData.scrollState,
-        LocalNavigation provides navigation,
-        LocalScrollState provides scrollState,
-        LocalOptions provides options,
-        LocalFooterHeightPx provides footerHeightPx,
-        LocalHeaderRightWidthPx provides headerRightWidthPx
-    ) {
-        Box(
-            Modifier
-                .fillMaxSize()
-                .background(options.backgroundColor ?: AppTheme.current.colors.background.default)
-                .conditional(options.keyboardOptions.keyboardShouldPersistTaps) {
-                    hideKeyboardOnTap()
-                }
-                .conditional(options.keyboardOptions.useAvoidKeyboard && supportsImePadding()) {
-                    imePadding()
-                }
-        ) {
-            Box(Modifier.zIndex(1f)) {
-                HeaderBackground()
-            }
-
-            Box(Modifier.zIndex(4f)) {
-                Header(onBackHandler)
-            }
-
-            Column(Modifier.zIndex(5f)) {
-                SearchAnimated(snapState = snapState)
-            }
-
-            Column(Modifier.zIndex(2f).fillMaxSize()) {
-                MainContent(content = content, isBottomTabRoot = isBottomTabRoot, isBottomTabChild = isBottomTabChild)
-                FooterContent()
-            }
-
-            Box(Modifier.zIndex(6f)) {
-                FloatingContent(isBottomTabChild = isBottomTabChild)
-            }
-
-            OverplayView(isBottomTabChild = isBottomTabChild, id = id)
-        }
-    }
-}
-
-@Suppress("FrequentlyChangingValue")
-@Composable
-internal fun FloatingContent(isBottomTabChild: Boolean) {
-    val options = LocalOptions.current
-    val density = LocalDensity.current
-    val footerHeightPx = LocalFooterHeightPx.current
-    val scrollState = LocalScrollState.current
-    val navigationBar = AppNavigationBar.current
-
-    val fabProps = options.floatingButtonProps ?: return
-    val bottomPadding = fabProps.bottom
-        ?: (Spacing.M + when {
-            options.hasFooter() -> with(density) { footerHeightPx.intValue.toDp() }
-            isBottomTabChild -> bottomTabBarInset() + (navigationBar - keyboardSizeState().value).coerceAtLeast(0.dp)
-            else -> navigationBar
-        })
-
-    FloatingButton(
-        scrollPosition = fabProps.scrollState?.value ?: scrollState.value,
-        onClick = fabProps.onClick,
-        containerColor = AppTheme.current.colors.primary,
-        bottom = bottomPadding,
-        icon = fabProps.icon,
-        iconColor = fabProps.iconColor,
-        text = fabProps.label,
-        size = fabProps.size,
-        position = fabProps.position ?: FABPosition.END,
-    )
-}
-
-@Composable
-internal fun ColumnScope.MainContent(content: @Composable () -> Unit, isBottomTabRoot: Boolean, isBottomTabChild: Boolean) {
-    val options = LocalOptions.current
-    val inputSearchType = getInputSearchType(options)
-    val density = LocalDensity.current
-    val scrollState = LocalScrollState.current
-    val navigationBar = AppNavigationBar.current
-
-    Spacer(
-        Modifier.height(
-            if (options.headerType is HeaderType.DefaultOrExtended || (options.headerType is HeaderType.Transparent && !options.headerType.isFullScreenContent))
-                AppStatusBar.current + HEADER_HEIGHT.dp else 0.dp
-        )
-    )
-    if (inputSearchType == InputSearchType.Animated) {
-        val scrollDp = with(density) { scrollState.value.toDp() }
-
-        Spacer(Modifier.height((HEADER_HEIGHT.dp - scrollDp).coerceIn(0.dp, HEADER_HEIGHT.dp)))
-    }
-    Column(
-        Modifier
-            .fillMaxWidth()
-            .weight(1f)
-            .conditional(options.scrollData.scrollable && options.scrollData.scrollState is ScrollState) {
-                verticalScroll(scrollState)
-            }
-            .padding(
-                bottom = when {
-                    options.hasFooter() || isBottomTabRoot -> 0.dp
-                    isBottomTabChild -> bottomTabBarInset() + (navigationBar - keyboardSizeState().value).coerceAtLeast(0.dp)
-                    !options.scrollData.scrollable && options.scrollData.scrollState == null -> 0.dp
-                    else -> navigationBar
-                }
-            )
-    ) {
-        ScreenContent(content = content)
-    }
-
-}
-
-@Composable
-internal fun ScreenContent(content: @Composable () -> Unit) {
-    val scrollState = LocalScrollState.current
-    val options = LocalOptions.current
-
-    if (options.headerType is HeaderType.Animated) {
-        val animatedHeader = options.headerType
-        Box {
-            val bannerModifier = animatedHeader.height
-                ?.let { Modifier.fillMaxWidth().height(it) }
-                ?: Modifier.fillMaxWidth().aspectRatio(animatedHeader.aspectRatio.value)
-            Box(bannerModifier) {
-                animatedHeader.composable.invoke(scrollState.value)
-            }
-            Box(Modifier.padding(top = AppStatusBar.current + HEADER_HEIGHT.dp + animatedHeader.layoutOffSet)) {
-                content()
-            }
-        }
-    } else {
-        content()
-    }
-}
-
-@Composable
-internal fun FooterContent() {
-    val options = LocalOptions.current
-    if (options.hasFooter()) {
-        val keyboardSize = keyboardSizeState()
-        val bottomPadding = (AppNavigationBar.current - keyboardSize.value).coerceAtLeast(0.dp)
-        Footer(
-            footerComponent = options.footerComponent,
-            bottomPadding = bottomPadding,
-            transparent = options.footerTransparent,
-            useMargin = options.footerUseMargin
-        )
-    }
-}
-
-@Composable
-internal fun keyboardSizeState(): State<Dp> {
-    val bottom = WindowInsets.ime.asPaddingValues()
-    return rememberUpdatedState(bottom.calculateBottomPadding())
-}
-
-@Composable
-internal fun OverplayView(isBottomTabChild: Boolean, id: Int) {
-    val overplayType = OverplayComponentRegistry.getOverplayType()
-
-    if (overplayType != null) {
-        Box(Modifier.zIndex(if (overplayType == OverplayComponentType.SNACK_BAR) 3f else 7f).fillMaxSize()) {
-            if (isBottomTabChild) return@Box
-            if (OverplayComponentRegistry.currentRootId() != id) return@Box
-            OverplayComponentRegistry.OverlayComponent()
-        }
-    }
-}
-
-@Composable
-fun Footer(
-    footerComponent: @Composable (() -> Unit)?,
-    bottomPadding: Dp,
-    transparent: Boolean = false,
-    useMargin: Boolean = true,
-) {
-    if (footerComponent == null) return
-
-    val footerHeightPx = LocalFooterHeightPx.current
-
-    val shadowBrush = remember {
-        Brush.verticalGradient(
-            colors = listOf(Color.Transparent, Color.Black.copy(alpha = 0.05f))
-        )
-    }
-
-    val backgroundColor = if (transparent) Color.Transparent else AppTheme.current.colors.background.surface
-
-    Box(Modifier.onGloballyPositioned {
-        if (footerHeightPx.intValue != it.size.height) footerHeightPx.intValue = it.size.height
-    }) {
-        Box(
-            Modifier
-                .fillMaxWidth()
-                .background(backgroundColor)
-                .conditional(IsShowBaseLineDebug) {
-                    border(1.dp, Colors.blue_03)
-                }
-                .padding(
-                    top = if (useMargin) Spacing.S else 0.dp,
-                    start = if (useMargin) Spacing.M else 0.dp,
-                    end = if (useMargin) Spacing.M else 0.dp,
-                    bottom = bottomPadding + if (useMargin) Spacing.S else 0.dp,
-                )
-        ) {
-            footerComponent.invoke()
-        }
-
-        if (!transparent) {
-            Box(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .height(6.dp)
-                    .offset(x = 0.dp, y = (-6).dp)
-                    .background(shadowBrush)
-            )
-        }
-    }
-}
-
-data class InputSearchLayoutParams(
-    val topPadding: Dp,
-    val startPadding: Dp,
-    val endPadding: Dp
-)
-
-@Suppress("FrequentlyChangingValue")
-@Composable
-internal fun SearchAnimated(
-    snapState: ScrollableState
-) {
-    val scrollState = LocalScrollState.current
-    val options = LocalOptions.current
-    val navigator = LocalNavigator.current
-    val density = LocalDensity.current
-
-    val scrollDp = with(density) { scrollState.value.toDp() }
-
-    val inputSearchType = getInputSearchType(options)
-    val headerRightWidthPx = LocalHeaderRightWidthPx.current
-    val headerRightWidthDp = with(density) { headerRightWidthPx.intValue.toDp() }
-
-    if (inputSearchType == InputSearchType.None) return
-    val inputSearchProps = (options.headerType as? HeaderType.DefaultOrExtended)?.inputSearchProps ?: return
-
-    val minTopPadding = AppStatusBar.current
-    val maxTopPadding = AppStatusBar.current + HEADER_HEIGHT.dp
-    val minStartPadding = Spacing.M
-    val maxStartPadding = if (options.hiddenBack) Spacing.M else 48.dp // button back: size + left +right = 28 + 12 + 8 = 48
-    val minEndPadding = Spacing.M
-    val maxEndPadding = headerRightWidthDp + if (options.headerRight is HeaderRight.None) Spacing.M else Spacing.M * 2
-
-    val targetColor = lerp(
-        AppTheme.current.colors.background.surface,
-        AppTheme.current.colors.background.default,
-        (scrollDp / minTopPadding).coerceIn(0f, 1f)
-    )
-    val animatedColor by animateColorAsState(targetValue = targetColor, label = "BackgroundColor")
-
-    val layoutParams = when (inputSearchType) {
-        InputSearchType.Header -> {
-            InputSearchLayoutParams(
-                topPadding = minTopPadding,
-                startPadding = maxStartPadding,
-                endPadding = maxEndPadding
-            )
-        }
-
-        InputSearchType.Animated -> {
-            val collapsePx = with(density) { HEADER_HEIGHT.dp.roundToPx() }
-            val progress = (scrollState.value / collapsePx.toFloat()).coerceIn(0f, 1f)
-
-            LaunchedEffect(snapState, collapsePx) {
-                snapshotFlow { snapState.isScrollInProgress }
-                    .filter { !it }
-                    .collect {
-                        val offset = snapState.headerOffsetPx() ?: return@collect
-                        if (offset <= 0 || offset >= collapsePx) return@collect
-                        val target = if (offset < collapsePx / 2) 0 else collapsePx
-                        launch { snapState.animateScrollBy((target - offset).toFloat()) }
-                    }
-            }
-
-            InputSearchLayoutParams(
-                topPadding = lerp(maxTopPadding, minTopPadding, progress),
-                startPadding = lerp(minStartPadding, maxStartPadding, progress),
-                endPadding = lerp(minEndPadding, maxEndPadding, progress)
-            )
-        }
-
-        InputSearchType.None -> return
-    }
-
-    Spacer(Modifier.height(layoutParams.topPadding))
-    Box(
-        modifier = Modifier
-            .height(HEADER_HEIGHT.dp)
-            .fillMaxWidth()
-            .padding(
-                start = layoutParams.startPadding,
-                end = layoutParams.endPadding
-            ),
-        contentAlignment = Alignment.Center
-    ) {
-        InputSearch(
-            inputSearchProps = inputSearchProps.copy(
-                backgroundColor = animatedColor,
-                onPressButtonText = {
-                    navigator.pop()
-                }
-            )
-        )
-    }
-}
-
-private fun ScrollableState.headerOffsetPx(): Int? = when (this) {
-    is LazyListState -> if (firstVisibleItemIndex == 0) firstVisibleItemScrollOffset else null
-    is ScrollState -> value
-    else -> null
-}
-
-private fun quantize(value: Int, stepPx: Int): Int {
-    if (stepPx <= 1) return value
-    return (value / stepPx) * stepPx
-}
-
-@Composable
-internal fun LazyListState.proxyScrollState(
-    thresholdPx: Int = 200,
-    stepPx: Int = 4
-): Pair<ScrollState, Boolean> = proxyScroll(
-    source = this,
-    thresholdPx = thresholdPx,
-    stepPx = stepPx,
-    isScrollInProgress = { isScrollInProgress },
-    rawTargetFlow = {
-        snapshotFlow {
-            if (firstVisibleItemIndex == 0) firstVisibleItemScrollOffset
-            else SCROLLED_PAST_FIRST_ITEM_THRESHOLD
-        }
-    },
-)
-
-@Composable
-internal fun ScrollState.proxyLimitedScrollState(
-    thresholdPx: Int = 200,
-    stepPx: Int = 4
-): Pair<ScrollState, Boolean> = proxyScroll(
-    source = this,
-    thresholdPx = thresholdPx,
-    stepPx = stepPx,
-    isScrollInProgress = { isScrollInProgress },
-    rawTargetFlow = { snapshotFlow { value } },
-)
-
-@Composable
-private fun proxyScroll(
-    source: Any,
-    thresholdPx: Int,
-    stepPx: Int,
-    isScrollInProgress: () -> Boolean,
-    rawTargetFlow: () -> Flow<Int>,
-): Pair<ScrollState, Boolean> {
-    val proxy = rememberScrollState()
-    val locked = remember { mutableStateOf(false) }
-
-    LaunchedEffect(source, proxy, thresholdPx, stepPx) {
-        rawTargetFlow().collect { rawTarget ->
-            val shouldLock = rawTarget > thresholdPx
-            if (locked.value != shouldLock) locked.value = shouldLock
-
-            val desired = if (shouldLock) thresholdPx else quantize(rawTarget, stepPx)
-
-            if (proxy.value != desired) {
-                proxy.scrollTo(desired.coerceAtLeast(0))
-            }
-        }
-    }
-
-    val inProgress = remember { mutableStateOf(false) }
-    LaunchedEffect(source, thresholdPx) {
-        snapshotFlow { isScrollInProgress() }
-            .collect { progressing ->
-                inProgress.value = if (locked.value) false else progressing
-            }
-    }
-
-    return proxy to inProgress.value
-}
-
-private const val SCROLLED_PAST_FIRST_ITEM_THRESHOLD = 10_000
-
-internal val LocalScrollState = staticCompositionLocalOf<ScrollState> { error("No Scroll State provided") }
-internal val LocalOptions = staticCompositionLocalOf<NavigationOptions> { error("No NavigationOptions provided") }
-
-val StackScreenScrollableState = staticCompositionLocalOf<ScrollableState?> { null }
-
-internal fun getInputSearchType(options: NavigationOptions): InputSearchType {
-    return when (val headerType = options.headerType) {
-        is HeaderType.DefaultOrExtended -> when {
-            headerType.inputSearchProps == null -> InputSearchType.None
-            headerType.useAnimated -> InputSearchType.Animated
-            else -> InputSearchType.Header
-        }
-
-        else -> InputSearchType.None
-    }
-}
-