brew-js-react 0.2.8 → 0.2.9

package/dialog.d.ts

@@ -10,24 +10,25 @@ export interface DialogBaseProps<T> {
     title?: string;
     className?: string;
     showCloseButton?: boolean;
+    preventLeave?: 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,16 +1,19 @@
-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 reactRoot = createRoot && createRoot(root);
     var closing = false;
     var promise;
 
@@ -22,7 +25,11 @@ export function createDialog(props) {
                 removeNode(root);
                 (props.onClose || noop)(root);
                 if (props.onRender) {
-                    ReactDOM.unmountComponentAtNode(root);
+                    if (reactRoot) {
+                        reactRoot.unmount();
+                    } else {
+                        ReactDOM.unmountComponentAtNode(root);
+                    }
                 }
             });
         }
@@ -50,9 +57,20 @@ 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);
+            }
             always(promise, function () {
                 promise = null;
             });