mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-21 08:16:36 +00:00
Add some decorators (#1784)
* Add some decorators * Disable sort keys * Add babel plugins * Update typescript to 7.1
This commit is contained in:
parent
af81ede100
commit
a7684d7206
@ -20,6 +20,9 @@ module.exports.babelLoaderConfig = ({ latestBuild }) => {
|
||||
"@babel/plugin-proposal-object-rest-spread",
|
||||
{ loose: true, useBuiltIns: true },
|
||||
],
|
||||
// Used for decorators in typescript
|
||||
["@babel/plugin-proposal-decorators", { legacy: true }],
|
||||
"@babel/plugin-proposal-class-properties",
|
||||
// Only support the syntax, Webpack will handle it.
|
||||
"@babel/syntax-dynamic-import",
|
||||
[
|
||||
|
@ -91,7 +91,8 @@
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.1.2",
|
||||
"@babel/plugin-external-helpers": "^7.0.0",
|
||||
"@babel/plugin-proposal-class-properties": "7.0.0",
|
||||
"@babel/plugin-proposal-class-properties": "^7.1.0",
|
||||
"@babel/plugin-proposal-decorators": "^7.1.2",
|
||||
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
|
||||
"@babel/plugin-transform-react-jsx": "^7.0.0",
|
||||
|
@ -11,13 +11,13 @@ import {
|
||||
LocalizeMixin,
|
||||
} from "./localize-base-mixin";
|
||||
|
||||
export const HassLocalizeLitMixin = (
|
||||
superClass: Constructor<LitElement>
|
||||
): Constructor<LitElement & LocalizeMixin> =>
|
||||
export const HassLocalizeLitMixin = <T extends LitElement>(
|
||||
superClass: Constructor<T>
|
||||
): Constructor<T & LocalizeMixin> =>
|
||||
// @ts-ignore
|
||||
class extends LocalizeBaseMixin(superClass) {
|
||||
protected hass?: HomeAssistant;
|
||||
protected localize?: LocalizeFunc;
|
||||
protected localize!: LocalizeFunc;
|
||||
|
||||
static get properties(): PropertyDeclarations {
|
||||
return {
|
||||
|
@ -1,4 +1,10 @@
|
||||
import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
|
||||
import {
|
||||
html,
|
||||
LitElement,
|
||||
property,
|
||||
customElement,
|
||||
eventOptions,
|
||||
} from "@polymer/lit-element";
|
||||
import { fireEvent } from "../../../common/dom/fire_event.js";
|
||||
|
||||
import "../../../components/ha-card.js";
|
||||
@ -22,15 +28,13 @@ interface Config extends LovelaceConfig {
|
||||
service_data?: object;
|
||||
}
|
||||
|
||||
class HuiEntityButtonCard extends HassLocalizeLitMixin(LitElement)
|
||||
implements LovelaceCard {
|
||||
static get properties(): PropertyDeclarations {
|
||||
return {
|
||||
hass: {}
|
||||
};
|
||||
}
|
||||
|
||||
@customElement("hui-entity-button-card" as any)
|
||||
export class HuiEntityButtonCard extends HassLocalizeLitMixin(LitElement)
|
||||
implements LovelaceCard {
|
||||
@property()
|
||||
protected hass?: HomeAssistant;
|
||||
|
||||
@property()
|
||||
protected config?: Config;
|
||||
|
||||
public getCardSize() {
|
||||
@ -38,13 +42,13 @@ implements LovelaceCard {
|
||||
}
|
||||
|
||||
public setConfig(config: Config) {
|
||||
if(!isValidEntityId(config.entity)) {
|
||||
if (!isValidEntityId(config.entity)) {
|
||||
throw new Error("Invalid Entity");
|
||||
}
|
||||
|
||||
this.config = config;
|
||||
|
||||
if(this.hass) {
|
||||
if (this.hass) {
|
||||
this.requestUpdate();
|
||||
}
|
||||
}
|
||||
@ -54,26 +58,34 @@ implements LovelaceCard {
|
||||
return html``;
|
||||
}
|
||||
const stateObj = this.hass!.states[this.config.entity];
|
||||
|
||||
|
||||
return html`
|
||||
${this.renderStyle()}
|
||||
<ha-card @click="${this.handleClick}">
|
||||
${
|
||||
!stateObj
|
||||
? html`<div class="not-found">Entity not available: ${this.config.entity}</div>`
|
||||
: html`
|
||||
!stateObj
|
||||
? html`<div class="not-found">Entity not available: ${
|
||||
this.config.entity
|
||||
}</div>`
|
||||
: html`
|
||||
<paper-button>
|
||||
<div>
|
||||
<ha-icon
|
||||
data-domain="${computeStateDomain(stateObj)}"
|
||||
data-state="${stateObj.state}"
|
||||
.icon="${this.config.icon ? this.config.icon : stateIcon(stateObj)}"
|
||||
style="${styleMap({filter: this._computeBrightness(stateObj), color: this._computeColor(stateObj)})}"
|
||||
.icon="${
|
||||
this.config.icon ? this.config.icon : stateIcon(stateObj)
|
||||
}"
|
||||
style="${styleMap({
|
||||
filter: this._computeBrightness(stateObj),
|
||||
color: this._computeColor(stateObj),
|
||||
})}"
|
||||
></ha-icon>
|
||||
<span>
|
||||
${this.config.name
|
||||
? this.config.name
|
||||
: computeStateName(stateObj)
|
||||
${
|
||||
this.config.name
|
||||
? this.config.name
|
||||
: computeStateName(stateObj)
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
@ -131,26 +143,27 @@ implements LovelaceCard {
|
||||
const brightness = stateObj.attributes.brightness;
|
||||
return `brightness(${(brightness + 245) / 5}%)`;
|
||||
}
|
||||
|
||||
|
||||
private _computeColor(stateObj) {
|
||||
if (!stateObj.attributes.hs_color) {
|
||||
return '';
|
||||
return "";
|
||||
}
|
||||
const hue = stateObj.attributes.hs_color[0];
|
||||
const sat = stateObj.attributes.hs_color[1];
|
||||
if (sat <= 10) {
|
||||
return '';
|
||||
if (sat <= 10) {
|
||||
return "";
|
||||
}
|
||||
return `hsl(${hue}, 100%, ${100 - sat / 2}%)`;
|
||||
}
|
||||
|
||||
@eventOptions({ passive: true })
|
||||
private handleClick() {
|
||||
const config = this.config;
|
||||
if (!config) {
|
||||
return;
|
||||
}
|
||||
const stateObj = this.hass!.states[config.entity];
|
||||
if(!stateObj) {
|
||||
if (!stateObj) {
|
||||
return;
|
||||
}
|
||||
const entityId = stateObj.entity_id;
|
||||
@ -159,7 +172,7 @@ implements LovelaceCard {
|
||||
toggleEntity(this.hass, entityId);
|
||||
break;
|
||||
case "call-service": {
|
||||
if(!config.service){
|
||||
if (!config.service) {
|
||||
return;
|
||||
}
|
||||
const [domain, service] = config.service.split(".", 2);
|
||||
@ -178,5 +191,3 @@ declare global {
|
||||
"hui-entity-button-card": HuiEntityButtonCard;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("hui-entity-button-card", HuiEntityButtonCard);
|
||||
|
@ -1,4 +1,10 @@
|
||||
import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
|
||||
import {
|
||||
html,
|
||||
LitElement,
|
||||
customElement,
|
||||
property,
|
||||
eventOptions,
|
||||
} from "@polymer/lit-element";
|
||||
import { classMap } from "lit-html/directives/classMap.js";
|
||||
import { repeat } from "lit-html/directives/repeat";
|
||||
|
||||
@ -35,15 +41,15 @@ interface Config extends LovelaceConfig {
|
||||
entities: EntityConfig[];
|
||||
}
|
||||
|
||||
class HuiGlanceCard extends HassLocalizeLitMixin(LitElement)
|
||||
@customElement("hui-glance-card" as any)
|
||||
export class HuiGlanceCard extends HassLocalizeLitMixin(LitElement)
|
||||
implements LovelaceCard {
|
||||
static get properties(): PropertyDeclarations {
|
||||
return {
|
||||
hass: {},
|
||||
};
|
||||
}
|
||||
@property()
|
||||
protected hass?: HomeAssistant;
|
||||
|
||||
@property()
|
||||
protected config?: Config;
|
||||
|
||||
protected configEntities?: EntityConfig[];
|
||||
|
||||
public getCardSize() {
|
||||
@ -179,6 +185,7 @@ class HuiGlanceCard extends HassLocalizeLitMixin(LitElement)
|
||||
`;
|
||||
}
|
||||
|
||||
@eventOptions({ passive: true })
|
||||
private handleClick(ev: MouseEvent) {
|
||||
const config = (ev.currentTarget as any).entityConf as EntityConfig;
|
||||
const entityId = config.entity;
|
||||
@ -203,5 +210,3 @@ declare global {
|
||||
"hui-glance-card": HuiGlanceCard;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("hui-glance-card", HuiGlanceCard);
|
||||
|
@ -3,6 +3,7 @@
|
||||
"rules": {
|
||||
"interface-name": false,
|
||||
"no-submodule-imports": false,
|
||||
"ordered-imports": false
|
||||
"ordered-imports": false,
|
||||
"object-literal-sort-keys": false
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user