70 lines
1.7 KiB
TypeScript
70 lines
1.7 KiB
TypeScript
import { writable } from "svelte/store";
|
|
// import { SvelteComponent } from "svelte/internal";
|
|
|
|
export const ModalStore = writable<Modal<any> | undefined>(undefined);
|
|
|
|
|
|
abstract class Modal<T> {
|
|
constructor(private title) { }
|
|
|
|
private onResult: (result: T | null) => void;
|
|
private closeOnResult: boolean;
|
|
private noClose: boolean = false;
|
|
|
|
abstract component: any;
|
|
|
|
protected result(value: T | null) {
|
|
if (this.closeOnResult)
|
|
this.close()
|
|
if (this.onResult)
|
|
this.onResult(value);
|
|
}
|
|
|
|
/**
|
|
* This function shows the modal
|
|
* Do not call when using getResult()
|
|
*/
|
|
public show(noClose = true) {
|
|
this.noClose = noClose;
|
|
ModalStore.set(this)
|
|
}
|
|
|
|
/**
|
|
* Shows the modal and waits for result.
|
|
*
|
|
* Call close when successful
|
|
*/
|
|
public async getResult(close = true) {
|
|
this.closeOnResult = close;
|
|
this.show(false);
|
|
return new Promise<T | null>((yes) => this.onResult = yes);
|
|
}
|
|
|
|
public close() {
|
|
ModalStore.set(undefined);
|
|
}
|
|
}
|
|
|
|
import YesNoComponent from "./components/modals/YesNo.svelte";
|
|
class YesNoModal extends Modal<boolean> {
|
|
component = YesNoComponent;
|
|
}
|
|
|
|
import InputComponent from "./components/modals/Input.svelte";
|
|
class InputModal extends Modal<string> {
|
|
component = InputComponent;
|
|
|
|
constructor(title: string, private fieldname: string, private type: "text" | "password") {
|
|
super(title);
|
|
}
|
|
}
|
|
|
|
|
|
export const Modals = {
|
|
YesNoModal: (title: string) => {
|
|
return new YesNoModal(title);
|
|
},
|
|
InputModal: (title: string, fieldname: string, type: "text" | "password") => {
|
|
return new InputModal(title, fieldname, type);
|
|
}
|
|
} |