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.

The below information is a snippet from the

related section in the Blueprint reference documentation.

Examples

Panel 1
This is my panel
Edit code

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 Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to a child element.
initialPanel	true	IPanel<any>	The initial panel to show on mount. This panel cannot be removed from the stack and will appear when the stack is empty.
onClose	false	(removedPanel: IPanel) => void	Callback invoked when the user presses the back button or a panel invokes the `closePanel()` injected prop method.
onOpen	false	(addedPanel: IPanel) => void	Callback 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 Name	Required?	Type	Description
closePanel	false	() => void	Call 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).
openPanel	false	(panel: IPanel) => void	Call this method to open a new panel on the top of the stack.

Related Reading

Blueprint Reference

Panel Documentation