Panel stack

A PanelStack shows one panel at a time. Opening a panel slides it in on top, and a back button in its header returns to the previous one.

Usage#

import { type PanelProps, PanelStack } from "@clawscale/react";

A panel is an object with a title and a renderPanel component, plus optional props for that component. PanelStack passes two actions to the component: openPanel pushes a new panel and closePanel removes the current one.

PanelStack2 is a deprecated alias of PanelStack.

Examples#

Drill-down settings#

initialPanel is the bottom of the stack. It cannot be closed. Panels are absolutely positioned, so give the stack a fixed height.

Pipeline settings

core/panel-stack/settings.tsx

import { Card, Icon, Menu, MenuItem, type PanelProps, PanelStack, Switch } from "@clawscale/react";

function AlertsPanel() {
  return (
    <div style={{ padding: 16 }}>
      <Switch defaultChecked label="Email on failure" />
      <Switch label="Slack on success" />
      <Switch defaultChecked label="Page on SLA breach" />
    </div>
  );
}

function RetentionPanel({ closePanel }: PanelProps<object>) {
  return (
    <Menu>
      {["7 days", "30 days", "90 days", "1 year"].map((period) => (
        <MenuItem key={period} text={period} onClick={closePanel} />
      ))}
    </Menu>
  );
}

function SettingsPanel({ openPanel }: PanelProps<object>) {
  const next = <Icon icon="chevron-right" />;
  const openAlerts = () => openPanel({ title: "Alerts", renderPanel: AlertsPanel });
  const openRetention = () => openPanel({ title: "Retention", renderPanel: RetentionPanel });
  return (
    <Menu>
      <MenuItem icon="notifications" text="Alerts" labelElement={next} onClick={openAlerts} />
      <MenuItem icon="history" text="Retention" labelElement={next} onClick={openRetention} />
    </Menu>
  );
}

export default function PanelStackSettings() {
  // Panels are absolutely positioned. The grid stretches the stack to the size of the card.
  return (
    <Card style={{ display: "grid", height: 220, overflow: "hidden", padding: 0, width: 300 }}>
      <PanelStack initialPanel={{ title: "Pipeline settings", renderPanel: SettingsPanel }} />
    </Card>
  );
}

Only the top panel is mounted, so a covered panel loses its state. Set renderActivePanelOnly={false} to keep every panel mounted. To control the stack, pass stack and add or remove panels at the end of the array.

Props interface#

interface PanelStackProps extends Props@clawscale/react

Props	Description
`className`	`string` A space-delimited list of class names to pass along to a child element. Inherited from `Props`
`initialPanel`	`T` The initial panel to show on mount. This panel cannot be removed from the stack and will appear when the stack is empty. This prop is only used in uncontrolled mode and is thus mutually exclusive with the `stack` prop.
`onClose`	`(removedPanel: T) => void` Callback invoked when the user presses the back button or a panel closes itself with a `closePanel()` action.
`onOpen`	`(addedPanel: T) => void` Callback invoked when a panel opens a new panel with an `openPanel(panel)` action.
`renderActivePanelOnly`	`boolean` = `true` If false, PanelStack will render all panels in the stack to the DOM, allowing their React component trees to maintain state as a user navigates through the stack. Panels other than the currently active one will be invisible.
`showPanelHeader`	`boolean` = `true` Whether to show the header with the "back" button in each panel.
`stack`	`readonly T[]` The full stack of panels in controlled mode. The last panel in the stack will be displayed.

PanelProps<P> types a panel component: your own props P plus the panel actions.

type PanelProps@clawscale/react

Use this interface in your panel component's props type to access these panel action callbacks which are injected by PanelStack.

Props	Description
`closePanel`required	`(): void` Call this method to programatically close this panel. If this is the only panel on the stack then this method will do nothing. Inherited from `PanelActions`
`openPanel`required	`<P>(panel: Panel<P>): void` Call this method to open a new panel on the top of the stack. Inherited from `PanelActions`