brew-js-react 0.6.3 → 0.6.5

package/dialog.d.ts

@@ -1,4 +1,18 @@
-export type DialogCloseCallback<T> = (value?: T) => Promise<void>;
+import { ErrorHandler } from "zeta-dom-react";
+
+type PartialRequired<T, K extends keyof T> = Omit<T, K> & { [P in K]-?: T[P] }
+type VoidOrOptional<T> = [Exclude<T, undefined | void>] extends [never] ? void : Exclude<T, undefined | void>;
+
+export type DialogCloseCallback<T> = Zeta.IsAnyOrUnknown<T> extends true ?
+    (value?: any) => Promise<void> :
+    (value: T extends undefined ? void | undefined : T) => Promise<void>;
+export type DialogResult<T> = T extends void ? undefined : Zeta.IsAnyOrUnknown<T> extends true ? any : T | undefined;
+export type DialogOptionsStrict<T, V> = PartialRequired<DialogOptions<T, V>, 'onCommit'>;
+
+/** @deprecated */
+export type DialogBaseProps<T, V = T> = Omit<DialogOptions<T, V | undefined>, 'onRender' | 'wrapper'>;
+/** @deprecated */
+export type DialogRenderComponentProps<T, V = T> = DialogOptions<T, V | undefined> & DialogContext<V | undefined>;
 
 export interface DialogState<T> {
     /**
@@ -8,19 +22,19 @@ export interface DialogState<T> {
     /**
      * Opens the dialog.
      *
-     * It will receive result from {@link DialogState.close} or {@link DialogRenderComponentProps.closeDialog} when the dialog is properly closed.
+     * It will receive result from {@link DialogState.close} or {@link DialogContext.closeDialog} when the dialog is properly closed.
      * Otherwise in cases such as being closed due to lost of focus, result value will always be `undefined`.
      */
-    open: () => Promise<T | undefined>;
+    open(): Promise<DialogResult<T>>;
     /**
      * Closes the dialog, with optional result value.
      *
-     * This method is different from {@link DialogRenderComponentProps.closeDialog} that {@link DialogBaseProps.onCommit} will not be called.
+     * This method is similar to {@link DialogContext.dismissDialog} that {@link DialogOptions.onCommit} will not be called.
      */
-    close: (value?: T) => Promise<void>;
+    close(value?: T): Promise<void>;
 }
 
