static: fix ActionButton not working
This commit is contained in:
parent
372e51ee07
commit
eb9df38e92
|
@ -25,5 +25,8 @@ export default [
|
||||||
minifyHTML(),
|
minifyHTML(),
|
||||||
terser(),
|
terser(),
|
||||||
],
|
],
|
||||||
|
watch: {
|
||||||
|
clearScreen: false,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
|
@ -1,39 +1,47 @@
|
||||||
import { getCookie } from "../utils";
|
import { getCookie } from "../utils";
|
||||||
import { updateMessages } from "./Messages";
|
import { updateMessages } from "./Messages";
|
||||||
import { customElement, html, LitElement, property } from "lit-element";
|
import { customElement, html, LitElement, property } from "lit-element";
|
||||||
|
// @ts-ignore
|
||||||
|
import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
|
||||||
|
// @ts-ignore
|
||||||
|
import ButtonStyle from "@patternfly/patternfly/components/Button/button.css";
|
||||||
|
// @ts-ignore
|
||||||
|
import SpinnerStyle from "@patternfly/patternfly/components/Spinner/spinner.css";
|
||||||
|
|
||||||
const PRIMARY_CLASS = "pf-m-primary";
|
const PRIMARY_CLASS = "pf-m-primary";
|
||||||
const SUCCESS_CLASS = "pf-m-success";
|
const SUCCESS_CLASS = "pf-m-success";
|
||||||
const ERROR_CLASS = "pf-m-danger";
|
const ERROR_CLASS = "pf-m-danger";
|
||||||
const PROGRESS_CLASSES = ["pf-m-progress", "pf-m-in-progress"];
|
const PROGRESS_CLASS ="pf-m-in-progress";
|
||||||
|
|
||||||
@customElement("pb-action-button")
|
@customElement("pb-action-button")
|
||||||
export class ActionButton extends LitElement {
|
export class ActionButton extends LitElement {
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
this.querySelector("button")?.addEventListener("click", (e) =>
|
|
||||||
this.callAction()
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
@property()
|
@property()
|
||||||
url: string = "";
|
url: string = "";
|
||||||
|
|
||||||
|
@property()
|
||||||
isRunning = false;
|
isRunning = false;
|
||||||
|
|
||||||
|
static get styles() {
|
||||||
|
return [GlobalsStyle, ButtonStyle, SpinnerStyle]
|
||||||
|
}
|
||||||
|
|
||||||
setLoading() {
|
setLoading() {
|
||||||
this.isRunning = true;
|
this.isRunning = true;
|
||||||
this.classList.add(...PROGRESS_CLASSES);
|
this.classList.add(PROGRESS_CLASS);
|
||||||
|
this.requestUpdate();
|
||||||
}
|
}
|
||||||
|
|
||||||
setDone(statusClass: string) {
|
setDone(statusClass: string) {
|
||||||
this.isRunning = false;
|
this.isRunning = false;
|
||||||
this.classList.remove(...PROGRESS_CLASSES);
|
this.classList.remove(PROGRESS_CLASS);
|
||||||
this.classList.replace(PRIMARY_CLASS, statusClass);
|
this.classList.replace(PRIMARY_CLASS, statusClass);
|
||||||
|
this.requestUpdate();
|
||||||
// Trigger messages to update
|
// Trigger messages to update
|
||||||
updateMessages();
|
updateMessages();
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.classList.replace(statusClass, PRIMARY_CLASS);
|
this.classList.replace(statusClass, PRIMARY_CLASS);
|
||||||
|
this.requestUpdate();
|
||||||
}, 1000);
|
}, 1000);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -60,7 +68,7 @@ export class ActionButton extends LitElement {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return html`<button class="pf-c-button pf-m-primary">
|
return html`<button class="pf-c-button pf-m-progress ${this.classList}" @click=${() => this.callAction()}>
|
||||||
${this.isRunning
|
${this.isRunning
|
||||||
? html` <span class="pf-c-button__progress">
|
? html` <span class="pf-c-button__progress">
|
||||||
<span
|
<span
|
||||||
|
|
Reference in New Issue