brew-js-react 0.5.5 → 0.5.7

package/mixins/FlyoutMixin.d.ts

@@ -99,4 +99,10 @@ export default class FlyoutMixin extends ClassNameMixin {
      * @returns A promise that resolves after closing animation completes.
      */
     close(state?: any): Promise<void>;
+    /**
+     * Toggles the flyout.
+     * @param source Source element which triggered the flyout.
+     * @returns A promise that resolves when the flyout is being closed.
+     */
+    toggleSelf(source?: Element): Promise<any>;
 }

package/mixins/FlyoutMixin.js

@@ -1,5 +1,5 @@
 import { definePrototype, extend, makeArray, pick } from "zeta-dom/util";
-import { closeFlyout, isFlyoutOpen, openFlyout } from "brew-js/domAction";
+import { closeFlyout, openFlyout, toggleFlyout } from "brew-js/domAction";
 import { app } from "../app.js";
 import ClassNameMixin from "./ClassNameMixin.js";
 import FlyoutToggleMixin from "./FlyoutToggleMixin.js";
@@ -57,15 +57,14 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
         });
     },
     open: function (value, source) {
-        var element = this.elements()[0];
-        if (!isFlyoutOpen(element)) {
-            valueMap.set(element, value);
-        }
-        return openFlyout(element, source, this.getOptions());
+        return openFlyout(this.elements()[0], value, source, this.getOptions());
     },
     close: function (value) {
         return closeFlyout(this.elements()[0], value);
     },
+    toggleSelf: function (source) {
+        return toggleFlyout(this.elements()[0], source, this.getOptions());
+    },
     onOpen: function (callback) {
         var element = this.elements()[0];
         return this.onToggleState(function (opened) {
@@ -84,6 +83,17 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
         var self = this;
         FlyoutMixinSuper.initElement.call(self, element, state);
         self.onDispose(app.on(element, {
+            flyoutshow: function (e) {
+                valueMap.set(element, e.data);
+                self.isFlyoutOpened = true;
+                self.visible = true;
+            },
+            flyoutclose: function () {
+                self.isFlyoutOpened = false;
+            },
+            flyouthide: function () {
+                self.visible = false;
+            },
             animationstart: function () {
                 self.animating = true;
             },
@@ -91,14 +101,5 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
                 self.animating = false;
             },
         }, true));
-    },
-    onClassNameUpdated: function (element, prevState, state) {
-        var self = this;
-        var isFlyoutOpened = isFlyoutOpen(element);
-        if (!isFlyoutOpened) {
-            valueMap.delete(element);
-        }
-        self.visible = state.open;
-        self.isFlyoutOpened = isFlyoutOpened;
     }
 });

package/mixins/FlyoutToggleMixin.d.ts

@@ -7,6 +7,17 @@ import FlyoutMixin from "./FlyoutMixin";
  * Instances of this mixin is exposed by {@link FlyoutMixin.toggle}.
  */
 export default class FlyoutToggleMixin extends ClassNameMixin {
+    /**
+     * Specifies the condition on when the flyout should toggle. It can be either:
+     *
+     * - `click`: flyout is toggled when applied element is clicked;
+     * - `focus`: flyout is opened or closed when applied element has gained or lost focus.
+     *
+     * Default behavior is `click`.
+     *
+     * @param trigger Condition of trigger.
+     */
+    on(trigger: 'focus' | 'click'): this;
     /**
      * Opens the associated flyout.
      * @param state Value to be sent to listener added by {@link FlyoutMixin.onOpen}.
@@ -20,4 +31,10 @@ export default class FlyoutToggleMixin extends ClassNameMixin {
      * @returns A promise that resolves after closing animation completes.
      */
     close(state?: any): Promise<void>;
+    /**
+     * Toggles the associated flyout.
+     * @param source Source element which triggered the flyout.
+     * @returns A promise that resolves when the flyout is being closed.
+     */
+    toggle(source?: Element): Promise<any>;
 }

package/mixins/FlyoutToggleMixin.js

