mirror of
https://github.com/home-assistant/frontend
synced 2024-09-12 05:34:56 +02:00
Add radio Form Logic to Select Selector (#12063)
This commit is contained in:
parent
2e7f8fb46f
commit
3e2135a485
@ -164,9 +164,24 @@ const SCHEMAS: {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
object: { name: "Object", selector: { object: {} } },
|
object: { name: "Object", selector: { object: {} } },
|
||||||
|
select_radio: {
|
||||||
|
name: "Select (Radio)",
|
||||||
|
selector: { select: { options: ["Option 1", "Option 2"] } },
|
||||||
|
},
|
||||||
select: {
|
select: {
|
||||||
name: "Select",
|
name: "Select",
|
||||||
selector: { select: { options: ["Option 1", "Option 2"] } },
|
selector: {
|
||||||
|
select: {
|
||||||
|
options: [
|
||||||
|
"Option 1",
|
||||||
|
"Option 2",
|
||||||
|
"Option 3",
|
||||||
|
"Option 4",
|
||||||
|
"Option 5",
|
||||||
|
"Option 6",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
icon: { name: "Icon", selector: { icon: {} } },
|
icon: { name: "Icon", selector: { icon: {} } },
|
||||||
media: { name: "Media", selector: { media: {} } },
|
media: { name: "Media", selector: { media: {} } },
|
||||||
|
@ -1,16 +1,20 @@
|
|||||||
import "@material/mwc-list/mwc-list-item";
|
import memoizeOne from "memoize-one";
|
||||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
import { html, LitElement, TemplateResult } from "lit";
|
||||||
import { customElement, property, query } from "lit/decorators";
|
import { customElement, property } from "lit/decorators";
|
||||||
import { fireEvent } from "../../common/dom/fire_event";
|
import { fireEvent } from "../../common/dom/fire_event";
|
||||||
import { stopPropagation } from "../../common/dom/stop_propagation";
|
import type { HomeAssistant } from "../../types";
|
||||||
import "../ha-radio";
|
import type {
|
||||||
import type { HaRadio } from "../ha-radio";
|
HaFormElement,
|
||||||
import "../ha-select";
|
HaFormSelectData,
|
||||||
import type { HaSelect } from "../ha-select";
|
HaFormSelectSchema,
|
||||||
import { HaFormElement, HaFormSelectData, HaFormSelectSchema } from "./types";
|
} from "./types";
|
||||||
|
import type { SelectSelector } from "../../data/selector";
|
||||||
|
import "../ha-selector/ha-selector-select";
|
||||||
|
|
||||||
@customElement("ha-form-select")
|
@customElement("ha-form-select")
|
||||||
export class HaFormSelect extends LitElement implements HaFormElement {
|
export class HaFormSelect extends LitElement implements HaFormElement {
|
||||||
|
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||||
|
|
||||||
@property({ attribute: false }) public schema!: HaFormSelectSchema;
|
@property({ attribute: false }) public schema!: HaFormSelectSchema;
|
||||||
|
|
||||||
@property() public data!: HaFormSelectData;
|
@property() public data!: HaFormSelectData;
|
||||||
@ -19,60 +23,35 @@ export class HaFormSelect extends LitElement implements HaFormElement {
|
|||||||
|
|
||||||
@property({ type: Boolean }) public disabled = false;
|
@property({ type: Boolean }) public disabled = false;
|
||||||
|
|
||||||
@query("ha-select", true) private _input?: HTMLElement;
|
private _selectSchema = memoizeOne(
|
||||||
|
(options): SelectSelector => ({
|
||||||
public focus() {
|
select: {
|
||||||
if (this._input) {
|
options: options.map((option) => ({
|
||||||
this._input.focus();
|
value: option[0],
|
||||||
}
|
label: option[1],
|
||||||
}
|
})),
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
protected render(): TemplateResult {
|
protected render(): TemplateResult {
|
||||||
if (this.schema.required && this.schema.options!.length < 6) {
|
|
||||||
return html`
|
return html`
|
||||||
<div>
|
<ha-selector-select
|
||||||
${this.label}
|
.hass=${this.hass}
|
||||||
${this.schema.options.map(
|
.schema=${this.schema}
|
||||||
([value, label]) => html`
|
|
||||||
<mwc-formfield .label=${label}>
|
|
||||||
<ha-radio
|
|
||||||
.checked=${value === this.data}
|
|
||||||
.value=${value}
|
|
||||||
.disabled=${this.disabled}
|
|
||||||
@change=${this._valueChanged}
|
|
||||||
></ha-radio>
|
|
||||||
</mwc-formfield>
|
|
||||||
`
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return html`
|
|
||||||
<ha-select
|
|
||||||
fixedMenuPosition
|
|
||||||
naturalMenuWidth
|
|
||||||
.label=${this.label}
|
|
||||||
.value=${this.data}
|
.value=${this.data}
|
||||||
|
.label=${this.label}
|
||||||
.disabled=${this.disabled}
|
.disabled=${this.disabled}
|
||||||
@closed=${stopPropagation}
|
.required=${this.schema.required}
|
||||||
@selected=${this._valueChanged}
|
.selector=${this._selectSchema(this.schema.options)}
|
||||||
>
|
@value-changed=${this._valueChanged}
|
||||||
${!this.schema.required
|
></ha-selector-select>
|
||||||
? html`<mwc-list-item value=""></mwc-list-item>`
|
|
||||||
: ""}
|
|
||||||
${this.schema.options!.map(
|
|
||||||
([value, label]) => html`
|
|
||||||
<mwc-list-item .value=${value}>${label}</mwc-list-item>
|
|
||||||
`
|
|
||||||
)}
|
|
||||||
</ha-select>
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
private _valueChanged(ev: CustomEvent) {
|
private _valueChanged(ev: CustomEvent) {
|
||||||
ev.stopPropagation();
|
ev.stopPropagation();
|
||||||
let value: string | undefined = (ev.target as HaSelect | HaRadio).value;
|
let value: string | undefined = ev.detail.value;
|
||||||
|
|
||||||
if (value === this.data) {
|
if (value === this.data) {
|
||||||
return;
|
return;
|
||||||
@ -86,15 +65,6 @@ export class HaFormSelect extends LitElement implements HaFormElement {
|
|||||||
value,
|
value,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
static get styles(): CSSResultGroup {
|
|
||||||
return css`
|
|
||||||
ha-select,
|
|
||||||
mwc-formfield {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
|
@ -1,17 +1,19 @@
|
|||||||
|
import "@material/mwc-formfield/mwc-formfield";
|
||||||
import "@material/mwc-list/mwc-list-item";
|
import "@material/mwc-list/mwc-list-item";
|
||||||
import { css, CSSResultGroup, html, LitElement } from "lit";
|
import { css, CSSResultGroup, html, LitElement } from "lit";
|
||||||
import { customElement, property } from "lit/decorators";
|
import { customElement, property } from "lit/decorators";
|
||||||
import { fireEvent } from "../../common/dom/fire_event";
|
import { fireEvent } from "../../common/dom/fire_event";
|
||||||
import { stopPropagation } from "../../common/dom/stop_propagation";
|
import { stopPropagation } from "../../common/dom/stop_propagation";
|
||||||
import { SelectOption, SelectSelector } from "../../data/selector";
|
import type { SelectOption, SelectSelector } from "../../data/selector";
|
||||||
import { HomeAssistant } from "../../types";
|
import type { HomeAssistant } from "../../types";
|
||||||
import "../ha-select";
|
import "../ha-select";
|
||||||
|
import "../ha-radio";
|
||||||
|
|
||||||
@customElement("ha-selector-select")
|
@customElement("ha-selector-select")
|
||||||
export class HaSelectSelector extends LitElement {
|
export class HaSelectSelector extends LitElement {
|
||||||
@property() public hass!: HomeAssistant;
|
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||||
|
|
||||||
@property() public selector!: SelectSelector;
|
@property({ attribute: false }) public selector!: SelectSelector;
|
||||||
|
|
||||||
@property() public value?: string;
|
@property() public value?: string;
|
||||||
|
|
||||||
@ -21,8 +23,34 @@ export class HaSelectSelector extends LitElement {
|
|||||||
|
|
||||||
@property({ type: Boolean }) public disabled = false;
|
@property({ type: Boolean }) public disabled = false;
|
||||||
|
|
||||||
|
@property({ type: Boolean }) public required = true;
|
||||||
|
|
||||||
protected render() {
|
protected render() {
|
||||||
return html`<ha-select
|
if (this.required && this.selector.select.options!.length < 6) {
|
||||||
|
return html`
|
||||||
|
<div>
|
||||||
|
${this.label}
|
||||||
|
${this.selector.select.options.map((item: string | SelectOption) => {
|
||||||
|
const value = typeof item === "object" ? item.value : item;
|
||||||
|
const label = typeof item === "object" ? item.label : item;
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<mwc-formfield .label=${label}>
|
||||||
|
<ha-radio
|
||||||
|
.checked=${value === this.value}
|
||||||
|
.value=${value}
|
||||||
|
.disabled=${this.disabled}
|
||||||
|
@change=${this._valueChanged}
|
||||||
|
></ha-radio>
|
||||||
|
</mwc-formfield>
|
||||||
|
`;
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<ha-select
|
||||||
fixedMenuPosition
|
fixedMenuPosition
|
||||||
naturalMenuWidth
|
naturalMenuWidth
|
||||||
.label=${this.label}
|
.label=${this.label}
|
||||||
@ -38,7 +66,8 @@ export class HaSelectSelector extends LitElement {
|
|||||||
|
|
||||||
return html`<mwc-list-item .value=${value}>${label}</mwc-list-item>`;
|
return html`<mwc-list-item .value=${value}>${label}</mwc-list-item>`;
|
||||||
})}
|
})}
|
||||||
</ha-select>`;
|
</ha-select>
|
||||||
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
private _valueChanged(ev) {
|
private _valueChanged(ev) {
|
||||||
@ -56,6 +85,9 @@ export class HaSelectSelector extends LitElement {
|
|||||||
ha-select {
|
ha-select {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
mwc-formfield {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user