brew-js-react 0.4.3 → 0.4.5

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/LoadingStateMixin.js

@@ -1,6 +1,6 @@
 import { definePrototype } from "../include/zeta-dom/util.js";
 import { setClass } from "../include/zeta-dom/domUtil.js";
-import { lock } from "../include/zeta-dom/domLock.js";
+import { subscribeAsync } from "../include/zeta-dom/domLock.js";
 import dom from "../include/zeta-dom/dom.js";
 import StatefulMixin from "./StatefulMixin.js";
 
@@ -13,20 +13,9 @@ export default function LoadingStateMixin() {
 definePrototype(LoadingStateMixin, StatefulMixin, {
     initElement: function (element, state) {
         LoadingStateMixinSuper.initElement.call(this, element, state);
-        lock(element);
-        this.onDispose(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);
-            }
+        this.onDispose(subscribeAsync(element, function (loading) {
+            state.loading = loading;
+            setClass(element, 'loading', loading);
         }));
     },
     getClassNames: function () {

package/mixins/ScrollableMixin.js

@@ -23,11 +23,9 @@ definePrototype(ScrollableMixin, ClassNameMixin, {
         var options = this.options || {};
         return extend({}, ScrollableMixinSuper.getCustomAttributes.call(this), {
             'scrollable': [options.direction || 'both', options.handle || 'auto'].join(' '),
-        }, options.paged && {
-            'var': '{ pageIndex: 0 }',
+        }, options.pagedItemSelector && {
             'scroller-snap-page': options.paged,
             'scroller-page': options.pagedItemSelector,
-            'scroller-state': 'pageIndex'
         }, options.persistScroll && {
             'persist-scroll': ''
         });
@@ -38,15 +36,13 @@ definePrototype(ScrollableMixin, ClassNameMixin, {
     initElement: function (element, state) {
         var self = this;
         self.onDispose(app.on(element, {
-            statechange: function (e) {
-                if ('pageIndex' in e.newValues) {
-                    extend(self, { pageIndex: e.newValues.pageIndex });
-                }
+            scrollIndexChange: function (e) {
+                self.pageIndex = e.newIndex;
             },
-            scrollStart: function() {
+            scrollStart: function () {
                 self.scrolling = true;
             },
-            scrollStop: function() {
+            scrollStop: function () {
                 self.scrolling = false;
             }
         }, true));

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.3",
+  "version": "0.4.5",
   "description": "",
   "type": "module",
   "main": "index.js",
@@ -13,9 +13,9 @@
   "repository": "github:misonou/brew-js-react",
   "dependencies": {
     "@misonou/react-dom-client": "^1.0.3",
-    "brew-js": ">=0.5.2",
+    "brew-js": ">=0.5.6",
     "waterpipe": "^2.5.0",
-    "zeta-dom": ">=0.3.1",
+    "zeta-dom": ">=0.4.3",
     "zeta-dom-react": ">=0.4.6"
   },
   "peerDependencies": {