@@ -1,6 +1,5 @@
 import dom from "zeta-dom/dom";
 import { definePrototype } from "zeta-dom/util";
-import { toggleFlyout } from "brew-js/domAction";
 import ClassNameMixin from "./ClassNameMixin.js";
 
 const FlyoutToggleMixinSuper = ClassNameMixin.prototype;
@@ -10,18 +9,39 @@ export default function FlyoutToggleMixin(mixin) {
     this.flyoutMixin = mixin;
 }
 
+function triggerFlyoutAction(self, state, trigger, action, args) {
+    if ((state.trigger || 'click') === trigger) {
+        action.apply(self, args);
+    }
+}
+
 definePrototype(FlyoutToggleMixin, ClassNameMixin, {
+    on: function (trigger) {
+        this.state.trigger = trigger;
+        return this;
+    },
     open: function (value, source) {
         return this.flyoutMixin.open(value, source);
     },
     close: function (value) {
         return this.flyoutMixin.close(value);
     },
+    toggle: function (source) {
+        return this.flyoutMixin.toggleSelf(source);
+    },
     initElement: function (element, state) {
         var self = this;
         FlyoutToggleMixinSuper.initElement.call(self, element, state);
-        self.onDispose(dom.on(element, 'click', function () {
-            toggleFlyout(self.flyoutMixin.elements()[0], element, self.flyoutMixin.getOptions());
+        self.onDispose(dom.on(element, {
+            focusin: function () {
+                triggerFlyoutAction(self, state, 'focus', self.open, [null, dom.activeElement]);
+            },
+            focusout: function () {
+                triggerFlyoutAction(self, state, 'focus', self.close, []);
+            },
+            click: function () {
+                triggerFlyoutAction(self, state, 'click', self.toggle, [element]);
+            }
         }));
     }
 });

package/mixins/StatefulMixin.js

@@ -16,6 +16,7 @@ definePrototype(MixinRefImpl, {
 export default function StatefulMixin() {
     Mixin.call(this);
     _(this, {
+        pending: {},
         elements: new Set(),
         states: new WeakMap(),
         flush: watch(this, false),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brew-js-react",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "description": "",
   "type": "module",
   "main": "index.js",
@@ -13,7 +13,7 @@
   "repository": "github:misonou/brew-js-react",
   "dependencies": {
     "@misonou/react-dom-client": "^1.1.1",
-    "brew-js": ">=0.6.2",
+    "brew-js": ">=0.6.5",
     "waterpipe": "^2.5.0",
     "zeta-dom": ">=0.4.10",
     "zeta-dom-react": ">=0.4.14"
@@ -27,7 +27,7 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@jest/globals": "^26.6.2",
-    "@misonou/build-utils": "^1.1.3",
+    "@misonou/build-utils": "^1.3.1",
     "@misonou/test-utils": "^1.0.3",
     "@testing-library/dom": "^8.11.3",
     "@testing-library/react": "^12.1.2",

package/view.d.ts

@@ -1,3 +1,5 @@
+/// <reference path="./brew.d.ts" />
+
 import { useRouteState } from "./hooks";
 
 export type ViewComponentRootProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
@@ -8,7 +10,25 @@ export type ViewComponent<P> = React.FC<ViewProps<P>>;
 export type ViewContainerState = ViewContext;
 
 export interface PageChangeEvent extends Zeta.ZetaEventBase {
+    /**
+     * Gets information of the current page.
+     */
+    readonly page: Brew.PageInfo;
+    /**
+     * Gets information of the previous page.
+     */
     readonly previousPage: Brew.PageInfo;
+    /**
+     * Gets how user has triggered navigation.
+     * @see {Brew.RouterEvent.navigationType}
+     */
+    readonly navigationType: Brew.NavigationType;
+    /**
+     * Defers completion of navigation.
+     * @param args One or more promises.
+     * @returns Whether the supplied promises will be awaited.
+     */
+    waitFor(...args: Promise<any>[]): boolean;
 }
 
 export interface ViewContextEventMap {

package/view.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { Component, Fragment, createContext, createElement, useContext, useEffect } from "react";
 import { useAsync } from "zeta-dom-react";
 import dom from "zeta-dom/dom";
 import { notifyAsync } from "zeta-dom/domLock";
@@ -17,7 +17,7 @@ const sortedViews = [];
 const emitter = new ZetaEventContainer();
 const rootContext = freeze(extend(new ViewContext(), { container: root }));
 const rootState = _(rootContext);
-const StateContext = React.createContext(rootContext);
+const StateContext = createContext(rootContext);
 
 var errorView;
 /** @type {Partial<Zeta.ZetaEventType<"beforepageload", Brew.RouterEventMap, Element>>} */
@@ -58,7 +58,12 @@ function ViewContext(view, page, parent) {
         setActive: defineObservableProperty(self, 'active', !!page, true)
     });
     watch(self, 'page', function (page, previousPage) {
-        emitter.emit('pagechange', self, { previousPage });
+        emitter.emit('pagechange', self, {
+            page: page,
+            previousPage: previousPage,
+            navigationType: event.navigationType,
+            waitFor: event.waitFor
+        });
     });
 }
 
@@ -74,12 +79,12 @@ definePrototype(ViewContext, {
 });
 
 function ErrorBoundary() {
-    React.Component.apply(this, arguments);
+    Component.apply(this, arguments);
     this.state = {};
 }
 ErrorBoundary.contextType = StateContext;
 
-definePrototype(ErrorBoundary, React.Component, {
+definePrototype(ErrorBoundary, Component, {
     componentDidCatch: function (error) {
         var self = this;
         if (errorView && !self.state.error) {
@@ -90,6 +95,8 @@ definePrototype(ErrorBoundary, React.Component, {
             setImmediate(function () {
                 dom.emit('error', self.context.container, { error }, true);
             });
+            // ensure promise sent to beforepageload event is resolved
+            self.props.onComponentLoaded();
         }
     },
     render: function () {
@@ -101,9 +108,9 @@ definePrototype(ErrorBoundary, React.Component, {
         };
         var onComponentLoaded = self.props.onComponentLoaded;
         if (props.error) {
-            return React.createElement(errorView, { onComponentLoaded, viewProps: props });
+            return createElement(errorView, { onComponentLoaded, viewProps: props });
         }
-        return React.createElement(props.view, { onComponentLoaded, viewProps: self.props.viewProps });
+        return createElement(props.view, { onComponentLoaded, viewProps: self.props.viewProps });
     },
     reset: function () {
         this.setState({ error: null });
@@ -111,11 +118,11 @@ definePrototype(ErrorBoundary, React.Component, {
 });
 
 function ViewContainer() {
-    React.Component.apply(this, arguments);
+    Component.apply(this, arguments);
 }
 ViewContainer.contextType = StateContext;
 
-definePrototype(ViewContainer, React.Component, {
+definePrototype(ViewContainer, Component, {
     setActive: noop,
     componentDidMount: function () {
         var self = this;
@@ -143,7 +150,7 @@ definePrototype(ViewContainer, React.Component, {
             self.updateView();
         }
         (self.onRender || noop)();
-        return React.createElement(React.Fragment, null, self.prevView, self.currentView);
+        return createElement(Fragment, null, self.prevView, self.currentView);
     },
     updateView: function () {
         var self = this;
@@ -152,7 +159,7 @@ definePrototype(ViewContainer, React.Component, {
         if (V && (viewChanged || !(self.children || '')[0])) {
             // ensure the current path actually corresponds to the matched view
             // when some views are not included in the list of allowed views
-            var targetPath = resolvePath(V, getCurrentParams(V, true));
+            var targetPath = resolvePath(V, app.route);
             if (targetPath !== removeQueryAndHash(app.path)) {
                 app.navigate(targetPath, true);
                 return;
@@ -173,14 +180,14 @@ definePrototype(ViewContainer, React.Component, {
                     if (self.currentState === state) {
                         unmountView = function () {
                             self.prevView = self.currentView;
-                            app.emit('pageleave', element, { pathname: state.page.path }, true);
+                            app.emit('pageleave', element, { pathname: state.page.path, view: V }, true);
                             animateOut(element, 'show').then(function () {
                                 self.prevView = undefined;
                                 self.forceUpdate();
                             });
                         };
                         animateIn(element, 'show', '[brew-view]', true);
-                        app.emit('pageenter', element, { pathname: state.page.path }, true);
+                        app.emit('pageenter', element, { pathname: state.page.path, view: V }, true);
                     }
                 });
                 notifyAsync(element, promise);
@@ -190,10 +197,10 @@ definePrototype(ViewContainer, React.Component, {
                 viewContext: state,
                 viewData: event.data || {}
             });
-            var view = React.createElement(StateContext.Provider, { key: routeMap.get(V).id, value: state },
-                React.createElement(ViewStateContainer, null,
-                    React.createElement('div', extend({}, self.props.rootProps, { ref: initElement, 'brew-view': '' }),
-                        React.createElement(ErrorBoundary, { onComponentLoaded, viewProps }))));
+            var view = createElement(StateContext.Provider, { key: routeMap.get(V).id, value: state },
+                createElement(ViewStateContainer, null,
+                    createElement('div', extend({}, self.props.rootProps, { ref: initElement, 'brew-view': '' }),
+                        createElement(ErrorBoundary, { onComponentLoaded, viewProps }))));
             extend(self, _(state), {
                 currentState: state,
                 currentView: view,
@@ -215,7 +222,7 @@ definePrototype(ViewContainer, React.Component, {
     }
 });
 
-function getCurrentParams(view, includeAll, params) {
+function getCurrentParams(view, params) {
     var state = routeMap.get(view);
     if (!state.maxParams) {
         var matchers = exclude(state.matchers, ['remainingSegments']);
@@ -244,7 +251,7 @@ function getCurrentParams(view, includeAll, params) {
             });
         }
     }
-    return pick(params || app.route, includeAll ? state.maxParams : state.minParams);
+    return extend(pick(app.route, state.minParams), params && pick(params, state.maxParams), state.params);
 }
 
 function sortViews(a, b) {
@@ -262,8 +269,8 @@ function matchViewParams(view, route) {
 function createViewComponent(factory) {
     var promise;
     throwNotFunction(factory);
-    if (factory.prototype instanceof React.Component) {
-        factory = React.createElement.bind(null, factory);
+    if (factory.prototype instanceof Component) {
+        factory = createElement.bind(null, factory);
     }
     return function fn(props) {
         var viewProps = props.viewProps;
@@ -275,21 +282,24 @@ function createViewComponent(factory) {
         }
         var state = useAsync(function () {
             return promise.then(function (s) {
-                return React.createElement(s.default, viewProps);
+                return createElement(s.default, viewProps);
             });
         }, !!promise)[1];
-        if (!promise || !state.loading) {
-            props.onComponentLoaded();
-            if (state.error) {
-                throw state.error;
+        var loaded = !promise || !state.loading;
+        useEffect(function () {
+            if (loaded) {
+                setImmediate(props.onComponentLoaded);
             }
+        }, [loaded]);
+        if (state.error) {
+            throw state.error;
         }
-        return children || state.value || React.createElement(React.Fragment);
+        return children || state.value || createElement(Fragment);
     };
 }
 
 export function useViewContext() {
-    return React.useContext(StateContext);
+    return useContext(StateContext);
 }
 
 export function isViewMatched(view) {
@@ -349,16 +359,14 @@ export function renderView() {
         }
     });
     views.sort(sortViews);
-    return React.createElement(ViewContainer, { rootProps, views, defaultView });
+    return createElement(ViewContainer, { rootProps, views, defaultView });
 }
 
 export function resolvePath(view, params) {
-    var state = routeMap.get(view);
-    if (!state) {
+    if (!routeMap.has(view)) {
         return '/';
     }
-    var newParams = extend(getCurrentParams(view), getCurrentParams(view, true, params || {}), state.params);
-    return app.route.getPath(newParams);
+    return app.route.getPath(getCurrentParams(view, params));
 }
 
 export function linkTo(view, params) {