Merge pull request #570 from kiwicom/top-app-bar-large-extra-content

Added extraContent slot to TopAppBarLarge

catalog/src/main/java/kiwi/orbit/compose/catalog/screens/TopAppBarScreen.kt

@@ -33,34 +33,37 @@ import kotlinx.serialization.Serializable
 
 sealed interface TopAppBarDestination : Destination {
     @Serializable
-    object Home : TopAppBarDestination
+    data object Home : TopAppBarDestination
 
     @Serializable
-    object Normal : TopAppBarDestination
+    data object Normal : TopAppBarDestination
 
     @Serializable
-    object NormalScrollable : TopAppBarDestination
+    data object NormalScrollable : TopAppBarDestination
 
     @Serializable
-    object NormalWithTabs : TopAppBarDestination
+    data object NormalWithTabs : TopAppBarDestination
 
     @Serializable
-    object NormalWithFilters : TopAppBarDestination
+    data object NormalWithFilters : TopAppBarDestination
 
     @Serializable
-    object Large : TopAppBarDestination
+    data object Large : TopAppBarDestination
 
     @Serializable
-    object LargeScrollable : TopAppBarDestination
+    data object LargeScrollable : TopAppBarDestination
 
     @Serializable
-    object LargeScrollableElevated : TopAppBarDestination
+    data object LargeScrollableElevated : TopAppBarDestination
 
     @Serializable
-    object LargeCustomContent : TopAppBarDestination
+    data object LargeWithTabs : TopAppBarDestination
 
     @Serializable
-    object LargePullRefresh : TopAppBarDestination
+    data object LargeCustomContent : TopAppBarDestination
+
+    @Serializable
+    data object LargePullRefresh : TopAppBarDestination
 }
 
 @ExperimentalSerializationApi
@@ -94,6 +97,9 @@ internal inline fun <reified T : Destination> NavGraphBuilder.topAppBarNavigatio
         composable<TopAppBarDestination.LargeScrollableElevated> {
             TopAppBarLargeScrollableElevatedScreen(navController::navigateUp)
         }
+        composable<TopAppBarDestination.LargeWithTabs> {
+            TopAppBarLargeWithTabsScreen(navController::navigateUp)
+        }
         composable<TopAppBarDestination.LargeCustomContent> {
             TopAppBarLargeCustomContentScreen(navController::navigateUp)
         }
@@ -166,6 +172,11 @@ internal fun TopAppBarScreenInner(
             ) {
                 Text("Scrollable Elevated")
             }
+            ButtonSecondary(
+                onClick = { onSelect(TopAppBarDestination.LargeWithTabs) },
+            ) {
+                Text("With Tabs")
+            }
             ButtonSecondary(
                 onClick = { onSelect(TopAppBarDestination.LargeCustomContent) },
             ) {

catalog/src/main/java/kiwi/orbit/compose/catalog/screens/TopAppBarScreensLarge.kt

@@ -33,6 +33,8 @@ import kiwi.orbit.compose.ui.OrbitTheme
 import kiwi.orbit.compose.ui.controls.Icon
 import kiwi.orbit.compose.ui.controls.IconButton
 import kiwi.orbit.compose.ui.controls.Scaffold
+import kiwi.orbit.compose.ui.controls.Tab
+import kiwi.orbit.compose.ui.controls.TabRow
 import kiwi.orbit.compose.ui.controls.Text
 import kiwi.orbit.compose.ui.controls.TopAppBarLarge
 import kiwi.orbit.compose.ui.controls.TopAppBarScrollBehavior
@@ -100,6 +102,39 @@ internal fun TopAppBarLargeScrollableElevatedScreen(
     )
 }
 
