From 281319dbc0ea0d5a13bfe053d07c44cf3b4d1c37 Mon Sep 17 00:00:00 2001 From: Alex Panov Date: Sun, 3 Nov 2024 15:03:11 +0500 Subject: [PATCH 1/3] Updated docs for Child Panels Added an example of using window size classes within ChildPanelsMode --- docs/extensions/compose.md | 37 +++++++++++++++++++++++++++++++++++-- 1 file changed, 35 insertions(+), 2 deletions(-) diff --git a/docs/extensions/compose.md b/docs/extensions/compose.md index 98935a84..ef99bd26 100644 --- a/docs/extensions/compose.md +++ b/docs/extensions/compose.md @@ -294,12 +294,39 @@ The default `HorizontalChildPanelsLayout` layout places child components (panels - If the `mode` is `DUAL`, the Main panel is always displayed on the left side, and then the Details and the Extra panels are displayed in a stack on the right side (next to the Main panel). - If the `mode` is `TRIPLE`, all panels are displayed horizontally side by side. +You can use window size classes from the `material3-window-size-class` package to determine which `ChildPanelsMode` should be used. + +```kotlin title="WindowSizeClass example" +import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass +import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass + +@Composable +fun MyApp() { + val windowSizeClass = calculateWindowSizeClass() + val mode = if (windowSizeClass.widthSizeClass < WindowWidthSizeClass.Expanded) { + ChildPanelsMode.SINGLE + } else { + ChildPanelsMode.DUAL + } + /* ... */ +} +``` + +!!!warning + Function calculateWindowSizeClass will cause recomposition on every window size change. Try to reduce the recomposition scope. + ```kotlin title="Basic example" import androidx.compose.runtime.Composable import com.arkivanov.decompose.extensions.compose.experimental.panels.ChildPanels +import com.arkivanov.decompose.router.panels.ChildPanelsMode @Composable -fun PanelsContent(component: PanelsComponent) { +fun PanelsContent(component: PanelsComponent, mode: ChildPanelsMode) { + DisposableEffect(mode) { + component.setMode(mode) + onDispose { } + } + ChildPanels( panels = component.panels, mainChild = { MainContent(it.instance) }, @@ -327,9 +354,15 @@ import com.arkivanov.decompose.extensions.compose.experimental.stack.animation.f import com.arkivanov.decompose.extensions.compose.experimental.stack.animation.plus import com.arkivanov.decompose.extensions.compose.experimental.stack.animation.scale import com.arkivanov.decompose.extensions.compose.stack.animation.predictiveback.materialPredictiveBackAnimatable +import com.arkivanov.decompose.router.panels.ChildPanelsMode @Composable -fun PanelsContent(component: PanelsComponent) { +fun PanelsContent(component: PanelsComponent, mode: ChildPanelsMode) { + DisposableEffect(mode) { + component.setMode(mode) + onDispose { } + } + ChildPanels( panels = component.panels, mainChild = { MainContent(it.instance) }, From 0c31dc633f13f54b98fe3aa9f9363472219d0f1f Mon Sep 17 00:00:00 2001 From: Alex Panov Date: Tue, 5 Nov 2024 23:42:35 +0500 Subject: [PATCH 2/3] Fixed review discussions about child-panels docs --- docs/extensions/compose.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/docs/extensions/compose.md b/docs/extensions/compose.md index ef99bd26..2db59bfe 100644 --- a/docs/extensions/compose.md +++ b/docs/extensions/compose.md @@ -301,14 +301,13 @@ import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass @Composable -fun MyApp() { - val windowSizeClass = calculateWindowSizeClass() - val mode = if (windowSizeClass.widthSizeClass < WindowWidthSizeClass.Expanded) { +fun calculatePanelsMode(): ChildPanelsMode { + val windowSize = calculateWindowSizeClass() + return if (windowSize.widthSizeClass < WindowWidthSizeClass.Expanded) { ChildPanelsMode.SINGLE } else { ChildPanelsMode.DUAL } - /* ... */ } ``` @@ -321,7 +320,8 @@ import com.arkivanov.decompose.extensions.compose.experimental.panels.ChildPanel import com.arkivanov.decompose.router.panels.ChildPanelsMode @Composable -fun PanelsContent(component: PanelsComponent, mode: ChildPanelsMode) { +fun PanelsContent(component: PanelsComponent) { + val mode = calculatePanelsMode() DisposableEffect(mode) { component.setMode(mode) onDispose { } @@ -357,7 +357,8 @@ import com.arkivanov.decompose.extensions.compose.stack.animation.predictiveback import com.arkivanov.decompose.router.panels.ChildPanelsMode @Composable -fun PanelsContent(component: PanelsComponent, mode: ChildPanelsMode) { +fun PanelsContent(component: PanelsComponent) { + val mode = calculatePanelsMode() DisposableEffect(mode) { component.setMode(mode) onDispose { } From f2fe2f3aa469032a98d3ba7780cb54163dfcf06b Mon Sep 17 00:00:00 2001 From: Alex Panov Date: Fri, 8 Nov 2024 22:44:44 +0500 Subject: [PATCH 3/3] Changed docs about ChildPanels --- docs/extensions/compose.md | 30 ++++++++++++------------------ 1 file changed, 12 insertions(+), 18 deletions(-) diff --git a/docs/extensions/compose.md b/docs/extensions/compose.md index 2db59bfe..efe960ba 100644 --- a/docs/extensions/compose.md +++ b/docs/extensions/compose.md @@ -298,22 +298,24 @@ You can use window size classes from the `material3-window-size-class` package t ```kotlin title="WindowSizeClass example" import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass +import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass.Companion.Expanded import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass +import com.arkivanov.decompose.router.panels.ChildPanelsMode +import com.arkivanov.decompose.router.panels.ChildPanelsMode.SINGLE +import com.arkivanov.decompose.router.panels.ChildPanelsMode.DUAL @Composable -fun calculatePanelsMode(): ChildPanelsMode { +fun ChildPanelsModeChangedEffect(onModeChanged: (ChildPanelsMode) -> Unit) { val windowSize = calculateWindowSizeClass() - return if (windowSize.widthSizeClass < WindowWidthSizeClass.Expanded) { - ChildPanelsMode.SINGLE - } else { - ChildPanelsMode.DUAL + val mode = if (windowSize.widthSizeClass < Expanded) SINGLE else DUAL + + DisposableEffect(mode) { + onModeChanged(mode) + onDispose {} } } ``` -!!!warning - Function calculateWindowSizeClass will cause recomposition on every window size change. Try to reduce the recomposition scope. - ```kotlin title="Basic example" import androidx.compose.runtime.Composable import com.arkivanov.decompose.extensions.compose.experimental.panels.ChildPanels @@ -321,11 +323,7 @@ import com.arkivanov.decompose.router.panels.ChildPanelsMode @Composable fun PanelsContent(component: PanelsComponent) { - val mode = calculatePanelsMode() - DisposableEffect(mode) { - component.setMode(mode) - onDispose { } - } + ChildPanelsModeChangedEffect(component::setMode) ChildPanels( panels = component.panels, @@ -358,11 +356,7 @@ import com.arkivanov.decompose.router.panels.ChildPanelsMode @Composable fun PanelsContent(component: PanelsComponent) { - val mode = calculatePanelsMode() - DisposableEffect(mode) { - component.setMode(mode) - onDispose { } - } + ChildPanelsModeChangedEffect(component::setMode) ChildPanels( panels = component.panels,