jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-19 07:16:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix Wrong Index for Filtered Tabs (#5221)

Browse Source 
* Fix wrong index for filtered tabs

* Set active tab to actual tab and use path

* Update src/layouts/hass-tabs-subpage.ts

Co-Authored-By: Paulus Schoutsen <paulus@home-assistant.io>

* Update src/layouts/hass-tabs-subpage.ts

Co-Authored-By: Paulus Schoutsen <paulus@home-assistant.io>

Co-authored-by: Paulus Schoutsen <paulus@home-assistant.io>
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Aidan Timson 2020-03-17 19:44:07 +00:00 committed by GitHub
parent cd6dcec644
commit 9ee647329b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/layouts/hass-tabs-subpage.ts
View File

@ -37,12 +37,12 @@ class HassTabsSubpage extends LitElement {
@property() public route!: Route; @property() public route!: Route;
@property() public tabs!: PageNavigation[]; @property() public tabs!: PageNavigation[];
@property({ type: Boolean, reflect: true }) public narrow = false; @property({ type: Boolean, reflect: true }) public narrow = false;
@property() private _activeTab: number = -1; @property() private _activeTab?: PageNavigation;
private _getTabs = memoizeOne( private _getTabs = memoizeOne(
( (
tabs: PageNavigation[], tabs: PageNavigation[],
activeTab: number, activeTab: PageNavigation | undefined,
showAdvanced: boolean | undefined, showAdvanced: boolean | undefined,
_components, _components,
_language _language
@ -56,31 +56,32 @@ class HassTabsSubpage extends LitElement {
); );
return shownTabs.map( return shownTabs.map(
(page, index) => html` (page) =>
<div html`
class="tab ${classMap({ <div
active: index === activeTab, class="tab ${classMap({
})}" active: page === activeTab,
@click=${this._tabTapped} })}"
.path=${page.path} @click=${this._tabTapped}
> .path=${page.path}
${this.narrow >
? html` ${this.narrow
<ha-icon .icon=${page.icon}></ha-icon> ? html`
` <ha-icon .icon=${page.icon}></ha-icon>
: ""} `
${!this.narrow || index === activeTab : ""}
? html` ${!this.narrow || page === activeTab
<span class="name" ? html`
>${page.translationKey <span class="name"
? this.hass.localize(page.translationKey) >${page.translationKey
: name}</span ? this.hass.localize(page.translationKey)
> : name}</span
` >
: ""} `
<mwc-ripple></mwc-ripple> : ""}
</div> <mwc-ripple></mwc-ripple>
` </div>
`
); );
} }
); );
@ -88,7 +89,7 @@ class HassTabsSubpage extends LitElement {
protected updated(changedProperties: PropertyValues) { protected updated(changedProperties: PropertyValues) {
super.updated(changedProperties); super.updated(changedProperties);
if (changedProperties.has("route")) { if (changedProperties.has("route")) {
this._activeTab = this.tabs.findIndex((tab) => this._activeTab = this.tabs.find((tab) =>
this.route.prefix.includes(tab.path) this.route.prefix.includes(tab.path)
); );
} }