+@Composable
+internal fun TopAppBarLargeWithTabsScreen(
+    onNavigateUp: () -> Unit,
+) {
+    val scrollBehavior = TopAppBarScrollBehavior.exitUntilCollapsed()
+    Scaffold(
+        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
+        topBar = {
+            TopAppBarLarge(
+                title = { Text("With Tabs") },
+                onNavigateUp = onNavigateUp,
+                extraContent = {
+                    var selectedTabIndex by rememberSaveable { mutableIntStateOf(0) }
+                    TabRow(selectedTabIndex = selectedTabIndex) {
+                        Tab(
+                            selected = selectedTabIndex == 0,
+                            onClick = { selectedTabIndex = 0 },
+                            text = { Text("Normal") },
+                        )
+                        Tab(
+                            selected = selectedTabIndex == 1,
+                            onClick = { selectedTabIndex = 1 },
+                            text = { Text("Inline") },
+                        )
+                    }
+                },
+                scrollBehavior = scrollBehavior,
+            )
+        },
+        content = { CustomContentPlaceholder(it) },
+    )
+}
+
 @Composable
 internal fun TopAppBarLargeCustomContentScreen(
     onNavigateUp: () -> Unit,

ui/detekt-baseline-debug.xml

@@ -3,26 +3,20 @@
   <ManuallySuppressedIssues/>
   <CurrentIssues>
     <ID>CyclomaticComplexMethod:Checkbox.kt$@OptIn(ExperimentalAnimationGraphicsApi::class) @Composable public fun Checkbox( checked: Boolean, onCheckedChange: (() -> Unit)?, modifier: Modifier = Modifier, enabled: Boolean = true, isError: Boolean = false, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, )</ID>
-    <ID>CyclomaticComplexMethod:Scaffold.kt$@OptIn(ExperimentalLayoutApi::class) @Composable private fun ScaffoldLayout( topBar: @Composable () -> Unit, toast: @Composable () -> Unit, action: @Composable () -> Unit, content: @Composable (contentPadding: PaddingValues) -> Unit, contentWindowInsets: WindowInsets, )</ID>
-    <ID>CyclomaticComplexMethod:Seat.kt$@Composable private fun ColumnScope.Seat( selected: Boolean, enabled: Boolean, isExtraLegroom: Boolean, content: @Composable () -> Unit, )</ID>
     <ID>CyclomaticComplexMethod:Slider.kt$@Composable private fun Track(enabled: Boolean, sliderPositions: SliderPositions)</ID>
-    <ID>CyclomaticComplexMethod:TextField.kt$@Suppress("LongParameterList") @Composable internal fun TextField( value: String, onValueChange: (String) -> Unit, enabled: Boolean, readOnly: Boolean, label: @Composable (() -> Unit)?, error: @Composable (() -> Unit)?, info: @Composable (() -> Unit)?, additionalContent: @Composable (() -> Unit)?, placeholder: @Composable (() -> Unit)?, leadingIcon: @Composable (() -> Unit)?, onLeadingIconClick: (() -> Unit)?, trailingIcon: @Composable (() -> Unit)?, onTrailingIconClick: (() -> Unit)?, keyboardOptions: KeyboardOptions, keyboardActions: KeyboardActions, singleLine: Boolean, maxLines: Int, minLines: Int, visualTransformation: VisualTransformation, interactionSource: MutableInteractionSource, modifier: Modifier = Modifier, )</ID>
     <ID>ForbiddenComment:SelectField.kt$// TODO:</ID>
     <ID>ForbiddenComment:Typography.kt$Typography$// TODO: remove data class to allow maintain better binary compatibility</ID>
     <ID>FunctionNaming:SwipeableV2.kt$SwipeableV2Defaults$internal fun &lt;T> ReconcileAnimationOnAnchorChangeHandler( state: SwipeableV2State&lt;T>, animate: (target: T, velocity: Float) -> Unit, snap: (target: T) -> Unit )</ID>
     <ID>FunctionNaming:SwipeableV2.kt$SwipeableV2State.Companion$fun &lt;T : Any> Saver( animationSpec: AnimationSpec&lt;Float>, confirmValueChange: (T) -> Boolean, positionalThreshold: Density.(distance: Float) -> Float, velocityThreshold: Dp )</ID>
-    <ID>LongMethod:Alert.kt$@Composable private fun Alert( icon: Painter?, title: @Composable ColumnScope.() -> Unit, actions: @Composable () -> Unit, content: @Composable ColumnScope.() -> Unit, suppressed: Boolean, modifier: Modifier = Modifier, )</ID>
     <ID>LongMethod:Checkbox.kt$@OptIn(ExperimentalAnimationGraphicsApi::class) @Composable public fun Checkbox( checked: Boolean, onCheckedChange: (() -> Unit)?, modifier: Modifier = Modifier, enabled: Boolean = true, isError: Boolean = false, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, )</ID>
     <ID>LongMethod:FieldContent.kt$FieldContentMeasurePolicy$override fun MeasureScope.measure( measurables: List&lt;Measurable>, constraints: Constraints, ): MeasureResult</ID>
     <ID>LongMethod:ListChoice.kt$@Composable private fun ListChoicePrimitive( onClick: (() -> Unit)?, icon: @Composable () -> Unit, description: @Composable () -> Unit, trailingIcon: @Composable () -> Unit, withSeparator: Boolean, interactionSource: MutableInteractionSource, title: @Composable () -> Unit, modifier: Modifier = Modifier, )</ID>
     <ID>LongMethod:SegmentedSwitch.kt$@Composable public fun SegmentedSwitch( onOptionClick: (selectedIndex: Int) -> Unit, options: List&lt;@Composable () -> Unit>, selectedIndex: Int?, modifier: Modifier = Modifier, label: @Composable () -> Unit = {}, error: @Composable (() -> Unit)? = null, info: @Composable (() -> Unit)? = null, )</ID>
     <ID>LongMethod:SelectField.kt$@OptIn(ExperimentalMaterial3Api::class) @Composable public fun &lt;T> SelectField( value: String, options: List&lt;T>, onOptionSelect: (T) -> Unit, modifier: Modifier = Modifier, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, label: @Composable (() -> Unit)? = null, error: @Composable (() -> Unit)? = null, info: @Composable (() -> Unit)? = null, placeholder: @Composable (() -> Unit)? = null, leadingIcon: @Composable (() -> Unit)? = null, singleLine: Boolean = true, maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE, minLines: Int = 1, optionContent: @Composable RowScope.(option: T) -> Unit, )</ID>
     <ID>LongMethod:Slider.kt$@Composable private fun Track(enabled: Boolean, sliderPositions: SliderPositions)</ID>
-    <ID>LongMethod:Switch.kt$@Composable private fun BoxScope.SwitchImpl( checked: Boolean, enabled: Boolean, state: SwipeableV2State&lt;Boolean>, interactionSource: InteractionSource, )</ID>
-    <ID>LongMethod:TextField.kt$@Suppress("LongParameterList") @Composable internal fun TextField( value: String, onValueChange: (String) -> Unit, enabled: Boolean, readOnly: Boolean, label: @Composable (() -> Unit)?, error: @Composable (() -> Unit)?, info: @Composable (() -> Unit)?, additionalContent: @Composable (() -> Unit)?, placeholder: @Composable (() -> Unit)?, leadingIcon: @Composable (() -> Unit)?, onLeadingIconClick: (() -> Unit)?, trailingIcon: @Composable (() -> Unit)?, onTrailingIconClick: (() -> Unit)?, keyboardOptions: KeyboardOptions, keyboardActions: KeyboardActions, singleLine: Boolean, maxLines: Int, minLines: Int, visualTransformation: VisualTransformation, interactionSource: MutableInteractionSource, modifier: Modifier = Modifier, )</ID>
     <ID>LongMethod:Toast.kt$private fun Modifier.toastGesturesDetector( onPause: () -> Unit, onResume: () -> Unit, onDismissed: () -> Unit, ): Modifier</ID>
     <ID>LongMethod:TopAppBar.kt$@Composable internal fun TopAppBarLayout( title: @Composable () -> Unit, titleAlpha: Float, hideTitleSemantics: Boolean, navigationIcon: @Composable () -> Unit, actions: @Composable () -> Unit, modifier: Modifier = Modifier, )</ID>
-    <ID>LongMethod:TopAppBarLarge.kt$@Composable private fun TwoRowsTopAppBar( title: @Composable () -> Unit, largeTitle: @Composable () -> Unit, navigationIcon: @Composable () -> Unit, actions: @Composable () -> Unit, largeElevated: Boolean, elevation: Dp, scrollBehavior: TopAppBarScrollBehavior?, modifier: Modifier = Modifier, )</ID>
+    <ID>LongMethod:TopAppBarLarge.kt$@Composable private fun TwoRowsTopAppBar( title: @Composable () -> Unit, largeTitle: @Composable () -> Unit, navigationIcon: @Composable () -> Unit, actions: @Composable () -> Unit, extraContent: @Composable () -> Unit, largeElevated: Boolean, elevation: Dp, scrollBehavior: TopAppBarScrollBehavior?, modifier: Modifier = Modifier, )</ID>
     <ID>MatchingDeclarationName:Toast.kt$ToastData</ID>
     <ID>MatchingDeclarationName:ToastHost.kt$ToastHostState</ID>
     <ID>NestedBlockDepth:SwipeableV2.kt$SwipeableV2State$private fun computeTarget( offset: Float, currentValue: T, velocity: Float ): T</ID>

ui/src/androidMain/kotlin/kiwi/orbit/compose/ui/controls/TopAppBar.kt

@@ -17,6 +17,10 @@ import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
@@ -289,5 +293,24 @@ internal fun TopAppBarPreview() {
                 }
             },
         )
