forked from MapComplete/MapComplete
89 lines
No EOL
2.9 KiB
TypeScript
89 lines
No EOL
2.9 KiB
TypeScript
import Translations from "../i18n/Translations";
|
|
import Combine from "./Combine";
|
|
import BaseUIElement from "../BaseUIElement";
|
|
import Link from "./Link";
|
|
import Img from "./Img";
|
|
import {Store, UIEventSource} from "../../Logic/UIEventSource";
|
|
import {UIElement} from "../UIElement";
|
|
import {VariableUiElement} from "./VariableUIElement";
|
|
import Lazy from "./Lazy";
|
|
import Loading from "./Loading";
|
|
|
|
|
|
export class SubtleButton extends UIElement {
|
|
private readonly imageUrl: string | BaseUIElement;
|
|
private readonly message: string | BaseUIElement;
|
|
private readonly options: { url?: string | Store<string>; newTab?: boolean ; imgSize?: string};
|
|
|
|
|
|
constructor(imageUrl: string | BaseUIElement, message: string | BaseUIElement, options: {
|
|
url?: string | Store<string>,
|
|
newTab?: boolean,
|
|
imgSize?: "h-11 w-11" | string
|
|
} = undefined) {
|
|
super();
|
|
this.imageUrl = imageUrl;
|
|
this.message = message;
|
|
this.options = options;
|
|
}
|
|
|
|
protected InnerRender(): string | BaseUIElement {
|
|
const classes = "block flex p-3 my-2 bg-subtle rounded-lg hover:shadow-xl hover:bg-unsubtle transition-colors transition-shadow link-no-underline";
|
|
const message = Translations.W(this.message)?.SetClass("block overflow-ellipsis no-images flex-shrink");
|
|
let img;
|
|
const imgClasses = "block justify-center flex-none mr-4 " + (this.options?.imgSize ?? "h-11 w-11")
|
|
if ((this.imageUrl ?? "") === "") {
|
|
img = undefined;
|
|
} else if (typeof (this.imageUrl) === "string") {
|
|
img = new Img(this.imageUrl)?.SetClass(imgClasses)
|
|
} else {
|
|
img = this.imageUrl?.SetClass(imgClasses);
|
|
}
|
|
const button = new Combine([
|
|
img,
|
|
message
|
|
]).SetClass("flex items-center group w-full")
|
|
|
|
|
|
if (this.options?.url == undefined) {
|
|
this.SetClass(classes)
|
|
return button
|
|
}
|
|
|
|
|
|
return new Link(
|
|
button,
|
|
this.options.url,
|
|
this.options.newTab ?? false
|
|
).SetClass(classes)
|
|
|
|
}
|
|
|
|
public OnClickWithLoading(
|
|
loadingText: BaseUIElement | string,
|
|
action: () => Promise<void> ) : BaseUIElement{
|
|
const state = new UIEventSource<"idle" | "running">("idle")
|
|
const button = this;
|
|
|
|
button.onClick(async() => {
|
|
state.setData("running")
|
|
try{
|
|
await action()
|
|
}catch(e){
|
|
console.error(e)
|
|
}finally {
|
|
state.setData("idle")
|
|
}
|
|
|
|
})
|
|
const loading = new Lazy(() => new Loading(loadingText) )
|
|
return new VariableUiElement(state.map(st => {
|
|
console.log("State is: ", st)
|
|
if(st === "idle"){
|
|
return button
|
|
}
|
|
return loading
|
|
}))
|
|
}
|
|
|
|
} |