feat(button group): add valueChange output (#2722)

akveo · Jun 15, 2021 · 39c610c · 39c610c
1 parent 74096d0
commit 39c610c
Show file tree

Hide file tree

Showing 8 changed files with 141 additions and 9 deletions.
diff --git a/src/app/playground-components.ts b/src/app/playground-components.ts
@@ -292,6 +292,12 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
         component: 'ButtonGroupStatusesComponent',
         name: 'Button Group Statuses',
       },
+      {
+        path: 'button-group-value-change.component',
+        link: '/button-group/button-group-value-change.component',
+        component: 'ButtonGroupValueChangeComponent',
+        name: 'Button Group Value Change',
+      },
     ],
   },
   {

diff --git a/src/framework/theme/components/button-group/button-group.component.ts b/src/framework/theme/components/button-group/button-group.component.ts
@@ -10,14 +10,16 @@ import {
   ChangeDetectorRef,
   Component,
   ContentChildren,
+  EventEmitter,
   HostBinding,
   Input,
   OnChanges,
+  Output,
   QueryList,
   SimpleChanges,
 } from '@angular/core';
 import { from, merge, Observable, Subject } from 'rxjs';
-import { filter, switchMap, takeUntil } from 'rxjs/operators';
+import { debounceTime, filter, startWith, switchMap, takeUntil } from 'rxjs/operators';
 
 import { NbStatusService } from '../../services/status.service';
 import { convertToBoolProperty, NbBooleanInput } from '../helpers';
@@ -55,6 +57,11 @@ import { NbButtonToggleAppearance, NbButtonToggleChange, NbButtonToggleDirective
  * toggles pressed, you need to add `multiple` attributes to the `<nb-button-toggle>`.
  * @stacked-example(Button Group Multiple, button-group/button-group-multiple.component)
  *
+ * To know which buttons are currently pressed listen to `(valueChange)` on the `nb-button-group`. Event
+ * contains an array of values of currently pressed button toggles. You can assign a value to the
+ * `[nbButtonToggle]` via the `value` input.
+ * @stacked-example(Button Group Value Change, button-group/button-group-value-change.component)
+ *
  * To disable a group of buttons, add a `disabled` attribute to the `<nb-button-group>`.
  * @stacked-example(Button Group Disabled, button-group/button-group-disabled.component)
  *
@@ -100,6 +107,8 @@ import { NbButtonToggleAppearance, NbButtonToggleChange, NbButtonToggleDirective
 })
 export class NbButtonGroupComponent implements OnChanges, AfterContentInit {
 
+  protected lastEmittedValue: any[] = [];
+
   protected readonly destroy$: Subject<void> = new Subject<void>();
   protected readonly buttonsChange$ = new Subject<NbButton[]>();
 
@@ -194,6 +203,12 @@ export class NbButtonGroupComponent implements OnChanges, AfterContentInit {
   }
   static ngAcceptInputType_ghost: NbBooleanInput;
 
+  /**
+   * Emits when `nbButtonToggle` pressed state change. `$event` contains an array of the currently pressed button
+   * toggles.
+   */
+  @Output() valueChange = new EventEmitter<any[]>()
+
   @HostBinding('attr.role') role = 'group';
 
   @HostBinding('class')
@@ -260,6 +275,16 @@ export class NbButtonGroupComponent implements OnChanges, AfterContentInit {
           .filter((button: NbButtonToggleDirective) => button !== source)
           .forEach((button: NbButtonToggleDirective) => button._updatePressed(false));
       });
+
+    merge(...buttonsPressedChange$)
+      .pipe(
+        // Use startWith to emit if some buttons are initially pressed.
+        startWith(''),
+        // Use debounce to emit change once when pressed state change in multiple button toggles.
+        debounceTime(0),
+        takeUntil(merge(this.buttonsChange$, this.destroy$)),
+      )
+      .subscribe(() => this.emitCurrentValue(toggleButtons));
   }
 
   protected syncButtonsProperties(buttons: NbButton[]): void {
@@ -273,4 +298,18 @@ export class NbButtonGroupComponent implements OnChanges, AfterContentInit {
       });
     });
   }
