brew-js-react 0.2.2 → 0.2.3

package/mixins/FlyoutMixin.js

@@ -1,14 +1,17 @@
-import { defineAliasProperty, definePrototype, each, extend, makeArray } from "../include/zeta-dom/util.js";
+import { defineAliasProperty, definePrototype, each, extend, kv, makeArray, randomId } from "../include/zeta-dom/util.js";
+import { closeFlyout, openFlyout } from "../include/brew-js/domAction.js";
+import { declareVar, getVar } from "../include/brew-js/var.js";
 import { app } from "../app.js";
 import ClassNameMixin from "./ClassNameMixin.js";
 import FlyoutToggleMixin from "./FlyoutToggleMixin.js";
 
 const FlyoutMixinSuper = ClassNameMixin.prototype;
+const varname = '__flyout' + randomId();
 var flyoutMixinCounter = 0;
 
 export default function FlyoutMixin() {
     var self = this;
-    ClassNameMixin.call(self, ['open', 'closing', 'tweening-in', 'tweening-out']);
+    ClassNameMixin.call(self, ['open', 'closing', 'visible', 'tweening-in', 'tweening-out']);
     self.modal = false;
     self.tabThrough = false;
     self.isFlyoutOpened = false;
@@ -45,10 +48,17 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
             'animate-out': ''
         });
     },
+    open: function (value) {
+        return openFlyout(this.elements()[0], kv(varname, value));
+    },
+    close: function (value) {
+        return closeFlyout(this.elements()[0], value);
+    },
     onOpen: function (callback) {
+        var element = this.elements()[0];
         return this.onToggleState(function (opened) {
             if (opened) {
-                return callback();
+                return callback(getVar(element, varname));
             }
         });
     },
