brew-js-react 0.2.1 → 0.2.2

package/mixin.js

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { extend } from "./include/zeta-dom/util.js";
 import Mixin from "./mixins/Mixin.js";
 import AnimateMixin from "./mixins/AnimateMixin.js";
@@ -34,9 +34,13 @@ export const useLoadingStateMixin = createUseFunction(LoadingStateMixin);
 export const useScrollableMixin = createUseFunction(ScrollableMixin);
 
 export function useMixin(ctor) {
-    return useState(function () {
+    var mixin = useState(function () {
         return new ctor();
     })[0].reset();
+    useEffect(function () {
+        return mixin.dispose.bind(mixin);
+    }, []);
+    return mixin;
 }
 
 export function useMixinRef(mixin) {

package/mixins/FlyoutMixin.d.ts

@@ -4,6 +4,7 @@ import { AnimationEffect } from "./AnimateMixin";
 
 export interface FlyoutMixinOptions {
     modal?: boolean;
+    tabThrough?: boolean;
     swipeToDismiss?: Zeta.Direction;
 }
 

package/mixins/FlyoutMixin.js

@@ -10,6 +10,7 @@ export default function FlyoutMixin() {
     var self = this;
     ClassNameMixin.call(self, ['open', 'closing', 'tweening-in', 'tweening-out']);
     self.modal = false;
+    self.tabThrough = false;
     self.isFlyoutOpened = false;
     self.animating = false;
     self.visible = false;
@@ -36,6 +37,8 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
             'swipe-dismiss': self.swipeToDismiss
         }, self.modal && {
             'is-modal': ''
+        }, self.tabThrough && {
+            'tab-through': ''
         }, self.effects && {
             'animate-on': 'open',
             'animate-in': self.effects.join(' '),

package/mixins/FocusStateMixin.js

@@ -13,9 +13,9 @@ definePrototype(FocusStateMixin, StatefulMixin, {
     initElement: function (element, state) {
         FocusStateMixinSuper.initElement.call(this, element, state);
         dom.on(element, {
-            focusin: function () {
+            focusin: function (e) {
                 state.focused = true;
-                setClass(element, 'focused', true);
+                setClass(element, 'focused', e.source);
             },
             focusout: function () {
                 state.focused = false;

package/mixins/Mixin.d.ts

@@ -30,6 +30,10 @@ export default abstract class Mixin implements ClassNameProvider {
      * @private Internal use.
      */
     getCustomAttributes(): Zeta.Dictionary<string>;
+    /**
+     * @private Internal use.
+     */
+    dispose(): void;
 
     /**
      * Watches a property on the object.

package/mixins/Mixin.js

@@ -16,6 +16,8 @@ definePrototype(Mixin, {
     },
     getCustomAttributes: function () {
         return {};
+    },
+    dispose: function () {
     }
 });
 watchable(Mixin.prototype);

package/mixins/StatefulMixin.js

@@ -1,76 +1,82 @@
-import { createPrivateStore, definePrototype, 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;
-    }
-});
+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];
+        });
+    }
+});

package/package.json

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

package/view.js

@@ -50,11 +50,12 @@ definePrototype(ViewContainer, React.Component, {
         if (V && V !== self.currentViewComponent) {
             self.currentViewComponent = V;
             if (self.currentView && self.currentElement) {
+                var prevPath = self.currentPath;
+                var prevElement = self.currentElement;
                 self.prevView = self.currentView;
-                self.prevElement = self.currentElement;
                 self.currentElement = undefined;
-                animateOut(self.prevElement, 'show').then(function () {
-                    self.prevElement = undefined;
+                app.emit('pageleave', prevElement, { pathname: prevPath }, true);
+                animateOut(prevElement, 'show').then(function () {
                     self.prevView = undefined;
                     self.forceUpdate();
                 });
@@ -72,15 +73,18 @@ definePrototype(ViewContainer, React.Component, {
                             self.parentElement = element.parentElement;
                             setImmediate(function () {
                                 resolve();
-                                return animateIn(element, 'show');
+                                animateIn(element, 'show');
+                                app.emit('pageenter', element, { pathname: app.path }, true);
                             });
                         }
                     })));
             defineGetterProperty(providerProps.value, 'active', function () {
                 return self.currentView === view;
             });
+            self.currentPath = app.path;
             self.currentView = view;
         } else {
+            app.emit('pageenter', self.currentElement, { pathname: app.path }, true);
             resolve();
         }
         notifyAsync(self.parentElement || root, promise);