Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit 0008c8a

Browse files
patrickrodeecopybara-github
patrickrodee
authored and
copybara-github
committed
fix(menu): Use superclass properties without trailing underscores
PiperOrigin-RevId: 312718215
1 parent a4aae3d commit 0008c8a

File tree

2 files changed

+54
-37
lines changed

2 files changed

+54
-37
lines changed

‎packages/mdc-menu/component.ts‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -61,19 +61,21 @@ export class MDCMenu extends MDCComponent<MDCMenuFoundation> {
6161
}
6262

6363
initialSyncWithDOM() {
64-
this.menuSurface_ = this.menuSurfaceFactory_(this.root_);
64+
this.menuSurface_ = this.menuSurfaceFactory_(this.root);
6565

66-
const list = this.root_.querySelector(strings.LIST_SELECTOR);
66+
const list = this.root.querySelector(strings.LIST_SELECTOR);
6767
if (list) {
6868
this.list_ = this.listFactory_(list);
6969
this.list_.wrapFocus = true;
7070
} else {
7171
this.list_ = null;
7272
}
7373

74-
this.handleKeydown_ = (evt) => this.foundation_.handleKeydown(evt);
75-
this.handleItemAction_ = (evt) => this.foundation_.handleItemAction(this.items[evt.detail.index]);
76-
this.handleMenuSurfaceOpened_ = () => this.foundation_.handleMenuSurfaceOpened();
74+
this.handleKeydown_ = (evt) => this.foundation.handleKeydown(evt);
75+
this.handleItemAction_ = (evt) =>
76+
this.foundation.handleItemAction(this.items[evt.detail.index]);
77+
this.handleMenuSurfaceOpened_ = () =>
78+
this.foundation.handleMenuSurfaceOpened();
7779

7880
this.menuSurface_.listen(MDCMenuSurfaceFoundation.strings.OPENED_EVENT, this.handleMenuSurfaceOpened_);
7981
this.listen('keydown', this.handleKeydown_);
@@ -154,7 +156,7 @@ export class MDCMenu extends MDCComponent<MDCMenuFoundation> {
154156
* @param focusState Default focus state.
155157
*/
156158
setDefaultFocusState(focusState: DefaultFocusState) {
157-
this.foundation_.setDefaultFocusState(focusState);
159+
this.foundation.setDefaultFocusState(focusState);
158160
}
159161

160162
/**
@@ -173,7 +175,7 @@ export class MDCMenu extends MDCComponent<MDCMenuFoundation> {
173175
* @param index Index of list item within menu.
174176
*/
175177
setSelectedIndex(index: number) {
176-
this.foundation_.setSelectedIndex(index);
178+
this.foundation.setSelectedIndex(index);
177179
}
178180

179181
/**
@@ -182,7 +184,7 @@ export class MDCMenu extends MDCComponent<MDCMenuFoundation> {
182184
* @param isEnabled The desired enabled state of the menu item.
183185
*/
184186
setEnabled(index: number, isEnabled: boolean): void {
185-
this.foundation_.setEnabled(index, isEnabled);
187+
this.foundation.setEnabled(index, isEnabled);
186188
}
187189

188190
/**
@@ -238,17 +240,23 @@ export class MDCMenu extends MDCComponent<MDCMenuFoundation> {
238240
const list = this.items;
239241
list[index].removeAttribute(attr);
240242
},
241-
elementContainsClass: (element, className) => element.classList.contains(className),
242-
closeSurface: (skipRestoreFocus: boolean) => this.menuSurface_.close(skipRestoreFocus),
243+
elementContainsClass: (element, className) =>
244+
element.classList.contains(className),
245+
closeSurface: (skipRestoreFocus: boolean) =>
246+
this.menuSurface_.close(skipRestoreFocus),
243247
getElementIndex: (element) => this.items.indexOf(element),
244-
notifySelected: (evtData) => this.emit<MDCMenuItemComponentEventDetail>(strings.SELECTED_EVENT, {
245-
index: evtData.index,
246-
item: this.items[evtData.index],
247-
}),
248+
notifySelected: (evtData) =>
249+
this.emit<MDCMenuItemComponentEventDetail>(strings.SELECTED_EVENT, {
250+
index: evtData.index,
251+
item: this.items[evtData.index],
252+
}),
248253
getMenuItemCount: () => this.items.length,
249254
focusItemAtIndex: (index) => (this.items[index] as HTMLElement).focus(),
250-
focusListRoot: () => (this.root_.querySelector(strings.LIST_SELECTOR) as HTMLElement).focus(),
251-
isSelectableItemAtIndex: (index) => !!closest(this.items[index], `.${cssClasses.MENU_SELECTION_GROUP}`),
255+
focusListRoot: () =>
256+
(this.root.querySelector(strings.LIST_SELECTOR) as HTMLElement)
257+
.focus(),
258+
isSelectableItemAtIndex: (index) =>
259+
!!closest(this.items[index], `.${cssClasses.MENU_SELECTION_GROUP}`),
252260
getSelectedSiblingOfItemAtIndex: (index) => {
253261
const selectionGroupEl = closest(this.items[index], `.${cssClasses.MENU_SELECTION_GROUP}`) as HTMLElement;
254262
const selectedItemEl = selectionGroupEl.querySelector(`.${cssClasses.MENU_SELECTED_LIST_ITEM}`);

‎packages/mdc-menu/foundation.ts‎

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -75,32 +75,32 @@ export class MDCMenuFoundation extends MDCFoundation<MDCMenuAdapter> {
7575
clearTimeout(this.closeAnimationEndTimerId_);
7676
}
7777

78-
this.adapter_.closeSurface();
78+
this.adapter.closeSurface();
7979
}
8080

8181
handleKeydown(evt: KeyboardEvent) {
8282
const {key, keyCode} = evt;
8383
const isTab = key === 'Tab' || keyCode === 9;
8484

8585
if (isTab) {
86-
this.adapter_.closeSurface(/** skipRestoreFocus */ true);
86+
this.adapter.closeSurface(/** skipRestoreFocus */ true);
8787
}
8888
}
8989

