sliftutils 0.42.0 → 0.43.0

package/.cursorrules

@@ -79,6 +79,12 @@ Coding Styles
 
     Do not try catch for no reason. If you can't actually handle the exception, just let it throw.
 
+    For input events, always use event.currentTarget.
+
+    Use ref={elem => } callbacks. NEVER use .createRef.
+
+    NEVER render images with a fixed width+height. This will cause them to be stretched or cut off. This is terrible. Only set the width or height. 
+
 
 
 General Styling

package/index.d.ts

@@ -452,6 +452,7 @@ declare module "sliftutils/render-utils/modal" {
     }): {
         close: () => void;
     };
+    export declare function closeAllModals(): void;
 
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sliftutils",
-    "version": "0.42.0",
+    "version": "0.43.0",
     "main": "index.js",
     "license": "MIT",
     "files": [

package/render-utils/modal.d.ts

@@ -4,3 +4,4 @@ export declare function showModal(config: {
 }): {
     close: () => void;
 };
+export declare function closeAllModals(): void;

package/render-utils/modal.tsx

@@ -1,18 +1,51 @@
 import preact from "preact";
+import { observable } from "mobx";
+import * as mobx from "mobx";
+import { observer } from "./observer";
+import { lazy } from "socket-function/src/caching";
+
+// Global observable map to store all active modals
+const activeModals = new mobx.ObservableMap<string, preact.ComponentChildren>();
+
+@observer
+class ModalRoot extends preact.Component {
+    render() {
+        const modals: Array<[string, preact.ComponentChildren]> = Array.from(activeModals.entries());
+        return <>
+            {modals.map(([id, contents]) => (
+                <div key={id}>
+                    {contents}
+                </div>
+            ))}
+        </>;
+    }
+}
+
+const ensureRootMounted = lazy(() => {
+    const root = document.createElement("div");
+    document.body.appendChild(root);
+    preact.render(<ModalRoot />, root);
+});
+
+let modalIdCounter = 0;
 
 export function showModal(config: {
     contents: preact.ComponentChildren;
 }): {
     close: () => void;
 } {
-    let root = document.createElement("div");
-    document.body.appendChild(root);
-    preact.render(config.contents, root);
+    ensureRootMounted();
+
+    const id = `modal-${modalIdCounter++}`;
+    activeModals.set(id, config.contents);
 
     return {
         close() {
-            preact.render(undefined, root);
-            document.body.removeChild(root);
+            activeModals.delete(id);
         }
     };
+}
+
+export function closeAllModals() {
+    activeModals.clear();
 }

package/web/Page.tsx

@@ -31,6 +31,12 @@ export class Page extends preact.Component {
             el.click();
         }
     };
+    componentDidMount() {
+        document.addEventListener("keydown", this.onKeyDown);
+    }
+    componentWillUnmount() {
+        document.removeEventListener("keydown", this.onKeyDown);
+    }
     render() {
         let pages = [
             {