@momo-kits/native-kits 0.157.1-skill.1-debug → 0.157.1-skill.3-debug

package/.claude/momo-native-kits-skill/workspace/iteration-3/eval-navcontainer/with_skill/outputs/NavigationContainerExample.kt

@@ -0,0 +1,547 @@
+package vn.momo.kits.examples
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+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.rememberScrollState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+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.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.navigation.LocalNavigation
+import vn.momo.kits.navigation.LocalNavigator
+import vn.momo.kits.navigation.NavigationContainer
+import vn.momo.kits.navigation.NavigationOptions
+import vn.momo.kits.navigation.ScrollData
+import vn.momo.kits.navigation.component.HeaderBackProps
+import vn.momo.kits.navigation.component.HeaderRight
+import vn.momo.kits.navigation.component.HeaderTitle
+import vn.momo.kits.navigation.component.HeaderType
+import vn.momo.kits.navigation.component.InputSearchProps
+import vn.momo.kits.navigation.component.PopupAction
+import vn.momo.kits.navigation.component.PopupNotifyProps
+
+/**
+ * NavigationContainer Example for MoMo App
+ *
+ * This file demonstrates the correct pattern for implementing NavigationContainer
+ * in a MoMo Native Kits application.
+ *
+ * KEY POINTS:
+ * - ONE NavigationContainer per Fragment/Activity
+ * - Use setOptions in LaunchedEffect(Unit) for dynamic configuration
+ * - Use LocalNavigation.current for setOptions (header, scroll, footer)
+ * - Use LocalNavigator.current for push/pop/present/showModal/showBottomSheet
+ */
+@Composable
+fun NavigationContainerExample() {
+    // Single NavigationContainer - root of the app/fragment
+    NavigationContainer(
+        initialScreen = {
+            HomeScreen()
+        },
+        options = NavigationOptions(
+            headerTitle = HeaderTitle.Default("MoMo App"),
+            headerType = HeaderType.Default,
+            headerRight = {
+                HeaderRight.Toolkit(useShortcut = true)
+            },
+            hiddenBack = false
+        )
+    ) {
+        // All screens are pushed within this container
+        // The container manages the navigation stack
+    }
+}
+
+/**
+ * Home Screen - Initial screen in NavigationContainer
+ *
+ * Demonstrates:
+ * - Using LaunchedEffect(Unit) for setOptions
+ * - Connecting scroll state for header animation
+ * - Navigation to other screens
+ */
+@Composable
+fun HomeScreen() {
+    val navigator = LocalNavigator.current
+    val navigation = LocalNavigation.current
+
+    // Use LaunchedEffect(Unit) for setOptions - NOT in composable root
+    LaunchedEffect(Unit) {
+        navigation.setOptions(
+            headerTitle = HeaderTitle.Default("Trang chủ"),
+            headerType = HeaderType.Default
+        )
+    }
+
+    // Connect scroll state for header animation
+    val scrollState = rememberScrollState()
+    LaunchedEffect(Unit) {
+        navigation.setOptions(
+            scrollData = ScrollData(
+                scrollState = scrollState
+            )
+        )
+    }
+
+    LazyColumn(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(horizontal = 16.dp),
+        state = scrollState,
+        verticalArrangement = Arrangement.spacedBy(12.dp)
+    ) {
+        item {
+            Modifier.padding(top = 16.dp)
+            Text(
+                text = "Navigation Examples",
+                style = androidx.compose.material3.MaterialTheme.typography.headlineMedium,
+                modifier = Modifier.padding(vertical = 8.dp)
+            )
+        }
+
+        // Navigation examples
+        item {
+            NavigationItem(
+                title = "Basic Screen",
+                description = "Navigate to a simple screen with push/pop",
+                onClick = { navigator.push({ BasicScreen() }) }
+            )
+        }
+
+        item {
+            NavigationItem(
+                title = "Extended Header",
+                description = "Header with search input",
+                onClick = { navigator.push({ SearchScreen() }) }
+            )
+        }
+
+        item {
+            NavigationItem(
+                title = "Animated Header",
+                description = "Collapsing header with image",
+                onClick = { navigator.push({ AnimatedHeaderScreen() }) }
+            )
+        }
+
+        item {
+            NavigationItem(
+                title = "Footer Component",
+                description = "Screen with footer button",
+                onClick = { navigator.push({ FooterScreen() }) }
+            )
+        }
+
+        item {
+            NavigationItem(
+                title = "Prevent Back",
+                description = "Confirmation dialog on back press",
+                onClick = { navigator.push({ PreventBackScreen() }) }
+            )
+        }
+
+        item {
+            NavigationItem(
+                title = "Modal Screen",
+                description = "Present screen as modal",
+                onClick = { navigator.present({ ModalScreen() }) }
+            )
+        }
+
+        item {
+            NavigationItem(
+                title = "Bottom Sheet",
+                description = "Show content in bottom sheet",
+                onClick = { navigator.showBottomSheet({ BottomSheetContent() }) }
+            )
+        }
+
+        item {
+            NavigationItem(
+                title = "Dynamic Title",
+                description = "Change header title dynamically",
+                onClick = { navigator.push({ DynamicTitleScreen() }) }
+            )
+        }
+
+        item {
+            Modifier.padding(bottom = 16.dp)
+        }
+    }
+}
+
+/**
+ * Basic Screen - Simple navigation example
+ */
+@Composable
+fun BasicScreen() {
+    val navigator = LocalNavigator.current
+    val navigation = LocalNavigation.current
+
+    LaunchedEffect(Unit) {
+        navigation.setOptions(
+            headerTitle = HeaderTitle.Default("Basic Screen"),
+            headerType = HeaderType.Default
+        )
+    }
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(16.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center
+    ) {
+        Text(
+            text = "This is a basic screen",
+            style = androidx.compose.material3.MaterialTheme.typography.bodyLarge
+        )
+
+        Text(
+            text = "Tap the back button or use navigator.pop()",
+            style = androidx.compose.material3.MaterialTheme.typography.bodyMedium,
+            modifier = Modifier.padding(top = 8.dp)
+        )
+    }
+}
+
+/**
+ * Search Screen - Extended header with search input
+ */
+@Composable
+fun SearchScreen() {
+    val navigation = LocalNavigation.current
+    val searchText = remember { mutableStateOf("") }
+    var searchResults by remember { mutableStateOf(listOf<String>()) }
+
+    LaunchedEffect(Unit) {
+        navigation.setOptions(
+            headerTitle = HeaderTitle.Default("Search"),
+            headerType = HeaderType.Extended(
+                useAnimated = true,
+                inputSearchProps = InputSearchProps(
+                    text = searchText,
+                    placeholder = "Search...",
+                    onChangeText = { query ->
+                        searchText.value = query
+                        // Simulate search
+                        searchResults = listOf("Result 1", "Result 2", "Result 3")
+                            .filter { it.contains(query, ignoreCase = true) }
+                    }
+                )
+            )
+        )
+    }
+
+    LazyColumn(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(16.dp)
+    ) {
+        if (searchText.value.isNotEmpty()) {
+            items(searchResults.size) { index ->
+                Text(
+                    text = searchResults[index],
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(vertical = 8.dp)
+                )
+            }
+        } else {
+            item {
+                Text(
+                    text = "Enter search query above",
+                    style = androidx.compose.material3.MaterialTheme.typography.bodyMedium
+                )
+            }
+        }
+    }
+}
+
+/**
+ * Animated Header Screen - Collapsing header with image
+ */
+@Composable
+fun AnimatedHeaderScreen() {
+    val navigation = LocalNavigation.current
+
+    LaunchedEffect(Unit) {
+        navigation.setOptions(
+            headerTitle = HeaderTitle.Default("Animated Header"),
+            headerType = HeaderType.Animated(
+                isSurface = true,
+                aspectRatio = vn.momo.kits.navigation.component.AnimatedHeaderRatio.RATIO_16_9,
+                composable = {
+                    Box(
+                        modifier = Modifier
+                            .fillMaxSize()
+                            .background(Color(0xFF6200EE)),
+                        contentAlignment = Alignment.Center
+                    ) {
+                        Text(
+                            text = "Header Image Area",
+                            color = Color.White
+                        )
+                    }
+                }
+            )
+        )
+    }
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(16.dp)
+    ) {
+        Text(
+            text = "Content below animated header",
+            style = androidx.compose.material3.MaterialTheme.typography.bodyLarge
+        )
+    }
+}
+
+/**
+ * Footer Screen - Screen with footer component
+ */
+@Composable
+fun FooterScreen() {
+    val navigation = LocalNavigation.current
+
+    LaunchedEffect(Unit) {
+        navigation.setOptions(
+            headerTitle = HeaderTitle.Default("Footer Screen"),
+            headerType = HeaderType.Default,
+            footerComponent = {
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .background(Color.White)
+                        .padding(16.dp)
+                ) {
+                    Text(
+                        text = "Footer Button",
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .background(Color(0xFF6200EE), RoundedCornerShape(8.dp))
+                            .padding(12.dp)
+                            .clickable { /* Handle click */ },
+                        color = Color.White,
+                        textAlign = androidx.compose.ui.text.style.TextAlign.Center
+                    )
+                }
+            }
+        )
+    }
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(16.dp)
+    ) {
+        Text(
+            text = "Main content area",
+            style = androidx.compose.material3.MaterialTheme.typography.bodyLarge
+        )
+    }
+}
+
+/**
+ * Prevent Back Screen - Confirmation dialog on back press
+ */
+@Composable
+fun PreventBackScreen() {
+    val navigator = LocalNavigator.current
+    val navigation = LocalNavigation.current
+
+    LaunchedEffect(Unit) {
+        navigation.setOptions(
+            headerTitle = HeaderTitle.Default("Prevent Back"),
+            headerType = HeaderType.Default,
+            headerBackProps = HeaderBackProps(
+                preventBack = PopupNotifyProps(
+                    onIconClose = { navigator.pop() },
+                    primary = PopupAction(
+                        title = "Go back",
+                        onPress = { navigator.pop() }
+                    ),
+                    secondary = PopupAction(
+                        title = "Stay",
+                        onPress = { /* Do nothing - stay on screen */ }
+                    )
+                )
+            )
+        )
+    }
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(16.dp),
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Text(
+            text = "Try pressing the back button",
+            style = androidx.compose.material3.MaterialTheme.typography.bodyLarge
+        )
+        Text(
+            text = "A confirmation dialog will appear",
+            style = androidx.compose.material3.MaterialTheme.typography.bodyMedium,
+            modifier = Modifier.padding(top = 8.dp)
+        )
+    }
+}
+
+/**
+ * Modal Screen - Presented as modal
+ */
+@Composable
+fun ModalScreen() {
+    val navigator = LocalNavigator.current
+    val navigation = LocalNavigation.current
+
+    LaunchedEffect(Unit) {
+        navigation.setOptions(
+            headerTitle = HeaderTitle.Default("Modal Screen"),
+            headerType = HeaderType.Default
+        )
+    }
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(16.dp),
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Text(
+            text = "This is a modal screen",
+            style = androidx.compose.material3.MaterialTheme.typography.bodyLarge
+        )
+        Text(
+            text = "Tap outside or back to dismiss",
+            style = androidx.compose.material3.MaterialTheme.typography.bodyMedium,
+            modifier = Modifier.padding(top = 8.dp)
+        )
+    }
+}
+
+/**
+ * Bottom Sheet Content - Shown in bottom sheet
+ */
+@Composable
+fun BottomSheetContent() {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(24.dp)
+    ) {
+        Text(
+            text = "Bottom Sheet",
+            style = androidx.compose.material3.MaterialTheme.typography.headlineSmall
+        )
+        Text(
+            text = "This content is shown in a bottom sheet",
+            style = androidx.compose.material3.MaterialTheme.typography.bodyMedium,
+            modifier = Modifier.padding(top = 8.dp)
+        )
+    }
+}
+
+/**
+ * Dynamic Title Screen - Change header title dynamically
+ */
+@Composable
+fun DynamicTitleScreen() {
+    val navigation = LocalNavigation.current
+    var title by remember { mutableStateOf("Dynamic Title") }
+
+    LaunchedEffect(Unit) {
+        navigation.setOptions(
+            headerTitle = HeaderTitle.Default(title)
+        )
+    }
+
+    // Update title when it changes
+    LaunchedEffect(title) {
+        navigation.setOptions(
+            headerTitle = HeaderTitle.Default(title)
+        )
+    }
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(16.dp)
+    ) {
+        Text(
+            text = "Current title: $title",
+            style = androidx.compose.material3.MaterialTheme.typography.bodyLarge
+        )
+
+        // Example buttons to change title
+        listOf("Home", "Settings", "Profile", "Account").forEach { newTitle ->
+            Text(
+                text = newTitle,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(vertical = 8.dp)
+                    .clip(RoundedCornerShape(8.dp))
+                    .background(Color(0xFFEEEEEE))
+                    .padding(12.dp)
+                    .clickable { title = newTitle },
+                style = androidx.compose.material3.MaterialTheme.typography.bodyMedium
+            )
+        }
+    }
+}
+
+/**
+ * Reusable Navigation Item for the example list
+ */
+@Composable
+fun NavigationItem(
+    title: String,
+    description: String,
+    onClick: () -> Unit
+) {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .clip(RoundedCornerShape(12.dp))
+            .background(Color(0xFFF5F5F5))
+            .clickable { onClick() }
+            .padding(16.dp)
+    ) {
+        Text(
+            text = title,
+            style = androidx.compose.material3.MaterialTheme.typography.titleMedium
+        )
+        Text(
+            text = description,
+            style = androidx.compose.material3.MaterialTheme.typography.bodySmall,
+            color = Color.Gray,
+            modifier = Modifier.padding(top = 4.dp)
+        )
+    }
+}

package/.claude/momo-native-kits-skill/workspace/iteration-3/eval-navcontainer/with_skill/timing.json

@@ -0,0 +1,5 @@
+{
+  "total_tokens": 24618,
+  "duration_ms": 138670,
+  "total_duration_seconds": 138.7
+}