Introduce Lit Element (#1738)

This commit is contained in:
Paulus Schoutsen 2018-10-07 11:07:02 +02:00 committed by GitHub
parent c90e13d35e
commit 1b70b6e88c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 57 additions and 49 deletions

View File

@ -34,6 +34,7 @@
"@polymer/iron-media-query": "^3.0.1",
"@polymer/iron-pages": "^3.0.1",
"@polymer/iron-resizable-behavior": "^3.0.1",
"@polymer/lit-element": "^0.6.1",
"@polymer/neon-animation": "^3.0.1",
"@polymer/paper-button": "^3.0.1",
"@polymer/paper-card": "^3.0.1",

View File

@ -1,70 +1,67 @@
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import { LitElement, html } from '@polymer/lit-element';
import './ha-progress-button.js';
import EventsMixin from '../../mixins/events-mixin.js';
import fireEvent from '../../common/dom/fire_event.js';
/*
* @appliesMixin EventsMixin
*/
class HaCallApiButton extends EventsMixin(PolymerElement) {
static get template() {
class HaCallApiButton extends LitElement {
render() {
return html`
<ha-progress-button id="progress" progress="[[progress]]" on-click="buttonTapped" disabled="[[disabled]]"><slot></slot></ha-progress-button>
`;
<ha-progress-button
.progress="${this.progress}"
@click="${this._buttonTapped}"
?disabled="${this.disabled}"
><slot></slot></ha-progress-button>
`;
}
constructor() {
super();
this.method = 'POST';
this.data = {};
this.disabled = false;
this.progress = false;
// Can be removed once this is merged:
// https://github.com/Polymer/lit-element/pull/244
this._buttonTapped = this._buttonTapped.bind(this);
}
static get properties() {
return {
hass: Object,
progress: {
type: Boolean,
value: false,
},
hass: { },
progress: Boolean,
path: String,
method: {
type: String,
value: 'POST',
},
data: {
type: Object,
value: {},
},
disabled: {
type: Boolean,
value: false,
},
method: String,
data: { },
disabled: Boolean
};
}
buttonTapped() {
get progressButton() {
return this.renderRoot.querySelector('ha-progress-button');
}
async _buttonTapped() {
this.progress = true;
const eventData = {
method: this.method,
path: this.path,
data: this.data,
data: this.data
};
this.hass.callApi(this.method, this.path, this.data)
.then((resp) => {
this.progress = false;
this.$.progress.actionSuccess();
eventData.success = true;
eventData.response = resp;
}, (resp) => {
this.progress = false;
this.$.progress.actionError();
eventData.success = false;
eventData.response = resp;
}).then(() => {
this.fire('hass-api-called', eventData);
});
try {
const resp = await this.hass.callApi(this.method, this.path, this.data);
this.progress = false;
this.progressButton.actionSuccess();
eventData.success = true;
eventData.response = resp;
} catch (err) {
this.progress = false;
this.progressButton.actionError();
eventData.success = false;
eventData.response = err;
}
fireEvent(this, 'hass-api-called', eventData);
}
}

View File

@ -835,6 +835,12 @@
"@polymer/iron-meta" "^3.0.0-pre.26"
"@polymer/polymer" "^3.0.0"
"@polymer/lit-element@^0.6.1":
version "0.6.1"
resolved "https://registry.yarnpkg.com/@polymer/lit-element/-/lit-element-0.6.1.tgz#56772f8fb0c6d3d73a20a6d17f3bc82ec648664b"
dependencies:
lit-html "^0.11.4"
"@polymer/neon-animation@^3.0.0-pre.26", "@polymer/neon-animation@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@polymer/neon-animation/-/neon-animation-3.0.1.tgz#6658e4b524abc057477772a7473292493d366c24"
@ -7829,6 +7835,10 @@ liftoff@^2.1.0:
rechoir "^0.6.2"
resolve "^1.1.7"
lit-html@^0.11.4:
version "0.11.4"
resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-0.11.4.tgz#fa397d2b2f2d0523ebc136e5a1699aa4e9346152"
load-json-file@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"