Panel Stack

Introduction

PanelStack manages a stack of panels and displays only the topmost panel.

Each panel appears with a header containing a "back" button to return to the previous panel. The bottom-most initialPanel cannot be closed or removed from the stack. Panels use CSSTransition for seamless transitions.

Examples

Panel 1

This is my panel

Usage

PanelStack

Panels are supplied as IPanel objects like { component, props, title }, where component and props are used to render the panel element and title will appear in the header and back button. This breakdown allows the component to avoid cloning elements. Note that each panel is only mounted when it is atop the stack and is unmounted when it is closed or when a panel opens above it.

PanelStack injects its own IPanelProps into each panel (in addition to the props defined alongside the component), providing methods to imperatively close the current panel or open a new one on top of it.

import { Button, IPanelProps, PanelStack } from "@commure/components-foundation";
class MyPanel extends React.Component<IPanelProps> {
public render() {
return <Button onClick={this.openSettingsPanel} text="Settings" />
}
private openSettingsPanel() {
// openPanel (and closePanel) are injected by PanelStack
this.props.openPanel({
component: SettingsPanel, // <- class or stateless function type
props: { enabled: true }, // <- SettingsPanel props without IPanelProps
title: "Settings", // <- appears in header and back button
});
}
}
class SettingsPanel extends React.Component<IPanelProps & { enabled: boolean }> {
// ...
}
function MyPanelStack() {
return <PanelStack initialPanel={{ component: MyPanel, title: "Home" }} />
}

API Reference

PanelStack

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to a child element.
initialPaneltrueIPanel<any>The initial panel to show on mount. This panel cannot be removed from the stack and will appear when the stack is empty.
onClosefalse(removedPanel: IPanel) => voidCallback invoked when the user presses the back button or a panel invokes the `closePanel()` injected prop method.
onOpenfalse(addedPanel: IPanel) => voidCallback invoked when a panel invokes the `openPanel(panel)` injected prop method.

Panel

Include this interface in your panel component's props type to access these two functions which are injected by PanelStack.

import { IPanelProps } from "@commure/components-foundation";
export class SettingsPanel extends React.Component<IPanelProps & ISettingsPanelProps> {...}
Prop NameRequired?TypeDescription
closePanelfalse() => voidCall this method to programmatically close this panel. If this is the only panel on the stack then this method will do nothing. Remember that the panel header always contains a "back" button that closes this panel on click (unless there is only one panel on the stack).
openPanelfalse(panel: IPanel) => voidCall this method to open a new panel on the top of the stack.

Related Reading

Blueprint Reference
Panel Documentation