Backport PR jupyterlab#321: Add collapse and expand methods to `A…

…ccordionPanel`
meeseeksmachine · Aug 1, 2022 · e8502dd · e8502dd
1 parent 62151f8
commit e8502dd
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 17 deletions.
diff --git a/packages/widgets/src/accordionpanel.ts b/packages/widgets/src/accordionpanel.ts
@@ -66,6 +66,38 @@ export class AccordionPanel extends SplitPanel {
     widget.title.changed.connect(this._onTitleChanged, this);
   }
 
+  /**
+   * Collapse the widget at position `index`.
+   *
+   * #### Notes
+   * If no widget is found for `index`, this will bail.
+   *
+   * @param index Widget index
+   */
+  collapse(index: number): void {
+    const widget = (this.layout as AccordionLayout).widgets[index];
+
+    if (widget && !widget.isHidden) {
+      this._toggleExpansion(index);
+    }
+  }
+
+  /**
+   * Expand the widget at position `index`.
+   *
+   * #### Notes
+   * If no widget is found for `index`, this will bail.
+   *
+   * @param index Widget index
+   */
+  expand(index: number): void {
+    const widget = (this.layout as AccordionLayout).widgets[index];
+
+    if (widget && widget.isHidden) {
+      this._toggleExpansion(index);
+    }
+  }
+
   /**
    * Insert a widget at the specified index.
    *
@@ -221,23 +253,7 @@ export class AccordionPanel extends SplitPanel {
       if (index >= 0) {
         event.preventDefault();
         event.stopPropagation();
-        const title = this.titles[index];
-        const widget = (this.layout as AccordionLayout).widgets[index];
-
-        const newSize = this._computeWidgetSize(index);
-        if (newSize) {
-          this.setRelativeSizes(newSize, false);
-        }
-
-        if (widget.isHidden) {
-          title.classList.add('lm-mod-expanded');
-          title.setAttribute('aria-expanded', 'true');
-          widget.show();
-        } else {
-          title.classList.remove('lm-mod-expanded');
-          title.setAttribute('aria-expanded', 'false');
-          widget.hide();
-        }
+        this._toggleExpansion(index);
       }
     }
   }
@@ -296,6 +312,26 @@ export class AccordionPanel extends SplitPanel {
     }
   }
 
+  private _toggleExpansion(index: number) {
+    const title = this.titles[index];
+    const widget = (this.layout as AccordionLayout).widgets[index];
+
+    const newSize = this._computeWidgetSize(index);
+    if (newSize) {
+      this.setRelativeSizes(newSize, false);
+    }
+
+    if (widget.isHidden) {
+      title.classList.add('lm-mod-expanded');
+      title.setAttribute('aria-expanded', 'true');
+      widget.show();
+    } else {
+      title.classList.remove('lm-mod-expanded');
+      title.setAttribute('aria-expanded', 'false');
+      widget.hide();
+    }
+  }
+
   private _widgetSizesCache: WeakMap<Widget, number> = new WeakMap();
 }
 

diff --git a/packages/widgets/tests/src/accordionpanel.spec.ts b/packages/widgets/tests/src/accordionpanel.spec.ts
@@ -137,6 +137,69 @@ describe('@lumino/widgets', () => {
       });
     });
 
+    describe('#collapse()', () => {
+      let panel: AccordionPanel;
+      let layout: AccordionLayout;
+
+      beforeEach(() => {
+        panel = new AccordionPanel();
+        layout = panel.layout as AccordionLayout;
+        let widgets = [new Widget(), new Widget(), new Widget()];
+        widgets.forEach(w => {
+          panel.addWidget(w);
+        });
+        panel.setRelativeSizes([10, 10, 10, 20]);
+        Widget.attach(panel, document.body);
+        MessageLoop.flush();
+      });
+
+      afterEach(() => {
+        panel.dispose();
+      });
+
+      it('should collapse an expanded widget', () => {
+        panel.collapse(1);
+
+        expect(layout.titles[1].getAttribute('aria-expanded')).to.equal(
+          'false'
+        );
+        expect(layout.titles[1].classList.contains('lm-mod-expanded')).to.be
+          .false;
+        expect(layout.widgets[1].isHidden).to.be.true;
+      });
+    });
+
+    describe('#expand()', () => {
+      let panel: AccordionPanel;
+      let layout: AccordionLayout;
+
+      beforeEach(() => {
+        panel = new AccordionPanel();
+        layout = panel.layout as AccordionLayout;
+        let widgets = [new Widget(), new Widget(), new Widget()];
+        widgets.forEach(w => {
+          panel.addWidget(w);
+        });
+        panel.setRelativeSizes([10, 10, 10, 20]);
+        Widget.attach(panel, document.body);
+        MessageLoop.flush();
+      });
+
+      afterEach(() => {
+        panel.dispose();
+      });
+
+      it('should expand a collapsed widget', () => {
+        panel.collapse(1);
+        panel.expand(1);
+
+        expect(layout.titles[0].getAttribute('aria-expanded')).to.equal('true');
+        expect(layout.titles[0].classList.contains('lm-mod-expanded')).to.be
+          .true;
+        expect(layout.widgets[0].isHidden).to.be.false;
+      });
+    });
+
     describe('#handleEvent()', () => {
       let panel: LogAccordionPanel;
       let layout: AccordionLayout;