brew-js-react 0.1.5 → 0.1.8

package/dist/brew-js-react.js

@@ -1,16 +1,24 @@
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("brew-js"), require("react"), require("react-dom"), require("zeta-dom"), require("zeta-dom-react"), require("waterpipe"));
+		module.exports = factory(require("brew-js"), require("react"), require("react-dom"), require("zeta-dom"), require("zeta-dom-react"), require("waterpipe"), require("jQuery"));
 	else if(typeof define === 'function' && define.amd)
-		define("brew-js-react", ["brew-js", "react", "react-dom", "zeta-dom", "zeta-dom-react", "waterpipe"], factory);
+		define("brew-js-react", ["brew-js", "react", "react-dom", "zeta-dom", "zeta-dom-react", "waterpipe", "jQuery"], factory);
 	else if(typeof exports === 'object')
-		exports["brew-js-react"] = factory(require("brew-js"), require("react"), require("react-dom"), require("zeta-dom"), require("zeta-dom-react"), require("waterpipe"));
+		exports["brew-js-react"] = factory(require("brew-js"), require("react"), require("react-dom"), require("zeta-dom"), require("zeta-dom-react"), require("waterpipe"), require("jQuery"));
 	else
-		root["brew-js-react"] = factory(root["brew"], root["React"], root["ReactDOM"], root["zeta"], root["zeta-dom-react"], root["waterpipe"]);
-})(self, function(__WEBPACK_EXTERNAL_MODULE__80__, __WEBPACK_EXTERNAL_MODULE__359__, __WEBPACK_EXTERNAL_MODULE__318__, __WEBPACK_EXTERNAL_MODULE__654__, __WEBPACK_EXTERNAL_MODULE__103__, __WEBPACK_EXTERNAL_MODULE__28__) {
+		root["brew-js-react"] = factory(root["brew"], root["React"], root["ReactDOM"], root["zeta"], root["zeta-dom-react"], root["waterpipe"], root["jQuery"]);
+})(self, function(__WEBPACK_EXTERNAL_MODULE__80__, __WEBPACK_EXTERNAL_MODULE__359__, __WEBPACK_EXTERNAL_MODULE__318__, __WEBPACK_EXTERNAL_MODULE__654__, __WEBPACK_EXTERNAL_MODULE__103__, __WEBPACK_EXTERNAL_MODULE__28__, __WEBPACK_EXTERNAL_MODULE__145__) {
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
+/***/ 145:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__145__;
+
+/***/ }),
+
 /***/ 28:
 /***/ ((module) => {
 
@@ -59,6 +67,19 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__654__;
 
 /***/ }),
 