+        TopAppBar(
+            title = { Text("Title") },
+            onNavigateUp = {},
+            extraContent = {
+                var selectedTabIndex by rememberSaveable { mutableIntStateOf(0) }
+                TabRow(selectedTabIndex = selectedTabIndex) {
+                    Tab(
+                        selected = selectedTabIndex == 0,
+                        onClick = { selectedTabIndex = 0 },
+                        text = { Text("Tab A") },
+                    )
+                    Tab(
+                        selected = selectedTabIndex == 1,
+                        onClick = { selectedTabIndex = 1 },
+                        text = { Text("Tab B") },
+                    )
+                }
+            },
+        )
     }
 }

ui/src/androidMain/kotlin/kiwi/orbit/compose/ui/controls/TopAppBarLarge.kt

@@ -15,6 +15,10 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
@@ -43,6 +47,7 @@ public fun TopAppBarLarge(
     largeTitle: @Composable () -> Unit = title,
     navigationIcon: Painter = TopAppBarIcons.Back,
     actions: @Composable RowScope.() -> Unit = {},
+    extraContent: @Composable () -> Unit = {},
     largeElevated: Boolean = true,
     elevation: Dp = TopAppBarElevation,
     scrollBehavior: TopAppBarScrollBehavior? = null,
@@ -62,6 +67,7 @@ public fun TopAppBarLarge(
         },
         largeTitle = largeTitle,
         actions = actions,
+        extraContent = extraContent,
         largeElevated = largeElevated,
         elevation = elevation,
         scrollBehavior = scrollBehavior,
@@ -75,6 +81,7 @@ public fun TopAppBarLarge(
     navigationIcon: @Composable () -> Unit = {},
     largeTitle: @Composable () -> Unit = title,
     actions: @Composable RowScope.() -> Unit = {},
+    extraContent: @Composable () -> Unit = {},
     largeElevated: Boolean = true,
     elevation: Dp = TopAppBarElevation,
     scrollBehavior: TopAppBarScrollBehavior? = null,
@@ -106,6 +113,7 @@ public fun TopAppBarLarge(
                 content = actions,
             )
         },
+        extraContent = extraContent,
         largeElevated = largeElevated,
         elevation = elevation,
         scrollBehavior = scrollBehavior,
@@ -119,6 +127,7 @@ private fun TwoRowsTopAppBar(
     largeTitle: @Composable () -> Unit,
     navigationIcon: @Composable () -> Unit,
     actions: @Composable () -> Unit,
+    extraContent: @Composable () -> Unit,
     largeElevated: Boolean,
     elevation: Dp,
     scrollBehavior: TopAppBarScrollBehavior?,
@@ -177,6 +186,7 @@ private fun TwoRowsTopAppBar(
                     hideTitleSemantics = hideBottomRowSemantics,
                     modifier = Modifier,
                 )
+                extraContent()
             }
         }
     } else {
@@ -210,6 +220,7 @@ private fun TwoRowsTopAppBar(
                     WindowInsets.systemBars.only(WindowInsetsSides.Horizontal),
                 ),
             )
+            extraContent()
         }
     }
 }
@@ -257,5 +268,24 @@ internal fun TopAppBarLargePreview() {
                 }
             },
         )
+        TopAppBarLarge(
+            title = { Text("Title") },
+            onNavigateUp = {},
+            extraContent = {
+                var selectedTabIndex by rememberSaveable { mutableIntStateOf(0) }
+                TabRow(selectedTabIndex = selectedTabIndex) {
+                    Tab(
+                        selected = selectedTabIndex == 0,
+                        onClick = { selectedTabIndex = 0 },
+                        text = { Text("Tab A") },
+                    )
+                    Tab(
+                        selected = selectedTabIndex == 1,
+                        onClick = { selectedTabIndex = 1 },
+                        text = { Text("Tab B") },
+                    )
+                }
+            },
+        )
     }
 }