brew-js-react 0.4.2 → 0.4.4

package/mixins/FocusStateMixin.d.ts

@@ -1,3 +1,14 @@
+import React from "react";
 import ClassNameMixin from "./ClassNameMixin";
 
-export default class FocusStateMixin extends ClassNameMixin { }
+export default class FocusStateMixin extends ClassNameMixin {
+    /**
+     * Sets focus state based on another element.
+     *
+     * If the element with this mixin gain focus, the target element will also gain focus.
+     * Likewise, if the target element lost focus, the element with this mixin will also lose focus.
+     *
+     * @param target A CSS selector or a ref object.
+     */
+    for(target: string | React.RefObject<Element>): this;
+}

package/mixins/FocusStateMixin.js

@@ -10,20 +10,41 @@ export default function FocusStateMixin() {
 }
 
 definePrototype(FocusStateMixin, StatefulMixin, {
+    for: function (ref) {
+        this.state.ref = ref;
+        return this;
+    },
     initElement: function (element, state) {
         FocusStateMixinSuper.initElement.call(this, element, state);
+        var checkTarget = function (callback, arg) {
+            var ref = state.ref;
+            var target = ref && (typeof ref === 'string' ? element.querySelector(ref) : ref.current);
+            if (target && !dom.focused(target)) {
+                callback(arg || target);
+            }
+        };
         this.onDispose(dom.on(element, {
             focusin: function (e) {
-                state.focused = true;
+                state.focused = e.source;
                 setClass(element, 'focused', e.source);
+                checkTarget(dom.focus);
             },
             focusout: function () {
                 state.focused = false;
                 setClass(element, 'focused', false);
+            },
+            focuschange: function () {
+                checkTarget(dom.blur, element);
             }
         }));
     },
     getClassNames: function () {
-        return [{ focused: !!this.state.focused }];
+        var classes = {};
+        var focused = this.state.focused;
+        if (focused) {
+            classes.focused = true;
+            classes['focused-' + focused] = true;
+        }
+        return [classes];
     }
 });

package/mixins/ScrollableMixin.d.ts

@@ -8,6 +8,7 @@ export interface ScrollableMixinOptions {
     handle?: 'auto' | 'scrollbar' | 'content';
     paged?: 'always' | 'landscape' | 'portrait';
     pagedItemSelector?: string;
+    persistScroll?: boolean;
 }
 
 export default class ScrollableMixin extends ClassNameMixin implements JQueryScrollable {
@@ -31,6 +32,6 @@ export default class ScrollableMixin extends ClassNameMixin implements JQueryScr
     scrollTo(x: number, y: number, duration?: number, callback?: () => void): Promise<void>;
     scrollByPage(x: number, y: number, duration?: number, callback?: () => void): Promise<void>;
     scrollToPage(x: number, y: number, duration?: number, callback?: () => void): Promise<void>;
-    scrollToElement(target: Element, targetOrigin: string, duration: number, callback?: () => void): Promise<void>;
-    scrollToElement(target: Element, targetOrigin?: string, wrapperOrigin?: string, duration?: number, callback?: () => void): Promise<void>;
+    scrollToElement(target: Element | string, targetOrigin: string, duration: number, callback?: () => void): Promise<void>;
+    scrollToElement(target: Element | string, targetOrigin?: string, wrapperOrigin?: string, duration?: number, callback?: () => void): Promise<void>;
 }

package/mixins/ScrollableMixin.js

