brew-js-react 0.2.8 → 0.2.10

package/dialog.d.ts

@@ -10,24 +10,26 @@ export interface DialogBaseProps<T> {
     title?: string;
     className?: string;
     showCloseButton?: boolean;
+    preventLeave?: boolean;
+    preventNavigation?: boolean;
     modal?: boolean;
     onCommit?: (value: T | undefined) => void;
     onOpen?: (root: HTMLElement) => void;
     onClose?: (root: HTMLElement) => void;
 }
 
-export interface DialogRenderComponentProps<T> extends DialogBaseProps<T> {
+export interface DialogRenderComponentProps<T, P = {}> extends DialogBaseProps<T>, P {
     closeDialog: DialogCloseCallback<T>;
 }
 
-export interface DialogOptions<T> extends DialogBaseProps<T> {
-    onRender: React.FC<DialogRenderComponentProps<T>>;
+export interface DialogOptions<T, P = {}> extends DialogBaseProps<T> {
+    onRender: React.FC<DialogRenderComponentProps<T, P>>;
 }
 
 export interface DialogProps<T> extends React.PropsWithChildren<DialogBaseProps<T>> {
     isOpen: boolean;
 }
 
-export function createDialog<T = any>(props: DialogOptions<T>): DialogState<T>;
+export function createDialog<T = any, P = {}>(props: DialogOptions<T, P> & { wrapper?: React.FC<React.PropsWithChildren<DialogRenderComponentProps<T, P>>> }): DialogState<T>;
 
 export function Dialog<T>(props: DialogProps<T>): JSX.Element;

package/dialog.js

@@ -1,32 +1,33 @@
-import React, { useEffect, useState } from "react";
+import { createElement, useEffect, useState } from "react";
 import ReactDOM from "react-dom";
 import { always, catchAsync, either, extend, makeAsync, noop, pipe } from "./include/zeta-dom/util.js";
 import { containsOrEquals, removeNode } from "./include/zeta-dom/domUtil.js";
 import dom from "./include/zeta-dom/dom.js";
-import { lock } from "./include/zeta-dom/domLock.js";
+import { lock, preventLeave } from "./include/zeta-dom/domLock.js";
 import { closeFlyout, openFlyout } from "./include/brew-js/domAction.js";
 
+const createRoot = ReactDOM.createRoot;
+
 /**
  * @param {Partial<import("./dialog").DialogOptions<any>>} props
  */
 export function createDialog(props) {
     var root = document.createElement('div');
-    var closing = false;
+    var reactRoot = createRoot && createRoot(root);
+    var closeDialog = closeFlyout.bind(0, root);
     var promise;
 
-    function closeDialog(value) {
-        if (!closing) {
-            closing = true;
-            closeFlyout(root, value).then(function () {
-                closing = false;
-                removeNode(root);
-                (props.onClose || noop)(root);
-                if (props.onRender) {
-                    ReactDOM.unmountComponentAtNode(root);
-                }
-            });
+    dom.on(root, 'flyouthide', function () {
+        removeNode(root);
+        (props.onClose || noop)(root);
+        if (props.onRender) {
+            if (reactRoot) {
+                reactRoot.unmount();
+            } else {
+                ReactDOM.unmountComponentAtNode(root);
+            }
         }
-    }
+    });
 
     return {
         root: root,
@@ -50,9 +51,22 @@ export function createDialog(props) {
                         promise.then(closeDialog, noop);
                     }
                 });
-                ReactDOM.render(React.createElement(props.onRender, dialogProps), root);
+                var content = createElement(props.onRender, dialogProps);
+                if (props.wrapper) {
+                    content = createElement(props.wrapper, dialogProps, content);
+                }
+                if (reactRoot) {
+                    reactRoot.render(content);
+                } else {
+                    ReactDOM.render(content, root);
+                }
             }
             promise = openFlyout(root);
+            if (props.preventLeave) {
+                preventLeave(root, promise);
+            } else if (props.preventNavigation) {
+                lock(root, promise);
+            }
             always(promise, function () {
                 promise = null;
             });