116 lines
3.3 KiB
TypeScript
116 lines
3.3 KiB
TypeScript
import { Observable } from "@hibas123/utils";
|
|
import { h, Component } from "preact";
|
|
import CloseIcon from "feather-icons/dist/icons/x.svg";
|
|
|
|
export default abstract class Modal<T> {
|
|
// Static
|
|
private static modalObservableServer = new Observable<{ modal: Modal<any>, close: boolean }>();
|
|
public static modalObservable = Modal.modalObservableServer.getPublicApi();
|
|
|
|
|
|
protected abstract title: string;
|
|
|
|
// Private
|
|
private onResult: (result: T | null) => void;
|
|
private closeOnResult: boolean;
|
|
|
|
// Protected
|
|
protected result(value: T | null) {
|
|
if (this.closeOnResult)
|
|
this.close()
|
|
if (this.onResult)
|
|
this.onResult(value);
|
|
}
|
|
|
|
//Public
|
|
/**
|
|
* This function shows the modal
|
|
* Do not cell when using getResult()
|
|
*/
|
|
public async show() {
|
|
Modal.modalObservableServer.send({ modal: this, close: false });
|
|
}
|
|
|
|
/**
|
|
* Shows the modal and waits for result.
|
|
*
|
|
* Call close when successful
|
|
*/
|
|
public async getResult(close = true) {
|
|
this.closeOnResult = close;
|
|
this.show();
|
|
return new Promise<T | null>((yes) => this.onResult = yes);
|
|
}
|
|
|
|
public close() {
|
|
Modal.modalObservableServer.send({ modal: this, close: true });
|
|
}
|
|
|
|
public abstract getComponent(): JSX.Element;
|
|
|
|
public static BaseModal = class BaseModal<T> extends Component<{ modal: Modal<T> }, {}> {
|
|
render() {
|
|
return <div class="modal_container" onClick={(evt) => {
|
|
let path = evt.composedPath();
|
|
if (!path.find(e => {
|
|
let res = false;
|
|
let s = (e as Element);
|
|
if (s) {
|
|
if (s.classList) {
|
|
res = s.classList.contains("card")
|
|
}
|
|
}
|
|
return res;
|
|
})) {
|
|
this.props.modal.result(null)
|
|
}
|
|
}} onKeyDown={evt => {
|
|
if (evt.keyCode === 27) {
|
|
this.props.modal.result(null)
|
|
}
|
|
}}>
|
|
<div class="card" >
|
|
<div class="section" style="display:flex;justify-content:space-between;">
|
|
<h3>{this.props.modal.title}</h3>
|
|
<h3>
|
|
<CloseIcon onClick={() => this.props.modal.result(null)} width={undefined} height={undefined} style="height:calc(1rem * var(--heading-ratio) * var(--heading-ratio))" />
|
|
</h3>
|
|
</div>
|
|
{this.props.children}
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
export class ModalComponent extends Component<{}, { modal: Modal<any> | undefined, component: JSX.Element | undefined }>{
|
|
constructor(props) {
|
|
super(props);
|
|
this.onModal = this.onModal.bind(this);
|
|
}
|
|
|
|
onModal({ modal, close }: { modal: Modal<any>, close: boolean }) {
|
|
if (!close && this.state.modal !== modal) {
|
|
this.setState({ modal: modal, component: modal.getComponent() })
|
|
}
|
|
else {
|
|
if (this.state.modal === modal && close) // Only close if the same
|
|
this.setState({ modal: undefined, component: undefined })
|
|
}
|
|
}
|
|
|
|
componentWillMount() {
|
|
Modal.modalObservable.subscribe(this.onModal);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
Modal.modalObservable.unsubscribe(this.onModal);
|
|
}
|
|
|
|
render() {
|
|
return <div>
|
|
{this.state.component}
|
|
</div>
|
|
}
|
|
} |