brew-js-react 0.1.5 → 0.1.6

package/mixins/FlyoutMixin.js

@@ -1,99 +1,119 @@
-import { defineAliasProperty, definePrototype, each, extend, makeArray } from "../include/zeta-dom/util.js";
-import { app } from "../app.js";
-import ClassNameMixin from "./ClassNameMixin.js";
-
-const FlyoutMixinSuper = ClassNameMixin.prototype;
-var flyoutMixinCounter = 0;
-
-export default function FlyoutMixin() {
-    ClassNameMixin.call(this, ['open', 'closing', 'tweening-in', 'tweening-out']);
-    this.modal = false;
-    this.isFlyoutOpened = false;
-    this.animating = false;
-    this.visible = false;
-    this.toggle = new ClassNameMixin(['target-opened']);
-}
-
-definePrototype(FlyoutMixin, ClassNameMixin, {
-    reset: function () {
-        this.toggle.reset();
-        return FlyoutMixinSuper.reset.call(this);
-    },
-    next: function () {
-        this.effects = undefined;
-        return FlyoutMixinSuper.next.call(this);
-    },
-    withEffects: function () {
-        this.effects = makeArray(arguments);
-        return this;
-    },
-    getCustomAttributes: function () {
-        return extend({}, FlyoutMixinSuper.getCustomAttributes.call(this), {
-            'is-flyout': ''
-        }, this.modal && {
-            'is-modal': ''
-        }, this.effects && {
-            'animate-on': 'open',
-            'animate-in': this.effects.join(' '),
-            'animate-out': ''
-        });
-    },
-    onOpen: function (callback) {
-        return this.onToggleState(function (opened) {
-            if (opened) {
-                return callback();
-            }
-        });
-    },
-    onToggleState: function (callback) {
-        return this.watch('isFlyoutOpened', callback);
-    },
-    onVisibilityChanged: function (callback) {
-        return this.watch('visible', callback);
-    },
-    initElement: function (element, state) {
-        var self = this;
-        FlyoutMixinSuper.initElement.call(self, element, state);
-        if (!element.id) {
-            element.id = 'flyout-' + (++flyoutMixinCounter);
-        }
-        app.on(element, {
-            animationstart: function () {
-                self.animating = true;
-            },
-            animationcomplete: function () {
-                self.animating = false;
-            },
-        }, true);
-        setImmediate(function () {
-            each(self.toggle.elements(), function (i, v) {
-                v.setAttribute('toggle', '#' + element.id);
-            });
-        });
-    },
-    clone: function () {
-        var mixin = extend(FlyoutMixinSuper.clone.call(this), {
-            toggle: this.toggle.ref.getMixin()
-        });
-        defineAliasProperty(mixin, 'isFlyoutOpened', this);
-        defineAliasProperty(mixin, 'modal', this);
-        return mixin;
-    },
-    onClassNameUpdated: function (element, prevState, state) {
-        var self = this;
-        var isAdded = function (v) {
-            return prevState[v] !== state[v] && state[v];
-        };
-        var isRemoved = function (v) {
-            return prevState[v] !== state[v] && !state[v];
-        };
-        if (isAdded('open')) {
-            self.isFlyoutOpened = true;
-            self.visible = true;
-        } else if (isAdded('closing') || isAdded('tweening-out')) {
-            self.isFlyoutOpened = false;
-        } else if (isRemoved('open')) {
-            self.visible = false;
-        }
-    }
-});
+import { defineAliasProperty, definePrototype, each, extend, makeArray } from "../include/zeta-dom/util.js";
+import { app } from "../app.js";
+import ClassNameMixin from "./ClassNameMixin.js";
+
+const FlyoutMixinSuper = ClassNameMixin.prototype;
+var flyoutMixinCounter = 0;
+
+function FlyoutToggleMixin(mixin) {
+    ClassNameMixin.call(this, ['target-opened']);
+    this.flyoutMixin = mixin;
+}
+
+definePrototype(FlyoutToggleMixin, ClassNameMixin, {
+    getCustomAttributes: function () {
+        var element = this.flyoutMixin.elements()[0];
+        return extend({}, FlyoutMixinSuper.getCustomAttributes.call(this), {
+            'toggle': element && ('#' + element.id)
+        });
+    },
+    clone: function () {
+        return extend(FlyoutMixinSuper.clone.call(this), { flyoutMixin: this.flyoutMixin });
+    }
+});
+
+export default function FlyoutMixin() {
+    var self = this;
+    ClassNameMixin.call(self, ['open', 'closing', 'tweening-in', 'tweening-out']);
+    self.modal = false;
+    self.isFlyoutOpened = false;
+    self.animating = false;
+    self.visible = false;
+    self.toggle = new FlyoutToggleMixin(self);
+}
+
+definePrototype(FlyoutMixin, ClassNameMixin, {
+    reset: function () {
+        this.toggle.reset();
+        return FlyoutMixinSuper.reset.call(this);
+    },
+    next: function () {
+        this.effects = undefined;
+        return FlyoutMixinSuper.next.call(this);
+    },
+    withEffects: function () {
+        this.effects = makeArray(arguments);
+        return this;
+    },
+    getCustomAttributes: function () {
+        var self = this;
+        return extend({}, FlyoutMixinSuper.getCustomAttributes.call(self), {
+            'is-flyout': ''
+        }, self.modal && {
+            'is-modal': ''
+        }, self.effects && {
+            'animate-on': 'open',
+            'animate-in': self.effects.join(' '),
+            'animate-out': ''
+        });
+    },
+    onOpen: function (callback) {
+        return this.onToggleState(function (opened) {
+            if (opened) {
+                return callback();
+            }
+        });
+    },
+    onToggleState: function (callback) {
+        return this.watch('isFlyoutOpened', callback);
+    },
+    onVisibilityChanged: function (callback) {
+        return this.watch('visible', callback);
+    },
+    initElement: function (element, state) {
+        var self = this;
+        FlyoutMixinSuper.initElement.call(self, element, state);
+        if (!element.id) {
+            element.id = 'flyout-' + (++flyoutMixinCounter);
+        }
+        app.on(element, {
+            animationstart: function () {
+                self.animating = true;
+            },
+            animationcomplete: function () {
+                self.animating = false;
+            },
+        }, true);
+        setImmediate(function () {
+            each(self.toggle.elements(), function (i, v) {
+                v.setAttribute('toggle', '#' + element.id);
+            });
+        });
+    },
+    clone: function () {
+        var self = this;
+        var mixin = extend(FlyoutMixinSuper.clone.call(self), {
+            toggle: self.toggle.ref.getMixin()
+        });
+        defineAliasProperty(mixin, 'isFlyoutOpened', self);
+        defineAliasProperty(mixin, 'modal', self);
+        return mixin;
+    },
+    onClassNameUpdated: function (element, prevState, state) {
+        var self = this;
+        var isAdded = function (v) {
+            return prevState[v] !== state[v] && state[v];
+        };
+        var isRemoved = function (v) {
+            return prevState[v] !== state[v] && !state[v];
+        };
+        if (isAdded('open')) {
+            self.isFlyoutOpened = true;
+            self.visible = true;
+        } else if (isAdded('closing') || isAdded('tweening-out')) {
+            self.isFlyoutOpened = false;
+        } else if (isRemoved('open')) {
+            self.visible = false;
+        }
+    }
+});

