First Alpha

src/components/modals/Modal.tsx

@@ -1,9 +1,10 @@
-import Observable from "../../helper/observable";
+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 }>(false);
+   private static modalObservableServer = new Observable<{ modal: Modal<any>, close: boolean }>();
    public static modalObservable = Modal.modalObservableServer.getPublicApi();
 
 
@@ -11,9 +12,12 @@ export default abstract class Modal<T> {
 
    // 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);
    }
@@ -32,7 +36,8 @@ export default abstract class Modal<T> {
     * 
     * Call close when successful
     */
-   public async getResult() {
+   public async getResult(close = true) {
+      this.closeOnResult = close;
       this.show();
       return new Promise<T | null>((yes) => this.onResult = yes);
    }
@@ -65,7 +70,12 @@ export default abstract class Modal<T> {
             }
          }}>
             <div class="card" >
-               <h3 class="section">{this.props.modal.title}</h3>
+               <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>
@@ -74,62 +84,24 @@ export default abstract class Modal<T> {
 
 }
 
-
-// export default abstract class Modal<T, S> extends Component<{}, S> {
-
-
-//    // Abstract
-//    protected abstract renderChilds(): JSX.Element;
-//    protected abstract title: string;
-
-
-
-//    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.result(null)
-//          }
-//       }} onKeyDown={evt => {
-//          if (evt.keyCode === 27) {
-//             this.result(null)
-//          }
-//       }}>
-//          <div class="card" >
-//             <h3 class="section">{this.title}</h3>
-//             {this.renderChilds()}
-//          </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 }[]) {
+   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) // Only close if the same
+         if (this.state.modal === modal && close) // Only close if the same
             this.setState({ modal: undefined, component: undefined })
       }
    }
 
    componentWillMount() {
-      Modal.modalObservable.subscribe(this.onModal, true);
+      Modal.modalObservable.subscribe(this.onModal);
    }
 
    componentWillUnmount() {