+
+  protected emitCurrentValue(toggleButtons: NbButtonToggleDirective[]): void {
+    const pressedToggleValues = toggleButtons
+      .filter((b: NbButtonToggleDirective) => b.pressed && typeof b.value !== 'undefined')
+      .map((b: NbButtonToggleDirective) => b.value);
+
+    // Prevent multiple emissions of empty value.
+    if (pressedToggleValues.length === 0 && this.lastEmittedValue.length === 0) {
+      return;
+    }
+
+    this.valueChange.emit(pressedToggleValues);
+    this.lastEmittedValue = pressedToggleValues;
+  }
 }
diff --git a/src/framework/theme/components/button-group/button-group.spec.ts b/src/framework/theme/components/button-group/button-group.spec.ts
@@ -4,7 +4,7 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { ComponentFixture, TestBed, fakeAsync, flush } from '@angular/core/testing';
+import { ComponentFixture, TestBed, fakeAsync, flush, tick } from '@angular/core/testing';
 import { Component, QueryList, ViewChild, ViewChildren } from '@angular/core';
 
 import {
@@ -26,13 +26,15 @@ import {
                      [status]="status"
                      [shape]="shape"
                      [appearance]="appearance"
-                     [disabled]="groupDisabled">
-      <button nbButtonToggle>A</button>
-      <button nbButtonToggle>B</button>
-      <button nbButtonToggle>C</button>
-      <button nbButtonToggle>D</button>
-      <button nbButtonToggle>E</button>
-      <button nbButtonToggle *ngIf="showLastButton">F</button>
+                     [disabled]="groupDisabled"
+                     [multiple]="multiple"
+                     (valueChange)="onValueChange($event)">
+      <button nbButtonToggle value="A">A</button>
+      <button nbButtonToggle value="B">B</button>
+      <button nbButtonToggle value="C">C</button>
+      <button nbButtonToggle value="D">D</button>
+      <button nbButtonToggle value="E">E</button>
+      <button nbButtonToggle value="F" *ngIf="showLastButton">F</button>
     </nb-button-group>
   `,
 })
@@ -42,11 +44,14 @@ export class NbButtonGroupTestComponent {
   status: NbComponentStatus = 'danger';
   appearance: NbButtonToggleAppearance = 'outline';
   groupDisabled: boolean = false;
+  multiple: boolean = false;
 
   showLastButton = false;
 
   @ViewChild(NbButtonGroupComponent) buttonGroup: NbButtonGroupComponent;
   @ViewChildren(NbButtonToggleDirective) toggleButtons: QueryList<NbButtonToggleDirective>;
+
+  onValueChange() {}
 }
 
 describe('Component: NbButtonGroup', () => {
@@ -134,4 +139,23 @@ describe('Component: NbButtonGroup', () => {
     fixture.detectChanges();
     expect(toggleButtons.last.disabled).toEqual(true);
   }));
+
+  it('should correctly emit active buttons', fakeAsync(() => {
+    const clickButton = (el: HTMLElement, index = 0) => {
+      el.querySelectorAll<HTMLButtonElement>('[nbButtonToggle]')[index].click();
+    }
+    const nativeElement = fixture.nativeElement;
+    spyOn(testComponent, 'onValueChange').and.callThrough();
+    testComponent.showLastButton = true;
+    testComponent.multiple = true;
+    fixture.detectChanges();
+
+    clickButton(nativeElement, 0);
+    tick();
+    expect(testComponent.onValueChange).toHaveBeenCalledWith(['A']);
+
+    clickButton(nativeElement, 5);
+    tick();
+    expect(testComponent.onValueChange).toHaveBeenCalledWith(['A', 'F']);
+  }))
 });
diff --git a/src/framework/theme/components/button-group/button-toggle.directive.ts b/src/framework/theme/components/button-group/button-toggle.directive.ts
@@ -49,6 +49,11 @@ export class NbButtonToggleDirective extends NbButton {
 
   @Input() appearance: NbButtonToggleAppearance = 'filled';
 
+  /**
+   * A value associated with the button.
+   */
+  @Input() value: any;
+
   /**
    * Controls button pressed state
    **/

diff --git a/src/playground/with-layout/button-group/button-group-routing.module.ts b/src/playground/with-layout/button-group/button-group-routing.module.ts
@@ -15,6 +15,7 @@ import { ButtonAndButtonToggleGroupsComponent } from './button-and-button-toggle
 import { ButtonGroupInteractiveComponent } from './button-group-interactive.component';
 import { ButtonGroupDisabledComponent } from './button-group-disabled.component';
 import { ButtonGroupStatusesComponent } from './button-group-statuses.component';
+import { ButtonGroupValueChangeComponent } from './button-group-value-change.component';
 
 const routes: Route[] = [
   {
@@ -53,6 +54,10 @@ const routes: Route[] = [
     path: 'button-group-statuses.component',
     component: ButtonGroupStatusesComponent,
   },
+  {
+    path: 'button-group-value-change.component',
+    component: ButtonGroupValueChangeComponent,
+  },
 ];
 
 @NgModule({

diff --git a/src/playground/with-layout/button-group/button-group-value-change.component.html b/src/playground/with-layout/button-group/button-group-value-change.component.html
@@ -0,0 +1,28 @@
+<nb-card>
+  <nb-card-body>
+    <p>
+      Group with single select value: {{ singleSelectGroupValue | json }}
+    </p>
+
+    <nb-button-group (valueChange)="updateSingleSelectGroupValue($event)">
+      <button nbButtonToggle value="One">One</button>
+      <button nbButtonToggle value="Two">Two</button>
+      <button nbButtonToggle value="Three">Three</button>
+    </nb-button-group>
+  </nb-card-body>
+</nb-card>
+
+<nb-card>
+  <nb-card-body>
+    <p>
+      Group with single select value: {{ multiSelectGroupValue | json }}
+    </p>
+
+    <nb-button-group multiple (valueChange)="updateMultiSelectGroupValue($event)">
+      <button nbButtonToggle value="One">One</button>
+      <button nbButtonToggle value="Two">Two</button>
+      <button nbButtonToggle value="Three">Three</button>
+    </nb-button-group>
+  </nb-card-body>
+</nb-card>
+
diff --git a/src/playground/with-layout/button-group/button-group-value-change.component.ts b/src/playground/with-layout/button-group/button-group-value-change.component.ts
@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
+
+@Component({
+  templateUrl: './button-group-value-change.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ButtonGroupValueChangeComponent {
+  singleSelectGroupValue = [];
+  multiSelectGroupValue = [];
+
+  constructor(private cd: ChangeDetectorRef) {
+  }
+
+  updateSingleSelectGroupValue(value): void {
+    this.singleSelectGroupValue = value;
+    this.cd.markForCheck();
+  }
+
+  updateMultiSelectGroupValue(value): void {
+    this.multiSelectGroupValue = value;
+    this.cd.markForCheck();
+  }
+}
diff --git a/src/playground/with-layout/button-group/button-group.module.ts b/src/playground/with-layout/button-group/button-group.module.ts
@@ -25,6 +25,7 @@ import { ButtonAndButtonToggleGroupsComponent } from './button-and-button-toggle
 import { ButtonGroupInteractiveComponent } from './button-group-interactive.component';
 import { ButtonGroupDisabledComponent } from './button-group-disabled.component';
 import { ButtonGroupStatusesComponent } from './button-group-statuses.component';
+import { ButtonGroupValueChangeComponent } from './button-group-value-change.component';
 
 @NgModule({
   declarations: [
@@ -37,6 +38,7 @@ import { ButtonGroupStatusesComponent } from './button-group-statuses.component'
     ButtonGroupInteractiveComponent,
     ButtonGroupDisabledComponent,
     ButtonGroupStatusesComponent,
+    ButtonGroupValueChangeComponent,
   ],
   imports: [
     CommonModule,