feat(core): onExpanded

onExpanded event is triggered when the list status changes Closes closes #7
andreasonny83 · Sep 10, 2017 · 22aeb11 · 22aeb11
1 parent 749d4fc
commit 22aeb11
Show file tree

Hide file tree

Showing 7 changed files with 173 additions and 100 deletions.
diff --git a/README.md b/README.md
@@ -263,6 +263,32 @@ export class AppComponent {
 | disabled | boolean | When applied to the `expandable-list-item`, disabled the
 | is-expanded | boolean | Reflect the expandable state of the item list element
 
+## Events
+
+| Name | Type | Description |
+| --- | --- | --- |
+| onExpanded | boolean | Triggered when the list expansion status changes
+
+Example:
+
+```ts
+@Component({
+  selector: 'app',
+  template: `
+    <expandable-list class="expandable-list">
+      <expandable-list-item [isExpanded]="listExpanded"
+                            (onExpanded)="listExpanded = $event">
+        <span title>My list</span>
+        <a item href="http://www.goo.gl">Google</a>
+      </expandable-list-item>
+    </expandable-list>
+  `
+})
+export class AppComponent {
+  listExpanded = true;
+}
+```
+
 ## Angular 4
 
 This module will work with Angular 4 projects but requires `@angular/animations`

diff --git a/demo/app.component.css b/demo/app.component.css
@@ -0,0 +1,22 @@
+:host {
+  background: rgb(184, 218, 215);
+  display: block;
+  height: 100%;
+  padding-top: 50px;
+  box-sizing: border-box;
+}
+
+.content-wrapper {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.button {
+  margin: 10px 0;
+  border: 1px solid #333;
+  background: #eee;
+  color: #000;
+  font-size: 14px;
+  border-radius: 4px;
+  padding: 5px 15px;
+}
diff --git a/demo/app.component.html b/demo/app.component.html
@@ -0,0 +1,50 @@
+<div class="content-wrapper">
+  <button class="button"
+          (click)="toggleMe()"> Toggle List</button>
+  <p>List status: {{ listAExpanded ? 'Expanded' : 'Collapsed' }}</p>
+
+  <expandable-list class="expandable-list">
+    <expandable-list-item *ngFor="let item of items"
+                          [isExpanded]="listAExpanded"
+                          (onExpanded)="updateStatus($event)">
+      <span title>{{ item.title }}</span>
+      <a item *ngFor="let i of item.items"
+        [href]="i.link">
+        {{ i.title }}
+      </a>
+    </expandable-list-item>
+
+    <expandable-list-item disabled>
+      <span title>Manual</span>
+      <span secondary>disabled</span>
+    </expandable-list-item>
+
+    <expandable-list-item [isExpanded]="listCExpanded">
+      <span title>Manual</span>
+      <span secondary>first</span>
+
+      <a href="http://www.goo.gl">THIS WON'T BE RENDERED!</a>
+
+      <a item href="http://www.goo.gl">Google</a>
+      <a item href="http://www.goo.gl">Google</a>
+      <a item href="http://www.goo.gl">Google</a>
+
+      <expandable-list-divider></expandable-list-divider>
+
+      <a item href="http://www.goo.gl">Google after</a>
+    </expandable-list-item>
+
+    <expandable-list-item [isExpanded]="listBExpanded" disabled>
+      <span title>Manual</span>
+      <span secondary>second</span>
+      <a href="http://www.goo.gl">Something else</a>
+      <a item href="http://www.goo.gl">Google</a>
+      <a item href="http://www.goo.gl">Google</a>
+      <a item href="http://www.goo.gl">Google</a>
+
+      <expandable-list-divider></expandable-list-divider>
+
+      <a item href="http://www.goo.gl">Google</a>
+    </expandable-list-item>
+  </expandable-list>
+</div>
diff --git a/demo/app.component.ts b/demo/app.component.ts
@@ -1,107 +1,56 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app',
-  styles: [`
-    :host {
-      background: rgb(184, 218, 215);
-      display: block;
-      height: 100%;
-      padding-top: 50px;
-      box-sizing: border-box;
-    }
-    .expandable-list {
-      max-width: 600px;
-      margin: 0 auto;
-    }
-  `],
-  template: `
-    <expandable-list class="expandable-list">
-      <expandable-list-item *ngFor="let item of items" [isExpanded]="listAExpanded">
-        <span title>{{ item.title }}</span>
-        <a item *ngFor="let i of item.items"
-           [href]="i.link">
-          {{ i.title }}
-        </a>
-      </expandable-list-item>
-
-      <expandable-list-item disabled>
-        <span title>Manual</span>
-        <span secondary>disabled</span>
-      </expandable-list-item>
-
-      <expandable-list-item [isExpanded]="listCExpanded">
-        <span title>Manual</span>
-        <span secondary>first</span>
-
-        <a href="http://www.goo.gl">THIS WON'T BE RENDERED!</a>
-
-        <a item href="http://www.goo.gl">Google</a>
-        <a item href="http://www.goo.gl">Google</a>
-        <a item href="http://www.goo.gl">Google</a>
-
-        <expandable-list-divider></expandable-list-divider>
-
-        <a item href="http://www.goo.gl">Google after</a>
-      </expandable-list-item>
-
-      <expandable-list-item [isExpanded]="listBExpanded" disabled>
-        <span title>Manual</span>
-        <span secondary>second</span>
-        <a href="http://www.goo.gl">Something else</a>
-        <a item href="http://www.goo.gl">Google</a>
-        <a item href="http://www.goo.gl">Google</a>
-        <a item href="http://www.goo.gl">Google</a>
-
-        <expandable-list-divider></expandable-list-divider>
-
-        <a item href="http://www.goo.gl">Google</a>
-      </expandable-list-item>
-    </expandable-list>
-  `
+  styleUrls: ['./app.component.css'],
+  templateUrl: './app.component.html',
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   items: any;
   listAExpanded = false;
   listBExpanded = true;
   listCExpanded = false;
 
-  constructor() {
-    this.items = [
-      {
-        title: 'Spices',
-        items: [
-          {
-            title: 'salt',
-            link: 'https://en.wikipedia.org/wiki/Salt'
-          },
-          {
-            title: 'Black pepper',
-            link: 'https://en.wikipedia.org/wiki/Black_pepper'
-          },
-        ]
-      },
-      {
-        title: 'Cats',
-        items: [
-          {
-            title: 'Siberian',
-            link: 'https://en.wikipedia.org/wiki/Siberian_cat'
-          },
-          {
-            title: 'Maine Coon',
-            link: 'https://en.wikipedia.org/wiki/Maine_Coon'
-          },
-          {
-            title: 'American Bobtail',
-            link: 'https://en.wikipedia.org/wiki/American_Bobtail'
-          },
-          {
-            title: 'British Longhair',
-            link: 'https://en.wikipedia.org/wiki/British_Longhair'
-          },
-        ]
-      },
-    ];
+  constructor() { }
+
+  ngOnInit(): void {
+    this.items = [{
+      title: 'Spices',
+      items: [
+        {
+          title: 'salt',
+          link: 'https://en.wikipedia.org/wiki/Salt'
+        }, {
+          title: 'Black pepper',
+          link: 'https://en.wikipedia.org/wiki/Black_pepper'
+        }
+      ]
+    }, {
+      title: 'Cats',
+      items: [
+        {
+          title: 'Siberian',
+          link: 'https://en.wikipedia.org/wiki/Siberian_cat'
+        }, {
+          title: 'Maine Coon',
+          link: 'https://en.wikipedia.org/wiki/Maine_Coon'
+        }, {
+          title: 'American Bobtail',
+          link: 'https://en.wikipedia.org/wiki/American_Bobtail'
+        }, {
+          title: 'British Longhair',
+          link: 'https://en.wikipedia.org/wiki/British_Longhair'
+        }
+      ]
+    }];
+  }
+
+  toggleMe(): void {
+    this.listAExpanded = !this.listAExpanded;
+  }
+
+  updateStatus(event: boolean) {
+    console.log(event);
+    this.listAExpanded = event;
   }
 }
diff --git a/demo/main.map b/demo/main.map
diff --git a/src/expandable-list.component.spec.ts b/src/expandable-list.component.spec.ts
@@ -59,7 +59,7 @@ describe('ExpandableListModule', () => {
     expect(itemContent).toBeTruthy();
   });
 
-  it('The title should contatin a label and a drop-down button', () => {
+  it('the title should contatin a label and a drop-down button', () => {
     fixture.detectChanges();
     let itemTitle = listItemDe.query(By.css('.expandable-list-item-title .expandable-list-item--title'));
     let titleLabel = itemTitle.query(By.css('span'));
@@ -101,7 +101,7 @@ describe('ExpandableListModule', () => {
   });
 
   it('user interaction', () => {
-    let testComponent = fixture.debugElement.componentInstance;
+    let testComponent: TestApp = fixture.debugElement.componentInstance;
 
     fixture.detectChanges();
     let itemTitle = listItemDe.query(By.css('.expandable-list-item-title'));
@@ -124,6 +124,20 @@ describe('ExpandableListModule', () => {
       .toBe('false', 'list item element collapsed');
   });
 
+  it('should trigger an event when the status change', () => {
+    let testComponent: TestApp = fixture.debugElement.componentInstance;
+    let itemTitle = listItemDe.query(By.css('.expandable-list-item-title'));
+
+    fixture.detectChanges();
+
+    expect(testComponent.listExpanded).toBe(false);
+
+    itemTitle.nativeElement.click();
+    fixture.detectChanges();
+
+    expect(testComponent.listExpanded).toBe(true);
+  });
+
   it('user interaction on a disabled list', () => {
     let fixture2 = TestBed.createComponent(TestApp2);
     let listItem2De = fixture2.debugElement.query(By.css('expandable-list-item'));
@@ -148,7 +162,9 @@ describe('ExpandableListModule', () => {
   selector: 'test-app',
   template: `
   <expandable-list class="expandable-list">
-  <expandable-list-item [isExpanded]="listExpanded" [disabled]="listDisabled">
+  <expandable-list-item [isExpanded]="listExpanded"
+                        [disabled]="listDisabled"
+                        (onExpanded)="listExpanded = $event">
     <span title>Title</span>
     <span secondary>secondary</span>
     <a href="http://www.goo.gl">Something else</a>

diff --git a/src/expandable-list.component.ts b/src/expandable-list.component.ts
@@ -12,11 +12,13 @@ import {
   ViewEncapsulation,
   HostBinding,
   Input,
+  Output,
   AfterViewInit,
   OnChanges,
   SimpleChanges,
   ElementRef,
   ViewChild,
+  EventEmitter,
 } from '@angular/core';
 
 @Component({
@@ -69,6 +71,9 @@ export class ExpandableListItemComponent implements AfterViewInit, OnChanges {
     this.isDisabled = (value !== null && `${value}` !== 'false') ? true : null;
   }
 
+  @Output()
+  public onExpanded: EventEmitter<boolean>;
+
   private elHeight: number;
 
   @ViewChild('contentEl')
@@ -84,6 +89,10 @@ export class ExpandableListItemComponent implements AfterViewInit, OnChanges {
     this.elHeight = this.elementView.nativeElement.offsetHeight;
   }
 
+  constructor() {
+    this.onExpanded = new EventEmitter<boolean>();
+  }
+
   public ngOnChanges(changes: SimpleChanges) {
     if ('isExpanded' in changes) {
       this.updateMarginTop();
@@ -106,5 +115,7 @@ export class ExpandableListItemComponent implements AfterViewInit, OnChanges {
     } else {
       this.marginTop = '0';
     }
+
+    this.onExpanded.emit(this.isExpanded);
   }
 }