brew-js-react 0.7.2 → 0.7.4

package/dialog.d.ts

@@ -1,5 +1,6 @@
 import { ErrorHandler } from "zeta-dom-react";
 
+type VFC<P = {}> = (props: P) => ReturnType<React.FC>;
 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>;
 
@@ -137,12 +138,12 @@ export interface DialogOptions<T, V = T | undefined> {
     /**
      * A callback that render dialog contents.
      */
-    onRender: React.VFC<DialogContext<V> & this>;
+    onRender: 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<{}>>;
+    wrapper?: React.FC<DialogContext<V> & this & { children: React.ReactElement }>;
     /**
      * An optional signal object to dismiss the dialog.
      *
@@ -156,6 +157,10 @@ export interface DialogOptions<T, V = T | undefined> {
 }
 
 export interface DialogContext<V> {
+    /**
+     * Gets the root element of the dialog.
+     */
+    dialogElement: HTMLElement;
     /**
      * Gets an {@link ErrorHandler} object that catches errors emitted from rendered content.
      */
@@ -230,4 +235,4 @@ export function openDialog<P extends DialogOptions<any, any>>(props: P): Promise
 /**
  * Renders a dialog declaratively.
  */
-export function Dialog<T, V = T>(props: DialogProps<T, V>): JSX.Element;
+export function Dialog<T, V = T>(props: DialogProps<T, V>): React.ReactElement;

package/dialog.js

@@ -30,9 +30,10 @@ function createDialogElement(props, unmountAfterUse) {
             (props.onOpen || noop)(root);
         },
         flyouthide: function () {
-            removeNode(root);
             (props.onClose || noop)(root);
-            (unmountAfterUse || noop)();
+            resolve(unmountAfterUse()).then(function () {
+                removeNode(root);
+            });
         }
     });
     root.setAttribute('loading-class', '');
