Subject: [PATCH] Demonstrate navigation title animation
---
Index: example/shared/src/commonMain/kotlin/sections/SectionsScreen.kt
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/example/shared/src/commonMain/kotlin/sections/SectionsScreen.kt b/example/shared/src/commonMain/kotlin/sections/SectionsScreen.kt
--- a/example/shared/src/commonMain/kotlin/sections/SectionsScreen.kt	(revision 67d047561eadd9c132ae1edcf798c25be04f5d63)
+++ b/example/shared/src/commonMain/kotlin/sections/SectionsScreen.kt	(date 1712589460848)
@@ -44,6 +44,7 @@
 import io.github.alexzhirkevich.cupertino.MenuDivider
 import io.github.alexzhirkevich.cupertino.MenuPickerAction
 import io.github.alexzhirkevich.cupertino.CupertinoNavigateBackButton
+import io.github.alexzhirkevich.cupertino.CupertinoNavigationTitle
 import io.github.alexzhirkevich.cupertino.CupertinoScaffold
 import io.github.alexzhirkevich.cupertino.CupertinoSegmentedControl
 import io.github.alexzhirkevich.cupertino.CupertinoSegmentedControlTab
@@ -79,62 +80,10 @@
     component: SectionsComponent
 ) {
 
-    var isLazy by remember {
-        mutableStateOf(true)
-    }
-
-    val pagerState = rememberPagerState(
-        pageCount = { 2 }
-    )
-
-    val toggleState = remember {
-        mutableStateOf(false)
-    }
-
-    val datePickerState = rememberCupertinoDatePickerState()
-    val timePickerState = rememberCupertinoTimePickerState()
-
-    var datePickerExpanded by remember {
-        mutableStateOf<SectionStyle?>(null)
-    }
-    var timePickerExpanded by remember {
-        mutableStateOf<SectionStyle?>(null)
-    }
-
-    var pickerExpanded by remember {
-        mutableStateOf<SectionStyle?>(null)
-    }
-
-    val pickedIndex = remember {
-        mutableStateOf(0)
-    }
-
-    val textFieldValue = remember {
-        mutableStateOf("")
-    }
-
-    val lazyState = rememberLazyListState()
-
-    val defaultState = rememberScrollState()
-
-    val currentState = if (isLazy)
-        lazyState
-    else defaultState
+    val currentState = rememberScrollState()
 
     val sectionState = rememberSectionState()
 
-    val focusManager = LocalFocusManager.current
-
-    LaunchedEffect(currentState.isScrollInProgress){
-        if (currentState.isScrollInProgress){
-            focusManager.clearFocus()
-        }
-    }
-
-    LaunchedEffect(isLazy) {
-        pagerState.animateScrollToPage(if (isLazy) 0 else 1)
-    }
-
     CupertinoScaffold(
         topBar = {
             CupertinoTopAppBar(
@@ -147,112 +96,52 @@
                     }
                 },
                 title = {
-                    CupertinoSegmentedControl(
-                        modifier = Modifier
-                            .width(200.dp),
-                        selectedTabIndex = if (isLazy) 0 else 1
-                    ) {
-                        CupertinoSegmentedControlTab(
-                            isSelected = isLazy,
-                            onClick = {
-                                isLazy = true
-                            }
-                        ) {
-                            CupertinoText("Lazy")
-                        }
-                        CupertinoSegmentedControlTab(
-                            isSelected = !isLazy,
-                            onClick = {
-                                isLazy = false
-
-                            }
-                        ) {
-                            CupertinoText("Default")
-                        }
-                    }
+                    Text("NavigationTitle")
                 }
             )
         }
     ) { pv ->
-        if (isLazy) {
-            LazyColumn(
-                state = lazyState,
-                modifier = Modifier
-                    .fillMaxSize()
-                    .background(CupertinoTheme.colorScheme.systemGroupedBackground),
-            contentPadding = pv
-            ) {
-
-                SectionStyle.values().forEach { style ->
-                    section(
-                        state = sectionState,
-                        style = style,
-                        title = {
-                            Title(style)
-                        },
-                        caption = {
-                            Caption()
-                        }
-                    ) {
-                        sectionContent(
-                            toggle = toggleState,
-                            datePickerState = datePickerState,
-                            datePickerExpanded = datePickerExpanded == style,
-                            onDatePickerExpanded = { datePickerExpanded = if (it) style else null },
-                            timePickerState = timePickerState,
-                            timePickerExpanded = timePickerExpanded == style,
-                            onTimePickerExpanded =  {
-                                timePickerExpanded = if (it) style else null
-                            },
-                            pickedIndex = pickedIndex,
-                            pickerExpanded = pickerExpanded == style,
-                            onpickerExpanded = {
-                                pickerExpanded = if (it) style else null
-                            },
-                            textFieldValue = textFieldValue
-                        )
-                    }
-                }
-            }
-        } else {
-            Column(
-                modifier = Modifier
-                    .verticalScroll(defaultState)
-                    .background(CupertinoTheme.colorScheme.systemGroupedBackground)
-                    .fillMaxSize()
-                    .padding(pv)
-            ) {
+        Column(
+            modifier = Modifier
+                .verticalScroll(currentState)
+                .background(CupertinoTheme.colorScheme.systemGroupedBackground)
+                .fillMaxSize()
+                .padding(pv)
+        ) {
+            CupertinoNavigationTitle {
+                Text("NavigationTitle")
+            }
 
-                SectionStyle.values().forEach { style ->
-                    CupertinoSection(
-                        state = sectionState,
-                        style = style,
-                        title = {
-                            Title(style)
-                        },
-                        caption = {
-                            Caption()
-                        }
-                    ) {
-                        SectionItem(
-                            leadingContent = {
-                                CupertinoLinkIcon(imageVector = CupertinoIcons.Default.Heart)
-                            },
-                            trailingContent = {
-                                Text("Trailing")
-                            }
-                        ) {
-                            Text("Section item")
-                        }
+            SectionStyle.values().forEach { style ->
+                CupertinoSection(
+                    state = sectionState,
+                    style = style,
+                    title = {
+                        Title(style)
+                    },
+                    caption = {
+                        Caption()
+                    }
+                ) {
+                    SectionItem(
+                        leadingContent = {
+                            CupertinoLinkIcon(imageVector = CupertinoIcons.Default.Heart)
+                        },
+                        trailingContent = {
+                            Text("Trailing")
+                        }
+                    ) {
+                        Text("Section item")
                     }
                 }
+
             }
         }
     }
 }
 
 @Composable
-private fun Title(style: SectionStyle){
+private fun Title(style: SectionStyle) {
     CupertinoText(
         text = "${style.name} section".sectionTitle(),
     )
@@ -269,16 +158,16 @@
 private fun LazySectionScope.sectionContent(
     toggle: MutableState<Boolean>,
     datePickerState: CupertinoDatePickerState,
-    datePickerExpanded : Boolean,
-    onDatePickerExpanded : (Boolean) -> Unit,
+    datePickerExpanded: Boolean,
+    onDatePickerExpanded: (Boolean) -> Unit,
     timePickerState: CupertinoTimePickerState,
-    timePickerExpanded : Boolean,
-    onTimePickerExpanded : (Boolean) -> Unit,
-    pickerExpanded : Boolean,
-    pickedIndex : MutableState<Int>,
+    timePickerExpanded: Boolean,
+    onTimePickerExpanded: (Boolean) -> Unit,
+    pickerExpanded: Boolean,
+    pickedIndex: MutableState<Int>,
     onpickerExpanded: (Boolean) -> Unit,
-    textFieldValue : MutableState<String>
-){
+    textFieldValue: MutableState<String>
+) {
     item {
         CupertinoText(
             text = "Simple text",
@@ -289,7 +178,7 @@
     textField(
         value = textFieldValue.value,
         singleLine = true,
-        onValueChange = {textFieldValue.value = it},
+        onValueChange = { textFieldValue.value = it },
         placeholder = {
             Text("Text field")
         }
@@ -302,7 +191,7 @@
     }
     datePicker(
         state = datePickerState,
-        expanded  = datePickerExpanded,
+        expanded = datePickerExpanded,
         onExpandedChange = onDatePickerExpanded,
         title = {
             CupertinoText("Date Picker")
@@ -310,7 +199,7 @@
     )
     timePicker(
         state = timePickerState,
-        expanded  = timePickerExpanded,
+        expanded = timePickerExpanded,
         onExpandedChange = onTimePickerExpanded,
         title = {
             CupertinoText("Time Picker")
@@ -319,19 +208,19 @@
 
     dropdownMenu(
         expanded = pickerExpanded,
-        onDismissRequest =  {
+        onDismissRequest = {
             onpickerExpanded(false)
         },
         onClick = {
             onpickerExpanded(true)
         },
-        title =  {
+        title = {
             CupertinoText("Popup picker")
         },
         selectedLabel = {
             CupertinoText(if (pickedIndex.value == 0) "None" else "Item ${pickedIndex.value}")
         }
-    ){
+    ) {
         MenuPickerAction(
             isSelected = pickedIndex.value == 0,
             onClick = {
@@ -343,14 +232,14 @@
         }
         MenuDivider()
 
-        repeat(7){
+        repeat(7) {
             MenuPickerAction(
                 isSelected = pickedIndex.value == it + 1,
                 onClick = {
                     pickedIndex.value = it + 1
                     onpickerExpanded(false)
                 }
-            ){
+            ) {
                 Text("Item $it")
             }
         }