Question: open new PanelStack after fetching data and pass the returned data to the new panel?

[emadabdulrahim]

Question

Does PanelStack Component assume that all data is loaded? I'm trying to make a breadcrumb like using the PanelStack when I click on one of the items on the list of a panel stack, it will fetch some data then I want to open a panel and pass it this new data.

Note: The data I'm fetching is recursive, that's why I'm interested to see if I could use PanelStack for that use case.

Basically, I want to open a panel after some async action has happened and pass it data return from that action.

How many I implement such behavior, if possible?

[invliD]

The PanelStack doesn't assume anything, really. You can open new panels from existing panels using the openPanel prop:

this.props.openPanel({
    component: NewPanelComponent
    props: {
        data: "whatever",
    },
    title: "cool panel",
});

Do note, however, that props are not changeable after a panel has been opened. The props first used to open the panel will forever be the props of that panel until it is closed.

Since you want to load data before opening a panel that shouldn't be an issue, so you could do the following:

interface IFolderPanelProps {
    contents: IFolder[],
}

class FolderPanel extends React.PureComponent<IFolderPanelProps & IPanelProps> {
    public render() {
        return <div>{this.props.contents.map(this.renderFolder)}</div>;
    }

    private renderFolder(folder: IFolder) {
        return <div onClick={() => this.openFolder(folder)}>{folder.name}</div>;
    }

    private openFolder = async (folder: IFolder) => {
        const contents = await loadFolderContents(folder.id);
        this.props.openPanel({
            component: FolderPanel,
            props: {
                contents,
            },
            title: folder.name,
        });
    }
}