@@ -83,6 +84,7 @@ export function createDialog(props) {
             return runAsync(dom.activeElement, props.onCommit.bind(this, value)).then(closeDialog);
         } : closeDialog;
         var dialogProps = extend({}, props, {
+            dialogElement: root,
             errorHandler: scope.errorHandler,
             closeDialog: commitDialog,
             commitDialog: commitDialog,
@@ -118,7 +120,9 @@ export function createDialog(props) {
  */
 export function createDialogQueue(props) {
     var mode = props && props.mode;
-    var root = mode && createDialogElement(props);
+    var root = mode && createDialogElement(props, function () {
+        return multiple && closeFlyout(root.children);
+    });
     var multiple = mode === 'multiple';
     var childProps;
     var queue = [];
@@ -187,7 +191,7 @@ export function createDialogQueue(props) {
 export function Dialog(props) {
     const _props = extend(useState({})[0], props);
     const element = useState(function () {
-        return createDialogElement(_props);
+        return createDialogElement(_props, noop);
     })[0];
     useEffect(function () {
         var opened = isFlyoutOpen(element);

package/dist/brew-js-react.js

@@ -1,4 +1,4 @@
-/*! brew-js-react v0.7.2 | (c) misonou | https://misonou.github.io */
+/*! brew-js-react v0.7.4 | (c) misonou | https://misonou.github.io */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
 		module.exports = factory(require("zeta-dom"), require("brew-js"), require("react"), require("react-dom"), require("zeta-dom-react"), require("waterpipe"), require("jquery"));
@@ -248,6 +248,7 @@ var _lib$util = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_
   fill = _lib$util.fill,
   freeze = _lib$util.freeze,
   grep = _lib$util.grep,
+  util_hasOwnProperty = _lib$util.hasOwnProperty,
   isArray = _lib$util.isArray,
   isFunction = _lib$util.isFunction,
   isPlainObject = _lib$util.isPlainObject,
@@ -398,9 +399,10 @@ function createDialogElement(props, unmountAfterUse) {
       (props.onOpen || noop)(root);
     },
     flyouthide: function flyouthide() {
-      removeNode(root);
       (props.onClose || noop)(root);
-      (unmountAfterUse || noop)();
+      resolve(unmountAfterUse()).then(function () {
+        removeNode(root);
+      });
     }
   });
   root.setAttribute('loading-class', '');
@@ -448,6 +450,7 @@ function createDialog(props) {
       return runAsync(zeta_dom_dom.activeElement, props.onCommit.bind(this, value)).then(closeDialog);
     } : closeDialog;
     var dialogProps = extend({}, props, {
+      dialogElement: root,
       errorHandler: scope.errorHandler,
       closeDialog: commitDialog,
       commitDialog: commitDialog,
@@ -484,7 +487,9 @@ function createDialog(props) {
  */
 function createDialogQueue(props) {
   var mode = props && props.mode;
-  var root = mode && createDialogElement(props);
+  var root = mode && createDialogElement(props, function () {
+    return multiple && closeFlyout(root.children);
+  });
   var multiple = mode === 'multiple';
   var childProps;
   var queue = [];
@@ -554,7 +559,7 @@ function createDialogQueue(props) {
 function Dialog(props) {
   var _props = extend(useState({})[0], props);
   var element = useState(function () {
-    return createDialogElement(_props);
+    return createDialogElement(_props, noop);
   })[0];
   useEffect(function () {
     var opened = isFlyoutOpen(element);
@@ -625,10 +630,7 @@ onAppInit(function () {
     view_event = e;
     (function updateViewRecursive(next) {
       each(next.children, function (i, v) {
-        e.waitFor(new Promise(function (resolve) {
-          v.onRender = resolve;
-          v.forceUpdate();
-        }).then(function () {
+        e.waitFor(v.renderAsync().then(function () {
           updateViewRecursive(v);
         }));
       });
@@ -756,6 +758,7 @@ definePrototype(ErrorBoundary, Component, {
 function ViewContainer() {
   Component.apply(this, arguments);
   this.views = [];
+  this.dispose = new Set();
 }
 ViewContainer.contextType = StateContext;
 definePrototype(ViewContainer, Component, {
@@ -772,6 +775,7 @@ definePrototype(ViewContainer, Component, {
       setImmediate(function () {
         if (self.currentContext && !self.currentContext.active) {
           self.unmountView();
+          combineFn(self.dispose)();
         }
       });
     };
@@ -786,13 +790,22 @@ definePrototype(ViewContainer, Component, {
     this.currentContext = context;
     (this.props.rootProps.ref || {}).current = context;
   },
+  renderAsync: function renderAsync() {
+    var self = this;
+    return new Promise(function (resolve) {
+      self.dispose.add(resolve);
+      self.forceUpdate(function () {
+        self.dispose["delete"](resolve);
+        resolve();
+      });
+    });
+  },
   render: function render() {
     /** @type {any} */
     var self = this;
     if (self.context.active) {
       self.updateView();
     }
-    self.onRender();
     return self.views;
   },
   updateView: function updateView() {
@@ -843,10 +856,10 @@ definePrototype(ViewContainer, Component, {
           }, true);
           return animateOut(element, 'show').then(function () {
             self.views[0] = null;
-            self.forceUpdate();
+            return self.renderAsync();
           });
         });
-        always(promise, delay).then(function () {
+        always(promise || delay(), function () {
           app_app.emit('pageenter', element, {
             pathname: context.page.path,
             view: V
@@ -884,40 +897,33 @@ definePrototype(ViewContainer, Component, {
     }) || props.defaultView;
   }
 });
-fill(ViewContainer.prototype, 'abort onRender setActive setPage unmountView', noop);
+fill(ViewContainer.prototype, 'abort setActive setPage unmountView', noop);
 function normalizePart(value, part) {
   return isUndefinedOrNull(value) || value === '' || value === part ? '' : value[0] === part ? value : part + value;
 }
 function getCurrentParams(view, params) {
   var state = routeMap.get(view);
   if (!state.maxParams) {
-    var matchers = exclude(state.matchers, ['remainingSegments']);
+    var maxParams = {};
     var matched = map(app_app.routes, function (v) {
       var route = app_app.parseRoute(v);
-      var matched = route.length && !any(matchers, function (v, i) {
-        var pos = route.params[i];
-        return (v ? !(pos >= 0) : pos < route.minLength) || !isFunction(v) && !route.match(i, v);
+      var routeParams = route.params;
+      var params = {};
+      var invalid = single(routeParams, function (v, i) {
+        if (usedParams[i] && !state.matchers[i]) {
+          return v < route.minLength;
+        }
+        params[i] = true;
+      }) || single(state.matchers, function (v, i) {
+        return i !== 'remainingSegments' && !(isFunction(v) ? util_hasOwnProperty(routeParams, i) : v ? route.match(i, v) : routeParams[i] >= route.minLength);
       });
-      return matched ? route : null;
+      return invalid ? null : extend(maxParams, params) && route;
+    });
+    var last = matched.slice(-1)[0] || {};
+    state.maxParams = ['remainingSegments'].concat(util_keys(maxParams));
+    state.minParams = map(last.params, function (v, i) {
+      return state.params[i] || v >= last.minLength ? null : i;
     });
-    if (matched[1]) {
-      matched = grep(matched, function (v) {
-        return !single(v.params, function (v, i) {
-          return usedParams[i] && !matchers[i];
-        });
-      });
-    }
-    if (matched[0]) {
-      var last = matched.slice(-1)[0];
-      state.maxParams = util_keys(extend.apply(0, [{
-        remainingSegments: true
-      }].concat(matched.map(function (v) {
-        return v.params;
-      }))));
-      state.minParams = map(last.params, function (v, i) {
-        return state.params[i] || v >= last.minLength ? null : i;
-      });
-    }
   }
   return extend(pick(app_app.route, state.minParams), params && pick(params, state.maxParams), state.params);
 }