Convert ha-progress-button to lit (#6728)

This commit is contained in:
Joakim Sørensen 2020-08-29 00:08:56 +02:00 committed by GitHub
parent b39b54e0ac
commit 405bd29ebd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 97 additions and 110 deletions

View File

@ -1,110 +0,0 @@
import "@material/mwc-button";
import "../ha-circular-progress";
import { html } from "@polymer/polymer/lib/utils/html-tag";
/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
class HaProgressButton extends PolymerElement {
static get template() {
return html`
<style>
:host {
outline: none;
}
.container {
position: relative;
display: inline-block;
}
mwc-button {
transition: all 1s;
}
.success mwc-button {
--mdc-theme-primary: white;
background-color: var(--success-color);
transition: none;
}
.error mwc-button {
--mdc-theme-primary: white;
background-color: var(--error-color);
transition: none;
}
.progress {
@apply --layout;
@apply --layout-center-center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
<div class="container" id="container">
<mwc-button
id="button"
disabled="[[computeDisabled(disabled, progress)]]"
on-click="buttonTapped"
>
<slot></slot>
</mwc-button>
<template is="dom-if" if="[[progress]]">
<div class="progress">
<ha-circular-progress active size="small"></ha-circular-progress>
</div>
</template>
</div>
`;
}
static get properties() {
return {
hass: {
type: Object,
},
progress: {
type: Boolean,
value: false,
},
disabled: {
type: Boolean,
value: false,
},
};
}
tempClass(className) {
const classList = this.$.container.classList;
classList.add(className);
setTimeout(() => {
classList.remove(className);
}, 1000);
}
ready() {
super.ready();
this.addEventListener("click", (ev) => this.buttonTapped(ev));
}
buttonTapped(ev) {
if (this.progress) ev.stopPropagation();
}
actionSuccess() {
this.tempClass("success");
}
actionError() {
this.tempClass("error");
}
computeDisabled(disabled, progress) {
return disabled || progress;
}
}
customElements.define("ha-progress-button", HaProgressButton);

View File

@ -0,0 +1,97 @@
import "@material/mwc-button";
import {
css,
CSSResult,
customElement,
html,
LitElement,
property,
TemplateResult,
} from "lit-element";
import "../ha-circular-progress";
@customElement("ha-progress-button")
class HaProgressButton extends LitElement {
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public progress = false;
public render(): TemplateResult {
return html`
<mwc-button
.disabled=${this.disabled || this.progress}
@click=${this._buttonTapped}
>
<slot></slot>
</mwc-button>
${this.progress
? html`<div class="progress">
<ha-circular-progress size="small" active></ha-circular-progress>
</div>`
: ""}
`;
}
public actionSuccess(): void {
this._tempClass("success");
}
public actionError(): void {
this._tempClass("error");
}
private _tempClass(className: string): void {
this.classList.add(className);
setTimeout(() => {
this.classList.remove(className);
}, 1000);
}
private _buttonTapped(ev: Event): void {
if (this.progress) {
ev.stopPropagation();
}
}
static get styles(): CSSResult {
return css`
:host {
outline: none;
display: inline-block;
position: relative;
}
mwc-button {
transition: all 1s;
}
.success mwc-button {
--mdc-theme-primary: white;
background-color: var(--success-color);
transition: none;
}
.error mwc-button {
--mdc-theme-primary: white;
background-color: var(--error-color);
transition: none;
}
.progress {
bottom: 0;
margin-top: 4px;
position: absolute;
text-align: center;
top: 0;
width: 100%;
}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-progress-button": HaProgressButton;
}
}