PLASMA-6369: feat(sdds-acore/sdds-alibs/plasma-homeds/uikit-compose): CollapsingNavBar was implemented

build-system/docs-template/compose-template/docs/components/CollapsingNavigationBarUsage.md

@@ -0,0 +1,30 @@
+---
+title: CollapsingNavigationBar
+---
+Верхняя панель интерфейса, служащая для навигации и отображения ключевых действий. 
+Умеет сворачиваться и разворачиваться в запвисимости от состояния скролла на экране.
+
+В качестве заголовка, описания, контента и экшенов может принимать произвольный контент.
+
+```kotlin
+// @sample: com/sdds/compose/uikit/fixtures/samples/collapsingnavigationbar/CollapsingNavigationBar_Simple.kt
+```
+
+## Стиль CollapsingNavigationBar
+
+Стиль CollapsingNavigationBar можно настроить с помощью CollapsingNavigationBarStyle.builder(). Так же существует набор сгенерированных стилей.
+
+### Создание стиля с помощью builder()
+
+```kotlin
+// @sample: com/sdds/compose/uikit/fixtures/samples/collapsingnavigationbar/CollapsingNavigationBar_Style.kt
+```
+
+## NavigationBarTextAlign
+
+Выравнивание текста. 
+Возможные значения:
+
+- Start (Текст расположен слева, оба экшена справа), 
+- Center (Текст расположен в центре, левый экшен слева, правый экшен справа), 
+- End (Текст расположен справа, оба экшена слева)

playground/sandbox-compose/src/main/kotlin/com/sdds/playground/sandbox/buttongroup/compose/ButtonGroupScreen.kt

@@ -46,7 +46,7 @@ internal fun ButtonGroupScreen(componentKey: ComponentKey = ComponentKey.ButtonG
                     orientation = btnGroupUiState.orientation,
                 ) {
                     repeat(btnGroupUiState.amount) {
-                        buttonContent(componentKey)
+                        buttonContent(btnGroupUiState.appearance)
                     }
                 }
             }
@@ -55,19 +55,19 @@ internal fun ButtonGroupScreen(componentKey: ComponentKey = ComponentKey.ButtonG
 }
 
 @Composable