@@ -63,6 +73,7 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
         FlyoutMixinSuper.initElement.call(self, element, state);
         if (!element.id) {
             element.id = 'flyout-' + (++flyoutMixinCounter);
+            declareVar(element, varname, undefined);
         }
         app.on(element, {
             animationstart: function () {

package/mixins/FlyoutToggleMixin.d.ts

@@ -1,3 +1,6 @@
 import ClassNameMixin from "./ClassNameMixin";
 
-export default class FlyoutToggleMixin extends ClassNameMixin { }
+export default class FlyoutToggleMixin extends ClassNameMixin {
+    open(state?: any): Promise<any>;
+    close(state?: any): Promise<void>;
+}

package/mixins/FlyoutToggleMixin.js

@@ -9,13 +9,16 @@ export default function FlyoutToggleMixin(mixin) {
 }
 
 definePrototype(FlyoutToggleMixin, ClassNameMixin, {
+    open: function (value) {
+        return this.flyoutMixin.open(value);
+    },
+    close: function (value) {
+        return this.flyoutMixin.close(value);
+    },
     getCustomAttributes: function () {
         var element = this.flyoutMixin.elements()[0];
         return extend({}, FlyoutToggleMixinSuper.getCustomAttributes.call(this), {
             'toggle': element && ('#' + element.id)
         });
-    },
-    clone: function () {
-        return extend(FlyoutToggleMixinSuper.clone.call(this), { flyoutMixin: this.flyoutMixin });
     }
 });

package/mixins/StatefulMixin.js

@@ -1,82 +1,83 @@
-import { createPrivateStore, definePrototype, each, inherit, randomId, values } from "../include/zeta-dom/util.js";
-import Mixin from "./Mixin.js";
-
-const _ = createPrivateStore();
-
-function MixinRefImpl(mixin) {
-    this.mixin = mixin;
-}
-
-definePrototype(MixinRefImpl, {
-    getMixin: function () {
-        return this.mixin;
-    }
-});
-
-export default function StatefulMixin() {
-    Mixin.call(this);
-    _(this, {
-        states: {},
-        prefix: '',
-        counter: 0
-    });
-}
-
-definePrototype(StatefulMixin, Mixin, {
-    get ref() {
-        const self = this;
-        const state = self.state;
-        self.next();
-        return state.ref || (state.ref = new MixinRefImpl(self.clone()));
-    },
-    get state() {
-        const obj = _(this);
-        const key = obj.prefix + obj.counter;
-        return obj.states[key] || (obj.states[key] = this.initState());
-    },
-    reset: function () {
-        _(this).counter = 0;
-        return this;
-    },
-    next: function () {
-        _(this).counter++;
-        return this;
-    },
-    getRef: function () {
-        const self = this;
-        const state = self.state;
-        return function (current) {
-            if (current && current !== state.element) {
-                state.element = current;
-                self.initElement(current, state);
-            }
-        };
-    },
-    elements: function () {
-        return values(_(this).states).map(function (v) {
-            return v.element;
-        }).filter(function (v) {
-            return v;
-        });
-    },
-    initState: function () {
-        return { element: null };
-    },
-    initElement: function (element, state) {
-    },
-    clone: function () {
-        const clone = inherit(Object.getPrototypeOf(this));
-        _(clone, {
-            states: _(this).states,
-            prefix: randomId() + '.',
-            counter: 0
-        });
-        return clone;
-    },
-    dispose: function () {
-        var states = _(this).states;
-        each(states, function (i, v) {
-            delete states[i];
-        });
-    }
-});
+import { createPrivateStore, definePrototype, each, inherit, randomId, values } from "../include/zeta-dom/util.js";
+import Mixin from "./Mixin.js";
+
+const _ = createPrivateStore();
+
+function MixinRefImpl(mixin) {
+    this.mixin = mixin;
+}
+
+definePrototype(MixinRefImpl, {
+    getMixin: function () {
+        return this.mixin;
+    }
+});
+
+export default function StatefulMixin() {
+    Mixin.call(this);
+    _(this, {
+        states: {},
+        prefix: '',
+        counter: 0
+    });
+}
+
+definePrototype(StatefulMixin, Mixin, {
+    get ref() {
+        const self = this;
+        const state = self.state;
+        self.next();
+        return state.ref || (state.ref = new MixinRefImpl(self.clone()));
+    },
+    get state() {
+        const obj = _(this);
+        const key = obj.prefix + obj.counter;
+        return obj.states[key] || (obj.states[key] = this.initState());
+    },
+    reset: function () {
+        _(this).counter = 0;
+        return this;
+    },
+    next: function () {
+        _(this).counter++;
+        return this;
+    },
+    getRef: function () {
+        const self = this;
+        const state = self.state;
+        return function (current) {
+            if (current && current !== state.element) {
+                state.element = current;
+                self.initElement(current, state);
+            }
+        };
+    },
+    elements: function () {
+        return values(_(this).states).map(function (v) {
+            return v.element;
+        }).filter(function (v) {
+            return v;
+        });
+    },
+    initState: function () {
+        return { element: null };
+    },
+    initElement: function (element, state) {
+    },
+    clone: function () {
+        const self = this;
+        const clone = inherit(Object.getPrototypeOf(self), self);
+        _(clone, {
+            states: _(self).states,
+            prefix: randomId() + '.',
+            counter: 0
+        });
+        return clone;
+    },
+    dispose: function () {
+        var states = _(this).states;
+        each(states, function (i, v) {
+            delete states[i];
+        });
+    }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brew-js-react",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "",
   "type": "module",
   "main": "index.js",
@@ -40,6 +40,7 @@
     "cross-env": "^7.0.2",
     "glob": "^7.2.0",
     "jest": "^27.0.6",
+    "jest-environment-jsdom": "^27.4.6",
     "ncp": "^2.0.0",
     "regenerator-runtime": "^0.13.9",
     "webpack": "^5.3.0",

package/view.js

@@ -2,7 +2,7 @@ import React, { useRef } from "react";
 import { useAsync } from "zeta-dom-react";
 import dom from "./include/zeta-dom/dom.js";
 import { notifyAsync } from "./include/zeta-dom/domLock.js";
-import { any, defineGetterProperty, definePrototype, each, extend, isFunction, keys, makeArray, noop, pick, randomId, setImmediate } from "./include/zeta-dom/util.js";
+import { any, defineGetterProperty, definePrototype, each, either, extend, grep, isFunction, keys, makeArray, map, noop, pick, randomId, setImmediate } from "./include/zeta-dom/util.js";
 import { animateIn, animateOut } from "./include/brew-js/anim.js";
 import { app } from "./app.js";
 import { ViewStateContainer } from "./hooks.js";
@@ -27,6 +27,7 @@ function ViewContainer() {
     }
     self.componentWillUnmount = app.on('navigate', function () {
         if (self.mounted && self.getViewComponent()) {
+            self.isForceUpdate = true;
             self.forceUpdate();
         }
     });
@@ -84,7 +85,10 @@ definePrototype(ViewContainer, React.Component, {
             self.currentPath = app.path;
             self.currentView = view;
         } else {
-            app.emit('pageenter', self.currentElement, { pathname: app.path }, true);
+            if (self.isForceUpdate) {
+                self.isForceUpdate = false;
+                app.emit('pageenter', self.currentElement, { pathname: app.path }, true);
+            }
             resolve();
         }
         notifyAsync(self.parentElement || root, promise);
@@ -92,10 +96,51 @@ definePrototype(ViewContainer, React.Component, {
     },
     getViewComponent: function () {
         var props = this.props;
-        return any(props.views, isViewMatched) || (history.state === stateId && void redirectTo(props.defaultView));
+        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 !== app.path) {
+                app.navigate(targetPath, true);
+                return;
+            }
+        }
+        return matched;
     }
 });
 
+function getCurrentParams(view, includeAll) {
+    var state = routeMap.get(view);
+    if (!state.maxParams) {
+        var matched = map(app.routes, function (v) {
+            var route = app.parseRoute(v);
+            var matched = route.length && !any(state.matchers, function (v, i) {
+                var pos = route.params[i];
+                return (v ? !(pos >= 0) : pos < route.minLength) || (!isFunction(v) && !route.match(i, v));
+            });
+            return matched ? route : null;
+        });
+        if (matched[1]) {
+            matched = grep(matched, function (v) {
+                return !any(v.params, function (v, i) {
+                    return usedParams[i] && !state.matchers[i];
+                });
+            });
+        }
+        if (matched[0]) {
+            var last = matched.slice(-1)[0];
+            state.maxParams = keys(extend.apply(0, [{}].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 pick(app.route, includeAll ? state.maxParams : state.minParams);
+}
+
 export function useViewContainerState() {
     return React.useContext(StateContext);
 }
@@ -149,17 +194,11 @@ export function renderView() {
 }
 
 export function linkTo(view, params) {
-    var viewParams = (routeMap.get(view) || {}).params;
-    var newParams = {};
-    for (var i in app.route) {
-        if (viewParams && i in viewParams) {
-            newParams[i] = viewParams[i];
-        } else if (params && i in params) {
-            newParams[i] = params[i];
-        } else if (!usedParams[i]) {
-            newParams[i] = app.route[i];
-        }
+    var state = routeMap.get(view);
+    if (!state) {
+        return '/';
     }
+    var newParams = extend(getCurrentParams(view), params, state.params);
     return app.route.getPath(newParams);
 }