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

Load selector elements dynamic (#14084)

Browse Source 
Co-authored-by: Paul Bottein <paul.bottein@gmail.com>
This commit is contained in:
Bram Kragten 2022-10-13 14:28:49 +02:00 committed by GitHub
parent 9b19b6f203
commit fe9967550b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/ha-form/ha-form.ts
View File

@ -1,34 +1,26 @@
import { import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
css,
CSSResultGroup,
html,
LitElement,
PropertyValues,
TemplateResult,
} from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { dynamicElement } from "../../common/dom/dynamic-element-directive"; import { dynamicElement } from "../../common/dom/dynamic-element-directive";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
import { HomeAssistant } from "../../types";
import "../ha-alert"; import "../ha-alert";
import "../ha-selector/ha-selector";
import "./ha-form-boolean"; import "./ha-form-boolean";
import "./ha-form-constant"; import "./ha-form-constant";
import "./ha-form-grid";
import "./ha-form-float"; import "./ha-form-float";
import "./ha-form-grid";
import "./ha-form-integer"; import "./ha-form-integer";
import "./ha-form-multi_select"; import "./ha-form-multi_select";
import "./ha-form-positive_time_period_dict"; import "./ha-form-positive_time_period_dict";
import "./ha-form-select"; import "./ha-form-select";
import "./ha-form-string"; import "./ha-form-string";
import { HaFormElement, HaFormDataContainer, HaFormSchema } from "./types"; import { HaFormDataContainer, HaFormElement, HaFormSchema } from "./types";
import { HomeAssistant } from "../../types";
const getValue = (obj, item) => const getValue = (obj, item) =>
obj ? (!item.name ? obj : obj[item.name]) : null; obj ? (!item.name ? obj : obj[item.name]) : null;
const getError = (obj, item) => (obj && item.name ? obj[item.name] : null); const getError = (obj, item) => (obj && item.name ? obj[item.name] : null);
let selectorImported = false;
@customElement("ha-form") @customElement("ha-form")
export class HaForm extends LitElement implements HaFormElement { export class HaForm extends LitElement implements HaFormElement {
@property({ attribute: false }) public hass!: HomeAssistant; @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 { protected render(): TemplateResult {
return html` return html`
<div class="root" part="root"> <div class="root" part="root">

65
src/components/ha-selector/ha-selector.ts
View File

@ -1,35 +1,38 @@
import { html, LitElement } from "lit"; import { html, LitElement, PropertyValues } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { dynamicElement } from "../../common/dom/dynamic-element-directive"; import { dynamicElement } from "../../common/dom/dynamic-element-directive";
import type { Selector } from "../../data/selector"; import type { Selector } from "../../data/selector";
import type { HomeAssistant } from "../../types"; import type { HomeAssistant } from "../../types";
import "./ha-selector-action";
import "./ha-selector-addon"; const LOAD_ELEMENTS = {
import "./ha-selector-area"; action: () => import("./ha-selector-action"),
import "./ha-selector-attribute"; addon: () => import("./ha-selector-addon"),
import "./ha-selector-boolean"; area: () => import("./ha-selector-area"),
import "./ha-selector-color-rgb"; attribute: () => import("./ha-selector-attribute"),
import "./ha-selector-config-entry"; boolean: () => import("./ha-selector-boolean"),
import "./ha-selector-date"; "color-rgb": () => import("./ha-selector-color-rgb"),
import "./ha-selector-datetime"; "config-entry": () => import("./ha-selector-config-entry"),
import "./ha-selector-device"; date: () => import("./ha-selector-date"),
import "./ha-selector-duration"; datetime: () => import("./ha-selector-datetime"),
import "./ha-selector-entity"; device: () => import("./ha-selector-device"),
import "./ha-selector-file"; duration: () => import("./ha-selector-duration"),
import "./ha-selector-navigation"; entity: () => import("./ha-selector-entity"),
import "./ha-selector-number"; file: () => import("./ha-selector-file"),
import "./ha-selector-object"; navigation: () => import("./ha-selector-navigation"),
import "./ha-selector-select"; number: () => import("./ha-selector-number"),
import "./ha-selector-state"; object: () => import("./ha-selector-object"),
import "./ha-selector-target"; select: () => import("./ha-selector-select"),
import "./ha-selector-template"; state: () => import("./ha-selector-state"),
import "./ha-selector-text"; target: () => import("./ha-selector-target"),
import "./ha-selector-time"; template: () => import("./ha-selector-template"),
import "./ha-selector-icon"; text: () => import("./ha-selector-text"),
import "./ha-selector-media"; time: () => import("./ha-selector-time"),
import "./ha-selector-theme"; icon: () => import("./ha-selector-icon"),
import "./ha-selector-location"; media: () => import("./ha-selector-media"),
import "./ha-selector-color-temp"; theme: () => import("./ha-selector-theme"),
location: () => import("./ha-selector-location"),
"color-temp": () => import("./ha-selector-color-temp"),
};
@customElement("ha-selector") @customElement("ha-selector")
export class HaSelector extends LitElement { export class HaSelector extends LitElement {
@ -59,6 +62,12 @@ export class HaSelector extends LitElement {
return Object.keys(this.selector)[0]; return Object.keys(this.selector)[0];
} }
protected willUpdate(changedProps: PropertyValues) {
if (changedProps.has("selector") && this.selector) {
LOAD_ELEMENTS[this._type]?.();
}
}
protected render() { protected render() {
return html` return html`
${dynamicElement(`ha-selector-${this._type}`, { ${dynamicElement(`ha-selector-${this._type}`, {