🕶 convert hui-notification-item to TypeScript/LitElement (#3028)

This commit is contained in:
Ian Richardson 2019-03-27 23:14:27 -05:00 committed by Paulus Schoutsen
parent 7f8f99a414
commit eac37af18c
3 changed files with 56 additions and 36 deletions

View File

@ -1,35 +0,0 @@
import { PolymerElement } from "@polymer/polymer/polymer-element";
import computeDomain from "../../../../common/entity/compute_domain";
import "./hui-configurator-notification-item";
import "./hui-persistent-notification-item";
export class HuiNotificationItem extends PolymerElement {
static get properties() {
return {
hass: Object,
notification: {
type: Object,
observer: "_stateChanged",
},
};
}
_stateChanged(notification) {
if (this.lastChild) {
this.removeChild(this.lastChild);
}
if (!notification) return;
const domain = notification.entity_id
? computeDomain(notification.entity_id)
: "persistent_notification";
const tag = `hui-${domain}-notification-item`;
const el = document.createElement(tag);
el.hass = this.hass;
el.notification = notification;
this.appendChild(el);
}
}
customElements.define("hui-notification-item", HuiNotificationItem);

View File

@ -0,0 +1,55 @@
import {
LitElement,
property,
customElement,
PropertyValues,
TemplateResult,
html,
} from "lit-element";
import "./hui-configurator-notification-item";
import "./hui-persistent-notification-item";
import { HassEntity } from "home-assistant-js-websocket";
import { HomeAssistant } from "../../../../types";
@customElement("hui-notification-item")
export class HuiNotificationItem extends LitElement {
@property() public hass?: HomeAssistant;
@property() public notification?: HassEntity;
protected shouldUpdate(changedProps: PropertyValues): boolean {
if (!this.hass || !this.notification || changedProps.has("notification")) {
return true;
}
return false;
}
protected render(): TemplateResult | void {
if (!this.hass || !this.notification) {
return html``;
}
return this.notification.entity_id
? html`
<hui-configurator-notification-item
.hass="${this.hass}"
.notification="${this.notification}"
></hui-configurator-notification-item>
`
: html`
<hui-persistent-notification-item
.hass="${this.hass}"
.notification="${this.notification}"
></hui-persistent-notification-item>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"hui-notification-item": HuiNotificationItem;
}
}

View File

@ -87,6 +87,6 @@ export class HuiPersistentNotificationItem extends LocalizeMixin(
}
}
customElements.define(
"hui-persistent_notification-notification-item",
"hui-persistent-notification-item",
HuiPersistentNotificationItem
);