@@ -28,6 +28,8 @@ definePrototype(ScrollableMixin, ClassNameMixin, {
             'scroller-snap-page': options.paged,
             'scroller-page': options.pagedItemSelector,
             'scroller-state': 'pageIndex'
+        }, options.persistScroll && {
+            'persist-scroll': ''
         });
     },
     onPageIndexChanged: function (callback) {

package/mixins/StatefulMixin.js

@@ -16,7 +16,7 @@ definePrototype(MixinRefImpl, {
 export default function StatefulMixin() {
     Mixin.call(this);
     _(this, {
-        elements: new Set(),
+        elements: new WeakSet(),
         flush: watch(this, false),
         dispose: [],
         states: {},
@@ -84,7 +84,7 @@ definePrototype(StatefulMixin, Mixin, {
         var states = state.states;
         combineFn(state.dispose.splice(0))();
         state.flush();
-        state.elements.clear();
+        state.elements = new WeakSet();
         each(states, function (i, v) {
             delete states[i];
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brew-js-react",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "",
   "type": "module",
   "main": "index.js",

package/view.js

@@ -2,20 +2,21 @@ import React 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 { bind } from "./include/zeta-dom/domUtil.js";
 import { ZetaEventContainer } from "./include/zeta-dom/events.js";
-import { any, combineFn, defineObservableProperty, defineOwnProperty, definePrototype, each, exclude, executeOnce, extend, freeze, grep, isFunction, isThenable, isUndefinedOrNull, keys, makeArray, map, noop, pick, randomId, setImmediate, single, throwNotFunction, watch } from "./include/zeta-dom/util.js";
+import { any, catchAsync, combineFn, createPrivateStore, defineObservableProperty, defineOwnProperty, definePrototype, each, exclude, executeOnce, extend, freeze, grep, isFunction, isThenable, isUndefinedOrNull, keys, makeArray, map, noop, pick, randomId, setImmediate, single, throwNotFunction, watch } from "./include/zeta-dom/util.js";
 import { animateIn, animateOut } from "./include/brew-js/anim.js";
 import { removeQueryAndHash } from "./include/brew-js/util/path.js";
 import { app, onAppInit } from "./app.js";
 import { ViewStateContainer } from "./hooks.js";
 
+const _ = createPrivateStore();
 const root = dom.root;
 const routeMap = new Map();
 const usedParams = {};
 const sortedViews = [];
 const emitter = new ZetaEventContainer();
-const StateContext = React.createContext(Object.freeze({ container: root, active: true }));
+const rootContext = freeze(extend(new ViewContext(null, null), { container: root }));
+const StateContext = React.createContext(rootContext);
 
 var errorView;
 /** @type {Partial<Zeta.ZetaEventType<"beforepageload", Brew.RouterEventMap, Element>>} */
@@ -24,11 +25,20 @@ var event = {};
 onAppInit(function () {
     app.on('beforepageload', function (e) {
         event = e;
+        _(rootContext).setPage(app.page);
     });
 });
 
-function ViewContext(view) {
-    defineOwnProperty(this, 'view', view, true);
+function ViewContext(view, page) {
+    var self = this;
+    defineOwnProperty(self, 'view', view, true);
+    _(self, {
+        setPage: defineObservableProperty(self, 'page', page, true),
+        setActive: defineObservableProperty(self, 'active', true, true)
+    });
+    watch(self, 'page', function (page, previousPage) {
+        emitter.emit('pagechange', self, { previousPage });
+    });
 }
 
 definePrototype(ViewContext, {
@@ -78,6 +88,7 @@ function ViewContainer() {
     React.Component.apply(this, arguments);
     this.stateId = history.state;
 }
+ViewContainer.contextType = StateContext;
 
 definePrototype(ViewContainer, React.Component, {
     componentDidMount: function () {
@@ -85,32 +96,41 @@ definePrototype(ViewContainer, React.Component, {
         var self = this;
         self.componentWillUnmount = combineFn(
             watch(app.route, function () {
-                self.setActive(self.getViewComponent() === self.currentViewComponent);
+                (self.setActive || noop)(self.getViewComponent() === self.currentViewComponent);
             }),
             app.on('beforepageload', function () {
                 self.stateId = history.state;
-                self.updateView();
-                self.forceUpdate();
+                if (self.context === rootContext || self.updateOnNext) {
+                    event.waitFor(new Promise(function (resolve) {
+                        self.onRender = resolve;
+                    }));
+                    self.updateView();
+                    self.forceUpdate();
+                }
             })
         );
     },
     render: function () {
         /** @type {any} */
         var self = this;
-        if (history.state === self.stateId) {
+        if (history.state === self.stateId && self.context.active) {
             self.updateView();
         }
+        (self.onRender || noop)();
         return React.createElement(React.Fragment, null, self.prevView, self.currentView);
     },
     updateView: function () {
         var self = this;
         var V = self.getViewComponent();
+        self.updateOnNext = false;
         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 = resolvePath(V, getCurrentParams(V, true));
             if (targetPath !== removeQueryAndHash(app.path)) {
                 app.navigate(targetPath, true);
+                self.updateOnNext = true;
+                return;
             }
         }
         if (V && V !== self.currentViewComponent) {
@@ -125,6 +145,8 @@ definePrototype(ViewContainer, React.Component, {
                     self.forceUpdate();
                 });
             }
+            (self.cancelPrevious || noop)();
+
             var onComponentLoaded;
             var promise = new Promise(function (resolve) {
                 onComponentLoaded = resolve;
@@ -138,7 +160,7 @@ definePrototype(ViewContainer, React.Component, {
                 });
                 notifyAsync(element, promise);
             });
-            var state = new ViewContext(V);
+            var state = new ViewContext(V, app.page);
             var viewProps = freeze({
                 navigationType: event.navigationType,
                 viewContext: state,
@@ -148,15 +170,11 @@ definePrototype(ViewContainer, React.Component, {
                 React.createElement(ViewStateContainer, null,
                     React.createElement('div', extend({}, self.props.rootProps, { ref: initElement }),
                         React.createElement(ErrorBoundary, { onComponentLoaded, viewProps }))));
-            extend(self, {
+            extend(self, _(state), {
+                cancelPrevious: onComponentLoaded,
                 currentPath: app.path,
                 currentView: view,
-                currentViewComponent: V,
-                setPage: defineObservableProperty(state, 'page', app.page, true),
-                setActive: defineObservableProperty(state, 'active', true, true)
-            });
-            watch(state, 'page', function (page, previousPage) {
-                emitter.emit('pagechange', state, { previousPage });
+                currentViewComponent: V
             });
             (event.waitFor || noop)(promise);
         }
@@ -224,6 +242,7 @@ function createViewComponent(factory) {
         if (isThenable(children)) {
             promise = children;
             children = null;
+            catchAsync(promise);
         }
         var state = useAsync(function () {
             return promise.then(function (s) {