@momo-kits/native-kits 0.167.1-beta.19 → 0.167.1-beta.20-debug

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

@@ -0,0 +1,600 @@
+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.navigation.bottomtab.LocalBottomTabFocused
+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
+
+    // A mounted-but-hidden bottom tab tracks again each time it is focused (RN useFocusEffect).
+    val tabFocused = LocalBottomTabFocused.current
+
+    // Auto tracking state
+    val trackingState = remember(tabFocused) {
+        ScreenTrackingState().apply {
+            time = Clock.System.now().toEpochMilliseconds()
+        }
+    }
+
+    // Determine action: push or back
+    val action = remember(tabFocused) {
+        if (ScreenTracker.getLastScreenName() != null) "push" else "back"
+    }
+
+    // Auto tracking effects
+    LaunchedEffect(name, tabFocused) {
+        if (!tabFocused) return@LaunchedEffect
+        // 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 (tabFocused && 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
+    }
+}
+