@inboxsdk/core 0.2.28-alpha.4 → 0.2.28-alpha.6

package/src/platform-implementation-js/dom-driver/inbox/views/inbox-compose-button-view.js

@@ -1,52 +1,35 @@
-/* @flow */
-
-import includes from 'lodash/includes';
-import { defn } from 'ud';
-import Kefir from 'kefir';
-import type InboxComposeView from './inbox-compose-view';
-import fromEventTargetCapture from '../../../lib/from-event-target-capture';
-import insertElementInOrder from '../../../lib/dom/insert-element-in-order';
-import DropdownView from '../../../widgets/buttons/dropdown-view';
-import InboxDropdownView from './inbox-dropdown-view';
-import type { TooltipDescriptor } from '../../../views/compose-button-view';
-import type { ComposeButtonDescriptor } from '../../../driver-interfaces/compose-view-driver';
-import InboxTooltipView from './inbox-tooltip-view';
-
-let insertionOrderHint: number = 0;
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _includes = _interopRequireDefault(require("lodash/includes"));
+var _ud = require("ud");
+var _kefir = _interopRequireDefault(require("kefir"));
+var _fromEventTargetCapture = _interopRequireDefault(require("../../../lib/from-event-target-capture"));
+var _insertElementInOrder = _interopRequireDefault(require("../../../lib/dom/insert-element-in-order"));
+var _dropdownView = _interopRequireDefault(require("../../../widgets/buttons/dropdown-view"));
+var _inboxDropdownView = _interopRequireDefault(require("./inbox-dropdown-view"));
+var _inboxTooltipView = _interopRequireDefault(require("./inbox-tooltip-view"));
+let insertionOrderHint = 0;
 class InboxComposeButtonView {
-  _composeView: InboxComposeView;
-  _buttonEl: HTMLElement;
-  _tooltip: ?InboxTooltipView;
-
-  constructor(
-    composeView: InboxComposeView,
-    buttonDescriptor: Kefir.Observable<?ComposeButtonDescriptor>,
-    groupOrderHint: string,
-    extraOnClickOptions: Object
-  ) {
+  constructor(composeView, buttonDescriptor, groupOrderHint, extraOnClickOptions) {
     this._tooltip = null;
     this._composeView = composeView;
-    const buttonEl = (this._buttonEl = document.createElement('div'));
+    const buttonEl = this._buttonEl = document.createElement('div');
     buttonEl.setAttribute('role', 'button');
-    buttonEl.setAttribute(
-      'data-insertion-order-hint',
-      String(insertionOrderHint++)
-    );
+    buttonEl.setAttribute('data-insertion-order-hint', String(insertionOrderHint++));
     buttonEl.setAttribute('data-group-order-hint', groupOrderHint);
     buttonEl.tabIndex = 0;
     buttonEl.className = 'inboxsdk__button_icon';
     const img = document.createElement('img');
     img.className = 'inboxsdk__button_iconImg';
-    let onClick = (ignored) => {};
+    let onClick = ignored => {};
     let hasDropdown = false;
     let dropdown = null;
-    Kefir.merge([
-      Kefir.fromEvents(buttonEl, 'click'),
-      fromEventTargetCapture(buttonEl, 'keyup').filter((e) =>
-        includes([32 /*space*/, 13 /*enter*/], e.which)
-      ),
-    ]).onValue((event) => {
+    _kefir.default.merge([_kefir.default.fromEvents(buttonEl, 'click'), (0, _fromEventTargetCapture.default)(buttonEl, 'keyup').filter(e => (0, _includes.default)([32 /*space*/, 13 /*enter*/], e.which))]).onValue(event => {
       event.preventDefault();
       event.stopPropagation();
       this.closeTooltip();
@@ -56,12 +39,12 @@ class InboxComposeButtonView {
           return;
         } else {
           this._buttonEl.classList.add('inboxsdk__active');
-          dropdown = new DropdownView(new InboxDropdownView(), buttonEl);
+          dropdown = new _dropdownView.default(new _inboxDropdownView.default(), buttonEl);
           dropdown.setPlacementOptions({
             position: 'top',
             hAlign: 'left',
             vAlign: 'bottom',
-            buffer: 5,
+            buffer: 5
           });
           dropdown.on('destroy', () => {
             this._buttonEl.classList.remove('inboxsdk__active');
@@ -69,40 +52,34 @@ class InboxComposeButtonView {
           });
         }
       }
-      onClick(Object.assign(({ dropdown }: any), extraOnClickOptions));
+      onClick(Object.assign({
+        dropdown
+      }, extraOnClickOptions));
     });
     let lastOrderHint = null;
-
-    buttonDescriptor
-      .takeUntilBy(composeView.getStopper())
-      .onValue((buttonDescriptor) => {
-        if (!buttonDescriptor) {
-          buttonEl.remove();
-          lastOrderHint = null;
-          return;
-        }
-        hasDropdown = buttonDescriptor.hasDropdown;
-        buttonEl.title = buttonDescriptor.title;
-        buttonEl.className =
-          'inboxsdk__button_icon ' + (buttonDescriptor.iconClass || '');
-        onClick = buttonDescriptor.onClick;
-        if (buttonDescriptor.iconUrl) {
-          img.src = buttonDescriptor.iconUrl;
-          buttonEl.appendChild(img);
-        } else {
-          img.remove();
-        }
-        const orderHint = buttonDescriptor.orderHint || 0;
-        if (lastOrderHint !== orderHint) {
-          lastOrderHint = orderHint;
-          buttonEl.setAttribute('data-order-hint', String(orderHint));
-          insertElementInOrder(
-            composeView.getModifierButtonContainer(),
-            buttonEl
-          );
-        }
-      });
-
+    buttonDescriptor.takeUntilBy(composeView.getStopper()).onValue(buttonDescriptor => {
+      if (!buttonDescriptor) {
+        buttonEl.remove();
+        lastOrderHint = null;
+        return;
+      }
+      hasDropdown = buttonDescriptor.hasDropdown;
+      buttonEl.title = buttonDescriptor.title;
+      buttonEl.className = 'inboxsdk__button_icon ' + (buttonDescriptor.iconClass || '');
+      onClick = buttonDescriptor.onClick;
+      if (buttonDescriptor.iconUrl) {
+        img.src = buttonDescriptor.iconUrl;
+        buttonEl.appendChild(img);
+      } else {
+        img.remove();
+      }
+      const orderHint = buttonDescriptor.orderHint || 0;
+      if (lastOrderHint !== orderHint) {
+        lastOrderHint = orderHint;
+        buttonEl.setAttribute('data-order-hint', String(orderHint));
+        (0, _insertElementInOrder.default)(composeView.getModifierButtonContainer(), buttonEl);
+      }
+    });
     composeView.getStopper().onValue(() => {
       this.closeTooltip();
       buttonEl.remove();
@@ -111,8 +88,7 @@ class InboxComposeButtonView {
       }
     });
   }
-
-  showTooltip(tooltipDescriptor: TooltipDescriptor) {
+  showTooltip(tooltipDescriptor) {
     if (this._composeView.isInlineReplyForm()) {
       // In Inbox, if you haven't interacted with an inline compose yet, then
       // it will auto-close as soon as anything else including the tooltip is
@@ -123,22 +99,18 @@ class InboxComposeButtonView {
     if (this._tooltip) {
       this.closeTooltip();
     }
-    const tooltip = (this._tooltip = new InboxTooltipView(
-      this._buttonEl,
-      tooltipDescriptor
-    ));
+    const tooltip = this._tooltip = new _inboxTooltipView.default(this._buttonEl, tooltipDescriptor);
     tooltip.getStopper().onValue(() => {
       if (this._tooltip === tooltip) {
         this._tooltip = null;
       }
     });
   }
-
   closeTooltip() {
     if (this._tooltip) {
       this._tooltip.destroy();
     }
   }
 }
-
-export default defn(module, InboxComposeButtonView);
+var _default = (0, _ud.defn)(module, InboxComposeButtonView);
+exports.default = _default;