How to use PanelNavigation with ListDetailPaneScaffold?

[jorge-aparicio]

Hello, I could have been misunderstanding the final conclusion #617 but I'm currently trying to get ListDetailPaneScaffold working properly with a Panel Component.

My issues seem to be related to not understanding how to replace the rememberListDetailPaneScaffoldNavigator with the decompose navigation, if its even possible.

After reading the docs again it may be that Panel Navigation is more of an alternative to ListDetailPaneScaffold than a compatibility api.

Could I get some help clarifying this? possible get a brain dead example of how to use this form of navigation with a simple list,detail, Content function and how the panelMode changes when the display size changes?
Here is my sample code in case there's something simple I can change. Any and all help/suggestions are appreciated!

Edit:

I have found the example requested above so no longer need that. Would still like to know if its possible to get ListDetailPaneScaffold working or not though thanks!

Panel Component

class ChangesPanelComponent(
    componentContext: ComponentContext,
) : PanelsComponent<Change>, ComponentContext by componentContext {
    private val nav = PanelsNavigation<ChangesConfig.List, ChangesConfig.Details, Nothing>()


    @OptIn(ExperimentalSerializationApi::class)
    override val panels: Value<ChildPanels<*, ListComponent<Change>, *, DetailsComponent<Change>, *, Nothing>> =
        childPanels(
            source = nav,
            serializers = ChangesConfig.List.serializer() to ChangesConfig.Details.serializer(),
            initialPanels = { Panels(main = ChangesConfig.List) },
            handleBackButton = true,
            mainFactory = { _, ctx ->
                ChangesListComponent(
                    componentContext = ctx,
                    itemClicked = { nav.activateDetails(details = ChangesConfig.Details(item = it)) },
                )
            },
            detailsFactory = { cfg, ctx ->
                ChangesDetailsComponent(
                    componentContext = ctx,
                    change = cfg.item,
                    onFinished = nav::dismissDetails,
                )
            },
        )

    override fun setMode(mode: ChildPanelsMode) {
        nav.setMode(mode)
    }

    private sealed interface ChangesConfig { // 6
        @Serializable
        data object List : ChangesConfig

        @Serializable
        data class Details(val item: Change) : ChangesConfig
    }
}

Content

@Preview
@Composable
fun ChangesListDetailContent(
    component: ChangesPanelComponent,
    modifier: Modifier = Modifier,
) {
    val navigator = rememberListDetailPaneScaffoldNavigator<Change>()

    // Render the ListDetailPaneScaffold with the child stack
    ListDetailPaneScaffold(
        directive = navigator.scaffoldDirective,
        value = navigator.scaffoldValue,
        listPane = {
            AnimatedPane {
                ChangesListContent(
                    component = component.panels.value.main.instance,
                    modifier = modifier.fillMaxSize(),
                )
            }
        },
        detailPane = {
            AnimatedPane {
                component.panels.value.details?.let {
                    ChangesDetailContent(
                        component = it.instance
                    )
                }
            }
        },
    )
}

[arkivanov]

I never worked with ListDetailPaneScaffold but it looks like it's actually a navigator. My understanding is that you shouldn't need that at all. Just use childPanels navigation model and ChildPanels Composable function for displaying panel components. See the example. Also please see the docs, there you can find an example of using WindowWidthSizeClass.

[jorge-aparicio]

Got it thanks so much for the speedy response this is exactly what I was looking for!