brew-js-react 0.1.1 → 0.1.2

package/mixins/LoadingStateMixin.js

@@ -1,27 +1,33 @@
 import { definePrototype } from "../include/zeta-dom/util.js";
 import { setClass } from "../include/zeta-dom/domUtil.js";
 import dom from "../include/zeta-dom/dom.js";
-import ClassNameMixin from "./ClassNameMixin.js";
+import StatefulMixin from "./StatefulMixin.js";
 
-const LoadingStateMixinSuper = ClassNameMixin.prototype;
+const LoadingStateMixinSuper = StatefulMixin.prototype;
 
 export default function LoadingStateMixin() {
-    ClassNameMixin.call(this, ['loading']);
+    StatefulMixin.call(this);
 }
 
-definePrototype(LoadingStateMixin, ClassNameMixin, {
+definePrototype(LoadingStateMixin, StatefulMixin, {
     initElement: function (element, state) {
         LoadingStateMixinSuper.initElement.call(this, element, state);
         dom.on(element, {
             asyncStart: function () {
+                state.loading = true;
                 setClass(element, 'loading', true);
             },
             asyncEnd: function () {
+                state.loading = false;
                 setClass(element, 'loading', false);
             },
             cancelled: function () {
+                state.loading = false;
                 setClass(element, 'loading', false);
             }
         });
+    },
+    getClassNames: function () {
+        return [{ loading: !!this.state.loading }];
     }
 });

package/package.json

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

package/view.d.ts

@@ -9,6 +9,13 @@ export type ViewComponent<P> = React.FC<P>;
  */
 export function registerView<P>(factory: () => Promise<{ default: React.ComponentType<P> }>, params: Zeta.Dictionary<string>): ViewComponent<P>;
 
+/**
+ * Determines whether a registered view component matches current route state.
+ * However it does not imply if the view is in fact being rendered.
+ * @param view A view component returned from {@link registerView}.
+ */
+export function isViewMatched(view: ViewComponent<any>): boolean;
+
 /**
  * Renders view by matching current route state against registered route parameters of each supplied views.
  * @param args A list of view components created by {@link registerView}.
@@ -31,3 +38,19 @@ export function renderView(props: ViewComponentRootProps, ...args: ViewComponent
  * @param params Extra route parameters that supplements or overrides current route parameters.
  */
 export function linkTo(view: ViewComponent<any>, params?: Zeta.Dictionary<string>): string;
+
+/**
+ * Navigates to path that will render the specified view.
+ * @param view A view component created by {@link registerView}.
+ * @param params Extra route parameters that supplements or overrides current route parameters.
+ * @see {@link linkTo}.
+ */
+export function navigateTo(view: ViewComponent<any>, params?: Zeta.Dictionary<string>): Promise<Brew.NavigateResult>;
+
+/**
+ * Navigates to path that will render the specified view, replacing current state in browser history.
+ * @param view A view component created by {@link registerView}.
+ * @param params Extra route parameters that supplements or overrides current route parameters.
+ * @see {@link linkTo}.
+ */
+export function redirectTo(view: ViewComponent<any>, params?: Zeta.Dictionary<string>): Promise<Brew.NavigateResult>;

package/view.js

@@ -53,14 +53,15 @@ definePrototype(ViewContainer, React.Component, {
     },
     getViewComponent: function () {
         var views = this.props.views;
-        var V = any(views, function (V) {
-            var params = routeMap.get(V);
-            return params && equal(params, pick(app.route, keys(params)));
-        });
-        return V || void app.navigate(linkTo(views[0]), true);
+        return any(views, isViewMatched) || void redirectTo(views[0]);
     }
 });
 
+export function isViewMatched(view) {
+    var params = routeMap.get(view);
+    return !!params && equal(params, pick(app.route, keys(params)));
+}
+
 export function registerView(factory, routeParams) {
     var Component = function (props) {
         var childProps = exclude(props, ['rootProps', 'onComponentLoaded']);
@@ -90,3 +91,11 @@ export function renderView() {
 export function linkTo(view, params) {
     return app.route.getPath(extend({}, app.route, params, routeMap.get(view)));
 }
+
+export function navigateTo(view, params) {
+    return app.navigate(linkTo(view, params));
+}
+
+export function redirectTo(view, params) {
+    return app.navigate(linkTo(view, params), true);
+}