+/***/ 346:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+/// <reference types="jq-scrollable" />
+// @ts-nocheck
+
+/** @type {JQueryStatic} */
+var jQuery = window.jQuery || __webpack_require__(145);
+
+module.exports = jQuery;
+
+/***/ }),
+
 /***/ 43:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -148,6 +169,7 @@ __webpack_require__.d(src_namespaceObject, {
   "Dialog": () => (Dialog),
   "ErrorHandlerMixin": () => (ErrorHandlerMixin),
   "FlyoutMixin": () => (FlyoutMixin),
+  "FlyoutToggleMixin": () => (FlyoutToggleMixin),
   "FocusStateMixin": () => (FocusStateMixin),
   "LoadingStateMixin": () => (LoadingStateMixin),
   "Mixin": () => (Mixin),
@@ -676,9 +698,10 @@ function StatefulMixin() {
 }
 definePrototype(StatefulMixin, Mixin, {
   get ref() {
-    var state = this.state;
-    this.next();
-    return state.ref || (state.ref = new MixinRefImpl(this.clone()));
+    var self = this;
+    var state = self.state;
+    self.next();
+    return state.ref || (state.ref = new MixinRefImpl(self.clone()));
   },
 
   get state() {
@@ -735,7 +758,27 @@ definePrototype(StatefulMixin, Mixin, {
 
 
 
+
 var ClassNameMixinSuper = StatefulMixin.prototype;
+
+function checkState(self, element, state, isAsync) {
+  var classNames = state.classNames;
+  var prev = extend({}, classNames);
+  each(self.classNames, function (i, v) {
+    classNames[v] = element.classList.contains(v);
+  });
+
+  if (!equal(prev, classNames)) {
+    var cb = self.onClassNameUpdated.bind(self, element, prev, extend({}, classNames));
+
+    if (isAsync) {
+      setImmediate(cb);
+    } else {
+      cb();
+    }
+  }
+}
+
 function ClassNameMixin(classNames) {
   StatefulMixin.call(this);
   this.classNames = classNames || [];
@@ -744,6 +787,16 @@ definePrototype(ClassNameMixin, StatefulMixin, {
   getClassNames: function getClassNames() {
     return [this.state.classNames];
   },
+  getRef: function getRef() {
+    var self = this;
+    var element = self.state.element;
+
+    if (element && containsOrEquals(root, element)) {
+      checkState(self, element, self.state, true);
+    }
+
+    return ClassNameMixinSuper.getRef.call(this);
+  },
   initState: function initState() {
     return {
       element: null,
@@ -754,14 +807,7 @@ definePrototype(ClassNameMixin, StatefulMixin, {
     var self = this;
     zeta_dom_dom.watchAttributes(element, ['class'], function (nodes) {
       if (nodes.includes(element)) {
-        var prev = extend({}, state.classNames);
-        each(self.classNames, function (i, v) {
-          state.classNames[v] = element.classList.contains(v);
-        });
-
-        if (!equal(prev, state.classNames)) {
-          self.onClassNameUpdated(element, prev, state.classNames);
-        }
+        checkState(self, element, state);
       }
     });
   },
@@ -781,23 +827,26 @@ function AnimateMixin() {
 }
 definePrototype(AnimateMixin, ClassNameMixin, {
   next: function next() {
-    this.effects = undefined;
-    this.trigger = undefined;
-    return AnimateMixinSuper.next.call(this);
+    var self = this;
+    self.effects = undefined;
+    self.trigger = undefined;
+    return AnimateMixinSuper.next.call(self);
   },
   "with": function _with(props) {
-    this.effects = props.effects;
-    this.trigger = props.trigger;
-    return this;
+    var self = this;
+    self.effects = props.effects;
+    self.trigger = props.trigger;
+    return self;
   },
   withEffects: function withEffects() {
     this.effects = makeArray(arguments);
     return this;
   },
   getCustomAttributes: function getCustomAttributes() {
-    return extend({}, AnimateMixinSuper.getCustomAttributes.call(this), {
-      'animate-in': (this.effects || []).join(' '),
-      'animate-on': this.trigger || 'show'
+    var self = this;
+    return extend({}, AnimateMixinSuper.getCustomAttributes.call(self), {
+      'animate-in': (self.effects || []).join(' '),
+      'animate-on': self.trigger || 'show'
     });
   }
 });
@@ -821,9 +870,10 @@ definePrototype(AnimateSequenceItemMixin, ClassNameMixin, {
 var AnimateSequenceMixinSuper = AnimateMixin.prototype;
 var animateSequenceMixinCounter = 0;
 function AnimateSequenceMixin() {
-  AnimateMixin.call(this);
-  this.className = 'brew-anim-' + ++animateSequenceMixinCounter;
-  this.item = new AnimateSequenceItemMixin(this.className);
+  var self = this;
+  AnimateMixin.call(self);
+  self.className = 'brew-anim-' + ++animateSequenceMixinCounter;
+  self.item = new AnimateSequenceItemMixin(self.className);
 }
 definePrototype(AnimateSequenceMixin, AnimateMixin, {
   reset: function reset() {
@@ -890,19 +940,42 @@ definePrototype(ErrorHandlerMixin, StatefulMixin, {
     });
   }
 });
+;// CONCATENATED MODULE: ./src/mixins/FlyoutToggleMixin.js
+
+
+var FlyoutToggleMixinSuper = ClassNameMixin.prototype;
+function FlyoutToggleMixin(mixin) {
+  ClassNameMixin.call(this, ['target-opened']);
+  this.flyoutMixin = mixin;
+}
+definePrototype(FlyoutToggleMixin, ClassNameMixin, {
+  getCustomAttributes: function getCustomAttributes() {
+    var element = this.flyoutMixin.elements()[0];
+    return extend({}, FlyoutToggleMixinSuper.getCustomAttributes.call(this), {
+      'toggle': element && '#' + element.id
+    });
+  },
+  clone: function clone() {
+    return extend(FlyoutToggleMixinSuper.clone.call(this), {
+      flyoutMixin: this.flyoutMixin
+    });
+  }
+});
 ;// CONCATENATED MODULE: ./src/mixins/FlyoutMixin.js
 
 
 
+
 var FlyoutMixinSuper = ClassNameMixin.prototype;
 var flyoutMixinCounter = 0;
 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']);
+  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 reset() {
@@ -918,13 +991,15 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
     return this;
   },
   getCustomAttributes: function getCustomAttributes() {
-    return extend({}, FlyoutMixinSuper.getCustomAttributes.call(this), {
-      'is-flyout': ''
-    }, this.modal && {
+    var self = this;
+    return extend({}, FlyoutMixinSuper.getCustomAttributes.call(self), {
+      'is-flyout': '',
+      'swipe-dismiss': self.swipeToDismiss
+    }, self.modal && {
       'is-modal': ''
-    }, this.effects && {
+    }, self.effects && {
       'animate-on': 'open',
-      'animate-in': this.effects.join(' '),
+      'animate-in': self.effects.join(' '),
       'animate-out': ''
     });
   },
@@ -964,32 +1039,18 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
     });
   },
   clone: function clone() {
-    var mixin = extend(FlyoutMixinSuper.clone.call(this), {
-      toggle: this.toggle.ref.getMixin()
+    var self = this;
+    var mixin = extend(FlyoutMixinSuper.clone.call(self), {
+      toggle: self.toggle.ref.getMixin()
     });
-    defineAliasProperty(mixin, 'isFlyoutOpened', this);
-    defineAliasProperty(mixin, 'modal', this);
+    defineAliasProperty(mixin, 'isFlyoutOpened', self);
+    defineAliasProperty(mixin, 'modal', self);
     return mixin;
   },
   onClassNameUpdated: function onClassNameUpdated(element, prevState, state) {
     var self = this;
-
-    var isAdded = function isAdded(v) {
-      return prevState[v] !== state[v] && state[v];
-    };
-
-    var isRemoved = function isRemoved(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;
-    }
+    self.visible = state.open;
+    self.isFlyoutOpened = state.open && !state.closing && !state['tweening-out'];
   }
 });
 ;// CONCATENATED MODULE: ./src/mixins/FocusStateMixin.js
@@ -1054,16 +1115,21 @@ definePrototype(LoadingStateMixin, StatefulMixin, {
     }];
   }
 });
+// EXTERNAL MODULE: ./src/include/external/jquery.js
+var jquery = __webpack_require__(346);
 ;// CONCATENATED MODULE: ./src/mixins/ScrollableMixin.js
 
 
 
 
+
 var ScrollableMixinSuper = ClassNameMixin.prototype;
 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;
+  self.scrolling = false;
 }
 definePrototype(ScrollableMixin, ClassNameMixin, {
   withOptions: function withOptions(options) {
@@ -1086,11 +1152,19 @@ definePrototype(ScrollableMixin, ClassNameMixin, {
   },
   initElement: function initElement(element, state) {
     var self = this;
-    app_app.on(element, 'statechange', function (e) {
-      if ('pageIndex' in e.newValues) {
-        extend(self, {
-          pageIndex: e.newValues.pageIndex
-        });
+    app_app.on(element, {
+      statechange: function statechange(e) {
+        if ('pageIndex' in e.newValues) {
+          extend(self, {
+            pageIndex: e.newValues.pageIndex
+          });
+        }
+      },
+      scrollStart: function scrollStart() {
+        self.scrolling = true;
+      },
+      scrollStop: function scrollStop() {
+        self.scrolling = false;
       }
     }, true);
   },
@@ -1100,6 +1174,12 @@ definePrototype(ScrollableMixin, ClassNameMixin, {
     return mixin;
   }
 });
+each('destroy enable disable setOptions refresh scrollPadding stop scrollLeft scrollTop scrollBy scrollTo scrollByPage scrollToPage scrollToElement', function (i, v) {
+  defineHiddenProperty(ScrollableMixin.prototype, v, function () {
+    var obj = jquery(this.elements());
+    return obj.scrollable.apply(obj, [v].concat(makeArray(arguments)));
+  });
+});
 ;// CONCATENATED MODULE: ./src/mixin.js
 
 
@@ -1115,6 +1195,7 @@ definePrototype(ScrollableMixin, ClassNameMixin, {
 
 
 
+
 function extendSelf(options) {
   extend(this, options);
 }
@@ -1140,7 +1221,7 @@ function useMixin(ctor) {
   })[0].reset();
 }
 function useMixinRef(mixin) {
-  return mixin.getMixin().reset();
+  return mixin && mixin.getMixin().reset();
 }
 
 ;// CONCATENATED MODULE: ./tmp/brew-js/anim.js