brew-js-react 0.6.6 → 0.6.7

package/dialog.d.ts

@@ -14,6 +14,41 @@ export type DialogBaseProps<T, V = T> = Omit<DialogOptions<T, V | undefined>, 'o
 /** @deprecated */
 export type DialogRenderComponentProps<T, V = T> = DialogOptions<T, V | undefined> & DialogContext<V | undefined>;
 
+export type DialogControllerOptions = Pick<DialogOptions<any>, 'container' | 'className' | 'focus' | 'modal'>;
+
+export interface DialogControllerAdvancedOptions extends DialogControllerOptions, Pick<DialogOptions<any>, 'onClose' | 'onOpen' | 'preventLeave' | 'preventNavigation'> {
+    /**
+     * Specifies how dialogs are queued and displayed.
+     *
+     * - `shared`: content of subsequent dialogs are rendered in the same dialog element;
+     * - `multiple`: multiple dialogs can be shown at the same time, as child elements of root dialog element associated with the controller.
+     */
+    mode: 'shared' | 'multiple';
+    /**
+     * Specifies number of dialogs can be shown at the same time.
+     * When limit is exceeded, dialog will be pended to open until any active dialog is closed.
+     *
+     * By default there is no limit, and has no effect when {@link DialogControllerAdvancedOptions.mode} is `shared`.
+     */
+    concurrent?: number;
+}
+
+export interface DialogController {
+    /**
+     * Gets the number of dialogs pending to be shown.
+     */
+    readonly pendingCount: number;
+    /**
+     * Cancels pending dialogs, while currently open dialog will not be dismissed.
+     */
+    dismissPending(): void;
+    /**
+     * Cancels active and pending dialogs.
+     * @param value Value send to active dialog. It is ignored when `mode` is `multiple`.
+     */
+    dismissAll(value?: any): void;
+}
+
 export interface DialogState<T> {
     /**
      * Gets the root element of the dialog.
@@ -35,6 +70,18 @@ export interface DialogState<T> {
 }
 
 export interface DialogOptions<T, V = T | undefined> {
+    /**
+     * Specifies a controller to allow queueing similar dialogs.
+     *
+     * When a controller with shared mode is specified, since there is not a designated element for individual dialog,
+     * the following options will have no effects: `container`, `className`, `focus`, `modal`, `preventLeave` and `preventNavigation`.
+     */
+    controller?: DialogController;
+    /**
+     * Specifies container element where dialog's root element will be inserted to.
+     * Default to document's body.
+     */
+    container?: HTMLElement;
     /**
      * Specifies dialog title.
      * This property is intended to be handled by {@link DialogOptions.onRender} or {@link DialogOptions.wrapper}.
@@ -133,7 +180,17 @@ export interface DialogProps<T, V = T> extends React.PropsWithChildren<DialogBas
 }
 
 /**
- * Creates a controller to render dialog.
+ * Creates a controller that manage multiple dialogs.
+ *
+ * When specified as {@link DialogOptions.controller} option for {@link createDialog},
+ * dialogs will be queued and be shown one after other.
+ *
+ * @param props A dictionary containing options.
+ */
+export function createDialogQueue(options?: DialogControllerOptions | DialogControllerAdvancedOptions): DialogController;
+
+/**
+ * Creates a dialog instance.
  * @param props A dictionary containing options.
  */
 export function createDialog<T, V>(props: DialogOptionsStrict<T, V>): DialogState<VoidOrOptional<T>>;

package/dialog.js

@@ -2,102 +2,201 @@ import { createElement, StrictMode, useEffect, useState } from "react";
 import ReactDOM from "react-dom";
 import ReactDOMClient from "@misonou/react-dom-client";
 import { createAsyncScope } from "zeta-dom-react";
-import { either, extend, noop, pick, resolve } from "zeta-dom/util";
+import { always, arrRemove, combineFn, createPrivateStore, defineObservableProperty, either, extend, noop, pick, resolve, setImmediate } from "zeta-dom/util";
 import { containsOrEquals, removeNode } from "zeta-dom/domUtil";
 import dom from "zeta-dom/dom";
 import { lock, preventLeave, runAsync, subscribeAsync } from "zeta-dom/domLock";
-import { closeFlyout, openFlyout } from "brew-js/domAction";
+import { closeFlyout, isFlyoutOpen, openFlyout } from "brew-js/domAction";
 
-/**
- * @param {Partial<import("./dialog").DialogOptions<any>>} props
- */
-export function createDialog(props) {
-    var root = document.createElement('div');
-    var reactRoot = ReactDOMClient.createRoot(root);
-    var scope = createAsyncScope(root);
-    var closeDialog = closeFlyout.bind(0, root);
+const _ = createPrivateStore();
+
+function debounceAsync(callback) {
     var promise;
+    return function () {
+        if (!promise) {
+            promise = callback.apply(this, arguments);
+            always(promise, function () {
+                promise = null;
+            });
+        }
+        return promise;
+    };
+}
 
+function createDialogElement(props, unmountAfterUse) {
+    var root = document.createElement('div');
     dom.on(root, {
         flyoutshow: function () {
             (props.onOpen || noop)(root);
         },
         flyouthide: function () {
-            promise = null;
             removeNode(root);
             (props.onClose || noop)(root);
-            if (props.onRender) {
-                reactRoot.unmount();
-            }
+            (unmountAfterUse || noop)();
         }
     });
     root.setAttribute('loading-class', '');
     subscribeAsync(root, true);
+    return root;
+}
+
+function openDialog(element, props, container) {
+    if (!containsOrEquals(dom.root, element)) {
+        element.className = props.className || '';
+        (container || props.container || document.body).appendChild(element);
+        if (props.modal) {
+            element.setAttribute('is-modal', '');
+        }
+        setImmediate(function () {
+            dom.retainFocus(dom.activeElement, element);
+        });
+    }
+    var promise = openFlyout(element, null, pick(props, ['focus', 'closeOnBlur']));
+    if (props.preventLeave) {
+        preventLeave(element, promise);
+    } else if (props.preventNavigation) {
+        lock(element, promise);
+    }
+    return promise;
+}
+
+/**
+ * @param {Partial<import("./dialog").DialogOptions<any>>} props
+ */
+export function createDialog(props) {
+    var controller = _(props.controller) || {};
+    var shared = controller.mode === 'shared';
+    var state = shared ? controller : {};
+    var root = state.root || (state.root = createDialogElement(props, function () {
+        reactRoot.unmount();
+    }));
+    var reactRoot = state.reactRoot || (state.reactRoot = ReactDOMClient.createRoot(root));
+    var scope = state.scope || (state.scope = createAsyncScope(root));
+    var closeDialog = shared ? noop : closeFlyout.bind(0, root);
+
+    function render(closeDialog, props, container) {
+        var commitDialog = props.onCommit ? function (value) {
+            return runAsync(dom.activeElement, props.onCommit.bind(this, value)).then(closeDialog);
+        } : closeDialog;
+        var dialogProps = extend({}, props, {
+            errorHandler: scope.errorHandler,
+            closeDialog: commitDialog,
+            commitDialog: commitDialog,
+            dismissDialog: closeDialog
+        });
+        var content = createElement(props.onRender, dialogProps);
+        if (props.wrapper) {
+            content = createElement(props.wrapper, dialogProps, content);
+        }
+        reactRoot.render(createElement(StrictMode, null, createElement(scope.Provider, null, content)));
+        return shared ? { then: noop } : openDialog(root, props, container);
+    }
 
     return {
         root: root,
-        close: closeDialog,
-        open: function () {
-            if (promise) {
-                return promise;
-            }
-            root.className = props.className || '';
-            document.body.appendChild(root);
-            if (props.modal) {
-                root.setAttribute('is-modal', '');
-            }
-            if (props.onRender) {
-                var commitDialog = props.onCommit ? function (value) {
-                    return runAsync(dom.activeElement, props.onCommit.bind(this, value)).then(closeDialog);
-                } : closeDialog;
-                var dialogProps = extend({}, props, {
-                    errorHandler: scope.errorHandler,
-                    closeDialog: commitDialog,
-                    commitDialog: commitDialog,
-                    dismissDialog: closeDialog
+        close: function (value) {
+            return closeDialog(value);
+        },
+        open: debounceAsync(function () {
+            if (controller.enqueue) {
+                return controller.enqueue(function (next) {
+                    closeDialog = shared ? next : closeDialog;
+                    render(closeDialog, extend({}, controller.props, props), controller.root).then(next);
                 });
-                var content = createElement(props.onRender, dialogProps);
-                if (props.wrapper) {
-                    content = createElement(props.wrapper, dialogProps, content);
+            }
+            return render(closeDialog, props);
+        })
+    };
+}
+
+/**
+ * @param {import("./dialog").DialogControllerOptions | undefined} props
+ */
+export function createDialogQueue(props) {
+    var mode = props && props.mode;
+    var root = mode && createDialogElement(props);
+    var multiple = mode === 'multiple';
+    var childProps;
+    var queue = [];
+    var active = [];
+    var controller = {};
+    var setPendingCount = defineObservableProperty(controller, 'pendingCount', 0, true);
+
+    function dismissPending() {
+        combineFn(queue.splice(0))();
+        setPendingCount(0);
+    }
+
+    function dismissAll(value) {
+        combineFn(active.splice(0))(multiple ? undefined : value);
+        dismissPending();
+    }
+
+    function render(callback) {
+        return new Promise(function (resolvePromise) {
+            var next = function (value) {
+                if (arrRemove(active, resolvePromise)) {
+                    resolvePromise(value);
+                    setImmediate(function () {
+                        (queue.shift() || noop)(true);
+                    });
                 }
-                reactRoot.render(createElement(StrictMode, null, createElement(scope.Provider, null, content)));
+                return root && !queue[0] && !active[0] ? closeFlyout(root) : resolve();
+            };
+            active.push(resolvePromise);
+            setPendingCount(queue.length);
+            callback(next);
+        });
+    }
+
+    if (multiple) {
+        childProps = { closeOnBlur: false };
+        props = extend({}, props, childProps);
+    } else {
+        childProps = props && pick(props, ['className', 'focus', 'modal', 'container']);
+    }
+    _(controller, {
+        root: root,
+        mode: mode,
+        props: childProps,
+        enqueue: function (callback) {
+            if (root && !isFlyoutOpen(root)) {
+                openDialog(root, props).then(dismissAll);
             }
-            promise = resolve().then(function () {
-                dom.retainFocus(dom.activeElement, root);
-                return openFlyout(root, null, pick(props, ['focus']));
-            });
-            if (props.preventLeave) {
-                preventLeave(root, promise);
-            } else if (props.preventNavigation) {
-                lock(root, promise);
+            if (queue.length || active.length >= (multiple ? props.concurrent || Infinity : 1)) {
+                return new Promise(function (resolve) {
+                    queue.push(function (renderNext) {
+                        resolve(renderNext && render(callback));
+                    });
+                    setPendingCount(queue.length);
+                });
             }
-            return promise;
+            return render(callback);
         }
-    };
+    });
+    return extend(controller, { dismissAll, dismissPending });
 }
 
 /**
  * @param {import("./dialog").DialogProps} props
  */
 export function Dialog(props) {
-    const _props = useState({})[0];
-    const dialog = useState(function () {
-        return createDialog(_props);
+    const _props = extend(useState({})[0], props);
+    const element = useState(function () {
+        return createDialogElement(_props);
     })[0];
-    extend(_props, props);
-
     useEffect(function () {
-        var opened = containsOrEquals(dom.root, dialog.root);
+        var opened = isFlyoutOpen(element);
         if (either(opened, _props.isOpen)) {
             if (!opened) {
-                dialog.open();
+                openDialog(element, _props);
             } else {
-                dialog.close();
+                closeFlyout(element);
             }
         }
     }, [_props.isOpen])
     useEffect(function () {
-        return dialog.close;
-    }, [dialog]);
-    return ReactDOM.createPortal(props.children, dialog.root);
+        return closeFlyout.bind(0, element);
+    }, []);
+    return ReactDOM.createPortal(props.children, element);
 }