Skip to content

Commit

Permalink
fix(chips): Use superclass properties without trailing underscores
Browse files Browse the repository at this point in the history 
PiperOrigin-RevId: 312693340
  • Loading branch information
@patrickrodee @copybara-github
patrickrodee authored and copybara-github committed May 21, 2020
1 parent 740860e commit cf7747e
Show file tree
Hide file tree
Showing 6 changed files with 143 additions and 131 deletions.
21 changes: 10 additions & 11 deletions packages/mdc-chips/chip-set/component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export class MDCChipSet extends MDCComponent<MDCChipSetFoundation> {
* @return An array of the IDs of all selected chips.
*/
get selectedChipIds(): ReadonlyArray<string> {
return this.foundation_.getSelectedChipIds();
return this.foundation.getSelectedChipIds();
}

private chips_!: MDCChip[]; // assigned in initialize()
Expand All @@ -69,18 +69,18 @@ export class MDCChipSet extends MDCComponent<MDCChipSetFoundation> {
initialSyncWithDOM() {
this.chips_.forEach((chip) => {
if (chip.id && chip.selected) {
this.foundation_.select(chip.id);
this.foundation.select(chip.id);
}
});

this.handleChipInteraction_ = (evt) =>
this.foundation_.handleChipInteraction(evt.detail);
this.foundation.handleChipInteraction(evt.detail);
this.handleChipSelection_ = (evt) =>
this.foundation_.handleChipSelection(evt.detail);
this.foundation.handleChipSelection(evt.detail);
this.handleChipRemoval_ = (evt) =>
this.foundation_.handleChipRemoval(evt.detail);
this.foundation.handleChipRemoval(evt.detail);
this.handleChipNavigation_ = (evt) =>
this.foundation_.handleChipNavigation(evt.detail);
this.foundation.handleChipNavigation(evt.detail);
this.listen(INTERACTION_EVENT, this.handleChipInteraction_);
this.listen(SELECTION_EVENT, this.handleChipSelection_);
this.listen(REMOVAL_EVENT, this.handleChipRemoval_);
Expand Down Expand Up @@ -125,10 +125,9 @@ export class MDCChipSet extends MDCComponent<MDCChipSetFoundation> {
getIndexOfChipById: (chipId) => {
return this.findChipIndex_(chipId);
},
hasClass: (className) => this.root_.classList.contains(className),
isRTL: () =>
window.getComputedStyle(this.root_).getPropertyValue('direction') ===
'rtl',
hasClass: (className) => this.root.classList.contains(className),
isRTL: () => window.getComputedStyle(this.root).getPropertyValue(
'direction') === 'rtl',
removeChipAtIndex: (index) => {
if (index >= 0 && index < this.chips_.length) {
this.chips_[index].destroy();
Expand All @@ -153,7 +152,7 @@ export class MDCChipSet extends MDCComponent<MDCChipSetFoundation> {
*/
private instantiateChips_(chipFactory: MDCChipFactory): MDCChip[] {
const chipElements: Element[] =
[].slice.call(this.root_.querySelectorAll(CHIP_SELECTOR));
[].slice.call(this.root.querySelectorAll(CHIP_SELECTOR));
return chipElements.map((el) => {
el.id = el.id || `mdc-chip-${++idCounter}`;
return chipFactory(el);
Expand Down
55 changes: 31 additions & 24 deletions packages/mdc-chips/chip-set/foundation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,9 +81,10 @@ export class MDCChipSetFoundation extends MDCFoundation<MDCChipSetAdapter> {
* Handles a chip interaction event
*/
handleChipInteraction({chipId}: MDCChipInteractionEventDetail) {
const index = this.adapter_.getIndexOfChipById(chipId);
const index = this.adapter.getIndexOfChipById(chipId);
this.removeFocusFromChipsExcept_(index);
if (this.adapter_.hasClass(cssClasses.CHOICE) || this.adapter_.hasClass(cssClasses.FILTER)) {
if (this.adapter.hasClass(cssClasses.CHOICE) ||
this.adapter.hasClass(cssClasses.FILTER)) {
this.toggleSelect_(chipId);
}
}
Expand Down Expand Up @@ -111,31 +112,31 @@ export class MDCChipSetFoundation extends MDCFoundation<MDCChipSetAdapter> {
*/
handleChipRemoval({chipId, removedAnnouncement}: MDCChipRemovalEventDetail) {
if (removedAnnouncement) {
this.adapter_.announceMessage(removedAnnouncement);
this.adapter.announceMessage(removedAnnouncement);
}

const index = this.adapter_.getIndexOfChipById(chipId);
const index = this.adapter.getIndexOfChipById(chipId);
this.deselectAndNotifyClients_(chipId);
this.adapter_.removeChipAtIndex(index);
const maxIndex = this.adapter_.getChipListCount() - 1;
this.adapter.removeChipAtIndex(index);
const maxIndex = this.adapter.getChipListCount() - 1;
const nextIndex = Math.min(index, maxIndex);
this.removeFocusFromChipsExcept_(nextIndex);
// After removing a chip, we should focus the trailing action for the next chip.
this.adapter_.focusChipTrailingActionAtIndex(nextIndex);
this.adapter.focusChipTrailingActionAtIndex(nextIndex);
}

/**
* Handles a chip navigation event.
*/
handleChipNavigation({chipId, key, source}: MDCChipNavigationEventDetail) {
const maxIndex = this.adapter_.getChipListCount() - 1;
let index = this.adapter_.getIndexOfChipById(chipId);
const maxIndex = this.adapter.getChipListCount() - 1;
let index = this.adapter.getIndexOfChipById(chipId);
// Early exit if the index is out of range or the key is unusable
if (index === -1 || !navigationKeys.has(key)) {
return;
}

const isRTL = this.adapter_.isRTL();
const isRTL = this.adapter.isRTL();
const isLeftKey = key === chipStrings.ARROW_LEFT_KEY ||
key === chipStrings.IE_ARROW_LEFT_KEY;
const isRightKey = key === chipStrings.ARROW_RIGHT_KEY ||
Expand Down Expand Up @@ -168,25 +169,25 @@ export class MDCChipSetFoundation extends MDCFoundation<MDCChipSetAdapter> {
private focusChipAction_(index: number, key: string, source: EventSource) {
const shouldJumpChips = jumpChipKeys.has(key);
if (shouldJumpChips && source === EventSource.PRIMARY) {
return this.adapter_.focusChipPrimaryActionAtIndex(index);
return this.adapter.focusChipPrimaryActionAtIndex(index);
}

if (shouldJumpChips && source === EventSource.TRAILING) {
return this.adapter_.focusChipTrailingActionAtIndex(index);
return this.adapter.focusChipTrailingActionAtIndex(index);
}

const dir = this.getDirection_(key);
if (dir === Direction.LEFT) {
return this.adapter_.focusChipTrailingActionAtIndex(index);
return this.adapter.focusChipTrailingActionAtIndex(index);
}

if (dir === Direction.RIGHT) {
return this.adapter_.focusChipPrimaryActionAtIndex(index);
return this.adapter.focusChipPrimaryActionAtIndex(index);
}
}

private getDirection_(key: string): Direction {
const isRTL = this.adapter_.isRTL();
const isRTL = this.adapter.isRTL();
const isLeftKey = key === chipStrings.ARROW_LEFT_KEY ||
key === chipStrings.IE_ARROW_LEFT_KEY;
const isRightKey = key === chipStrings.ARROW_RIGHT_KEY ||
Expand All @@ -205,8 +206,9 @@ export class MDCChipSetFoundation extends MDCFoundation<MDCChipSetAdapter> {
const index = this.selectedChipIds_.indexOf(chipId);
if (index >= 0) {
this.selectedChipIds_.splice(index, 1);
const chipIndex = this.adapter_.getIndexOfChipById(chipId);
this.adapter_.selectChipAtIndex(chipIndex, /** isSelected */ false, shouldNotifyClients);
const chipIndex = this.adapter.getIndexOfChipById(chipId);
this.adapter.selectChipAtIndex(
chipIndex, /** isSelected */ false, shouldNotifyClients);
}
}

Expand All @@ -229,10 +231,10 @@ export class MDCChipSetFoundation extends MDCFoundation<MDCChipSetAdapter> {
}

private removeFocusFromChipsExcept_(index: number) {
const chipCount = this.adapter_.getChipListCount();
const chipCount = this.adapter.getChipListCount();
for (let i = 0; i < chipCount; i++) {
if (i !== index) {
this.adapter_.removeFocusFromChipAtIndex(i);
this.adapter.removeFocusFromChipAtIndex(i);
}
}
}
Expand All @@ -246,15 +248,20 @@ export class MDCChipSetFoundation extends MDCFoundation<MDCChipSetAdapter> {
return;
}

if (this.adapter_.hasClass(cssClasses.CHOICE) && this.selectedChipIds_.length > 0) {
if (this.adapter.hasClass(cssClasses.CHOICE) &&
this.selectedChipIds_.length > 0) {
const previouslySelectedChip = this.selectedChipIds_[0];
const previouslySelectedIndex = this.adapter_.getIndexOfChipById(previouslySelectedChip);
const previouslySelectedIndex =
this.adapter.getIndexOfChipById(previouslySelectedChip);
this.selectedChipIds_ = [];
this.adapter_.selectChipAtIndex(previouslySelectedIndex, /** isSelected */ false, shouldNotifyClients);
this.adapter.selectChipAtIndex(
previouslySelectedIndex, /** isSelected */ false,
shouldNotifyClients);
}
this.selectedChipIds_.push(chipId);
const index = this.adapter_.getIndexOfChipById(chipId);
this.adapter_.selectChipAtIndex(index, /** isSelected */ true, shouldNotifyClients);
const index = this.adapter.getIndexOfChipById(chipId);
this.adapter.selectChipAtIndex(
index, /** isSelected */ true, shouldNotifyClients);
}
}

Expand Down
73 changes: 37 additions & 36 deletions packages/mdc-chips/chip/component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,43 +44,43 @@ export class MDCChip extends MDCComponent<MDCChipFoundation> implements MDCRippl
* @return Whether the chip is selected.
*/
get selected(): boolean {
return this.foundation_.isSelected();
return this.foundation.isSelected();
}

/**
* Sets selected state on the chip.
*/
set selected(selected: boolean) {
this.foundation_.setSelected(selected);
this.foundation.setSelected(selected);
}

/**
* @return Whether a trailing icon click should trigger exit/removal of the chip.
*/
get shouldRemoveOnTrailingIconClick(): boolean {
return this.foundation_.getShouldRemoveOnTrailingIconClick();
return this.foundation.getShouldRemoveOnTrailingIconClick();
}

/**
* Sets whether a trailing icon click should trigger exit/removal of the chip.
*/
set shouldRemoveOnTrailingIconClick(shouldRemove: boolean) {
this.foundation_.setShouldRemoveOnTrailingIconClick(shouldRemove);
this.foundation.setShouldRemoveOnTrailingIconClick(shouldRemove);
}

/**
* Sets whether a clicking on the chip should focus the primary action.
*/
set setShouldFocusPrimaryActionOnClick(shouldFocus: boolean) {
this.foundation_.setShouldFocusPrimaryActionOnClick(shouldFocus);
this.foundation.setShouldFocusPrimaryActionOnClick(shouldFocus);
}

get ripple(): MDCRipple {
return this.ripple_;
}

get id(): string {
return this.root_.id;
return this.root.id;
}

static attachTo(root: Element) {
Expand Down Expand Up @@ -118,12 +118,13 @@ export class MDCChip extends MDCComponent<MDCChipFoundation> implements MDCRippl
trailingActionFactory:
MDCChipTrailingActionFactory = (el) => new MDCChipTrailingAction(el),
) {
this.leadingIcon_ = this.root_.querySelector(strings.LEADING_ICON_SELECTOR);
this.checkmark_ = this.root_.querySelector(strings.CHECKMARK_SELECTOR);
this.primaryAction_ = this.root_.querySelector(strings.PRIMARY_ACTION_SELECTOR);
this.leadingIcon_ = this.root.querySelector(strings.LEADING_ICON_SELECTOR);
this.checkmark_ = this.root.querySelector(strings.CHECKMARK_SELECTOR);
this.primaryAction_ =
this.root.querySelector(strings.PRIMARY_ACTION_SELECTOR);

const trailingActionEl =
this.root_.querySelector(strings.TRAILING_ACTION_SELECTOR);
this.root.querySelector(strings.TRAILING_ACTION_SELECTOR);

if (trailingActionEl) {
this.trailingAction_ = trailingActionFactory(trailingActionEl);
Expand All @@ -133,35 +134,36 @@ export class MDCChip extends MDCComponent<MDCChipFoundation> implements MDCRippl
// To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
const rippleAdapter: MDCRippleAdapter = {
...MDCRipple.createAdapter(this),
computeBoundingRect: () => this.foundation_.getDimensions(),
computeBoundingRect: () => this.foundation.getDimensions(),
};
this.ripple_ = rippleFactory(this.root_, new MDCRippleFoundation(rippleAdapter));
this.ripple_ =
rippleFactory(this.root, new MDCRippleFoundation(rippleAdapter));
}

initialSyncWithDOM() {
// Custom events
this.handleTrailingActionInteraction_ = () => {
this.foundation_.handleTrailingActionInteraction();
this.foundation.handleTrailingActionInteraction();
};
this.handleTrailingActionNavigation_ =
(evt: MDCChipTrailingActionNavigationEvent) => {
this.foundation_.handleTrailingActionNavigation(evt);
this.foundation.handleTrailingActionNavigation(evt);
};
// Native events
this.handleClick_ = () => {
this.foundation_.handleClick();
this.foundation.handleClick();
};
this.handleKeydown_ = (evt: KeyboardEvent) => {
this.foundation_.handleKeydown(evt);
this.foundation.handleKeydown(evt);
};
this.handleTransitionEnd_ = (evt: TransitionEvent) => {
this.foundation_.handleTransitionEnd(evt);
this.foundation.handleTransitionEnd(evt);
};
this.handleFocusIn_ = (evt: FocusEvent) => {
this.foundation_.handleFocusIn(evt);
this.foundation.handleFocusIn(evt);
};
this.handleFocusOut_ = (evt: FocusEvent) => {
this.foundation_.handleFocusOut(evt);
this.foundation.handleFocusOut(evt);
};


Expand Down Expand Up @@ -206,14 +208,14 @@ export class MDCChip extends MDCComponent<MDCChipFoundation> implements MDCRippl
* Begins the exit animation which leads to removal of the chip.
*/
beginExit() {
this.foundation_.beginExit();
this.foundation.beginExit();
}

getDefaultFoundation() {
// DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
// To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
const adapter: MDCChipAdapter = {
addClass: (className) => this.root_.classList.add(className),
addClass: (className) => this.root.classList.add(className),
addClassToLeadingIcon: (className) => {
if (this.leadingIcon_) {
this.leadingIcon_.classList.add(className);
Expand All @@ -231,17 +233,16 @@ export class MDCChip extends MDCComponent<MDCChipFoundation> implements MDCRippl
this.trailingAction_.focus();
}
},
getAttribute: (attr) => this.root_.getAttribute(attr),
getAttribute: (attr) => this.root.getAttribute(attr),
getCheckmarkBoundingClientRect: () =>
this.checkmark_ ? this.checkmark_.getBoundingClientRect() : null,
getComputedStyleValue: (propertyName) =>
window.getComputedStyle(this.root_).getPropertyValue(propertyName),
getRootBoundingClientRect: () => this.root_.getBoundingClientRect(),
hasClass: (className) => this.root_.classList.contains(className),
window.getComputedStyle(this.root).getPropertyValue(propertyName),
getRootBoundingClientRect: () => this.root.getBoundingClientRect(),
hasClass: (className) => this.root.classList.contains(className),
hasLeadingIcon: () => !!this.leadingIcon_,
isRTL: () =>
window.getComputedStyle(this.root_).getPropertyValue('direction') ===
'rtl',
isRTL: () => window.getComputedStyle(this.root).getPropertyValue(
'direction') === 'rtl',
isTrailingActionNavigable: () => {
if (this.trailingAction_) {
return this.trailingAction_.isNavigable();
Expand Down Expand Up @@ -269,7 +270,7 @@ export class MDCChip extends MDCComponent<MDCChipFoundation> implements MDCRippl
this.emit<MDCChipInteractionEventDetail>(
strings.TRAILING_ICON_INTERACTION_EVENT, {chipId: this.id},
true /* shouldBubble */),
removeClass: (className) => this.root_.classList.remove(className),
removeClass: (className) => this.root.classList.remove(className),
removeClassFromLeadingIcon: (className) => {
if (this.leadingIcon_) {
this.leadingIcon_.classList.remove(className);
Expand All @@ -286,31 +287,31 @@ export class MDCChip extends MDCComponent<MDCChipFoundation> implements MDCRippl
}
},
setStyleProperty: (propertyName, value) =>
this.root_.style.setProperty(propertyName, value),
(this.root as HTMLElement).style.setProperty(propertyName, value),
};
return new MDCChipFoundation(adapter);
}

setSelectedFromChipSet(selected: boolean, shouldNotifyClients: boolean) {
this.foundation_.setSelectedFromChipSet(selected, shouldNotifyClients);
this.foundation.setSelectedFromChipSet(selected, shouldNotifyClients);
}

focusPrimaryAction() {
this.foundation_.focusPrimaryAction();
this.foundation.focusPrimaryAction();
}

focusTrailingAction() {
this.foundation_.focusTrailingAction();
this.foundation.focusTrailingAction();
}

removeFocus() {
this.foundation_.removeFocus();
this.foundation.removeFocus();
}

remove() {
const parent = this.root_.parentNode;
const parent = this.root.parentNode;
if (parent !== null) {
parent.removeChild(this.root_);
parent.removeChild(this.root);
}
}
}
Loading

0 comments on commit cf7747e

Please sign in to comment.