brew-js-react 0.2.3 → 0.2.4

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, either, extend, grep, isFunction, keys, makeArray, map, noop, pick, randomId, setImmediate } from "./include/zeta-dom/util.js";
+import { any, defineGetterProperty, definePrototype, each, exclude, extend, grep, isFunction, keys, makeArray, map, noop, pick, randomId, setImmediate, single } 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";
@@ -10,6 +10,7 @@ import { ViewStateContainer } from "./hooks.js";
 const root = dom.root;
 const routeMap = new Map();
 const usedParams = {};
+const sortedViews = [];
 const StateContext = React.createContext(Object.freeze({ active: true }));
 
 let stateId;
@@ -63,7 +64,7 @@ definePrototype(ViewContainer, React.Component, {
             }
             var providerProps = {
                 key: routeMap.get(V).id,
-                value: {}
+                value: { view: V }
             };
             var view = React.createElement(StateContext.Provider, providerProps,
                 React.createElement(ViewStateContainer, null,
@@ -103,19 +104,19 @@ definePrototype(ViewContainer, React.Component, {
             var targetPath = linkTo(matched, getCurrentParams(matched, true));
             if (targetPath !== app.path) {
                 app.navigate(targetPath, true);
-                return;
             }
         }
         return matched;
     }
 });
 
-function getCurrentParams(view, includeAll) {
+function getCurrentParams(view, includeAll, params) {
     var state = routeMap.get(view);
     if (!state.maxParams) {
+        var matchers = exclude(state.matchers, ['remainingSegments']);
         var matched = map(app.routes, function (v) {
             var route = app.parseRoute(v);
-            var matched = route.length && !any(state.matchers, function (v, i) {
+            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));
             });
@@ -123,8 +124,8 @@ function getCurrentParams(view, includeAll) {
         });
         if (matched[1]) {
             matched = grep(matched, function (v) {
-                return !any(v.params, function (v, i) {
-                    return usedParams[i] && !state.matchers[i];
+                return !single(v.params, function (v, i) {
+                    return usedParams[i] && !matchers[i];
                 });
             });
         }
@@ -138,21 +139,42 @@ function getCurrentParams(view, includeAll) {
             });
         }
     }
-    return pick(app.route, includeAll ? state.maxParams : state.minParams);
+    return pick(params || app.route, includeAll ? state.maxParams : state.minParams);
 }
 
-export function useViewContainerState() {
-    return React.useContext(StateContext);
+function sortViews(a, b) {
+    return (routeMap.get(b) || {}).matchCount - (routeMap.get(a) || {}).matchCount;
 }
 
-export function isViewMatched(view) {
+function matchViewParams(view, route) {
     var params = routeMap.get(view);
-    return !!params && false === any(params.matchers, function (v, i) {
-        var value = app.route[i] || '';
+    return !!params && !single(params.matchers, function (v, i) {
+        var value = route[i] || '';
         return isFunction(v) ? !v(value) : (v || '') !== value;
     });
 }
 
+export function useViewContainerState() {
+    return React.useContext(StateContext);
+}
+
+export function isViewMatched(view) {
+    return matchViewParams(view, app.route);
+}
+
+export function matchView(path, views) {
+    var route = app.route;
+    if (typeof path === 'string') {
+        route = route.parse(path);
+    } else {
+        views = path;
+    }
+    views = views ? makeArray(views).sort(sortViews) : sortedViews;
+    return any(views, function (v) {
+        return matchViewParams(v, route);
+    }) || undefined;
+}
+
 export function registerView(factory, routeParams) {
     var Component = function (props) {
         var state = useAsync(factory);
@@ -180,6 +202,8 @@ export function registerView(factory, routeParams) {
             return typeof v === 'string';
         })
     });
+    sortedViews.push(Component);
+    sortedViews.sort(sortViews);
     return Component;
 }
 
@@ -187,9 +211,7 @@ export function renderView() {
     var views = makeArray(arguments);
     var rootProps = isFunction(views[0]) ? {} : views.shift();
     var defaultView = views[0];
-    views.sort(function (a, b) {
-        return (routeMap.get(b) || {}).matchCount - (routeMap.get(a) || {}).matchCount;
-    });
+    views.sort(sortViews);
     return React.createElement(ViewContainer, { rootProps, views, defaultView });
 }
 
@@ -198,7 +220,7 @@ export function linkTo(view, params) {
     if (!state) {
         return '/';
     }
-    var newParams = extend(getCurrentParams(view), params, state.params);
+    var newParams = extend(getCurrentParams(view), getCurrentParams(view, true, params), state.params);
     return app.route.getPath(newParams);
 }