@momo-kits/native-kits 0.160.1-beta.9-debug → 0.160.1-beta.9

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

@@ -1,569 +0,0 @@
-package vn.momo.kits.navigation
-
-import androidx.compose.animation.animateColorAsState
-import androidx.compose.animation.core.animateDpAsState
-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.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.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.lazy.rememberLazyListState
-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.getValue
-import androidx.compose.runtime.mutableIntStateOf
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-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.min
-import androidx.compose.ui.zIndex
-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.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.ApplicationContext
-import kotlin.time.Clock
-import kotlin.time.ExperimentalTime
-
-internal val LocalFooterHeightPx = staticCompositionLocalOf { mutableIntStateOf(0) }
-internal val LocalHeaderRightWidthPx = staticCompositionLocalOf { mutableIntStateOf(0) }
-
-@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 = ApplicationContext.current
-    val statusBar = AppStatusBar.current
-    val density = LocalDensity.current
-    val navigation = remember { Navigation(id = id, bottomTabIndex = bottomTabIndex, initOptions = navigationOptions) }
-
-    val options by navigation.currentOptions
-
-    // Auto tracking state
-    val trackingState = remember {
-        ScreenTrackingState().apply {
-            startTime = 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)
-        val loadTime = Clock.System.now().toEpochMilliseconds() - trackingState.startTime
-        ScreenTracker.trackScreenDisplayed(
-            maxApi = maxApi,
-            context = context,
-            screenName = name,
-            duration = loadTime,
-            state = trackingState
-        )
-
-        // Track screen interacted after displayed
-        val interactionTime = Clock.System.now().toEpochMilliseconds() - trackingState.startTime
-        ScreenTracker.trackScreenInteracted(
-            maxApi = maxApi,
-            context = context,
-            screenName = name,
-            duration = interactionTime - loadTime,
-            totalDuration = interactionTime,
-            state = trackingState
-        )
-    }
-
-    val limit = with(density) {
-        (statusBar).toPx() + HEADER_HEIGHT
-    }.toInt()
-
-    val (scrollState, scrollInProcess) = if (options.scrollData.scrollState is LazyListState)
-        (options.scrollData.scrollState as? LazyListState ?: rememberLazyListState()).proxyScrollState(limit, 15)
-    else
-        (options.scrollData.scrollState as? ScrollState ?: rememberScrollState()).proxyLimitedScrollState(limit, 15)
-
-    val footerHeightPx = remember { mutableIntStateOf(0) }
-    val headerRightWidthPx = remember { mutableIntStateOf(0) }
-
-    BackHandler(true) { 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(1.5f)) {
-                AnimatedHeaderImage()
-            }
-
-            Box(Modifier.zIndex(5f)) {
-                Header(onBackHandler)
-            }
-
-            Column (Modifier.zIndex(6f)) {
-                SearchAnimated(isScrollInProgress = scrollInProcess)
-            }
-
-            Column(Modifier.zIndex(2f).fillMaxSize()) {
-                MainContent(content = content)
-            }
-
-            Box(Modifier.zIndex(4f).align(Alignment.BottomCenter)) {
-                FooterContent()
-            }
-
-            Box(Modifier.zIndex(7f)){
-                FloatingContent()
-            }
-
-            OverplayView(bottomTabIndex = bottomTabIndex, id = id)
-        }
-    }
-}
-
-@Composable
-fun FloatingContent(){
-    val options = LocalOptions.current
-    val density = LocalDensity.current
-    val footerHeightPx = LocalFooterHeightPx.current
-    val scrollState = LocalScrollState.current
-
-    val fabProps = options.floatingButtonProps ?: return
-    val bottomPadding = fabProps.bottom ?:
-    (Spacing.M + if (options.footerComponent != null) with(density){ footerHeightPx.intValue.toDp() } else 0.dp)
-
-    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
-fun ColumnScope.MainContent(content: @Composable ()-> Unit){
-    val options = LocalOptions.current
-    val inputSearchType = getInputSearchType(options)
-    val density = LocalDensity.current
-    val scrollState = LocalScrollState.current
-
-    Spacer(Modifier.height(
-        if (options.headerType is HeaderType.DefaultOrExtended || (options.headerType is HeaderType.Transparent && !options.headerType.isFullScreenContent) || options.headerType is HeaderType.Animated)
-            AppStatusBar.current + HEADER_HEIGHT.dp else 0.dp)
-    )
-    if (inputSearchType == InputSearchType.Animated){
-        val scrollDp = with(density) { scrollState.value.toDp() }
-
-        val animatedTopPadding by animateDpAsState(
-            targetValue = (HEADER_HEIGHT.dp - scrollDp).coerceIn(0.dp, HEADER_HEIGHT.dp),
-            label = "AnimatedTopPadding"
-        )
-        Spacer(Modifier.height(animatedTopPadding))
-    }
-    Column (Modifier
-        .fillMaxWidth()
-        .weight(1f)
-        .conditional(options.scrollData.scrollable && options.scrollData.scrollState !is LazyListState) {
-            verticalScroll(scrollState)
-        }
-    ) {
-        ScreenContent(content = content)
-    }
-
-    if (options.footerComponent != null){
-        val footerHeight = LocalFooterHeightPx.current
-        val footerHeightDp = with(density) { footerHeight.value.toDp() }
-        Spacer(Modifier.height(footerHeightDp))
-    }
-}
-
-@Composable
-fun ScreenContent(content: @Composable () -> Unit){
-    val options = LocalOptions.current
-
-    if (options.headerType is HeaderType.Animated){
-        val animatedHeader = options.headerType
-        Column {
-            Spacer(Modifier.height(animatedHeader.layoutOffSet))
-            content()
-        }
-    } else {
-        content()
-    }
-}
-
-@Composable
-fun AnimatedHeaderImage() {
-    val options = LocalOptions.current
-    val scrollState = LocalScrollState.current
-    val animatedHeader = options.headerType as? HeaderType.Animated ?: return
-    val density = LocalDensity.current
-    val scrollDp = with(density) { scrollState.value.toDp() }
-
-    Box(
-        Modifier
-            .fillMaxWidth()
-            .offset(y = -scrollDp)
-            .aspectRatio(animatedHeader.aspectRatio.value)
-    ) {
-        animatedHeader.composable.invoke(scrollState.value)
-    }
-}
-
-@Composable
-fun FooterContent(){
-    val options = LocalOptions.current
-    if (options.footerComponent != null){
-        val ime = WindowInsets.ime
-        val density = LocalDensity.current
-        val imeBottom = ime.getBottom(density)
-        val thresholdPx = with(density) { 50.dp.toPx() }
-        val isKeyboardVisible = imeBottom > thresholdPx
-        val bottomPadding = if (isKeyboardVisible) 0.dp else AppNavigationBar.current
-        Footer(footerComponent = options.footerComponent, bottomPadding = bottomPadding)
-    }
-}
-
-@Composable
-fun OverplayView(bottomTabIndex: Int, id: Int){
-    val overplayType = OverplayComponentRegistry.getOverplayType()
-
-    if (overplayType != null) {
-        Box(Modifier.zIndex(if (overplayType == OverplayComponentType.SNACK_BAR) 3f else 8f).fillMaxSize()){
-            if (bottomTabIndex != -1) return@Box
-            if (OverplayComponentRegistry.currentRootId() != id) return@Box
-            OverplayComponentRegistry.OverlayComponent()
-        }
-    }
-}
-
-@Composable
-fun Footer(footerComponent: @Composable (() -> Unit)?, bottomPadding: Dp) {
-    if (footerComponent == null) return
-
-    val footerHeightPx = LocalFooterHeightPx.current
-
-    val shadowBrush = remember {
-        Brush.verticalGradient(
-            colors = listOf(Color.Transparent, Color.Black.copy(alpha = 0.05f))
-        )
-    }
-
-    Box(Modifier.onGloballyPositioned {
-        if (footerHeightPx.intValue != it.size.height) footerHeightPx.intValue = it.size.height
-    }) {
-        Box(Modifier
-            .fillMaxWidth()
-            .background(AppTheme.current.colors.background.surface)
-            .conditional(IsShowBaseLineDebug) {
-                border(1.dp, Colors.blue_03)
-            }
-            .padding(top = Spacing.S, start = Spacing.M, end = Spacing.M, bottom = bottomPadding + Spacing.S)
-        ){
-            footerComponent.invoke()
-        }
-
-        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
-)
-@Composable
-fun SearchAnimated(
-    isScrollInProgress: Boolean
-) {
-    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 52.dp
-    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 animatedTopPadding by animateDpAsState(
-                targetValue = (maxTopPadding - scrollDp).coerceIn(minTopPadding, maxTopPadding),
-                label = "AnimatedTopPadding"
-            )
-
-            val animatedStartPadding by animateDpAsState(
-                targetValue = (minStartPadding + scrollDp).coerceIn(minStartPadding, maxStartPadding),
-                label = "AnimatedStartPadding"
-            )
-
-            val animatedEndPadding by animateDpAsState(
-                targetValue = (minEndPadding + scrollDp).coerceIn(minEndPadding, maxEndPadding),
-                label = "AnimatedEndPadding"
-            )
-
-            val maxPadding = remember(maxTopPadding, maxStartPadding, maxEndPadding) {
-                maxOf(maxEndPadding, maxStartPadding, maxTopPadding)
-            }
-            val snapScrollValue = with(density) { maxPadding.toPx().toInt() }
-
-            LaunchedEffect(isScrollInProgress && scrollState.value != 0 && scrollState.value != snapScrollValue) {
-                if (scrollDp < maxPadding) {
-                    if (!isScrollInProgress) {
-                        val midpoint = (maxTopPadding - minTopPadding) / 2
-
-                        if (scrollDp < midpoint) {
-                            scrollState.animateScrollTo(0)
-                        } else {
-                            scrollState.animateScrollTo(snapScrollValue)
-                        }
-                    }
-                }
-            }
-
-            InputSearchLayoutParams(
-                topPadding = animatedTopPadding,
-                startPadding = animatedStartPadding,
-                endPadding = animatedEndPadding
-            )
-        }
-
-        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()
-                }
-            )
-        )
-    }
-}
-
-@Composable
-internal fun isKeyboardVisible(): Boolean {
-    val ime = WindowInsets.ime
-    val density = LocalDensity.current
-    return ime.getBottom(density) > 0
-}
-private fun quantize(value: Int, stepPx: Int): Int {
-    if (stepPx <= 1) return value
-    return (value / stepPx) * stepPx
-}
-
-@Composable
-fun LazyListState.proxyScrollState(
-    thresholdPx: Int = 200,
-    stepPx: Int = 4
-): Pair<ScrollState, Boolean> {
-    val scrollState = rememberScrollState()
-    val locked = remember { mutableStateOf(false) }
-
-    LaunchedEffect(this, scrollState, thresholdPx, stepPx) {
-        snapshotFlow { firstVisibleItemIndex to firstVisibleItemScrollOffset }
-            .collect { (index, offset) ->
-                val rawTarget = if (index == 0) offset else SCROLLED_PAST_FIRST_ITEM_THRESHOLD
-                val shouldLock = rawTarget > thresholdPx
-                if (locked.value != shouldLock) locked.value = shouldLock
-
-                val desired = if (shouldLock) thresholdPx else quantize(rawTarget, stepPx)
-
-                if (scrollState.value != desired) {
-                    scrollState.scrollTo(desired.coerceAtLeast(0))
-                }
-            }
-    }
-
-    val inProgress = remember { mutableStateOf(false) }
-    LaunchedEffect(this, thresholdPx) {
-        snapshotFlow { isScrollInProgress }
-            .collect { progressing ->
-                inProgress.value = if (locked.value) false else progressing
-            }
-    }
-
-    return scrollState to inProgress.value
-}
-
-@Composable
-fun ScrollState.proxyLimitedScrollState(
-    thresholdPx: Int = 200,
-    stepPx: Int = 4
-): Pair<ScrollState, Boolean> {
-    val proxy = rememberScrollState()
-    val locked = remember { mutableStateOf(false) }
-
-    LaunchedEffect(this, proxy, thresholdPx, stepPx) {
-        snapshotFlow { value }
-            .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(this, 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
-    }
-}