Skip to content

Commit

Permalink
refactor(chips): Manage chip foundations instead of chips in the chip…
Browse files Browse the repository at this point in the history
… set foundation (#2397)

BREAKING CHANGE: Expose a foundation getter in MDCChips
  • Loading branch information
bonniezhou authored Apr 3, 2018
1 parent a767a0f commit 10a75f6
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 23 deletions.
7 changes: 5 additions & 2 deletions packages/mdc-chips/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,7 @@ To use the `MDCChip` and `MDCChipSet` classes, [import](../../docs/importing-js.

Method Signature | Description
--- | ---
`get foundation() => MDCChipFoundation` | Returns the foundation
`toggleSelected() => void` | Proxies to the foundation's `toggleSelected` method

Property | Value Type | Description
Expand Down Expand Up @@ -182,8 +183,10 @@ Method Signature | Description
`deregisterEventHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the root element
`registerTrailingIconInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the trailing icon element
`deregisterTrailingIconInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the trailing icon element
`notifyInteraction() => void` | Emits a custom event `MDCChip:interaction` denoting the chip has been interacted with, which bubbles to the parent `mdc-chip-set` element
`notifyTrailingIconInteraction() => void` | Emits a custom event `MDCChip:trailingIconInteraction` denoting the chip's trailing icon has been interacted with, which bubbles to the parent `mdc-chip-set` element
`notifyInteraction() => void` | Emits a custom event `MDCChip:interaction` denoting the chip has been interacted with
`notifyTrailingIconInteraction() => void` | Emits a custom event `MDCChip:trailingIconInteraction` denoting the chip's trailing icon has been interacted with

> _NOTE_: The custom events emitted by `notifyInteraction` and `notifyTrailingIconInteraction` must pass along the target chip in its event `detail`, as well as bubble to the parent `mdc-chip-set` element.
#### `MDCChipSetAdapter`

Expand Down
21 changes: 10 additions & 11 deletions packages/mdc-chips/chip-set/foundation.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,7 @@

import MDCFoundation from '@material/base/foundation';
import MDCChipSetAdapter from './adapter';
// eslint-disable-next-line no-unused-vars
import {MDCChip, MDCChipFoundation} from '../chip/index';
import MDCChipFoundation from '../chip/foundation';
import {strings, cssClasses} from './constants';

/**
Expand Down Expand Up @@ -57,7 +56,7 @@ class MDCChipSetFoundation extends MDCFoundation {

/**
* The selected chips in the set. Only used for choice chip set or filter chip set.
* @private {!Array<!MDCChip>}
* @private {!Array<!MDCChipFoundation>}
*/
this.selectedChips_ = [];

Expand All @@ -81,25 +80,25 @@ class MDCChipSetFoundation extends MDCFoundation {
* @private
*/
handleChipInteraction_(evt) {
const {chip} = evt.detail;
const chipFoundation = evt.detail.chip.foundation;
if (this.adapter_.hasClass(cssClasses.CHOICE)) {
if (this.selectedChips_.length === 0) {
this.selectedChips_[0] = chip;
} else if (this.selectedChips_[0] !== chip) {
this.selectedChips_[0] = chipFoundation;
} else if (this.selectedChips_[0] !== chipFoundation) {
this.selectedChips_[0].toggleSelected();
this.selectedChips_[0] = chip;
this.selectedChips_[0] = chipFoundation;
} else {
this.selectedChips_ = [];
}
chip.toggleSelected();
chipFoundation.toggleSelected();
} else if (this.adapter_.hasClass(cssClasses.FILTER)) {
const index = this.selectedChips_.indexOf(chip);
const index = this.selectedChips_.indexOf(chipFoundation);
if (index >= 0) {
this.selectedChips_.splice(index, 1);
} else {
this.selectedChips_.push(chip);
this.selectedChips_.push(chipFoundation);
}
chip.toggleSelected();
chipFoundation.toggleSelected();
}
}
}
Expand Down
7 changes: 7 additions & 0 deletions packages/mdc-chips/chip/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,13 @@ class MDCChip extends MDCComponent {
this.foundation_.toggleSelected();
}

/**
* @return {!MDCChipFoundation}
*/
get foundation() {
return this.foundation_;
}

/**
* @return {!MDCChipFoundation}
*/
Expand Down
24 changes: 14 additions & 10 deletions test/unit/mdc-chips/mdc-chip-set.foundation.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,14 @@ const setupTest = () => {
const mockAdapter = td.object(MDCChipSetFoundation.defaultAdapter);
const foundation = new MDCChipSetFoundation(mockAdapter);
const chipA = td.object({
toggleSelected: () => {},
foundation: {
toggleSelected: () => {},
},
});
const chipB = td.object({
toggleSelected: () => {},
foundation: {
toggleSelected: () => {},
},
});
return {foundation, mockAdapter, chipA, chipB};
};
Expand Down Expand Up @@ -81,24 +85,24 @@ test('on custom MDCChip:interaction event toggles selected state with single sel
chip: chipA,
},
});
td.verify(chipA.toggleSelected());
td.verify(chipA.foundation.toggleSelected());
assert.equal(foundation.selectedChips_.length, 1);

chipInteractionHandler({
detail: {
chip: chipB,
},
});
td.verify(chipA.toggleSelected());
td.verify(chipB.toggleSelected());
td.verify(chipA.foundation.toggleSelected());
td.verify(chipB.foundation.toggleSelected());
assert.equal(foundation.selectedChips_.length, 1);

chipInteractionHandler({
detail: {
chip: chipB,
},
});
td.verify(chipB.toggleSelected());
td.verify(chipB.foundation.toggleSelected());
assert.equal(foundation.selectedChips_.length, 0);
});

Expand All @@ -119,30 +123,30 @@ test('on custom MDCChip:interaction event toggles selected state with multi-sele
chip: chipA,
},
});
td.verify(chipA.toggleSelected());
td.verify(chipA.foundation.toggleSelected());
assert.equal(foundation.selectedChips_.length, 1);

chipInteractionHandler({
detail: {
chip: chipB,
},
});
td.verify(chipB.toggleSelected());
td.verify(chipB.foundation.toggleSelected());
assert.equal(foundation.selectedChips_.length, 2);

chipInteractionHandler({
detail: {
chip: chipB,
},
});
td.verify(chipB.toggleSelected());
td.verify(chipB.foundation.toggleSelected());
assert.equal(foundation.selectedChips_.length, 1);

chipInteractionHandler({
detail: {
chip: chipA,
},
});
td.verify(chipA.toggleSelected());
td.verify(chipA.foundation.toggleSelected());
assert.equal(foundation.selectedChips_.length, 0);
});

0 comments on commit 10a75f6

Please sign in to comment.