From 00bed77c44ff4fa8c4c365f247d7fa1bc2880873 Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Sat, 27 Oct 2018 22:44:33 -0500 Subject: [PATCH 1/4] Convert hui-divider-row to TypeScript/LitElement --- .../lovelace/common/create-row-element.js | 2 +- .../lovelace/special-rows/hui-divider-row.js | 43 -------------- .../lovelace/special-rows/hui-divider-row.ts | 58 +++++++++++++++++++ 3 files changed, 59 insertions(+), 44 deletions(-) delete mode 100644 src/panels/lovelace/special-rows/hui-divider-row.js create mode 100644 src/panels/lovelace/special-rows/hui-divider-row.ts diff --git a/src/panels/lovelace/common/create-row-element.js b/src/panels/lovelace/common/create-row-element.js index eaff2bdce1aa..af3d91269f56 100644 --- a/src/panels/lovelace/common/create-row-element.js +++ b/src/panels/lovelace/common/create-row-element.js @@ -15,7 +15,7 @@ import "../entity-rows/hui-timer-entity-row.js"; import "../entity-rows/hui-toggle-entity-row.js"; import "../special-rows/hui-call-service-row.js"; -import "../special-rows/hui-divider-row.js"; +import "../special-rows/hui-divider-row"; import "../special-rows/hui-section-row.js"; import "../special-rows/hui-weblink-row.js"; diff --git a/src/panels/lovelace/special-rows/hui-divider-row.js b/src/panels/lovelace/special-rows/hui-divider-row.js deleted file mode 100644 index 453ee8b53822..000000000000 --- a/src/panels/lovelace/special-rows/hui-divider-row.js +++ /dev/null @@ -1,43 +0,0 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag.js"; -import { PolymerElement } from "@polymer/polymer/polymer-element.js"; - -class HuiDividerRow extends PolymerElement { - static get template() { - return html``; - } - - setConfig(config) { - if (!config) { - throw new Error("Error in card configuration."); - } - this._config = config; - this._createDivider(); - } - - ready() { - super.ready(); - this._createDivider(); - } - - _createDivider() { - const root = this.shadowRoot; - if (root === null) return; - - while (root.lastChild) { - root.removeChild(root.lastChild); - } - - const style = this._config.style || { - height: "1px", - "background-color": "var(--secondary-text-color)", - }; - - const el = document.createElement("div"); - Object.keys(style).forEach((prop) => { - el.style.setProperty(prop, style[prop]); - }); - - root.appendChild(el); - } -} -customElements.define("hui-divider-row", HuiDividerRow); diff --git a/src/panels/lovelace/special-rows/hui-divider-row.ts b/src/panels/lovelace/special-rows/hui-divider-row.ts new file mode 100644 index 000000000000..2b0881d16157 --- /dev/null +++ b/src/panels/lovelace/special-rows/hui-divider-row.ts @@ -0,0 +1,58 @@ +import { html, LitElement } from "@polymer/lit-element"; +import { EntityRow, DividerConfig } from "../entity-rows/types"; +import { HomeAssistant } from "../../../types"; + +class HuiDividerRow extends LitElement implements EntityRow { + public hass?: HomeAssistant; + private _config?: DividerConfig; + + static get properties() { + return { + _config: {}, + }; + } + + public setConfig(config): void { + if (!config) { + throw new Error("Error in card configuration."); + } + + if (!config.style) { + config.style = { + height: "1px", + "background-color": "var(--secondary-text-color)", + }; + } + + this._config = config; + } + + protected render() { + if (!this._config) { + return html``; + } + + return html` + ${this.renderStyle()} +
+ `; + } + + private renderStyle() { + return html` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "hui-divider-row": HuiDividerRow; + } +} + +customElements.define("hui-divider-row", HuiDividerRow); From 93223ec0c8060119868b925371279860e003721a Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Sat, 27 Oct 2018 23:05:23 -0500 Subject: [PATCH 2/4] Add return types --- src/panels/lovelace/special-rows/hui-divider-row.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/panels/lovelace/special-rows/hui-divider-row.ts b/src/panels/lovelace/special-rows/hui-divider-row.ts index 2b0881d16157..d356ef4fce6c 100644 --- a/src/panels/lovelace/special-rows/hui-divider-row.ts +++ b/src/panels/lovelace/special-rows/hui-divider-row.ts @@ -1,6 +1,7 @@ import { html, LitElement } from "@polymer/lit-element"; import { EntityRow, DividerConfig } from "../entity-rows/types"; import { HomeAssistant } from "../../../types"; +import { TemplateResult } from "lit-html"; class HuiDividerRow extends LitElement implements EntityRow { public hass?: HomeAssistant; @@ -27,7 +28,7 @@ class HuiDividerRow extends LitElement implements EntityRow { this._config = config; } - protected render() { + protected render(): TemplateResult { if (!this._config) { return html``; } @@ -38,7 +39,7 @@ class HuiDividerRow extends LitElement implements EntityRow { `; } - private renderStyle() { + private renderStyle(): TemplateResult { return html` - `; + private _createDivider(): HTMLElement { + const el = document.createElement("div"); + const style = this._config!.style || { + height: "1px", + "background-color": "var(--secondary-text-color)", + }; + + Object.keys(style).forEach((prop) => { + el.style.setProperty(prop, style[prop]); + }); + + return el; } } From 3dd8b1ed5588ea5b3ba64d12a484ec790d9b665d Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Sun, 28 Oct 2018 14:40:25 -0500 Subject: [PATCH 4/4] Address review comments --- .../lovelace/special-rows/hui-divider-row.ts | 108 +++++++++--------- 1 file changed, 53 insertions(+), 55 deletions(-) diff --git a/src/panels/lovelace/special-rows/hui-divider-row.ts b/src/panels/lovelace/special-rows/hui-divider-row.ts index 1f183bba4644..1720063db746 100644 --- a/src/panels/lovelace/special-rows/hui-divider-row.ts +++ b/src/panels/lovelace/special-rows/hui-divider-row.ts @@ -1,55 +1,53 @@ -import { html, LitElement } from "@polymer/lit-element"; -import { EntityRow, DividerConfig } from "../entity-rows/types"; -import { HomeAssistant } from "../../../types"; -import { TemplateResult } from "lit-html"; - -class HuiDividerRow extends LitElement implements EntityRow { - public hass?: HomeAssistant; - private _config?: DividerConfig; - - static get properties() { - return { - _config: {}, - }; - } - - public setConfig(config): void { - if (!config) { - throw new Error("Error in card configuration."); - } - - this._config = config; - } - - protected render(): TemplateResult { - if (!this._config) { - return html``; - } - - return html` - ${this._createDivider()} - `; - } - - private _createDivider(): HTMLElement { - const el = document.createElement("div"); - const style = this._config!.style || { - height: "1px", - "background-color": "var(--secondary-text-color)", - }; - - Object.keys(style).forEach((prop) => { - el.style.setProperty(prop, style[prop]); - }); - - return el; - } -} - -declare global { - interface HTMLElementTagNameMap { - "hui-divider-row": HuiDividerRow; - } -} - -customElements.define("hui-divider-row", HuiDividerRow); +import { html, LitElement } from "@polymer/lit-element"; +import { EntityRow, DividerConfig } from "../entity-rows/types"; +import { HomeAssistant } from "../../../types"; +import { TemplateResult } from "lit-html"; + +class HuiDividerRow extends LitElement implements EntityRow { + public hass?: HomeAssistant; + private _config?: DividerConfig; + + static get properties() { + return { + _config: {}, + }; + } + + public setConfig(config): void { + if (!config) { + throw new Error("Error in card configuration."); + } + + this._config = { + style: { + height: "1px", + "background-color": "var(--secondary-text-color)", + }, + ...config, + }; + } + + protected render(): TemplateResult { + if (!this._config) { + return html``; + } + + const el = document.createElement("div"); + + Object.keys(this._config.style).forEach((prop) => { + el.style.setProperty(prop, this._config!.style[prop]); + }); + + return html` + ${el} + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "hui-divider-row": HuiDividerRow; + } +} + +customElements.define("hui-divider-row", HuiDividerRow);