Skip to content

Commit c95aa85

Browse files
authored
Merge pull request #8264 from IgniteUI/mvenkov/update-toggle-event-emitters
Toggle should emit correct event arguments
2 parents b5f8978 + 0d50c6a commit c95aa85

File tree

6 files changed

+85
-64
lines changed

6 files changed

+85
-64
lines changed

CHANGELOG.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,21 @@ All notable changes for each version of this project will be documented in this
44
## 10.2.0
55

66
### General
7-
- `IgxDatePicker`
8-
- Added `aria-labelledby` property for the input field. This will ensure the users of assistive technologies will also know what component is used for, upon input focus.
7+
- `IgxGridActions`
8+
- Added `asMenuItems` Input for grid actions - `igx-grid-editing-actions`, `igx-grid-pinning-actions`. When set to true will render the related action buttons as separate menu items with button and label.
99
- `IgxInputGroup`
1010
- **Breaking Change** - Removed `fluent`, `fluent_search`, `bootstrap`, and `indigo` as possible values for the `type` input property.
1111
- **Behavioral Change** - The styling of the input group is now dictated by the theme being used. The remaining `types` - `line`, `border`, and `box` will only have effect on the styling when used with the `material` theme. The `search` type will affect styling when used with all themes. Changing the theme at runtime will not change the styling of the input group, a page refresh is required.
1212
- `IgxOverlay`
1313
- **Breaking Change** - `target` property in `PositionSettings` has been deprecated. You can set the attaching target for the component to show in `OverlaySettings` instead.
14+
- `IgxToggleDirective`
15+
- `onAppended`, `onOpened` and `onClosed` events are emitting now arguments of `ToggleViewEventArgs` type.
16+
- `onOpening` and `onClosing` events are emitting now arguments of `ToggleViewCancelableEventArgs` type.
1417
- `IgxSelect`
1518
- Added `aria-labelledby` property for the items list container(marked as `role="listbox"`). This will ensure the users of assistive technologies will also know what the list items container is used for, upon opening.
1619
- `IgxDatePicker`
1720
- **Breaking Change** - Deprecated the `label` property.
18-
- `igxGridActions`
19-
- Added `asMenuItems` Input for grid actions - `igx-grid-editing-actions`, `igx-grid-pinning-actions`. When set to true will render the related action buttons as separate menu items with button and label.
21+
- Added `aria-labelledby` property for the input field. This will ensure the users of assistive technologies will also know what component is used for, upon input focus.
2022
- `igxNavigationDrawer`
2123
- Added `disableAnimation` property which enables/disables the animation, when toggling the drawer. Set to `false` by default.
2224
- `igxTabs`

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -410,7 +410,7 @@ describe('IgxDateRangePicker', () => {
410410
verifyDateRangeInSingleInput();
411411
expect(dateRange.collapsed).toBeTruthy();
412412
expect(dateRange.onClosing.emit).toHaveBeenCalledTimes(1);
413-
expect(dateRange.onClosing.emit).toHaveBeenCalledWith({ cancel: false, event: undefined });
413+
expect(dateRange.onClosing.emit).toHaveBeenCalledWith({ owner: dateRange, cancel: false, event: undefined });
414414
expect(dateRange.onClosed.emit).toHaveBeenCalledTimes(1);
415415
expect(dateRange.onClosed.emit).toHaveBeenCalledWith({ owner: dateRange });
416416
}));
@@ -473,7 +473,7 @@ describe('IgxDateRangePicker', () => {
473473
fixture.detectChanges();
474474
expect(dateRange.collapsed).toBeFalsy();
475475
expect(dateRange.onOpening.emit).toHaveBeenCalledTimes(1);
476-
expect(dateRange.onOpening.emit).toHaveBeenCalledWith({ cancel: false });
476+
expect(dateRange.onOpening.emit).toHaveBeenCalledWith({ owner: dateRange, cancel: false, event: undefined });
477477
expect(dateRange.onOpened.emit).toHaveBeenCalledTimes(1);
478478
expect(dateRange.onOpened.emit).toHaveBeenCalledWith({ owner: dateRange });
479479

@@ -490,7 +490,7 @@ describe('IgxDateRangePicker', () => {
490490
verifyDateRangeInSingleInput();
491491
expect(dateRange.collapsed).toBeTruthy();
492492
expect(dateRange.onClosing.emit).toHaveBeenCalledTimes(1);
493-
expect(dateRange.onClosing.emit).toHaveBeenCalledWith({ cancel: false, event: undefined });
493+
expect(dateRange.onClosing.emit).toHaveBeenCalledWith({ owner: dateRange, cancel: false, event: undefined });
494494
expect(dateRange.onClosed.emit).toHaveBeenCalledTimes(1);
495495
expect(dateRange.onClosed.emit).toHaveBeenCalledWith({ owner: dateRange });
496496
}));
@@ -506,7 +506,7 @@ describe('IgxDateRangePicker', () => {
506506
fixture.detectChanges();
507507
expect(dateRange.collapsed).toBeFalsy();
508508
expect(dateRange.onOpening.emit).toHaveBeenCalledTimes(1);
509-
expect(dateRange.onOpening.emit).toHaveBeenCalledWith({ cancel: false });
509+
expect(dateRange.onOpening.emit).toHaveBeenCalledWith({ owner: dateRange, cancel: false, event: undefined });
510510
expect(dateRange.onOpened.emit).toHaveBeenCalledTimes(1);
511511
expect(dateRange.onOpened.emit).toHaveBeenCalledWith({ owner: dateRange });
512512

@@ -522,7 +522,7 @@ describe('IgxDateRangePicker', () => {
522522
fixture.detectChanges();
523523
expect(dateRange.collapsed).toBeTruthy();
524524
expect(dateRange.onClosing.emit).toHaveBeenCalledTimes(1);
525-
expect(dateRange.onClosing.emit).toHaveBeenCalledWith({ cancel: false, event: undefined });
525+
expect(dateRange.onClosing.emit).toHaveBeenCalledWith({ owner: dateRange, cancel: false, event: undefined });
526526
expect(dateRange.onClosed.emit).toHaveBeenCalledTimes(1);
527527
expect(dateRange.onClosed.emit).toHaveBeenCalledWith({ owner: dateRange });
528528
}));

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -659,8 +659,12 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
659659

660660
/** @hidden @internal */
661661
public handleOpening(event: CancelableBrowserEventArgs & IBaseEventArgs): void {
662-
this.onOpening.emit(event);
663-
this._collapsed = false;
662+
const args = { owner: this, cancel: event.cancel, event: event.event };
663+
this.onOpening.emit(args);
664+
event.cancel = args.cancel;
665+
if (!args.cancel) {
666+
this._collapsed = false;
667+
}
664668
}
665669

666670
/** @hidden @internal */
@@ -675,7 +679,12 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
675679
this.value = null;
676680
}
677681

678-
this.onClosing.emit(event);
682+
const args = { owner: this, cancel: event.cancel, event: event.event };
683+
this.onClosing.emit(args);
684+
event.cancel = args.cancel;
685+
if (args.cancel) {
686+
return;
687+
}
679688

680689
if (this.mode === InteractionMode.DropDown && event.event && !this.element.nativeElement.contains(event.event.target)) {
681690
// outside click

projects/igniteui-angular/src/lib/directives/toggle/README.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ handlers when the toggle is opened and respectively closed.
2929
```html
3030
<button (click)="toggleRef.toggle()">Toggle</button>
3131
<div igxToggle #toggleRef="toggle"
32-
(onOpening)="eventHandler()" (onAppended)="eventHandler()" (onOpened)="eventHandler()"
33-
(onClosing)="eventHandler()" (onClosed)="eventHandler()" >
32+
(onOpening)="eventHandler($event)" (onAppended)="eventHandler($event)" (onOpened)="eventHandler($event)"
33+
(onClosing)="eventHandler($event)" (onClosed)="eventHandler($event)" >
3434
<p>Some content that user would like to make it togglable.</p>
3535
</div>
3636
```
@@ -40,11 +40,11 @@ handlers when the toggle is opened and respectively closed.
4040
### Outputs
4141
| Name | Return Type | Description |
4242
|:--:|:---|:---|
43-
| `onAppended` | `void` | Emits an event after content is appended to the overlay. |
44-
| `onOpening` | `void` | Emits an event before the toggle container is opened. |
45-
| `onOpened` | `void` | Emits an event after the toggle container is opened. |
46-
| `onClosing` | `void` | Emits an event before the toggle container is closed. |
47-
| `onClosed` | `void` | Emits an event after the toggle container is closed. |
43+
| `onAppended` | `ToggleViewEventArgs` | Emits an event after content is appended to the overlay. |
44+
| `onOpening` | `ToggleViewCancelableEventArgs` | Emits an event before the toggle container is opened. |
45+
| `onOpened` | `ToggleViewEventArgs` | Emits an event after the toggle container is opened. |
46+
| `onClosing` | `ToggleViewCancelableEventArgs` | Emits an event before the toggle container is closed. |
47+
| `onClosed` | `ToggleViewEventArgs` | Emits an event after the toggle container is closed. |
4848
### Methods
4949
| Name | Arguments | Return Type | Description |
5050
|:----------:|:------|:------|:------|

projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -573,7 +573,7 @@ describe('IgxToggle', () => {
573573
fixture.detectChanges();
574574

575575
expect(toggle.onClosing.emit).toHaveBeenCalledTimes(1);
576-
expect(toggle.onClosing.emit).toHaveBeenCalledWith({ cancel: false, event: new Event('click') });
576+
expect(toggle.onClosing.emit).toHaveBeenCalledWith({ id: '0', owner: toggle, cancel: false, event: new Event('click') });
577577
expect(toggle.onClosed.emit).toHaveBeenCalledTimes(1);
578578
}));
579579

projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts

Lines changed: 54 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,14 @@ import {
2525
import { filter, takeUntil } from 'rxjs/operators';
2626
import { Subscription, Subject, MonoTypeOperatorFunction } from 'rxjs';
2727
import { OverlayClosingEventArgs } from '../../services/overlay/utilities';
28-
import { CancelableEventArgs, CancelableBrowserEventArgs, IBaseEventArgs } from '../../core/utils';
28+
import { CancelableBrowserEventArgs, IBaseEventArgs } from '../../core/utils';
29+
30+
export interface ToggleViewEventArgs extends IBaseEventArgs {
31+
/** Id of the toggle view */
32+
id: string;
33+
}
34+
35+
export interface ToggleViewCancelableEventArgs extends ToggleViewEventArgs, CancelableBrowserEventArgs { }
2936

3037
@Directive({
3138
exportAs: 'toggle',
@@ -60,7 +67,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
6067
* ```
6168
*/
6269
@Output()
63-
public onOpened = new EventEmitter();
70+
public onOpened = new EventEmitter<ToggleViewEventArgs>();
6471

6572
/**
6673
* Emits an event before the toggle container is opened.
@@ -79,7 +86,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
7986
* ```
8087
*/
8188
@Output()
82-
public onOpening = new EventEmitter<CancelableEventArgs & IBaseEventArgs>();
89+
public onOpening = new EventEmitter<ToggleViewCancelableEventArgs>();
8390

8491
/**
8592
* Emits an event after the toggle container is closed.
@@ -98,7 +105,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
98105
* ```
99106
*/
100107
@Output()
101-
public onClosed = new EventEmitter();
108+
public onClosed = new EventEmitter<ToggleViewEventArgs>();
102109

103110
/**
104111
* Emits an event before the toggle container is closed.
@@ -117,7 +124,26 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
117124
* ```
118125
*/
119126
@Output()
120-
public onClosing = new EventEmitter<CancelableBrowserEventArgs & IBaseEventArgs>();
127+
public onClosing = new EventEmitter<ToggleViewCancelableEventArgs>();
128+
129+
/**
130+
* Emits an event after the toggle element is appended to the overlay container.
131+
*
132+
* ```typescript
133+
* onAppended() {
134+
* alert("Content appended!");
135+
* }
136+
* ```
137+
*
138+
* ```html
139+
* <div
140+
* igxToggle
141+
* (onAppended)='onToggleAppended()'>
142+
* </div>
143+
* ```
144+
*/
145+
@Output()
146+
public onAppended = new EventEmitter<ToggleViewEventArgs>();
121147

122148
private _collapsed = true;
123149
/**
@@ -171,25 +197,6 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
171197
@Optional() private navigationService: IgxNavigationService) {
172198
}
173199

174-
/**
175-
* Emits an event after the toggle element is appended to the overlay container.
176-
*
177-
* ```typescript
178-
* onAppended() {
179-
* alert("Content appended!");
180-
* }
181-
* ```
182-
*
183-
* ```html
184-
* <div
185-
* igxToggle
186-
* (onAppended)='onToggleAppended()'>
187-
* </div>
188-
* ```
189-
*/
190-
@Output()
191-
public onAppended = new EventEmitter();
192-
193200
/**
194201
* Opens the toggle.
195202
*
@@ -214,7 +221,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
214221
this._collapsed = false;
215222
this.cdr.detectChanges();
216223

217-
const openEventArgs: CancelableEventArgs = { cancel: false };
224+
const openEventArgs: ToggleViewCancelableEventArgs = { cancel: false, owner: this, id: this._overlayId };
218225
this.onOpening.emit(openEventArgs);
219226
if (openEventArgs.cancel) {
220227
this._collapsed = true;
@@ -225,32 +232,34 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
225232
this.unsubscribe();
226233

227234
this._overlayAppendedSub = this.overlayService.onAppended.pipe(...this._overlaySubFilter).subscribe(() => {
228-
this.onAppended.emit();
235+
const appendedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId };
236+
this.onAppended.emit(appendedEventArgs);
229237
});
230238

231239
this._overlayOpenedSub = this.overlayService.onOpened.pipe(...this._overlaySubFilter).subscribe(() => {
232-
this.onOpened.emit();
240+
const openedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId };
241+
this.onOpened.emit(openedEventArgs);
233242
});
234243

235244
this._overlayClosingSub = this.overlayService
236-
.onClosing
237-
.pipe(...this._overlaySubFilter)
238-
.subscribe((e: OverlayClosingEventArgs) => {
239-
const eventArgs: CancelableBrowserEventArgs = { cancel: false, event: e.event };
240-
this.onClosing.emit(eventArgs);
241-
e.cancel = eventArgs.cancel;
242-
243-
// in case event is not canceled this will close the toggle and we need to unsubscribe.
244-
// Otherwise if for some reason, e.g. close on outside click, close() gets called before
245-
// onClosed was fired we will end with calling onClosing more than once
246-
if (!e.cancel) {
247-
this.clearSubscription(this._overlayClosingSub);
248-
}
249-
});
245+
.onClosing
246+
.pipe(...this._overlaySubFilter)
247+
.subscribe((e: OverlayClosingEventArgs) => {
248+
const eventArgs: ToggleViewCancelableEventArgs = { cancel: false, event: e.event, owner: this, id: this._overlayId };
249+
this.onClosing.emit(eventArgs);
250+
e.cancel = eventArgs.cancel;
251+
252+
// in case event is not canceled this will close the toggle and we need to unsubscribe.
253+
// Otherwise if for some reason, e.g. close on outside click, close() gets called before
254+
// onClosed was fired we will end with calling onClosing more than once
255+
if (!e.cancel) {
256+
this.clearSubscription(this._overlayClosingSub);
257+
}
258+
});
250259

251260
this._overlayClosedSub = this.overlayService.onClosed
252-
.pipe(...this._overlaySubFilter)
253-
.subscribe(this.overlayClosed);
261+
.pipe(...this._overlaySubFilter)
262+
.subscribe(this.overlayClosed);
254263

255264
this.overlayService.show(this._overlayId, overlaySettings);
256265
}
@@ -353,7 +362,8 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
353362
this.cdr.detectChanges();
354363
delete this._overlayId;
355364
this.unsubscribe();
356-
this.onClosed.emit();
365+
const closedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId };
366+
this.onClosed.emit(closedEventArgs);
357367
}
358368

359369
private unsubscribe() {

0 commit comments

Comments
 (0)