-internal fun ButtonGroupPreview(style: ButtonGroupStyle, key: ComponentKey) {
+internal fun ButtonGroupPreview(style: ButtonGroupStyle) {
     ButtonGroup(
         style = style,
         orientation = ButtonGroupOrientation.Horizontal,
     ) {
         repeat(3) {
-            buttonContent(key)
+            buttonContent()
         }
     }
 }
 
-private fun ButtonGroupScope.buttonContent(key: ComponentKey) {
-    if (key.value.contains("Icon")) {
+private fun ButtonGroupScope.buttonContent(appearance: String = "") {
+    if (appearance.contains("Icon")) {
         button { IconButton(painterResource(R.drawable.ic_plasma_24), {}) }
     } else {
         button {

playground/sandbox-compose/src/main/kotlin/com/sdds/playground/sandbox/core/compose/MenuItem.kt

@@ -17,6 +17,7 @@ import com.sdds.compose.uikit.ChipStyle
 import com.sdds.compose.uikit.CircularProgressBarStyle
 import com.sdds.compose.uikit.CodeFieldStyle
 import com.sdds.compose.uikit.CodeInputStyle
+import com.sdds.compose.uikit.CollapsingNavigationBarStyle
 import com.sdds.compose.uikit.CounterStyle
 import com.sdds.compose.uikit.DividerStyle
 import com.sdds.compose.uikit.DrawerStyle
@@ -98,6 +99,8 @@ import com.sdds.playground.sandbox.loader.compose.LoaderScreen
 import com.sdds.playground.sandbox.modal.compose.ModalScreen
 import com.sdds.playground.sandbox.navigationbar.NavigationBarPreview
 import com.sdds.playground.sandbox.navigationbar.NavigationBarScreen
+import com.sdds.playground.sandbox.navigationbar.collapsing.CollapsingNavigationBarPreview
+import com.sdds.playground.sandbox.navigationbar.collapsing.CollapsingNavigationBarScreen
 import com.sdds.playground.sandbox.note.compose.NoteCompactPreview
 import com.sdds.playground.sandbox.note.compose.NoteCompactScreen
 import com.sdds.playground.sandbox.note.compose.NotePreview
@@ -315,7 +318,7 @@ internal sealed class ComponentScreen(
     )
     object ButtonGroup : ComponentScreen(
         { ButtonGroupScreen(it) },
-        { style, key -> ButtonGroupPreview(style as ButtonGroupStyle, key) },
+        { style, _ -> ButtonGroupPreview(style as ButtonGroupStyle) },
     )
     object TabBar : ComponentScreen(
         { TabBarScreen(it) },
@@ -358,6 +361,11 @@ internal sealed class ComponentScreen(
         { style, _ -> NavigationBarPreview(style as NavigationBarStyle) },
     )
 
+    object CollapsingNavigationBar : ComponentScreen(
+        { CollapsingNavigationBarScreen(it) },
+        { style, _ -> CollapsingNavigationBarPreview(style as CollapsingNavigationBarStyle) },
+    )
+
     object Tabs : ComponentScreen(
         { TabsScreen(it) },
         { style, _ -> TabsPreview(style as TabsStyle) },
@@ -437,6 +445,7 @@ private fun CoreComponent.screen(): ComponentScreen {
         CoreComponent.DRAWER -> ComponentScreen.Drawer
         CoreComponent.WHEEL -> ComponentScreen.Wheel
         CoreComponent.NAVIGATION_BAR -> ComponentScreen.NavigationBar
+        CoreComponent.COLLAPSING_NAVIGATION_BAR -> ComponentScreen.CollapsingNavigationBar
         CoreComponent.NOTE -> ComponentScreen.Note
         CoreComponent.NOTE_COMPACT -> ComponentScreen.NoteCompact
         CoreComponent.TABS -> ComponentScreen.Tabs

playground/sandbox-compose/src/main/kotlin/com/sdds/playground/sandbox/navigationbar/NavigationBarScreen.kt

@@ -1,6 +1,7 @@
 package com.sdds.playground.sandbox.navigationbar
 
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
@@ -44,6 +45,9 @@ internal fun NavigationBarScreen(componentKey: ComponentKey = ComponentKey.Navig
                 content = content(navigationBarUiState.contentText),
                 actionStart = actionStart(navigationBarUiState.hasActionStart),
                 actionEnd = actionEnd(navigationBarUiState.hasActionEnd),
+                onBackPressed = {
+                    println("Back button was pressed")
+                },
             )
         },
     )
@@ -56,14 +60,14 @@ internal fun NavigationBarPreview(style: NavigationBarStyle) {
         textPlacement = NavigationBarTextPlacement.Inline,
         contentPlacement = NavigationBarContentPlacement.Inline,
         textAlign = NavigationBarTextAlign.Start,
-        textContent = textContent("Text"),
+        titleContent = textContent("Text"),
         content = content("Content"),
         actionStart = actionStart(true),
         actionEnd = actionEnd(true),
     )
 }
 
-private fun actionStart(hasAction: Boolean): (@Composable () -> Unit)? {
+private fun actionStart(hasAction: Boolean): (@Composable RowScope.() -> Unit)? {
     return if (hasAction) {
         @Composable {
             Icon(
@@ -76,7 +80,7 @@ private fun actionStart(hasAction: Boolean): (@Composable () -> Unit)? {
     }
 }
 
-private fun actionEnd(hasAction: Boolean): (@Composable () -> Unit)? {
+private fun actionEnd(hasAction: Boolean): (@Composable RowScope.() -> Unit)? {
     return if (hasAction) {
         @Composable {
             Icon(

playground/sandbox-compose/src/main/kotlin/com/sdds/playground/sandbox/navigationbar/collapsing/CollapsingNavigationBarScreen.kt

@@ -0,0 +1,143 @@
+package com.sdds.playground.sandbox.navigationbar.collapsing
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.lifecycle.viewmodel.compose.viewModel
+import com.sdds.compose.uikit.CollapsingNavigationBar
+import com.sdds.compose.uikit.CollapsingNavigationBarDefaults
+import com.sdds.compose.uikit.CollapsingNavigationBarStyle
+import com.sdds.compose.uikit.Icon
+import com.sdds.compose.uikit.Text
+import com.sdds.compose.uikit.rememberCollapsingNavigationBarState
+import com.sdds.icons.R
+import com.sdds.playground.sandbox.SandboxTheme
+import com.sdds.playground.sandbox.core.compose.ComponentScaffold
+import com.sdds.playground.sandbox.core.integration.component.ComponentKey
+
+@Composable
+internal fun CollapsingNavigationBarScreen(componentKey: ComponentKey = ComponentKey.CollapsingNavigationBar) {
+    ComponentScaffold(
+        key = componentKey,
+        viewModel = viewModel<CollapsingNavigationBarViewModel>(
+            factory = CollapsingNavigationBarViewModelFactory(
+                defaultState = CollapsingNavigationBarUiState(),
+                componentKey = componentKey,
+            ),
+            key = componentKey.toString(),
+        ),
+        component = { collapsingNavigationBarUiState, style ->
+            val scrollBehavior =
+                CollapsingNavigationBarDefaults.exitUntilCollapsedScrollBehavior(rememberCollapsingNavigationBarState())
+            Column(
+                modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
+            ) {
+                CollapsingNavigationBar(
+                    style = style,
+                    scrollBehavior = scrollBehavior,
+                    collapsedTextAlign = collapsingNavigationBarUiState.collapsedTextAlign,
+                    expandedTextAlign = collapsingNavigationBarUiState.expandedTextAlign,
+                    collapsedTitle = textContent(collapsingNavigationBarUiState.collapsedTitle),
+                    expandedTitle = textContent(collapsingNavigationBarUiState.expandedTitle),
+                    collapsedDescription = textContent(collapsingNavigationBarUiState.collapsedDescription),
+                    expandedDescription = textContent(collapsingNavigationBarUiState.expandedDescription),
+                    content = content(collapsingNavigationBarUiState.contentText),
+                    actionStart = actionStart(collapsingNavigationBarUiState.hasActionStart),
+                    actionEnd = actionEnd(collapsingNavigationBarUiState.hasActionEnd),
+                    centerAlignmentStrategy = collapsingNavigationBarUiState.centerAlignmentStrategy,
+                    onBackPressed = {
+                        println("Back button was pressed")
+                    },
+                )
+                LazyColumn {
+                    items(100) {
+                        Text(modifier = Modifier.padding(32.dp), text = "Label text $it")
+                    }
+                }
+            }
+        },
+    )
+}
+
+@Composable
+internal fun CollapsingNavigationBarPreview(style: CollapsingNavigationBarStyle) {
+    CollapsingNavigationBar(
+        style = style,
+        collapsedTitle = textContent("Title"),
+        content = content("Content"),
+        actionStart = actionStart(true),
+        actionEnd = actionEnd(true),
+        expandedTitle = textContent("Title"),
+        expandedDescription = textContent("Description"),
+        collapsedDescription = textContent("Description"),
+    )
+}
+
+private fun actionStart(hasAction: Boolean): (@Composable RowScope.() -> Unit)? {
+    return if (hasAction) {
+        @Composable {
+            Icon(
+                painter = painterResource(R.drawable.ic_search_24),
+                contentDescription = "",
+            )
+            Icon(
+                painter = painterResource(R.drawable.ic_plus_24),
+                contentDescription = "",
+            )
+        }
+    } else {
+        null
+    }
+}
+
+private fun actionEnd(hasAction: Boolean): (@Composable RowScope.() -> Unit)? {
+    return if (hasAction) {
+        @Composable {
+            Icon(
+                painter = painterResource(R.drawable.ic_menu_24),
+                contentDescription = "",
+            )
+        }
+    } else {
+        null
+    }
+}
+
+private fun content(text: String): (@Composable () -> Unit)? {
+    return if (text.isEmpty()) {
+        null
+    } else {
+        @Composable {
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.Center,
+            ) { Text(text) }
+        }
+    }
+}
+
+private fun textContent(text: String): (@Composable () -> Unit)? {
+    return if (text.isEmpty()) {
+        null
+    } else {
+        @Composable { Text(text) }
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+private fun CollapsingNavigationBarScreenPreview() {
+    SandboxTheme {
+        CollapsingNavigationBarScreen()
+    }
+}

playground/sandbox-compose/src/main/kotlin/com/sdds/playground/sandbox/navigationbar/collapsing/CollapsingNavigationBarUiState.kt

@@ -0,0 +1,25 @@
+package com.sdds.playground.sandbox.navigationbar.collapsing
+
+import com.sdds.compose.uikit.NavBarCenterAlignmentStrategy
+import com.sdds.compose.uikit.NavigationBarTextAlign
+import com.sdds.playground.sandbox.core.compose.UiState
+
+internal data class CollapsingNavigationBarUiState(
+    override val variant: String = "",
+    override val appearance: String = "",
+    val collapsedTitle: String = "Title",
+    val expandedTitle: String = "Title",
+    val collapsedDescription: String = "Description",
+    val expandedDescription: String = "Description",
+    val contentText: String = "Content",
+    val hasActionStart: Boolean = true,
+    val hasActionEnd: Boolean = true,
+    val collapsedTextAlign: NavigationBarTextAlign = NavigationBarTextAlign.Center,
+    val expandedTextAlign: NavigationBarTextAlign = NavigationBarTextAlign.Start,
+    val centerAlignmentStrategy: NavBarCenterAlignmentStrategy = NavBarCenterAlignmentStrategy.Absolute,
+) : UiState {
+
+    override fun updateVariant(appearance: String, variant: String): UiState {
+        return copy(appearance = appearance, variant = variant)
+    }
+}