sliftutils 0.43.0 → 0.45.0

package/index.d.ts

@@ -169,7 +169,10 @@ declare module "sliftutils/render-utils/DropdownCustom" {
 
 declare module "sliftutils/render-utils/FullscreenModal" {
     import preact from "preact";
-    export declare function showFullscreenModal(contents: preact.ComponentChildren): void;
+    export declare function showFullscreenModal(config: {
+        contents: preact.ComponentChildren;
+        onClose?: () => void;
+    }): void;
     export declare class FullscreenModal extends preact.Component<{
         parentState?: {
             open: boolean;
@@ -449,6 +452,7 @@ declare module "sliftutils/render-utils/modal" {
     import preact from "preact";
     export declare function showModal(config: {
         contents: preact.ComponentChildren;
+        onClose?: () => void;
     }): {
         close: () => void;
     };

package/package.json

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

package/render-utils/FullscreenModal.d.ts

@@ -1,5 +1,8 @@
 import preact from "preact";
-export declare function showFullscreenModal(contents: preact.ComponentChildren): void;
+export declare function showFullscreenModal(config: {
+    contents: preact.ComponentChildren;
+    onClose?: () => void;
+}): void;
 export declare class FullscreenModal extends preact.Component<{
     parentState?: {
         open: boolean;

package/render-utils/FullscreenModal.tsx

@@ -3,11 +3,15 @@ import { showModal } from "./modal";
 import { observable } from "mobx";
 import { observer } from "./observer";
 
-export function showFullscreenModal(contents: preact.ComponentChildren) {
+export function showFullscreenModal(config: {
+    contents: preact.ComponentChildren;
+    onClose?: () => void;
+}) {
     let { close } = showModal({
         contents: <FullscreenModal onCancel={() => close()}>
-            {contents}
-        </FullscreenModal>
+            {config.contents}
+        </FullscreenModal>,
+        onClose: config.onClose
     });
 }
 

package/render-utils/modal.d.ts

@@ -1,6 +1,7 @@
 import preact from "preact";
 export declare function showModal(config: {
     contents: preact.ComponentChildren;
+    onClose?: () => void;
 }): {
     close: () => void;
 };

package/render-utils/modal.tsx

@@ -4,20 +4,24 @@ 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>();
+type ModalData = {
+    contents: preact.ComponentChildren;
+    onClose?: () => void;
+};
+
+const activeModals = observable({} as { [key: string]: ModalData }, undefined, { deep: false });
 
 @observer
 class ModalRoot extends preact.Component {
     render() {
-        const modals: Array<[string, preact.ComponentChildren]> = Array.from(activeModals.entries());
-        return <>
-            {modals.map(([id, contents]) => (
+        const modals: Array<[string, ModalData]> = Object.entries(activeModals);
+        return <div>
+            {modals.map(([id, data]) => (
                 <div key={id}>
-                    {contents}
+                    {data.contents}
                 </div>
             ))}
-        </>;
+        </div>;
     }
 }
 
@@ -29,23 +33,42 @@ const ensureRootMounted = lazy(() => {
 
 let modalIdCounter = 0;
 
+function closeModal(id: string) {
+    const modal = activeModals[id];
+    if (!modal) {
+        return;
+    }
+
+    delete activeModals[id];
+
+    if (modal.onClose) {
+        modal.onClose();
+    }
+}
+
 export function showModal(config: {
     contents: preact.ComponentChildren;
+    onClose?: () => void;
 }): {
     close: () => void;
 } {
     ensureRootMounted();
 
     const id = `modal-${modalIdCounter++}`;
-    activeModals.set(id, config.contents);
+    activeModals[id] = {
+        contents: config.contents,
+        onClose: config.onClose
+    };
 
     return {
         close() {
-            activeModals.delete(id);
+            closeModal(id);
         }
     };
 }
 
 export function closeAllModals() {
-    activeModals.clear();
+    for (let key in activeModals) {
+        closeModal(key);
+    }
 }

package/web/browser.tsx

@@ -6,11 +6,13 @@ import { list } from "socket-function/src/misc";
 import { enableHotReloading } from "../builders/hotReload";
 import { URLParam } from "../render-utils/URLParam";
 import { Page } from "./Page";
+import { configureMobxNextFrameScheduler } from "sliftutils/render-utils/mobxTyped";
 
 
 async function main() {
     if (isNode()) return;
     await enableHotReloading({ port: 9877 });
+    configureMobxNextFrameScheduler();
     preact.render(<Page />, document.getElementById("app")!);
 }