mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-26 02:36:37 +00:00
Sync selected icon with selected value in new select component (#17573)
This commit is contained in:
parent
2c17d2fead
commit
bd5264308f
@ -13,6 +13,10 @@ import { classMap } from "lit/directives/class-map";
|
|||||||
import { ifDefined } from "lit/directives/if-defined";
|
import { ifDefined } from "lit/directives/if-defined";
|
||||||
import { debounce } from "../common/util/debounce";
|
import { debounce } from "../common/util/debounce";
|
||||||
import { nextRender } from "../common/util/render-status";
|
import { nextRender } from "../common/util/render-status";
|
||||||
|
import "./ha-icon";
|
||||||
|
import type { HaIcon } from "./ha-icon";
|
||||||
|
import "./ha-svg-icon";
|
||||||
|
import type { HaSvgIcon } from "./ha-svg-icon";
|
||||||
|
|
||||||
@customElement("ha-control-select-menu")
|
@customElement("ha-control-select-menu")
|
||||||
export class HaControlSelectMenu extends SelectBase {
|
export class HaControlSelectMenu extends SelectBase {
|
||||||
@ -66,9 +70,7 @@ export class HaControlSelectMenu extends SelectBase {
|
|||||||
@touchend=${this.handleRippleDeactivate}
|
@touchend=${this.handleRippleDeactivate}
|
||||||
@touchcancel=${this.handleRippleDeactivate}
|
@touchcancel=${this.handleRippleDeactivate}
|
||||||
>
|
>
|
||||||
<div class="icon">
|
${this.renderIcon()}
|
||||||
<slot name="icon"></slot>
|
|
||||||
</div>
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p id="label" class="label">${this.label}</p>
|
<p id="label" class="label">${this.label}</p>
|
||||||
${this.selectedText
|
${this.selectedText
|
||||||
@ -84,6 +86,25 @@ export class HaControlSelectMenu extends SelectBase {
|
|||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private renderIcon() {
|
||||||
|
const index = this.mdcFoundation?.getSelectedIndex();
|
||||||
|
const items = this.menuElement?.items ?? [];
|
||||||
|
const item = index != null ? items[index] : undefined;
|
||||||
|
const icon =
|
||||||
|
item?.querySelector("[slot='graphic']") ??
|
||||||
|
(null as HaSvgIcon | HaIcon | null);
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<div class="icon">
|
||||||
|
${icon && "path" in icon
|
||||||
|
? html`<ha-svg-icon .path=${icon.path}></ha-svg-icon>`
|
||||||
|
: icon && "icon" in icon
|
||||||
|
? html`<ha-icon .path=${icon.icon}></ha-icon>`
|
||||||
|
: html`<slot name="icon"></slot>`}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
protected onFocus() {
|
protected onFocus() {
|
||||||
this.handleRippleFocus();
|
this.handleRippleFocus();
|
||||||
super.onFocus();
|
super.onFocus();
|
||||||
|
@ -29,7 +29,6 @@ import "../../../components/ha-switch";
|
|||||||
import {
|
import {
|
||||||
ClimateEntity,
|
ClimateEntity,
|
||||||
ClimateEntityFeature,
|
ClimateEntityFeature,
|
||||||
HvacMode,
|
|
||||||
compareClimateHvacModes,
|
compareClimateHvacModes,
|
||||||
computeFanModeIcon,
|
computeFanModeIcon,
|
||||||
computeHvacModeIcon,
|
computeHvacModeIcon,
|
||||||
@ -176,11 +175,7 @@ class MoreInfoClimate extends LitElement {
|
|||||||
@selected=${this._handleOperationModeChanged}
|
@selected=${this._handleOperationModeChanged}
|
||||||
@closed=${stopPropagation}
|
@closed=${stopPropagation}
|
||||||
>
|
>
|
||||||
<ha-svg-icon
|
<ha-svg-icon slot="icon" .path=${mdiThermostat}></ha-svg-icon>
|
||||||
slot="icon"
|
|
||||||
.path=${computeHvacModeIcon(stateObj.state as HvacMode) ??
|
|
||||||
mdiThermostat}
|
|
||||||
></ha-svg-icon>
|
|
||||||
${stateObj.attributes.hvac_modes
|
${stateObj.attributes.hvac_modes
|
||||||
.concat()
|
.concat()
|
||||||
.sort(compareClimateHvacModes)
|
.sort(compareClimateHvacModes)
|
||||||
@ -212,9 +207,7 @@ class MoreInfoClimate extends LitElement {
|
|||||||
>
|
>
|
||||||
<ha-svg-icon
|
<ha-svg-icon
|
||||||
slot="icon"
|
slot="icon"
|
||||||
.path=${stateObj.attributes.preset_mode
|
.path=${mdiTuneVariant}
|
||||||
? computePresetModeIcon(stateObj.attributes.preset_mode)
|
|
||||||
: mdiTuneVariant}
|
|
||||||
></ha-svg-icon>
|
></ha-svg-icon>
|
||||||
${stateObj.attributes.preset_modes!.map(
|
${stateObj.attributes.preset_modes!.map(
|
||||||
(mode) => html`
|
(mode) => html`
|
||||||
@ -248,12 +241,7 @@ class MoreInfoClimate extends LitElement {
|
|||||||
@selected=${this._handleFanModeChanged}
|
@selected=${this._handleFanModeChanged}
|
||||||
@closed=${stopPropagation}
|
@closed=${stopPropagation}
|
||||||
>
|
>
|
||||||
<ha-svg-icon
|
<ha-svg-icon slot="icon" .path=${mdiFan}></ha-svg-icon>
|
||||||
slot="icon"
|
|
||||||
.path=${stateObj.attributes.fan_mode
|
|
||||||
? computeFanModeIcon(stateObj.attributes.fan_mode)
|
|
||||||
: mdiFan}
|
|
||||||
></ha-svg-icon>
|
|
||||||
${stateObj.attributes.fan_modes!.map(
|
${stateObj.attributes.fan_modes!.map(
|
||||||
(mode) => html`
|
(mode) => html`
|
||||||
<ha-list-item .value=${mode} graphic="icon">
|
<ha-list-item .value=${mode} graphic="icon">
|
||||||
@ -286,12 +274,7 @@ class MoreInfoClimate extends LitElement {
|
|||||||
@selected=${this._handleSwingmodeChanged}
|
@selected=${this._handleSwingmodeChanged}
|
||||||
@closed=${stopPropagation}
|
@closed=${stopPropagation}
|
||||||
>
|
>
|
||||||
<ha-svg-icon
|
<ha-svg-icon slot="icon" .path=${haOscillating}></ha-svg-icon>
|
||||||
slot="icon"
|
|
||||||
.path=${stateObj.attributes.swing_mode
|
|
||||||
? computeSwingModeIcon(stateObj.attributes.swing_mode)
|
|
||||||
: haOscillating}
|
|
||||||
></ha-svg-icon>
|
|
||||||
${stateObj.attributes.swing_modes!.map(
|
${stateObj.attributes.swing_modes!.map(
|
||||||
(mode) => html`
|
(mode) => html`
|
||||||
<ha-list-item .value=${mode} graphic="icon">
|
<ha-list-item .value=${mode} graphic="icon">
|
||||||
|
@ -239,12 +239,7 @@ class MoreInfoFan extends LitElement {
|
|||||||
@selected=${this._handleDirection}
|
@selected=${this._handleDirection}
|
||||||
@closed=${stopPropagation}
|
@closed=${stopPropagation}
|
||||||
>
|
>
|
||||||
<ha-svg-icon
|
<ha-svg-icon slot="icon" .path=${mdiRotateLeft}></ha-svg-icon>
|
||||||
slot="icon"
|
|
||||||
.path=${this.stateObj.attributes.direction === "reverse"
|
|
||||||
? mdiRotateLeft
|
|
||||||
: mdiRotateRight}
|
|
||||||
></ha-svg-icon>
|
|
||||||
<ha-list-item value="forward" graphic="icon">
|
<ha-list-item value="forward" graphic="icon">
|
||||||
<ha-svg-icon
|
<ha-svg-icon
|
||||||
slot="graphic"
|
slot="graphic"
|
||||||
@ -286,9 +281,7 @@ class MoreInfoFan extends LitElement {
|
|||||||
>
|
>
|
||||||
<ha-svg-icon
|
<ha-svg-icon
|
||||||
slot="icon"
|
slot="icon"
|
||||||
.path=${this.stateObj.attributes.oscillating
|
.path=${haOscillatingOff}
|
||||||
? haOscillating
|
|
||||||
: haOscillatingOff}
|
|
||||||
></ha-svg-icon>
|
></ha-svg-icon>
|
||||||
<ha-list-item value="on" graphic="icon">
|
<ha-list-item value="on" graphic="icon">
|
||||||
<ha-svg-icon
|
<ha-svg-icon
|
||||||
|
@ -135,14 +135,11 @@ class MoreInfoHumidifier extends LitElement {
|
|||||||
fixedMenuPosition
|
fixedMenuPosition
|
||||||
naturalMenuWidth
|
naturalMenuWidth
|
||||||
@selected=${this._handleModeChanged}
|
@selected=${this._handleModeChanged}
|
||||||
@action=${this._handleModeChanged}
|
|
||||||
@closed=${stopPropagation}
|
@closed=${stopPropagation}
|
||||||
>
|
>
|
||||||
<ha-svg-icon
|
<ha-svg-icon
|
||||||
slot="icon"
|
slot="icon"
|
||||||
.path=${stateObj.attributes.mode
|
.path=${mdiTuneVariant}
|
||||||
? computeHumidiferModeIcon(stateObj.attributes.mode)
|
|
||||||
: mdiTuneVariant}
|
|
||||||
></ha-svg-icon>
|
></ha-svg-icon>
|
||||||
${stateObj.attributes.available_modes!.map(
|
${stateObj.attributes.available_modes!.map(
|
||||||
(mode) => html`
|
(mode) => html`
|
||||||
@ -196,6 +193,19 @@ class MoreInfoHumidifier extends LitElement {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private _handleModeChanged(ev) {
|
||||||
|
const newVal = ev.target.value || null;
|
||||||
|
this._mode = newVal;
|
||||||
|
this._callServiceHelper(
|
||||||
|
this.stateObj!.attributes.mode,
|
||||||
|
newVal,
|
||||||
|
"set_mode",
|
||||||
|
{
|
||||||
|
mode: newVal,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
private async _callServiceHelper(
|
private async _callServiceHelper(
|
||||||
oldVal: unknown,
|
oldVal: unknown,
|
||||||
newVal: unknown,
|
newVal: unknown,
|
||||||
@ -234,23 +244,6 @@ class MoreInfoHumidifier extends LitElement {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private _handleModeChanged(ev) {
|
|
||||||
ev.stopPropagation();
|
|
||||||
ev.preventDefault();
|
|
||||||
|
|
||||||
const index = ev.detail.index;
|
|
||||||
const newVal = this.stateObj!.attributes.available_modes![index];
|
|
||||||
const oldVal = this._mode;
|
|
||||||
|
|
||||||
if (!newVal || oldVal === newVal) return;
|
|
||||||
|
|
||||||
this._mode = newVal;
|
|
||||||
this.hass.callService("humidifier", "set_mode", {
|
|
||||||
entity_id: this.stateObj!.entity_id,
|
|
||||||
mode: newVal,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
static get styles(): CSSResultGroup {
|
static get styles(): CSSResultGroup {
|
||||||
return [
|
return [
|
||||||
moreInfoControlStyle,
|
moreInfoControlStyle,
|
||||||
|
@ -7,7 +7,6 @@ import { formatNumber } from "../../../common/number/format_number";
|
|||||||
import "../../../components/ha-control-select-menu";
|
import "../../../components/ha-control-select-menu";
|
||||||
import "../../../components/ha-list-item";
|
import "../../../components/ha-list-item";
|
||||||
import {
|
import {
|
||||||
OperationMode,
|
|
||||||
WaterHeaterEntity,
|
WaterHeaterEntity,
|
||||||
WaterHeaterEntityFeature,
|
WaterHeaterEntityFeature,
|
||||||
compareWaterHeaterOperationMode,
|
compareWaterHeaterOperationMode,
|
||||||
@ -86,9 +85,7 @@ class MoreInfoWaterHeater extends LitElement {
|
|||||||
>
|
>
|
||||||
<ha-svg-icon
|
<ha-svg-icon
|
||||||
slot="icon"
|
slot="icon"
|
||||||
.path=${computeOperationModeIcon(
|
.path=${mdiWaterBoiler}
|
||||||
stateObj.state as OperationMode
|
|
||||||
) ?? mdiWaterBoiler}
|
|
||||||
></ha-svg-icon>
|
></ha-svg-icon>
|
||||||
${stateObj.attributes.operation_list
|
${stateObj.attributes.operation_list
|
||||||
.concat()
|
.concat()
|
||||||
@ -121,12 +118,7 @@ class MoreInfoWaterHeater extends LitElement {
|
|||||||
@selected=${this._handleAwayModeChanged}
|
@selected=${this._handleAwayModeChanged}
|
||||||
@closed=${stopPropagation}
|
@closed=${stopPropagation}
|
||||||
>
|
>
|
||||||
<ha-svg-icon
|
<ha-svg-icon slot="icon" .path=${mdiAccount}></ha-svg-icon>
|
||||||
slot="icon"
|
|
||||||
.path=${stateObj.attributes.away_mode === "on"
|
|
||||||
? mdiAccountArrowRight
|
|
||||||
: mdiAccount}
|
|
||||||
></ha-svg-icon>
|
|
||||||
<ha-list-item value="on" graphic="icon">
|
<ha-list-item value="on" graphic="icon">
|
||||||
<ha-svg-icon
|
<ha-svg-icon
|
||||||
slot="graphic"
|
slot="graphic"
|
||||||
|
Loading…
x
Reference in New Issue
Block a user