brew-js-react 0.1.4 → 0.1.7

package/dist/brew-js-react.js

@@ -170,6 +170,7 @@ __webpack_require__.d(src_namespaceObject, {
   "useFocusStateMixin": () => (useFocusStateMixin),
   "useLanguage": () => (useLanguage),
   "useLoadingStateMixin": () => (useLoadingStateMixin),
+  "useMixin": () => (useMixin),
   "useMixinRef": () => (useMixinRef),
   "useRouteParam": () => (useRouteParam),
   "useScrollableMixin": () => (useScrollableMixin)
@@ -182,6 +183,7 @@ var external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_ = __webpa
 var _defaultExport = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_;
 /* harmony default export */ const app = (_defaultExport);
 var install = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.install,
+    addExtension = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.addExtension,
     addDetect = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.addDetect;
 
 ;// CONCATENATED MODULE: ./src/include/brew-js/app.js
@@ -327,6 +329,7 @@ var _lib$dom = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_z
     focusable = _lib$dom.focusable,
     focused = _lib$dom.focused,
     setModal = _lib$dom.setModal,
+    releaseModal = _lib$dom.releaseModal,
     retainFocus = _lib$dom.retainFocus,
     releaseFocus = _lib$dom.releaseFocus,
     dom_focus = _lib$dom.focus;
@@ -673,9 +676,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() {
@@ -732,7 +736,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 || [];
@@ -741,6 +765,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,
@@ -751,14 +785,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);
       }
     });
   },
@@ -778,23 +805,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'
     });
   }
 });
@@ -818,9 +848,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() {
@@ -893,12 +924,33 @@ definePrototype(ErrorHandlerMixin, StatefulMixin, {
 
 var FlyoutMixinSuper = ClassNameMixin.prototype;
 var flyoutMixinCounter = 0;
+
+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({}, FlyoutMixinSuper.getCustomAttributes.call(this), {
+      'toggle': element && '#' + element.id
+    });
+  },
+  clone: function clone() {
+    return extend(FlyoutMixinSuper.clone.call(this), {
+      flyoutMixin: this.flyoutMixin
+    });
+  }
+});
 function FlyoutMixin() {
-  ClassNameMixin.call(this, ['open', 'closing', 'tweening-in', 'tweening-out']);
-  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() {
@@ -914,11 +966,15 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
     return this;
   },
   getCustomAttributes: function getCustomAttributes() {
-    return extend({}, FlyoutMixinSuper.getCustomAttributes.call(this), {
-      'is-flyout': ''
-    }, this.effects && {
+    var self = this;
+    return extend({}, FlyoutMixinSuper.getCustomAttributes.call(self), {
+      'is-flyout': '',
+      'swipe-dismiss': self.swipeToDismiss
+    }, self.modal && {
+      'is-modal': ''
+    }, self.effects && {
       'animate-on': 'open',
-      'animate-in': this.effects.join(' '),
+      'animate-in': self.effects.join(' '),
       'animate-out': ''
     });
   },
@@ -958,31 +1014,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, '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,9 +1097,10 @@ definePrototype(LoadingStateMixin, StatefulMixin, {
 
 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;
 }
 definePrototype(ScrollableMixin, ClassNameMixin, {
   withOptions: function withOptions(options) {
@@ -1107,11 +1151,16 @@ definePrototype(ScrollableMixin, ClassNameMixin, {
 
 
 
+
+function extendSelf(options) {
+  extend(this, options);
+}
+
 function createUseFunction(ctor) {
   return function () {
-    return (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)(function () {
-      return new ctor();
-    })[0].reset();
+    var mixin = useMixin(ctor);
+    (mixin.withOptions || extendSelf).apply(mixin, arguments);
+    return mixin;
   };
 }
 
@@ -1121,11 +1170,14 @@ var useErrorHandlerMixin = createUseFunction(ErrorHandlerMixin);
 var useFlyoutMixin = createUseFunction(FlyoutMixin);
 var useFocusStateMixin = createUseFunction(FocusStateMixin);
 var useLoadingStateMixin = createUseFunction(LoadingStateMixin);
-function useScrollableMixin(options) {
-  return createUseFunction(ScrollableMixin)().withOptions(options);
+var useScrollableMixin = createUseFunction(ScrollableMixin);
+function useMixin(ctor) {
+  return (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)(function () {
+    return new ctor();
+  })[0].reset();
 }
 function useMixinRef(mixin) {
-  return mixin.getMixin().reset();
+  return mixin && mixin.getMixin().reset();
 }
 
 ;// CONCATENATED MODULE: ./tmp/brew-js/anim.js