diff --git a/packages/mdc-tab-bar/README.md b/packages/mdc-tab-bar/README.md index 16f810f866b..0d3d5291c6b 100644 --- a/packages/mdc-tab-bar/README.md +++ b/packages/mdc-tab-bar/README.md @@ -133,7 +133,7 @@ Method Signature | Description `getTabListLength() => number` | Returns the number of child Tab components. `getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab. `getFocusedTabIndex() => number` | Returns the index of the focused Tab. -`getIndexOfTab(tab: MDCTab) => number` | Returns the index of the given Tab instance. +`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID. `notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event. ### `MDCTabBarFoundation` diff --git a/packages/mdc-tab-bar/adapter.js b/packages/mdc-tab-bar/adapter.js index aa34269966c..a24e8b10a6c 100644 --- a/packages/mdc-tab-bar/adapter.js +++ b/packages/mdc-tab-bar/adapter.js @@ -25,7 +25,6 @@ /* eslint-disable no-unused-vars */ import {MDCTabDimensions} from '@material/tab/adapter'; -import {MDCTabFoundation} from '@material/tab/index'; /* eslint-enable no-unused-vars */ /** @@ -137,7 +136,7 @@ class MDCTabBarAdapter { * @param {string} id The ID of the tab whose index to determine * @return {number} */ - getIndexOfTabByID(id) {} + getIndexOfTabById(id) {} /** * Emits the MDCTabBar:activated event diff --git a/packages/mdc-tab-bar/foundation.js b/packages/mdc-tab-bar/foundation.js index bffec94f400..e3b09fe3a75 100644 --- a/packages/mdc-tab-bar/foundation.js +++ b/packages/mdc-tab-bar/foundation.js @@ -89,7 +89,7 @@ class MDCTabBarFoundation extends MDCFoundation { getTabDimensionsAtIndex: () => {}, getPreviousActiveTabIndex: () => {}, getFocusedTabIndex: () => {}, - getIndexOfTabByID: () => {}, + getIndexOfTabById: () => {}, getTabListLength: () => {}, notifyTabActivated: () => {}, }); @@ -174,7 +174,7 @@ class MDCTabBarFoundation extends MDCFoundation { * @param {!Event} evt */ handleTabInteraction(evt) { - this.adapter_.setActiveTab(this.adapter_.getIndexOfTabByID(evt.detail.tabId)); + this.adapter_.setActiveTab(this.adapter_.getIndexOfTabById(evt.detail.tabId)); } /** diff --git a/packages/mdc-tab-bar/index.js b/packages/mdc-tab-bar/index.js index 2fc89a7b03f..69a6c3ea514 100644 --- a/packages/mdc-tab-bar/index.js +++ b/packages/mdc-tab-bar/index.js @@ -45,15 +45,9 @@ class MDCTabBar extends MDCComponent { /** @private {!Array} */ this.tabList_; - /** @type {(function(!Element): !MDCTab)} */ - this.tabFactory_; - /** @private {?MDCTabScroller} */ this.tabScroller_; - /** @type {(function(!Element): !MDCTabScroller)} */ - this.tabScrollerFactory_; - /** @private {?function(?Event): undefined} */ this.handleTabInteraction_; @@ -84,10 +78,8 @@ class MDCTabBar extends MDCComponent { initialize( tabFactory = (el) => new MDCTab(el), tabScrollerFactory = (el) => new MDCTabScroller(el)) { - this.tabFactory_ = tabFactory; - this.tabScrollerFactory_ = tabScrollerFactory; - this.tabList_ = this.instantiateTabs_(this.tabFactory_); - this.tabScroller_ = this.instantiateTabsScroller_(this.tabScrollerFactory_); + this.tabList_ = this.instantiateTabs_(tabFactory); + this.tabScroller_ = this.instantiateTabScroller_(tabScrollerFactory); } initialSyncWithDOM() { @@ -144,7 +136,7 @@ class MDCTabBar extends MDCComponent { const activeElement = document.activeElement; return tabElements.indexOf(activeElement); }, - getIndexOfTabByID: (id) => { + getIndexOfTabById: (id) => { for (let i = 0; i < this.tabList_.length; i++) { if (this.tabList_[i].id === id) { return i; @@ -202,7 +194,7 @@ class MDCTabBar extends MDCComponent { * @return {!MDCTabScroller=} * @private */ - instantiateTabsScroller_(tabScrollerFactory) { + instantiateTabScroller_(tabScrollerFactory) { const tabScrollerElement = this.root_.querySelector(MDCTabBarFoundation.strings.TAB_SCROLLER_SELECTOR); if (tabScrollerElement) { return tabScrollerFactory(tabScrollerElement); diff --git a/packages/mdc-tab/README.md b/packages/mdc-tab/README.md index b491f11ec7d..f9e655c2ff9 100644 --- a/packages/mdc-tab/README.md +++ b/packages/mdc-tab/README.md @@ -154,7 +154,7 @@ Method Signature | Description Event Name | Event Data Structure | Description --- | --- | --- -`MDCTab:interacted` | `{"detail": {"tab": MDCTab}}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate. +`MDCTab:interacted` | `{"detail": {"tabId": string}}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate. ## Usage within Web Frameworks diff --git a/test/unit/mdc-tab-bar/foundation.test.js b/test/unit/mdc-tab-bar/foundation.test.js index 2cd07daf3ae..5b99d5ca70e 100644 --- a/test/unit/mdc-tab-bar/foundation.test.js +++ b/test/unit/mdc-tab-bar/foundation.test.js @@ -48,7 +48,7 @@ test('defaultAdapter returns a complete adapter implementation', () => { 'getOffsetWidth', 'isRTL', 'setActiveTab', 'activateTabAtIndex', 'deactivateTabAtIndex', 'focusTabAtIndex', 'getTabIndicatorClientRectAtIndex', 'getTabDimensionsAtIndex', - 'getPreviousActiveTabIndex', 'getFocusedTabIndex', 'getIndexOfTabByID', 'getTabListLength', + 'getPreviousActiveTabIndex', 'getFocusedTabIndex', 'getIndexOfTabById', 'getTabListLength', 'notifyTabActivated', ]); }); diff --git a/test/unit/mdc-tab-bar/mdc-tab-bar.test.js b/test/unit/mdc-tab-bar/mdc-tab-bar.test.js index 41bb78c3914..b946de0b40c 100644 --- a/test/unit/mdc-tab-bar/mdc-tab-bar.test.js +++ b/test/unit/mdc-tab-bar/mdc-tab-bar.test.js @@ -208,10 +208,10 @@ test('#adapter.getPreviousActiveTabIndex returns the index of the active tab', ( assert.strictEqual(component.getDefaultFoundation().adapter_.getPreviousActiveTabIndex(), 1); }); -test('#adapter.getIndexOfTabByID; returns the index of the given tab', () => { +test('#adapter.getIndexOfTabById returns the index of the given tab', () => { const {component} = setupTest(); const tab = component.tabList_[2]; - assert.strictEqual(component.getDefaultFoundation().adapter_.getIndexOfTabByID(tab.id), 2); + assert.strictEqual(component.getDefaultFoundation().adapter_.getIndexOfTabById(tab.id), 2); }); test('#adapter.getTabListLength returns the length of the tab list', () => {