9090
handleItemAction(listItem: Element) {
91-
const index = this.adapter_.getElementIndex(listItem);
91+
const index = this.adapter.getElementIndex(listItem);
9292
if (index < 0) {
9393
return;
9494
}
9595

96-
this.adapter_.notifySelected({index});
97-
this.adapter_.closeSurface();
96+
this.adapter.notifySelected({index});
97+
this.adapter.closeSurface();
9898

9999
// Wait for the menu to close before adding/removing classes that affect styles.
100100
this.closeAnimationEndTimerId_ = setTimeout(() => {
101101
// Recompute the index in case the menu contents have changed.
102-
const recomputedIndex = this.adapter_.getElementIndex(listItem);
103-
if (this.adapter_.isSelectableItemAtIndex(recomputedIndex)) {
102+
const recomputedIndex = this.adapter.getElementIndex(listItem);
103+
if (this.adapter.isSelectableItemAtIndex(recomputedIndex)) {
104104
this.setSelectedIndex(recomputedIndex);
105105
}
106106
}, MDCMenuSurfaceFoundation.numbers.TRANSITION_CLOSE_DURATION);
@@ -109,16 +109,16 @@ export class MDCMenuFoundation extends MDCFoundation<MDCMenuAdapter> {
109109
handleMenuSurfaceOpened() {
110110
switch (this.defaultFocusState_) {
111111
case DefaultFocusState.FIRST_ITEM:
112-
this.adapter_.focusItemAtIndex(0);
112+
this.adapter.focusItemAtIndex(0);
113113
break;
114114
case DefaultFocusState.LAST_ITEM:
115-
this.adapter_.focusItemAtIndex(this.adapter_.getMenuItemCount() - 1);
115+
this.adapter.focusItemAtIndex(this.adapter.getMenuItemCount() - 1);
116116
break;
117117
case DefaultFocusState.NONE:
118118
// Do nothing.
119119
break;
120120
default:
121-
this.adapter_.focusListRoot();
121+
this.adapter.focusListRoot();
122122
break;
123123
}
124124
}
@@ -139,18 +139,23 @@ export class MDCMenuFoundation extends MDCFoundation<MDCMenuAdapter> {
139139
setSelectedIndex(index: number) {
140140
this.validatedIndex_(index);
141141

142-
if (!this.adapter_.isSelectableItemAtIndex(index)) {
142+
if (!this.adapter.isSelectableItemAtIndex(index)) {
143143
throw new Error('MDCMenuFoundation: No selection group at specified index.');
144144
}
145145

146-
const prevSelectedIndex = this.adapter_.getSelectedSiblingOfItemAtIndex(index);
146+
const prevSelectedIndex =
147+
this.adapter.getSelectedSiblingOfItemAtIndex(index);
147148
if (prevSelectedIndex >= 0) {
148-
this.adapter_.removeAttributeFromElementAtIndex(prevSelectedIndex, strings.ARIA_CHECKED_ATTR);
149-
this.adapter_.removeClassFromElementAtIndex(prevSelectedIndex, cssClasses.MENU_SELECTED_LIST_ITEM);
149+
this.adapter.removeAttributeFromElementAtIndex(
150+
prevSelectedIndex, strings.ARIA_CHECKED_ATTR);
151+
this.adapter.removeClassFromElementAtIndex(
152+
prevSelectedIndex, cssClasses.MENU_SELECTED_LIST_ITEM);
150153
}
151154

152-
this.adapter_.addClassToElementAtIndex(index, cssClasses.MENU_SELECTED_LIST_ITEM);
153-
this.adapter_.addAttributeToElementAtIndex(index, strings.ARIA_CHECKED_ATTR, 'true');
155+
this.adapter.addClassToElementAtIndex(
156+
index, cssClasses.MENU_SELECTED_LIST_ITEM);
157+
this.adapter.addAttributeToElementAtIndex(
158+
index, strings.ARIA_CHECKED_ATTR, 'true');
154159
}
155160

156161
/**
@@ -162,16 +167,20 @@ export class MDCMenuFoundation extends MDCFoundation<MDCMenuAdapter> {
162167
this.validatedIndex_(index);
163168

164169
if (isEnabled) {
165-
this.adapter_.removeClassFromElementAtIndex(index, listCssClasses.LIST_ITEM_DISABLED_CLASS);
166-
this.adapter_.addAttributeToElementAtIndex(index, strings.ARIA_DISABLED_ATTR, 'false');
170+
this.adapter.removeClassFromElementAtIndex(
171+
index, listCssClasses.LIST_ITEM_DISABLED_CLASS);
172+
this.adapter.addAttributeToElementAtIndex(
173+
index, strings.ARIA_DISABLED_ATTR, 'false');
167174
} else {
168-
this.adapter_.addClassToElementAtIndex(index, listCssClasses.LIST_ITEM_DISABLED_CLASS);
169-
this.adapter_.addAttributeToElementAtIndex(index, strings.ARIA_DISABLED_ATTR, 'true');
175+
this.adapter.addClassToElementAtIndex(
176+
index, listCssClasses.LIST_ITEM_DISABLED_CLASS);
177+
this.adapter.addAttributeToElementAtIndex(
178+
index, strings.ARIA_DISABLED_ATTR, 'true');
170179
}
171180
}
172181

173182
private validatedIndex_(index: number): void {
174-
const menuSize = this.adapter_.getMenuItemCount();
183+
const menuSize = this.adapter.getMenuItemCount();
175184
const isIndexInRange = index >= 0 && index < menuSize;
176185

177186
if (!isIndexInRange) {

0 commit comments

Comments
 (0)