brew-js-react 0.2.5 → 0.2.8

package/dialog.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import ReactDOM from "react-dom";
-import { always, catchAsync, either, extend, noop, pipe, resolve } from "./include/zeta-dom/util.js";
+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";
@@ -45,9 +45,9 @@ export function createDialog(props) {
             if (props.onRender) {
                 var dialogProps = extend({}, props, {
                     closeDialog: function (value) {
-                        var promise = resolve((props.onCommit || pipe)(value));
+                        var promise = makeAsync(props.onCommit || pipe)(value);
                         catchAsync(lock(dom.activeElement, promise));
-                        promise.then(closeDialog);
+                        promise.then(closeDialog, noop);
                     }
                 });
                 ReactDOM.render(React.createElement(props.onRender, dialogProps), root);
@@ -66,7 +66,7 @@ export function createDialog(props) {
  * @param {import("./dialog").DialogProps} props
  */
 export function Dialog(props) {
-    const _props = useState(props)[0];
+    const _props = useState({})[0];
     const dialog = useState(function () {
         return createDialog(_props);
     })[0];

package/dist/brew-js-react.js

@@ -210,7 +210,8 @@ var _defaultExport = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_roo
 /* harmony default export */ const app = (_defaultExport);
 var install = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.install,
     addExtension = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.addExtension,
-    addDetect = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.addDetect;
+    addDetect = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.addDetect,
+    isElementActive = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.isElementActive;
 
 ;// CONCATENATED MODULE: ./src/include/brew-js/app.js
 
@@ -296,8 +297,12 @@ var _lib$util = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_
     reject = _lib$util.reject,
     always = _lib$util.always,
     resolveAll = _lib$util.resolveAll,
+    retryable = _lib$util.retryable,
+    deferrable = _lib$util.deferrable,
     catchAsync = _lib$util.catchAsync,
-    setPromiseTimeout = _lib$util.setPromiseTimeout;
+    setPromiseTimeout = _lib$util.setPromiseTimeout,
+    delay = _lib$util.delay,
+    makeAsync = _lib$util.makeAsync;
 
 ;// CONCATENATED MODULE: ./src/include/zeta-dom/util.js
 
@@ -439,9 +444,9 @@ function createDialog(props) {
       if (props.onRender) {
         var dialogProps = extend({}, props, {
           closeDialog: function closeDialog(value) {
-            var promise = resolve((props.onCommit || pipe)(value));
+            var promise = makeAsync(props.onCommit || pipe)(value);
             catchAsync(lock(zeta_dom_dom.activeElement, promise));
-            promise.then(_closeDialog);
+            promise.then(_closeDialog, noop);
           }
         });
         external_commonjs_react_dom_commonjs2_react_dom_amd_react_dom_root_ReactDOM_.render( /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(props.onRender, dialogProps), root);
@@ -461,7 +466,7 @@ function createDialog(props) {
  */
 
 function Dialog(props) {
-  var _props = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)(props)[0];
+  var _props = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)({})[0];
   var dialog = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)(function () {
     return createDialog(_props);
   })[0];
@@ -526,7 +531,8 @@ var setBaseUrl = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_br
     withBaseUrl = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.withBaseUrl,
     toAbsoluteUrl = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.toAbsoluteUrl,
     toRelativeUrl = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.toRelativeUrl,
-    isSubPathOf = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.isSubPathOf;
+    isSubPathOf = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.isSubPathOf,
+    toSegments = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.toSegments;
 
 ;// CONCATENATED MODULE: ./src/include/brew-js/util/path.js
 
@@ -540,64 +546,65 @@ var setBaseUrl = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_br
 
 
 
-var view_root = zeta_dom_dom.root;
+var root = zeta_dom_dom.root;
 var routeMap = new Map();
 var usedParams = {};
 var sortedViews = [];
 var StateContext = /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createContext(Object.freeze({
   active: true
 }));
-var stateId;
 
 function ViewContainer() {
-  /** @type {any} */
-  var self = this;
-  external_commonjs_react_commonjs2_react_amd_react_root_React_.Component.apply(self, arguments);
-  self.mounted = false;
-
-  if (!stateId) {
-    stateId = history.state;
-    app_app.on('navigate', function () {
-      stateId = history.state;
-    });
-  }
-
-  self.componentWillUnmount = app_app.on('navigate', function () {
-    if (self.mounted && self.getViewComponent()) {
-      self.isForceUpdate = true;
-      self.forceUpdate();
-    }
-  });
+  external_commonjs_react_commonjs2_react_amd_react_root_React_.Component.apply(this, arguments);
+  this.stateId = history.state;
 }
 
 definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react_root_React_.Component, {
   componentDidMount: function componentDidMount() {
-    this.mounted = true;
+    /** @type {any} */
+    var self = this;
+    self.componentWillUnmount = combineFn(watch(app_app.route, function () {
+      self.setActive(self.getViewComponent() === self.currentViewComponent);
+    }), app_app.on('beforepageload', function (e) {
+      self.waitFor = e.waitFor;
+      self.stateId = history.state;
+      self.forceUpdate();
+    }));
   },
   componentDidCatch: function componentDidCatch(error) {
-    zeta_dom_dom.emit('error', this.parentElement || view_root, {
+    zeta_dom_dom.emit('error', this.parentElement || root, {
       error: error
     }, true);
   },
   render: function render() {
     /** @type {any} */
     var self = this;
-    var resolve;
-    var promise = new Promise(function (_resolve) {
-      resolve = _resolve;
-    });
+
+    if (history.state !== self.stateId) {
+      return self.lastChild || null;
+    }
+
     var V = self.getViewComponent();
 
+    if (V) {
+      // ensure the current path actually corresponds to the matched view
+      // when some views are not included in the list of allowed views
+      var targetPath = linkTo(V, getCurrentParams(V, true));
+
+      if (targetPath !== removeQueryAndHash(app_app.path)) {
+        app_app.navigate(targetPath, true);
+      }
+    }
+
     if (V && V !== self.currentViewComponent) {
-      self.currentViewComponent = V;
+      var prevElement = self.currentElement;
 
-      if (self.currentView && self.currentElement) {
-        var prevPath = self.currentPath;
-        var prevElement = self.currentElement;
+      if (prevElement) {
+        self.setActive(false);
         self.prevView = self.currentView;
         self.currentElement = undefined;
         app_app.emit('pageleave', prevElement, {
-          pathname: prevPath
+          pathname: self.currentPath
         }, true);
         animateOut(prevElement, 'show').then(function () {
           self.prevView = undefined;
@@ -605,15 +612,19 @@ definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react
         });
       }
 
-      var providerProps = {
-        key: routeMap.get(V).id,
-        value: {
-          view: V
-        }
+      var resolve;
+      var promise = new Promise(function (resolve_) {
+        resolve = resolve_;
+      });
+      var state = {
+        view: V
       };
-      var view = /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(StateContext.Provider, providerProps, /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(ViewStateContainer, null, /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(V, {
+      var view = /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(StateContext.Provider, {
+        key: routeMap.get(V).id,
+        value: state
+      }, /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(ViewStateContainer, null, /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(V, {
         rootProps: self.props.rootProps,
-        onComponentLoaded: function onComponentLoaded(element) {
+        onComponentLoaded: executeOnce(function (element) {
           self.currentElement = element;
           self.parentElement = element.parentElement;
           util_setImmediate(function () {
@@ -623,42 +634,25 @@ definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react
               pathname: app_app.path
             }, true);
           });
-        }
+        })
       })));
-      defineGetterProperty(providerProps.value, 'active', function () {
-        return self.currentView === view;
+      extend(self, {
+        currentPath: app_app.path,
+        currentView: view,
+        currentViewComponent: V,
+        setActive: defineObservableProperty(state, 'active', true, true)
       });
-      self.currentPath = app_app.path;
-      self.currentView = view;
-    } else {
-      if (self.isForceUpdate) {
-        self.isForceUpdate = false;
-        app_app.emit('pageenter', self.currentElement, {
-          pathname: app_app.path
-        }, true);
-      }
-
-      resolve();
+      (self.waitFor || noop)(promise);
+      notifyAsync(self.parentElement || root, promise);
     }
 
-    notifyAsync(self.parentElement || view_root, promise);
-    return /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(external_commonjs_react_commonjs2_react_amd_react_root_React_.Fragment, null, self.prevView, self.currentView);
+    var child = /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(external_commonjs_react_commonjs2_react_amd_react_root_React_.Fragment, null, self.prevView, self.currentView);
+    self.lastChild = child;
+    return child;
   },
   getViewComponent: function getViewComponent() {
     var props = this.props;
-    var matched = any(props.views, isViewMatched) || props.defaultView;
-
-    if (history.state === stateId) {
-      // ensure the current path actually corresponds to the matched view
-      // when some views are not included in the list of allowed views
-      var targetPath = linkTo(matched, getCurrentParams(matched, true));
-
-      if (targetPath !== removeQueryAndHash(app_app.path)) {
-        app_app.navigate(targetPath, true);
-      }
-    }
-
-    return matched;
+    return any(props.views, isViewMatched) || props.defaultView;
   }
 });
 
@@ -740,7 +734,7 @@ function registerView(factory, routeParams) {
     }
 
     return /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement('div', extend({}, props.rootProps, {
-      ref: ref,
+      ref: (0,external_zeta_dom_react_.combineRef)(ref, state[1].elementRef),
       children: state[0] && /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(state[0]["default"])
     }));
   };
@@ -846,9 +840,13 @@ function useRouteParam(name, defaultValue) {
     var setValue = function setValue() {
       var current = route[name] || '';
 
-      if (container.active && current !== ref.current) {
-        ref.current = current;
-        forceUpdate({});
+      if (current !== ref.current) {
+        if (container.active) {
+          ref.current = current;
+          forceUpdate({});
+        } else {
+          watch(container, 'active', setValue);
+        }
       }
     }; // route parameter might be changed after state initialization and before useEffect hook is called
 
@@ -1113,6 +1111,8 @@ function StatefulMixin() {
 
   _(this, {
     elements: new WeakSet(),
+    flush: watch(this, false),
+    dispose: [],
     states: {},
     prefix: '',
     counter: 0
@@ -1159,6 +1159,9 @@ definePrototype(StatefulMixin, Mixin, {
       return v;
     });
   },
+  onDispose: function onDispose(callback) {
+    _(this).dispose.push(callback);
+  },
   initState: function initState() {
     return {
       element: null
@@ -1177,8 +1180,11 @@ definePrototype(StatefulMixin, Mixin, {
     return clone;
   },
   dispose: function dispose() {
-    var states = _(this).states;
+    var state = _(this);
 
+    var states = state.states;
+    combineFn(state.dispose.splice(0))();
+    state.flush();
     each(states, function (i, v) {
       delete states[i];
     });
@@ -1202,7 +1208,7 @@ function checkState(self, element, state, isAsync) {
     var cb = self.onClassNameUpdated.bind(self, element, prev, extend({}, classNames));
 
     if (isAsync) {
-      setImmediate(cb);
+      util_setImmediate(cb);
     } else {
       cb();
     }
@@ -1221,7 +1227,7 @@ definePrototype(ClassNameMixin, StatefulMixin, {
     var self = this;
     var element = self.state.element;
 
-    if (element && containsOrEquals(root, element)) {
+    if (element && containsOrEquals(zeta_dom_dom.root, element)) {
       checkState(self, element, self.state, true);
     }
 
@@ -1399,6 +1405,10 @@ function FlyoutMixin() {
   self.animating = false;
   self.visible = false;
   self.toggle = new FlyoutToggleMixin(self);
+  self.onDispose(function () {
+    self.isFlyoutOpened = false;
+    self.visible = false;
+  });
 }
 definePrototype(FlyoutMixin, ClassNameMixin, {
   reset: function reset() {