-export interface DialogBaseProps<T, V = T> {
+export interface DialogOptions<T, V = T | undefined> {
     /**
      * Specifies dialog title.
      * This property is intended to be handled by {@link DialogOptions.onRender} or {@link DialogOptions.wrapper}.
@@ -58,13 +72,13 @@ export interface DialogBaseProps<T, V = T> {
     /**
      * Callback to perform asynchronous action when user confirms the dialog.
      *
-     * The callback will receive value sent from {@link DialogRenderComponentProps.closeDialog},
+     * The callback will receive value sent from {@link DialogContext.commitDialog} or {@link DialogContext.closeDialog},
      * and will send resolved value to promise returned by {@link DialogState.open}.
      *
      * The dialog will be held open until the returned promise resolves.
      * When the promise rejects, the dialog will remain open.
      */
-    onCommit?: (value: V | undefined, context: Zeta.RunAsyncContext) => T | Promise<T> | void;
+    onCommit?: (value: V, context: Zeta.RunAsyncContext) => T | Promise<T> | undefined | void;
     /**
      * Callback to be invoked when dialog has opened.
      */
@@ -73,28 +87,42 @@ export interface DialogBaseProps<T, V = T> {
      * Callback to be invoked when dialog has closed, after outro animation and before React DOM is unmounted.
      */
     onClose?: (root: HTMLElement) => void;
+    /**
+     * A callback that render dialog contents.
+     */
+    onRender: React.VFC<DialogContext<V> & this>;
+    /**
+     * Specifies wrapper component that envelops content from {@link DialogOptions.onRender},
+     * which is useful for reusable layout for dialogs.
+     */
+    wrapper?: React.FC<DialogContext<V> & this & React.PropsWithChildren<{}>>;
 }
 
-export interface DialogRenderComponentProps<T, V = T> extends DialogBaseProps<T, V> {
+export interface DialogContext<V> {
+    /**
+     * Gets an {@link ErrorHandler} object that catches errors emitted from rendered content.
+     */
+    errorHandler: ErrorHandler;
     /**
-     * Commits the dialog, with optional result value.
+     * Commits the dialog with result value.
      *
-     * When {@link DialogBaseProps.onCommit} is specified, it is invoked with the value passed in.
+     * When {@link DialogOptions.onCommit} is specified, it is invoked with the value passed in.
      * Dialog will be closed when async operation is completed, or remain open if the operation failed.
+     *
+     * @deprecated Alias of {@link DialogContext.commitDialog}.
      */
-    closeDialog: (value?: V) => Promise<void>;
-}
-
-export interface DialogOptions<T, V = T> extends DialogBaseProps<T, V> {
+    closeDialog: DialogCloseCallback<V>;
     /**
-     * A callback that render dialog contents.
+     * Commits the dialog with result value.
+     *
+     * When {@link DialogOptions.onCommit} is specified, it is invoked with the value passed in.
+     * Dialog will be closed when async operation is completed, or remain open if the operation failed.
      */
-    onRender: React.FC<DialogRenderComponentProps<T, V> & this>;
+    commitDialog: DialogCloseCallback<V>;
     /**
-     * Specifies wrapper component that envelops content from {@link DialogOptions.onRender},
-     * which is useful for reusable layout for dialogs.
+     * Closes the dialog without invoking {@link DialogOptions.onCommit}.
      */
-    wrapper?: React.FC<React.PropsWithChildren<DialogRenderComponentProps<T, V> & this>>;
+    dismissDialog: DialogCloseCallback<void>;
 }
 
 export interface DialogProps<T, V = T> extends React.PropsWithChildren<DialogBaseProps<T, V>> {
@@ -108,7 +136,15 @@ export interface DialogProps<T, V = T> extends React.PropsWithChildren<DialogBas
  * Creates a controller to render dialog.
  * @param props A dictionary containing options.
  */
-export function createDialog<T = any, V = T>(props: DialogOptions<T, V>): DialogState<T>;
+export function createDialog<T, V>(props: DialogOptionsStrict<T, V>): DialogState<VoidOrOptional<T>>;
+
+export function createDialog<T, V>(props: DialogOptions<T, V>): DialogState<VoidOrOptional<T | V>>;
+
+export function createDialog<T, V = T>(props: DialogOptions<T, V | undefined>): DialogState<VoidOrOptional<T | V>>;
+
+export function createDialog<P extends DialogOptionsStrict<any, any>>(props: P): DialogState<VoidOrOptional<P extends DialogOptionsStrict<infer T, any> ? T : unknown>>;
+
+export function createDialog<P extends DialogOptions<any, any>>(props: P): DialogState<VoidOrOptional<P extends DialogOptions<infer T, infer V> ? T | V : unknown>>;
 
 /**
  * Renders a dialog declaratively.

package/dialog.js

@@ -1,6 +1,7 @@
 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 { containsOrEquals, removeNode } from "zeta-dom/domUtil";
 import dom from "zeta-dom/dom";
@@ -13,6 +14,7 @@ import { closeFlyout, openFlyout } from "brew-js/domAction";
 export function createDialog(props) {
     var root = document.createElement('div');
     var reactRoot = ReactDOMClient.createRoot(root);
+    var scope = createAsyncScope(root);
     var closeDialog = closeFlyout.bind(0, root);
     var promise;
 
@@ -45,16 +47,20 @@ export function createDialog(props) {
                 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, {
-                    closeDialog: props.onCommit ? function (value) {
-                        return runAsync(dom.activeElement, props.onCommit.bind(this, value)).then(closeDialog);
-                    } : closeDialog
+                    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, content));
+                reactRoot.render(createElement(StrictMode, null, createElement(scope.Provider, null, content)));
             }
             promise = resolve().then(function () {
                 dom.retainFocus(dom.activeElement, root);