mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
Load selector elements dynamic (#14084)
Co-authored-by: Paul Bottein <paul.bottein@gmail.com>
This commit is contained in:
parent
9b19b6f203
commit
fe9967550b
@ -1,34 +1,26 @@
|
||||
import {
|
||||
css,
|
||||
CSSResultGroup,
|
||||
html,
|
||||
LitElement,
|
||||
PropertyValues,
|
||||
TemplateResult,
|
||||
} from "lit";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { dynamicElement } from "../../common/dom/dynamic-element-directive";
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import "../ha-alert";
|
||||
import "../ha-selector/ha-selector";
|
||||
import "./ha-form-boolean";
|
||||
import "./ha-form-constant";
|
||||
import "./ha-form-grid";
|
||||
import "./ha-form-float";
|
||||
import "./ha-form-grid";
|
||||
import "./ha-form-integer";
|
||||
import "./ha-form-multi_select";
|
||||
import "./ha-form-positive_time_period_dict";
|
||||
import "./ha-form-select";
|
||||
import "./ha-form-string";
|
||||
import { HaFormElement, HaFormDataContainer, HaFormSchema } from "./types";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import { HaFormDataContainer, HaFormElement, HaFormSchema } from "./types";
|
||||
|
||||
const getValue = (obj, item) =>
|
||||
obj ? (!item.name ? obj : obj[item.name]) : null;
|
||||
|
||||
const getError = (obj, item) => (obj && item.name ? obj[item.name] : null);
|
||||
|
||||
let selectorImported = false;
|
||||
|
||||
@customElement("ha-form")
|
||||
export class HaForm extends LitElement implements HaFormElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
@ -63,18 +55,6 @@ export class HaForm extends LitElement implements HaFormElement {
|
||||
}
|
||||
}
|
||||
|
||||
willUpdate(changedProperties: PropertyValues) {
|
||||
super.willUpdate(changedProperties);
|
||||
if (
|
||||
!selectorImported &&
|
||||
changedProperties.has("schema") &&
|
||||
this.schema?.some((item) => "selector" in item)
|
||||
) {
|
||||
selectorImported = true;
|
||||
import("../ha-selector/ha-selector");
|
||||
}
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<div class="root" part="root">
|
||||
|
@ -1,35 +1,38 @@
|
||||
import { html, LitElement } from "lit";
|
||||
import { html, LitElement, PropertyValues } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { dynamicElement } from "../../common/dom/dynamic-element-directive";
|
||||
import type { Selector } from "../../data/selector";
|
||||
import type { HomeAssistant } from "../../types";
|
||||
import "./ha-selector-action";
|
||||
import "./ha-selector-addon";
|
||||
import "./ha-selector-area";
|
||||
import "./ha-selector-attribute";
|
||||
import "./ha-selector-boolean";
|
||||
import "./ha-selector-color-rgb";
|
||||
import "./ha-selector-config-entry";
|
||||
import "./ha-selector-date";
|
||||
import "./ha-selector-datetime";
|
||||
import "./ha-selector-device";
|
||||
import "./ha-selector-duration";
|
||||
import "./ha-selector-entity";
|
||||
import "./ha-selector-file";
|
||||
import "./ha-selector-navigation";
|
||||
import "./ha-selector-number";
|
||||
import "./ha-selector-object";
|
||||
import "./ha-selector-select";
|
||||
import "./ha-selector-state";
|
||||
import "./ha-selector-target";
|
||||
import "./ha-selector-template";
|
||||
import "./ha-selector-text";
|
||||
import "./ha-selector-time";
|
||||
import "./ha-selector-icon";
|
||||
import "./ha-selector-media";
|
||||
import "./ha-selector-theme";
|
||||
import "./ha-selector-location";
|
||||
import "./ha-selector-color-temp";
|
||||
|
||||
const LOAD_ELEMENTS = {
|
||||
action: () => import("./ha-selector-action"),
|
||||
addon: () => import("./ha-selector-addon"),
|
||||
area: () => import("./ha-selector-area"),
|
||||
attribute: () => import("./ha-selector-attribute"),
|
||||
boolean: () => import("./ha-selector-boolean"),
|
||||
"color-rgb": () => import("./ha-selector-color-rgb"),
|
||||
"config-entry": () => import("./ha-selector-config-entry"),
|
||||
date: () => import("./ha-selector-date"),
|
||||
datetime: () => import("./ha-selector-datetime"),
|
||||
device: () => import("./ha-selector-device"),
|
||||
duration: () => import("./ha-selector-duration"),
|
||||
entity: () => import("./ha-selector-entity"),
|
||||
file: () => import("./ha-selector-file"),
|
||||
navigation: () => import("./ha-selector-navigation"),
|
||||
number: () => import("./ha-selector-number"),
|
||||
object: () => import("./ha-selector-object"),
|
||||
select: () => import("./ha-selector-select"),
|
||||
state: () => import("./ha-selector-state"),
|
||||
target: () => import("./ha-selector-target"),
|
||||
template: () => import("./ha-selector-template"),
|
||||
text: () => import("./ha-selector-text"),
|
||||
time: () => import("./ha-selector-time"),
|
||||
icon: () => import("./ha-selector-icon"),
|
||||
media: () => import("./ha-selector-media"),
|
||||
theme: () => import("./ha-selector-theme"),
|
||||
location: () => import("./ha-selector-location"),
|
||||
"color-temp": () => import("./ha-selector-color-temp"),
|
||||
};
|
||||
|
||||
@customElement("ha-selector")
|
||||
export class HaSelector extends LitElement {
|
||||
@ -59,6 +62,12 @@ export class HaSelector extends LitElement {
|
||||
return Object.keys(this.selector)[0];
|
||||
}
|
||||
|
||||
protected willUpdate(changedProps: PropertyValues) {
|
||||
if (changedProps.has("selector") && this.selector) {
|
||||
LOAD_ELEMENTS[this._type]?.();
|
||||
}
|
||||
}
|
||||
|
||||
protected render() {
|
||||
return html`
|
||||
${dynamicElement(`ha-selector-${this._type}`, {
|
||||
|
Loading…
x
Reference in New Issue
Block a user