package/mixins/Mixin.d.ts

@@ -10,9 +10,9 @@ interface MixinProps {
 export default abstract class Mixin implements ClassNameProvider {
     static readonly scrollableTarget: StaticAttributeMixin;
 
-    static readonly use(ref: React.ForwardedRef<any>, ...args: (Mixin | string)[]): MixinProps;
-    static readonly use(ref: Mixin, ...args: (Mixin | string)[]): MixinProps;
-    static readonly use(...args: Mixin[]): MixinProps;
+    static readonly use(ref: React.ForwardedRef<any>, ...args: (Mixin | string | undefined)[]): MixinProps;
+    static readonly use(ref: Mixin, ...args: (Mixin | string | undefined)[]): MixinProps;
+    static readonly use(...args: (Mixin | undefined)[]): MixinProps;
 
     /**
      * @private Internal use.

package/mixins/ScrollableMixin.js

@@ -6,9 +6,10 @@ import ClassNameMixin from "./ClassNameMixin.js";
 const ScrollableMixinSuper = ClassNameMixin.prototype;
 
 export default function ScrollableMixin() {
-    ClassNameMixin.call(this, ['scrollable-x', 'scrollable-x-l', 'scrollable-x-r', 'scrollable-y', 'scrollable-y-d', 'scrollable-y-u']);
-    this.target = Mixin.scrollableTarget;
-    this.pageIndex = 0;
+    var self = this;
+    ClassNameMixin.call(self, ['scrollable-x', 'scrollable-x-l', 'scrollable-x-r', 'scrollable-y', 'scrollable-y-d', 'scrollable-y-u']);
+    self.target = Mixin.scrollableTarget;
+    self.pageIndex = 0;
 }
 
 definePrototype(ScrollableMixin, ClassNameMixin, {

package/mixins/StatefulMixin.js

@@ -24,9 +24,10 @@ export default function StatefulMixin() {
 
 definePrototype(StatefulMixin, Mixin, {
     get ref() {
-        const state = this.state;
-        this.next();
-        return state.ref || (state.ref = new MixinRefImpl(this.clone()));
+        const self = this;
+        const state = self.state;
+        self.next();
+        return state.ref || (state.ref = new MixinRefImpl(self.clone()));
     },
     get state() {
         const obj = _(this);

package/package.json

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