Skip to content

Commit 7490f3b

Browse files
Louw Swarthenetiriki
Louw Swart
authored and
henetiriki
committed
chore(accordion): adds disabled property to CDK accordion-item (#8141)
Adds a disabled property to Accordion Item in the CDK. Closes #8141
1 parent cd12561 commit 7490f3b

File tree

7 files changed

+122
-74
lines changed

7 files changed

+122
-74
lines changed

‎src/cdk/accordion/accordion-item.spec.ts‎

Lines changed: 102 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -31,45 +31,96 @@ describe('CdkAccordionItem', () => {
3131
.injector.get(CdkAccordionItem);
3232
});
3333

34-
it('should toggle its expanded state', () => {
35-
expect(item.expanded).toBeFalsy();
36-
item.toggle();
37-
expect(item.expanded).toBeTruthy();
38-
item.toggle();
39-
expect(item.expanded).toBeFalsy();
34+
describe('that is not disabled', () => {
35+
beforeEach(() => {
36+
item.disabled = false;
37+
});
38+
39+
it('should toggle its expanded state', () => {
40+
expect(item.expanded).toBeFalsy();
41+
item.toggle();
42+
expect(item.expanded).toBeTruthy();
43+
item.toggle();
44+
expect(item.expanded).toBeFalsy();
45+
});
46+
47+
it('should set its expanded state to expanded', () => {
48+
item.expanded = false;
49+
item.open();
50+
expect(item.expanded).toBeTruthy();
51+
});
52+
53+
it('should set its expanded state to closed', () => {
54+
item.expanded = true;
55+
item.close();
56+
expect(item.expanded).toBeFalsy();
57+
});
58+
59+
it('should emit a closed event', () => {
60+
spyOn(item.closed, 'emit');
61+
item.close();
62+
fixture.detectChanges();
63+
expect(item.closed.emit).toHaveBeenCalledWith();
64+
});
65+
66+
it('should emit an opened event', () => {
67+
spyOn(item.opened, 'emit');
68+
item.open();
69+
fixture.detectChanges();
70+
expect(item.opened.emit).toHaveBeenCalledWith();
71+
});
72+
73+
it('should emit a destroyed event', () => {
74+
spyOn(item.destroyed, 'emit');
75+
item.ngOnDestroy();
76+
fixture.detectChanges();
77+
expect(item.destroyed.emit).toHaveBeenCalledWith();
78+
});
4079
});
4180

42-
it('should set its expanded state to expanded', () => {
43-
item.expanded = false;
44-
item.open();
45-
expect(item.expanded).toBeTruthy();
46-
});
47-
48-
it('should set its expanded state to closed', () => {
49-
item.expanded = true;
50-
item.close();
51-
expect(item.expanded).toBeFalsy();
52-
});
53-
54-
it('should emit a closed event', () => {
55-
spyOn(item.closed, 'emit');
56-
item.close();
57-
fixture.detectChanges();
58-
expect(item.closed.emit).toHaveBeenCalledWith();
59-
});
60-
61-
it('should emit an opened event', () => {
62-
spyOn(item.opened, 'emit');
63-
item.open();
64-
fixture.detectChanges();
65-
expect(item.opened.emit).toHaveBeenCalledWith();
66-
});
67-
68-
it('should emit an destroyed event', () => {
69-
spyOn(item.destroyed, 'emit');
70-
item.ngOnDestroy();
71-
fixture.detectChanges();
72-
expect(item.destroyed.emit).toHaveBeenCalledWith();
81+
describe('that is disabled', () => {
82+
beforeEach(() => {
83+
item.disabled = true;
84+
});
85+
86+
it('should not toggle its expanded state', () => {
87+
expect(item.expanded).toBeFalsy();
88+
item.toggle();
89+
expect(item.expanded).toBeFalsy();
90+
});
91+
92+
it('should not set its expanded state to expanded', () => {
93+
item.expanded = false;
94+
item.open();
95+
expect(item.expanded).toBeFalsy();
96+
});
97+
98+
it('should not set its expanded state to closed', () => {
99+
item.expanded = true;
100+
item.close();
101+
expect(item.expanded).toBeTruthy();
102+
});
103+
104+
it('should not emit a closed event', () => {
105+
spyOn(item.closed, 'emit');
106+
item.close();
107+
fixture.detectChanges();
108+
expect(item.closed.emit).not.toHaveBeenCalled();
109+
});
110+
111+
it('should not emit an opened event', () => {
112+
spyOn(item.opened, 'emit');
113+
item.open();
114+
fixture.detectChanges();
115+
expect(item.opened.emit).not.toHaveBeenCalled();
116+
});
117+
118+
it('should emit a destroyed event', () => {
119+
spyOn(item.destroyed, 'emit');
120+
item.ngOnDestroy();
121+
fixture.detectChanges();
122+
expect(item.destroyed.emit).toHaveBeenCalledWith();
123+
});
73124
});
74125
});
75126

@@ -99,6 +150,20 @@ describe('CdkAccordionItem', () => {
99150
expect(firstItem.expanded).toBeTruthy();
100151
expect(secondItem.expanded).toBeTruthy();
101152
});
153+
154+
it('should not change expanded state for disabled items', () => {
155+
firstItem.disabled = true;
156+
expect(firstItem.expanded).toBeFalsy();
157+
expect(secondItem.expanded).toBeFalsy();
158+
firstItem.open();
159+
fixture.detectChanges();
160+
expect(firstItem.expanded).toBeFalsy();
161+
expect(secondItem.expanded).toBeFalsy();
162+
secondItem.open();
163+
fixture.detectChanges();
164+
expect(firstItem.expanded).toBeFalsy();
165+
expect(secondItem.expanded).toBeTruthy();
166+
});
102167
});
103168

104169

‎src/cdk/accordion/accordion-item.ts‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,12 @@ export class CdkAccordionItem implements OnDestroy {
6868
}
6969
private _expanded: boolean;
7070

71+
/** Whether the AccordionItem is disabled. */
72+
@Input()
73+
get disabled() { return this._disabled; }
74+
set disabled(disabled: any) { this._disabled = coerceBooleanProperty(disabled); }
75+
private _disabled: boolean = false;
76+
7177
/** Unregister function for _expansionDispatcher. */
7278
private _removeUniqueSelectionListener: () => void = () => {};
7379

@@ -91,16 +97,22 @@ export class CdkAccordionItem implements OnDestroy {
9197

9298
/** Toggles the expanded state of the accordion item. */
9399
toggle(): void {
94-
this.expanded = !this.expanded;
100+
if (!this.disabled) {
101+
this.expanded = !this.expanded;
102+
}
95103
}
96104

97105
/** Sets the expanded state of the accordion item to false. */
98106
close(): void {
99-
this.expanded = false;
107+
if (!this.disabled) {
108+
this.expanded = false;
109+
}
100110
}
101111

102112
/** Sets the expanded state of the accordion item to true. */
103113
open(): void {
104-
this.expanded = true;
114+
if (!this.disabled) {
115+
this.expanded = true;
116+
}
105117
}
106118
}

‎src/cdk/accordion/accordion.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export class CdkAccordion {
2323
/** A readonly id value to use for unique selection coordination. */
2424
readonly id = `cdk-accordion-${nextId++}`;
2525

26-
/** Whether the accordion should allow multiple expanded accordion items simulateously. */
26+
/** Whether the accordion should allow multiple expanded accordion items simultaneously. */
2727
@Input() get multi(): boolean { return this._multi; }
2828
set multi(multi: boolean) { this._multi = coerceBooleanProperty(multi); }
2929
private _multi: boolean = false;

‎src/cdk/accordion/public-api.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
export {CdkAccordionItem} from './accordion-item';
9+
export {CdkAccordionItem} from './accordion-item';
1010
export {CdkAccordion} from './accordion';
1111
export * from './accordion-module';

‎src/lib/expansion/expansion-module.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,7 @@ import {A11yModule} from '@angular/cdk/a11y';
1414
import {MatAccordion} from './accordion';
1515
import {
1616
MatExpansionPanel,
17-
MatExpansionPanelActionRow,
18-
MatExpansionPanelBase
17+
MatExpansionPanelActionRow
1918
} from './expansion-panel';
2019
import {
2120
MatExpansionPanelDescription,
@@ -35,7 +34,6 @@ import {
3534
MatExpansionPanelDescription
3635
],
3736
declarations: [
38-
MatExpansionPanelBase,
3937
MatAccordion,
4038
MatExpansionPanel,
4139
MatExpansionPanelActionRow,

‎src/lib/expansion/expansion-panel-header.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -109,9 +109,7 @@ export class MatExpansionPanelHeader implements OnDestroy {
109109

110110
/** Toggles the expanded state of the panel. */
111111
_toggle(): void {
112-
if (!this.panel.disabled) {
113-
this.panel.toggle();
114-
}
112+
this.panel.toggle();
115113
}
116114

117115
/** Gets whether the panel is expanded. */

‎src/lib/expansion/expansion-panel.ts‎

Lines changed: 1 addition & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import {
1212
ChangeDetectorRef,
1313
Component,
1414
Directive,
15-
forwardRef,
1615
Host,
1716
Input,
1817
OnChanges,
@@ -23,7 +22,6 @@ import {
2322
} from '@angular/core';
2423
import {CdkAccordionItem} from '@angular/cdk/accordion';
2524
import {UniqueSelectionDispatcher} from '@angular/cdk/collections';
26-
import {CanDisable, mixinDisabled} from '@angular/material/core';
2725
import {Subject} from 'rxjs/Subject';
2826
import {MatAccordion} from './accordion';
2927
import {coerceBooleanProperty} from '@angular/cdk/coercion';
@@ -34,24 +32,6 @@ export const _CdkAccordionItem = CdkAccordionItem;
3432
/** Time and timing curve for expansion panel animations. */
3533
export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)';
3634

37-
// Boilerplate for applying mixins to MatExpansionPanel.
38-
/** @docs-private */
39-
@Component({
40-
template: '',
41-
moduleId: module.id,
42-
encapsulation: ViewEncapsulation.None,
43-
preserveWhitespaces: false,
44-
changeDetection: ChangeDetectionStrategy.OnPush,
45-
})
46-
export class MatExpansionPanelBase extends _CdkAccordionItem {
47-
constructor(accordion: MatAccordion,
48-
_changeDetectorRef: ChangeDetectorRef,
49-
_uniqueSelectionDispatcher: UniqueSelectionDispatcher) {
50-
super(accordion, _changeDetectorRef, _uniqueSelectionDispatcher);
51-
}
52-
}
53-
export const _MatExpansionPanelMixinBase = mixinDisabled(MatExpansionPanelBase);
54-
5535
/** MatExpansionPanel's states. */
5636
export type MatExpansionPanelState = 'expanded' | 'collapsed';
5737

@@ -79,9 +59,6 @@ export type MatExpansionPanelState = 'expanded' | 'collapsed';
7959
'[class.mat-expanded]': 'expanded',
8060
'[class.mat-expansion-panel-spacing]': '_hasSpacing()',
8161
},
82-
providers: [
83-
{provide: _MatExpansionPanelMixinBase, useExisting: forwardRef(() => MatExpansionPanel)}
84-
],
8562
animations: [
8663
trigger('bodyExpansion', [
8764
state('collapsed', style({height: '0px', visibility: 'hidden'})),
@@ -90,9 +67,7 @@ export type MatExpansionPanelState = 'expanded' | 'collapsed';
9067
]),
9168
],
9269
})
93-
export class MatExpansionPanel extends _MatExpansionPanelMixinBase
94-
implements CanDisable, OnChanges, OnDestroy {
95-
70+
export class MatExpansionPanel extends _CdkAccordionItem implements OnChanges, OnDestroy {
9671
/** Whether the toggle indicator should be hidden. */
9772
@Input()
9873
get hideToggle(): boolean {

0 commit comments

Comments
 (0)