mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
chore(chips): update chip output names for consistency (#7156)
Related to #6677
This commit is contained in:
@@ -278,7 +278,7 @@ export class MdChipList implements MdFormFieldControl<any>, ControlValueAccessor
|
||||
|
||||
/** Combined stream of all of the child chips' selection change events. */
|
||||
get chipSelectionChanges(): Observable<MdChipSelectionChange> {
|
||||
return merge(...this.chips.map(chip => chip.onSelectionChange));
|
||||
return merge(...this.chips.map(chip => chip.selectionChange));
|
||||
}
|
||||
|
||||
/** Combined stream of all of the child chips' focus change events. */
|
||||
|
||||
@@ -121,7 +121,7 @@ describe('Chips', () => {
|
||||
|
||||
expect(chipNativeElement.classList).toContain('mat-chip-selected');
|
||||
expect(testComponent.chipSelectionChange)
|
||||
.toHaveBeenCalledWith({source: chipInstance, isUserInput: false});
|
||||
.toHaveBeenCalledWith({source: chipInstance, isUserInput: false, selected: true});
|
||||
});
|
||||
|
||||
it('allows removal', () => {
|
||||
@@ -144,7 +144,17 @@ describe('Chips', () => {
|
||||
|
||||
it('should selects/deselects the currently focused chip on SPACE', () => {
|
||||
const SPACE_EVENT: KeyboardEvent = createKeyboardEvent('keydown', SPACE) as KeyboardEvent;
|
||||
const CHIP_EVENT: MdChipSelectionChange = {source: chipInstance, isUserInput: true};
|
||||
const CHIP_SELECTED_EVENT: MdChipSelectionChange = {
|
||||
source: chipInstance,
|
||||
isUserInput: true,
|
||||
selected: true
|
||||
};
|
||||
|
||||
const CHIP_DESELECTED_EVENT: MdChipSelectionChange = {
|
||||
source: chipInstance,
|
||||
isUserInput: true,
|
||||
selected: false
|
||||
};
|
||||
|
||||
spyOn(testComponent, 'chipSelectionChange');
|
||||
|
||||
@@ -154,7 +164,7 @@ describe('Chips', () => {
|
||||
|
||||
expect(chipInstance.selected).toBeTruthy();
|
||||
expect(testComponent.chipSelectionChange).toHaveBeenCalledTimes(1);
|
||||
expect(testComponent.chipSelectionChange).toHaveBeenCalledWith(CHIP_EVENT);
|
||||
expect(testComponent.chipSelectionChange).toHaveBeenCalledWith(CHIP_SELECTED_EVENT);
|
||||
|
||||
// Use the spacebar to deselect the chip
|
||||
chipInstance._handleKeydown(SPACE_EVENT);
|
||||
@@ -162,7 +172,7 @@ describe('Chips', () => {
|
||||
|
||||
expect(chipInstance.selected).toBeFalsy();
|
||||
expect(testComponent.chipSelectionChange).toHaveBeenCalledTimes(2);
|
||||
expect(testComponent.chipSelectionChange).toHaveBeenCalledWith(CHIP_EVENT);
|
||||
expect(testComponent.chipSelectionChange).toHaveBeenCalledWith(CHIP_DESELECTED_EVENT);
|
||||
});
|
||||
|
||||
it('should have correct aria-selected', () => {
|
||||
@@ -280,9 +290,9 @@ describe('Chips', () => {
|
||||
<div *ngIf="shouldShow">
|
||||
<md-chip [selectable]="selectable" [removable]="removable"
|
||||
[color]="color" [selected]="selected" [disabled]="disabled"
|
||||
(focus)="chipFocus($event)" (destroy)="chipDestroy($event)"
|
||||
(onSelectionChange)="chipSelectionChange($event)"
|
||||
(remove)="chipRemove($event)">
|
||||
(focus)="chipFocus($event)" (destroyed)="chipDestroy($event)"
|
||||
(selectionChange)="chipSelectionChange($event)"
|
||||
(removed)="chipRemove($event)">
|
||||
{{name}}
|
||||
</md-chip>
|
||||
</div>
|
||||
|
||||
+49
-15
@@ -34,7 +34,7 @@ export interface MdChipEvent {
|
||||
|
||||
/** Event object emitted by MdChip when selected or deselected. */
|
||||
export class MdChipSelectionChange {
|
||||
constructor(public source: MdChip, public isUserInput = false) { }
|
||||
constructor(public source: MdChip, public selected: boolean, public isUserInput = false) { }
|
||||
}
|
||||
|
||||
|
||||
@@ -98,7 +98,11 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr
|
||||
get selected(): boolean { return this._selected; }
|
||||
set selected(value: boolean) {
|
||||
this._selected = coerceBooleanProperty(value);
|
||||
this.onSelectionChange.emit({source: this, isUserInput: false});
|
||||
this.selectionChange.emit({
|
||||
source: this,
|
||||
isUserInput: false,
|
||||
selected: value
|
||||
});
|
||||
}
|
||||
|
||||
/** The value of the chip. Defaults to the content inside <md-chip> tags. */
|
||||
@@ -132,13 +136,25 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr
|
||||
_onBlur = new Subject<MdChipEvent>();
|
||||
|
||||
/** Emitted when the chip is selected or deselected. */
|
||||
@Output() onSelectionChange = new EventEmitter<MdChipSelectionChange>();
|
||||
@Output() selectionChange = new EventEmitter<MdChipSelectionChange>();
|
||||
|
||||
/** Emitted when the chip is destroyed. */
|
||||
@Output() destroy = new EventEmitter<MdChipEvent>();
|
||||
@Output() destroyed = new EventEmitter<MdChipEvent>();
|
||||
|
||||
/**
|
||||
* Emitted when the chip is destroyed.
|
||||
* @deprecated Use 'destroyed' instead.
|
||||
*/
|
||||
@Output() destroy = this.destroyed;
|
||||
|
||||
/** Emitted when a chip is to be removed. */
|
||||
@Output('remove') onRemove = new EventEmitter<MdChipEvent>();
|
||||
@Output() removed = new EventEmitter<MdChipEvent>();
|
||||
|
||||
/**
|
||||
* Emitted when a chip is to be removed.
|
||||
* @deprecated Use `removed` instead.
|
||||
*/
|
||||
@Output('remove') onRemove = this.removed;
|
||||
|
||||
get ariaSelected(): string | null {
|
||||
return this.selectable ? this.selected.toString() : null;
|
||||
@@ -149,32 +165,50 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.destroy.emit({chip: this});
|
||||
this.destroyed.emit({chip: this});
|
||||
}
|
||||
|
||||
/** Selects the chip. */
|
||||
select(): void {
|
||||
this._selected = true;
|
||||
this.onSelectionChange.emit({source: this, isUserInput: false});
|
||||
this.selectionChange.emit({
|
||||
source: this,
|
||||
isUserInput: false,
|
||||
selected: true
|
||||
});
|
||||
}
|
||||
|
||||
/** Deselects the chip. */
|
||||
deselect(): void {
|
||||
this._selected = false;
|
||||
this.onSelectionChange.emit({source: this, isUserInput: false});
|
||||
this.selectionChange.emit({
|
||||
source: this,
|
||||
isUserInput: false,
|
||||
selected: false
|
||||
});
|
||||
}
|
||||
|
||||
/** Select this chip and emit selected event */
|
||||
selectViaInteraction() {
|
||||
selectViaInteraction(): void {
|
||||
this._selected = true;
|
||||
// Emit select event when selected changes.
|
||||
this.onSelectionChange.emit({source: this, isUserInput: true});
|
||||
this.selectionChange.emit({
|
||||
source: this,
|
||||
isUserInput: true,
|
||||
selected: true
|
||||
});
|
||||
}
|
||||
|
||||
/** Toggles the current selected state of this chip. */
|
||||
toggleSelected(isUserInput: boolean = false): boolean {
|
||||
this._selected = !this.selected;
|
||||
this.onSelectionChange.emit({source: this, isUserInput});
|
||||
|
||||
this.selectionChange.emit({
|
||||
source: this,
|
||||
isUserInput,
|
||||
selected: this._selected
|
||||
});
|
||||
|
||||
return this.selected;
|
||||
}
|
||||
|
||||
@@ -192,7 +226,7 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr
|
||||
*/
|
||||
remove(): void {
|
||||
if (this.removable) {
|
||||
this.onRemove.emit({chip: this});
|
||||
this.removed.emit({chip: this});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -210,7 +244,7 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr
|
||||
}
|
||||
|
||||
/** Handle custom key presses. */
|
||||
_handleKeydown(event: KeyboardEvent) {
|
||||
_handleKeydown(event: KeyboardEvent): void {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
@@ -235,7 +269,7 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr
|
||||
}
|
||||
}
|
||||
|
||||
_blur() {
|
||||
_blur(): void {
|
||||
this._hasFocus = false;
|
||||
this._onBlur.next({chip: this});
|
||||
}
|
||||
@@ -266,7 +300,7 @@ export class MdChipRemove {
|
||||
constructor(protected _parentChip: MdChip) {}
|
||||
|
||||
/** Calls the parent chip's public `remove()` method if applicable. */
|
||||
_handleClick() {
|
||||
_handleClick(): void {
|
||||
if (this._parentChip.removable) {
|
||||
this._parentChip.remove();
|
||||
}
|
||||
|
||||
@@ -23,7 +23,7 @@ Chips can be selected via the `selected` property. Selection can be disabled by
|
||||
`selectable` to `false` on the `<md-chip-list>`.
|
||||
|
||||
Whenever the selection state changes, a `ChipSelectionChange` event will be emitted via
|
||||
`(onSelectionChange)`.
|
||||
`(selectionChange)`.
|
||||
|
||||
### Disabled chips
|
||||
Individual chips may be disabled by applying the `disabled` attribute to the chip. When disabled,
|
||||
|
||||
Reference in New Issue
Block a user