Move select clearing to ha-select (#18190)

This commit is contained in:
Bram Kragten 2023-10-11 13:22:17 +02:00 committed by GitHub
parent 479a625662
commit ceaceaf47b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 49 additions and 36 deletions

View File

@ -1,15 +1,32 @@
import { SelectBase } from "@material/mwc-select/mwc-select-base";
import { styles } from "@material/mwc-select/mwc-select.css";
import { mdiClose } from "@mdi/js";
import { css, html, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { debounce } from "../common/util/debounce";
import { nextRender } from "../common/util/render-status";
import "./ha-icon-button";
@customElement("ha-select")
export class HaSelect extends SelectBase {
// @ts-ignore
@property({ type: Boolean }) public icon?: boolean;
@property({ type: Boolean, reflect: true }) public clearable?: boolean;
protected override render() {
return html`
${super.render()}
${this.clearable && !this.required && !this.disabled && this.value
? html`<ha-icon-button
label="clear"
@click=${this._clearValue}
.path=${mdiClose}
></ha-icon-button>`
: nothing}
`;
}
protected override renderLeadingIcon() {
if (!this.icon) {
return nothing;
@ -33,6 +50,15 @@ export class HaSelect extends SelectBase {
);
}
private _clearValue(): void {
if (this.disabled || !this.value) {
return;
}
this.valueSetDirectly = true;
this.select(-1);
this.mdcFoundation.handleChange();
}
private _translationsUpdated = debounce(async () => {
await nextRender();
this.layoutOptions();
@ -41,6 +67,9 @@ export class HaSelect extends SelectBase {
static override styles = [
styles,
css`
:host([clearable]) {
position: relative;
}
.mdc-select:not(.mdc-select--disabled) .mdc-select__icon {
color: var(--secondary-text-color);
}
@ -71,6 +100,20 @@ export class HaSelect extends SelectBase {
.mdc-select__selected-text-container {
padding-inline-end: var(--select-selected-text-padding-end, 0px);
}
:host([clearable]) .mdc-select__selected-text-container {
padding-inline-end: var(--select-selected-text-padding-end, 12px);
}
ha-icon-button {
position: absolute;
top: 10px;
right: 28px;
--mdc-icon-button-size: 36px;
--mdc-icon-size: 20px;
color: var(--secondary-text-color);
inset-inline-start: initial;
inset-inline-end: 28px;
direction: var(--direction);
}
`,
];
}

View File

@ -1,10 +1,11 @@
import "@material/mwc-list/mwc-list-item";
import { mdiClose } from "@mdi/js";
import { css, html, LitElement, nothing } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property, query } from "lit/decorators";
import { ensureArray } from "../../common/array/ensure-array";
import { fireEvent } from "../../common/dom/fire_event";
import { stopPropagation } from "../../common/dom/stop_propagation";
import { ensureArray } from "../../common/array/ensure-array";
import { caseInsensitiveStringCompare } from "../../common/string/compare";
import type { SelectOption, SelectSelector } from "../../data/selector";
import type { HomeAssistant } from "../../types";
import "../ha-checkbox";
@ -13,10 +14,9 @@ import "../ha-chip-set";
import "../ha-combo-box";
import type { HaComboBox } from "../ha-combo-box";
import "../ha-formfield";
import "../ha-input-helper-text";
import "../ha-radio";
import "../ha-select";
import "../ha-input-helper-text";
import { caseInsensitiveStringCompare } from "../../common/string/compare";
@customElement("ha-selector-select")
export class HaSelectSelector extends LitElement {
@ -198,6 +198,7 @@ export class HaSelectSelector extends LitElement {
.helper=${this.helper ?? ""}
.disabled=${this.disabled}
.required=${this.required}
clearable
@closed=${stopPropagation}
@selected=${this._valueChanged}
>
@ -209,14 +210,6 @@ export class HaSelectSelector extends LitElement {
`
)}
</ha-select>
${!this.required && !this.disabled && this.value
? html`<ha-icon-button
toggles
.label=${this.hass.localize("ui.common.clear")}
@click=${this._clearValue}
.path=${mdiClose}
></ha-icon-button>`
: nothing}
`;
}
@ -233,15 +226,6 @@ export class HaSelectSelector extends LitElement {
);
}
private _clearValue(): void {
if (this.disabled || !this.value) {
return;
}
fireEvent(this, "value-changed", {
value: undefined,
});
}
private _valueChanged(ev) {
ev.stopPropagation();
const value = ev.detail?.value || ev.target.value;
@ -359,20 +343,6 @@ export class HaSelectSelector extends LitElement {
mwc-list-item[disabled] {
--mdc-theme-text-primary-on-background: var(--disabled-text-color);
}
ha-select {
--select-selected-text-padding-end: 12px;
}
ha-icon-button {
position: absolute;
top: 10px;
right: 28px;
--mdc-icon-button-size: 36px;
--mdc-icon-size: 20px;
color: var(--secondary-text-color);
inset-inline-start: initial;
inset-inline-end: 28px;
direction: var(--direction);
}
`;
}

View File

@ -455,10 +455,10 @@ export class EntityRegistrySettingsEditor extends LitElement {
.value=${this._deviceClass}
naturalMenuWidth
fixedMenuPosition
clearable
@selected=${this._deviceClassChanged}
@closed=${stopPropagation}
>
<ha-list-item></ha-list-item>
${this._deviceClassesSorted(
domain,
this._deviceClassOptions[0],