Add expansion toggled signal of subpanels in an Accordion Panel

packages/widgets/src/accordionpanel.ts

@@ -3,6 +3,7 @@
 
 import { ArrayExt } from '@lumino/algorithm';
 import { Message } from '@lumino/messaging';
+import { ISignal, Signal } from '@lumino/signaling';
 import { AccordionLayout } from './accordionlayout';
 import { SplitLayout } from './splitlayout';
 import { SplitPanel } from './splitpanel';
@@ -53,6 +54,13 @@ export class AccordionPanel extends SplitPanel {
  return (this.layout as AccordionLayout).titles;
  }
 
+ /**
+ * A signal emitted when a widget of the AccordionPanel is collapsed or expanded.
+ */
+ get expansionToggled(): ISignal<this, number> {
+ return this._expansionToggled;
+ }
+
  /**
  * Add a widget to the end of the panel.
  *
@@ -330,9 +338,13 @@ export class AccordionPanel extends SplitPanel {
  title.setAttribute('aria-expanded', 'false');
  widget.hide();
  }
+
+ // Emit the expansion state signal.
+ this._expansionToggled.emit(index);
  }
 
  private _widgetSizesCache: WeakMap<Widget, number> = new WeakMap();
+ private _expansionToggled = new Signal<this, number>(this);
 }
 
 /**

packages/widgets/tests/src/accordionpanel.spec.ts

@@ -230,6 +230,44 @@ describe('@lumino/widgets', () => {
  });
  });
 
+ describe('#expansionToggled', () => {
+ let panel: AccordionPanel;
+
+ beforeEach(() => {
+ panel = new AccordionPanel();
+ 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 be emitted when the a widget is collapsed', done => {
+ panel.expansionToggled.connect((sender, _) => {
+ expect(sender).to.equal(panel);
+ done();
+ });
+ panel.collapse(0);
+ });
+
+ it('should be emitted when the a widget is expanded', done => {
+ // first collapse a widget
+ panel.collapse(0);
+
+ panel.expansionToggled.connect((sender, _) => {
+ expect(sender).to.equal(panel);
+ done();
+ });
+ panel.expand(0);
+ });
+ });
+
  describe('#handleEvent()', () => {
  let panel: LogAccordionPanel;
  let layout: AccordionLayout;

review/api/widgets.api.md

@@ -56,6 +56,7 @@ export class AccordionPanel extends SplitPanel {
  addWidget(widget: Widget): void;
  collapse(index: number): void;
  expand(index: number): void;
+ get expansionToggled(): ISignal<this, number>;
  handleEvent(event: Event): void;
  insertWidget(index: number, widget: Widget): void;
  protected onAfterDetach(msg: Message): void;