[core] feat(PanelStack): add renderCurrentPanelOnly prop (#3768)

Author: radekmie

packages/core/src/components/panel-stack/_panel-stack.scss

@@ -13,7 +13,6 @@
   display: flex;
   flex-shrink: 0;
   align-items: center;
-  z-index: 1;
   box-shadow: 0 1px $pt-divider-black;
   height: $pt-grid-size * 3;
 
@@ -48,6 +47,7 @@
   @include position-all(absolute, 0);
   display: flex;
   flex-direction: column;
+  z-index: 1;
 
   // border between panels, visible during transition
   margin-right: -1px;
@@ -59,6 +59,10 @@
   .#{$ns}-dark & {
     background-color: $dark-gray4;
   }
+
+  &:nth-last-child(n + 4) {
+    display: none;
+  }
 }
 
 // PUSH transition: enter from right (100%), existing panel moves off left.

packages/core/src/components/panel-stack/panelStack.tsx

@@ -46,6 +46,12 @@ export interface IPanelStackProps extends IProps {
      */
     onOpen?: (addedPanel: IPanel) => void;
 
+    /**
+     * 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.
+     * @default true
+     */
+    renderCurrentPanelOnly?: boolean;
+
     /**
      * Whether to show the header with the "back" button in each panel.
      * @default true
@@ -98,7 +104,7 @@ export class PanelStack extends AbstractPureComponent2<IPanelStackProps, IPanelS
         );
         return (
             <TransitionGroup className={classes} component="div">
-                {this.renderCurrentPanel()}
+                {this.renderPanels()}
             </TransitionGroup>
         );
     }
@@ -115,25 +121,35 @@ export class PanelStack extends AbstractPureComponent2<IPanelStackProps, IPanelS
         }
     }
 
-    private renderCurrentPanel() {
-        const { showPanelHeader = true } = this.props;
+    private renderPanels() {
+        const { renderCurrentPanelOnly = true } = this.props;
         const { stack } = this.state;
         if (stack.length === 0) {
             return null;
         }
-        const [activePanel, previousPanel] = stack;
+        const panelsToRender = renderCurrentPanelOnly ? [stack[0]] : stack;
+        const panelViews = panelsToRender.map(this.renderPanel).reverse();
+        return panelViews;
+    }
+
+    private renderPanel = (panel: IPanel, index: number) => {
+        const { showPanelHeader = true } = this.props;
+        const { stack } = this.state;
+        const active = index === 0;
+        const layer = stack.length - index;
+        const key = `${layer}-${active}`;
         return (
-            <CSSTransition classNames={Classes.PANEL_STACK} key={stack.length} timeout={400}>
+            <CSSTransition classNames={Classes.PANEL_STACK} key={key} timeout={400}>
                 <PanelView
                     onClose={this.handlePanelClose}
                     onOpen={this.handlePanelOpen}
-                    panel={activePanel}
-                    previousPanel={previousPanel}
+                    panel={panel}
+                    previousPanel={stack[index + 1]}
                     showHeader={showPanelHeader}
                 />
             </CSSTransition>
         );
-    }
+    };
 
     private handlePanelClose = (panel: IPanel) => {
         const { stack } = this.state;

packages/core/test/panel-stack/panelStackTests.tsx

@@ -234,6 +234,27 @@ describe("<PanelStack>", () => {
         assert.equal(firstPanelHeader.at(0).text(), "Test Title");
     });
 
+    it("renders only one panel by default", () => {
+        const stack = [{ component: TestPanel, title: "Panel A" }, { component: TestPanel, title: "Panel B" }];
+        panelStackWrapper = renderPanelStack({ stack });
+
+        const panelHeaders = panelStackWrapper.findClass(Classes.HEADING);
+        assert.exists(panelHeaders);
+        assert.equal(panelHeaders.length, 1);
+        assert.equal(panelHeaders.at(0).text(), stack[1].title);
+    });
+
+    it("renders all panels with renderCurrentPanelOnly disabled", () => {
+        const stack = [{ component: TestPanel, title: "Panel A" }, { component: TestPanel, title: "Panel B" }];
+        panelStackWrapper = renderPanelStack({ renderCurrentPanelOnly: false, stack });
+
+        const panelHeaders = panelStackWrapper.findClass(Classes.HEADING);
+        assert.exists(panelHeaders);
+        assert.equal(panelHeaders.length, 2);
+        assert.equal(panelHeaders.at(0).text(), stack[0].title);
+        assert.equal(panelHeaders.at(1).text(), stack[1].title);
+    });
+
     interface IPanelStackWrapper extends ReactWrapper<IPanelStackProps, any> {
         findClass(className: string): ReactWrapper<React.HTMLAttributes<HTMLElement>, any>;
     }

packages/docs-app/src/examples/core-examples/panelStackExample.tsx

@@ -20,6 +20,7 @@ import { Button, H5, Intent, IPanel, IPanelProps, PanelStack, Switch, UL } from
 import { Example, handleBooleanChange, IExampleProps } from "@blueprintjs/docs-theme";
 
 export interface IPanelStackExampleState {
+    activePanelOnly: boolean;
     currentPanelStack: IPanel[];
     showHeader: boolean;
 }
@@ -34,15 +35,22 @@ export class PanelStackExample extends React.PureComponent<IExampleProps, IPanel
     };
 
     public state = {
+        activePanelOnly: true,
         currentPanelStack: [this.initialPanel],
         showHeader: true,
     };
 
+    private toggleActiveOnly = handleBooleanChange((activePanelOnly: boolean) => this.setState({ activePanelOnly }));
     private handleHeaderChange = handleBooleanChange((showHeader: boolean) => this.setState({ showHeader }));
 
     public render() {
         const stackList = (
             <>
+                <Switch
+                    checked={this.state.activePanelOnly}
+                    label="Render active panel only"
+                    onChange={this.toggleActiveOnly}
+                />
                 <Switch checked={this.state.showHeader} label="Show panel header" onChange={this.handleHeaderChange} />
                 <H5>Current stack</H5>
                 <UL>
@@ -59,6 +67,7 @@ export class PanelStackExample extends React.PureComponent<IExampleProps, IPanel
                     initialPanel={this.state.currentPanelStack[0]}
                     onOpen={this.addToPanelStack}
                     onClose={this.removeFromPanelStack}
+                    renderCurrentPanelOnly={this.state.activePanelOnly}
                     showPanelHeader={this.state.showHeader}
                 />
             </Example>