@inboxsdk/core 0.2.28-alpha.5 → 0.2.28

package/src/platform-implementation-js/driver-common/sidebar/AppSidebar.js

@@ -1,107 +1,151 @@
-"use strict";
+/* @flow */
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _flatMap = _interopRequireDefault(require("lodash/flatMap"));
-var _sortBy = _interopRequireDefault(require("lodash/sortBy"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _kefir = _interopRequireDefault(require("kefir"));
-var _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
-var _react = _interopRequireDefault(require("react"));
-var _reactDraggableList = _interopRequireDefault(require("react-draggable-list"));
-var _reactSmoothCollapse = _interopRequireDefault(require("react-smooth-collapse"));
-var _getOrFail = _interopRequireDefault(require("../../../common/get-or-fail"));
-var _idMap = _interopRequireDefault(require("../../lib/idMap"));
-var _ElementContainer = _interopRequireDefault(require("../../lib/react/ElementContainer"));
-const springConfig = {
-  stiffness: 400,
-  damping: 50
+import flatMap from 'lodash/flatMap';
+import sortBy from 'lodash/sortBy';
+import cx from 'classnames';
+import Kefir from 'kefir';
+import kefirStopper from 'kefir-stopper';
+import React from 'react';
+import DraggableList from 'react-draggable-list';
+import SmoothCollapse from 'react-smooth-collapse';
+import get from '../../../common/get-or-fail';
+import idMap from '../../lib/idMap';
+import ElementContainer from '../../lib/react/ElementContainer';
+
+const springConfig = { stiffness: 400, damping: 50 };
+
+type ExpansionSettings = {
+  apps: {
+    [appId: string]: {
+      ids: {
+        [id: string]: {
+          lastUse: number,
+          expanded: boolean,
+        },
+      },
+    },
+  },
 };
+
 const MAX_SIDEBAR_SETTINGS = 200;
-class AppSidebar extends _react.default.Component {
-  constructor(props) {
+
+export type PanelDescriptor = {
+  instanceId: string,
+  appId: string,
+  id: string,
+  title: string,
+  iconClass: ?string,
+  iconUrl: ?string,
+  hideTitleBar: boolean,
+  el: HTMLElement,
+  appName?: string,
+};
+export type Props = {
+  panels: PanelDescriptor[],
+  onClose?: () => void,
+  onOutsideClick?: () => void,
+  onMoveEnd(
+    newList: PanelDescriptor[],
+    item: PanelDescriptor,
+    oldIndex: number,
+    newIndex: number
+  ): void,
+  onExpandedToggle?: () => void,
+  container?: () => HTMLElement,
+};
+type State = {
+  expansionSettings: ExpansionSettings,
+};
+export default class AppSidebar extends React.Component<Props, State> {
+  _list: DraggableList<*>;
+  _main: HTMLElement;
+  _stopper = kefirStopper();
+  constructor(props: Props) {
     super(props);
-    (0, _defineProperty2.default)(this, "_stopper", (0, _kefirStopper.default)());
     this.state = {
-      expansionSettings: this._readExpansionSettings()
+      expansionSettings: this._readExpansionSettings(),
     };
   }
   componentDidMount() {
-    _kefir.default.fromEvents(window, 'storage').filter(e => e.key === 'inboxsdk__sidebar_expansion_settings').takeUntilBy(this._stopper).onValue(() => {
-      this.setState({
-        expansionSettings: this._readExpansionSettings()
+    Kefir.fromEvents(window, 'storage')
+      .filter((e) => e.key === 'inboxsdk__sidebar_expansion_settings')
+      .takeUntilBy(this._stopper)
+      .onValue(() => {
+        this.setState({
+          expansionSettings: this._readExpansionSettings(),
+        });
       });
-    });
   }
   componentWillUnmount() {
     this._stopper.destroy();
   }
-  scrollPanelIntoView(instanceId) {
-    let useContainer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    const panel = this._list.getItemInstance(instanceId);
+  scrollPanelIntoView(instanceId: string, useContainer: boolean = false) {
+    const panel: Panel = this._list.getItemInstance(instanceId);
     const getContainer = this.props.container;
     panel.scrollIntoView(useContainer, getContainer && getContainer());
   }
-  closePanel(instanceId) {
-    const panelDescriptor = this.props.panels.find(desc => desc.instanceId === instanceId);
+  closePanel(instanceId: string) {
+    const panelDescriptor = this.props.panels.find(
+      (desc) => desc.instanceId === instanceId
+    );
     if (panelDescriptor) {
       this._expandedToggle(panelDescriptor.appId, panelDescriptor.id, false);
     }
   }
-  openPanel(instanceId) {
-    const panelDescriptor = this.props.panels.find(desc => desc.instanceId === instanceId);
+  openPanel(instanceId: string) {
+    const panelDescriptor = this.props.panels.find(
+      (desc) => desc.instanceId === instanceId
+    );
     if (panelDescriptor) {
       this._expandedToggle(panelDescriptor.appId, panelDescriptor.id, true);
     }
   }
-  shouldComponentUpdate(nextProps, nextState) {
-    return this.props.panels !== nextProps.panels || this.state.expansionSettings !== nextState.expansionSettings;
+  shouldComponentUpdate(nextProps: Props, nextState: State) {
+    return (
+      this.props.panels !== nextProps.panels ||
+      this.state.expansionSettings !== nextState.expansionSettings
+    );
   }
-  _expandedToggle(appId, id, expanded) {
+  _expandedToggle(appId: string, id: string, expanded: boolean) {
     // Operate on the latest value from localStorage
     let expansionSettings = this._readExpansionSettings();
     if (!Object.prototype.hasOwnProperty.call(expansionSettings.apps, appId)) {
       expansionSettings.apps[appId] = {
-        ids: {}
+        ids: {},
       };
     }
     const appSettings = expansionSettings.apps[appId];
     appSettings.ids[id] = {
       lastUse: Date.now(),
-      expanded
+      expanded,
     };
-    this.setState({
-      expansionSettings
-    }, this.props.onExpandedToggle);
+    this.setState({ expansionSettings }, this.props.onExpandedToggle);
     this._saveExpansionSettings(expansionSettings);
   }
-  _readExpansionSettings() {
+  _readExpansionSettings(): ExpansionSettings {
     let data;
     try {
-      data = JSON.parse(global.localStorage.getItem('inboxsdk__sidebar_expansion_settings') || 'null');
+      data = JSON.parse(
+        global.localStorage.getItem('inboxsdk__sidebar_expansion_settings') ||
+          'null'
+      );
     } catch (err) {
       console.error('Failed to read sidebar settings', err); //eslint-disable-line no-console
     }
-
     if (data) return data;
-    return {
-      apps: {}
-    };
+    return { apps: {} };
   }
-  _saveExpansionSettings(data) {
-    const allSidebarIds = (0, _flatMap.default)(Object.keys(data.apps), appId => Object.keys(data.apps[appId].ids).map(id => [appId, id]));
+  _saveExpansionSettings(data: ExpansionSettings) {
+    const allSidebarIds: Array<[string, string]> = flatMap(
+      Object.keys(data.apps),
+      (appId) => Object.keys(data.apps[appId].ids).map((id) => [appId, id])
+    );
     if (allSidebarIds.length > MAX_SIDEBAR_SETTINGS) {
-      const idsToRemove = (0, _sortBy.default)(allSidebarIds, _ref => {
-        let [appId, id] = _ref;
-        return data.apps[appId].ids[id].lastUse;
-      }).slice(0, allSidebarIds.length - MAX_SIDEBAR_SETTINGS);
-      idsToRemove.forEach(_ref2 => {
-        let [appId, id] = _ref2;
+      const idsToRemove: Array<[string, string]> = sortBy(
+        allSidebarIds,
+        ([appId, id]) => data.apps[appId].ids[id].lastUse
+      ).slice(0, allSidebarIds.length - MAX_SIDEBAR_SETTINGS);
+      idsToRemove.forEach(([appId, id]) => {
         delete data.apps[appId].ids[id];
         if (Object.keys(data.apps[appId].ids).length === 0) {
           delete data.apps[appId];
@@ -109,90 +153,129 @@ class AppSidebar extends _react.default.Component {
       });
     }
     try {
-      global.localStorage.setItem('inboxsdk__sidebar_expansion_settings', JSON.stringify(data));
+      global.localStorage.setItem(
+        'inboxsdk__sidebar_expansion_settings',
+        JSON.stringify(data)
+      );
     } catch (err) {
       console.error('Failed to save sidebar settings', err); //eslint-disable-line no-console
     }
   }
-
   render() {
-    const {
-      expansionSettings
-    } = this.state;
-    const {
-      panels,
-      onClose,
-      onOutsideClick,
-      onMoveEnd,
-      container
-    } = this.props;
+    const { expansionSettings } = this.state;
+    const { panels, onClose, onOutsideClick, onMoveEnd, container } =
+      this.props;
     const showControls = panels.length > 1;
+
     const hideTitleBar = panels.length === 1 && panels[0].hideTitleBar;
-    const panelList = panels.map(panelDescriptor => {
-      const appExpansionSettings = Object.prototype.hasOwnProperty.call(expansionSettings.apps, panelDescriptor.appId) ? expansionSettings.apps[panelDescriptor.appId] : null;
-      const panelExpansionSettings = appExpansionSettings ? appExpansionSettings.ids[panelDescriptor.id] : null;
-      const expanded = panelExpansionSettings ? panelExpansionSettings.expanded : true;
+
+    const panelList = panels.map((panelDescriptor) => {
+      const appExpansionSettings = Object.prototype.hasOwnProperty.call(
+        expansionSettings.apps,
+        panelDescriptor.appId
+      )
+        ? expansionSettings.apps[panelDescriptor.appId]
+        : null;
+      const panelExpansionSettings = appExpansionSettings
+        ? appExpansionSettings.ids[panelDescriptor.id]
+        : null;
+      const expanded = panelExpansionSettings
+        ? panelExpansionSettings.expanded
+        : true;
       return {
         panelDescriptor,
         showControls,
         expanded,
-        onExpandedToggle: expanded => {
-          this._expandedToggle(panelDescriptor.appId, panelDescriptor.id, expanded);
-        }
+        onExpandedToggle: (expanded) => {
+          this._expandedToggle(
+            panelDescriptor.appId,
+            panelDescriptor.id,
+            expanded
+          );
+        },
       };
     });
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)((0, _idMap.default)('app_sidebar'), {
-        [(0, _idMap.default)('hideTitleBar')]: hideTitleBar
-      })
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _idMap.default)('app_sidebar_main'),
-      ref: el => {
-        if (el) this._main = el;
-      }
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _idMap.default)('app_sidebar_content_area')
-    }, /*#__PURE__*/_react.default.createElement(_reactDraggableList.default, {
-      padding: 0,
-      ref: el => {
-        if (el) this._list = el;
-      },
-      itemKey: x => x.panelDescriptor.instanceId,
-      template: Panel,
-      list: panelList,
-      onMoveEnd: (newList, movedItem, oldIndex, newIndex) => {
-        onMoveEnd(newList.map(x => x.panelDescriptor), movedItem.panelDescriptor, oldIndex, newIndex);
-      },
-      springConfig: springConfig,
-      container: container || (() => this._main)
-    })), onOutsideClick && /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _idMap.default)('app_sidebar_content_area_padding'),
-      onClick: event => {
-        event.preventDefault();
-        onOutsideClick();
-      }
-    })), onClose && /*#__PURE__*/_react.default.createElement("button", {
-      className: "inboxsdk__close_button",
-      type: "button",
-      title: "Close",
-      onClick: onClose
-    }));
+
+    return (
+      <div
+        className={cx(idMap('app_sidebar'), {
+          [idMap('hideTitleBar')]: hideTitleBar,
+        })}
+      >
+        <div
+          className={idMap('app_sidebar_main')}
+          ref={(el) => {
+            if (el) this._main = el;
+          }}
+        >
+          <div className={idMap('app_sidebar_content_area')}>
+            <DraggableList
+              padding={0}
+              ref={(el) => {
+                if (el) this._list = el;
+              }}
+              itemKey={(x) => x.panelDescriptor.instanceId}
+              template={Panel}
+              list={panelList}
+              onMoveEnd={(newList, movedItem, oldIndex, newIndex) => {
+                onMoveEnd(
+                  newList.map((x) => x.panelDescriptor),
+                  movedItem.panelDescriptor,
+                  oldIndex,
+                  newIndex
+                );
+              }}
+              springConfig={springConfig}
+              container={container || (() => this._main)}
+            />
+          </div>
+          {onOutsideClick && (
+            <div
+              className={idMap('app_sidebar_content_area_padding')}
+              onClick={(event) => {
+                event.preventDefault();
+                onOutsideClick();
+              }}
+            />
+          )}
+        </div>
+        {onClose && (
+          <button
+            className="inboxsdk__close_button"
+            type="button"
+            title="Close"
+            onClick={onClose}
+          />
+        )}
+      </div>
+    );
   }
 }
-exports.default = AppSidebar;
-class Panel extends _react.default.Component {
-  scrollIntoView(useContainer, container) {
+
+type PanelProps = {
+  item: {
+    panelDescriptor: PanelDescriptor,
+    showControls: boolean,
+    expanded: boolean,
+    onExpandedToggle(expanded: boolean): void,
+  },
+  dragHandleProps: Object,
+  itemSelected: number,
+};
+class Panel extends React.Component<PanelProps> {
+  _el: HTMLElement;
+  scrollIntoView(useContainer: boolean, container?: ?HTMLElement) {
     if (useContainer && container) {
       const offsetParent = this._el.parentElement;
       if (offsetParent) {
-        container.scrollTo({
-          top: offsetParent.offsetTop,
-          behavior: 'smooth'
+        (container: any).scrollTo({
+          top: (offsetParent: any).offsetTop,
+          behavior: 'smooth',
         });
       }
     } else {
       this._el.scrollIntoView({
-        behavior: 'smooth'
+        behavior: 'smooth',
       });
     }
   }
@@ -202,98 +285,124 @@ class Panel extends _react.default.Component {
   componentDidMount() {
     const expanded = !this.props.item.showControls || this.props.item.expanded;
     if (expanded) {
-      document.body.dispatchEvent(new CustomEvent('inboxsdkSidebarPanelActivated', {
-        bubbles: true,
-        cancelable: false,
-        detail: {
-          instanceId: this.props.item.panelDescriptor.instanceId
-        }
-      }));
+      ((document.body: any): HTMLElement).dispatchEvent(
+        new CustomEvent('inboxsdkSidebarPanelActivated', {
+          bubbles: true,
+          cancelable: false,
+          detail: { instanceId: this.props.item.panelDescriptor.instanceId },
+        })
+      );
     }
   }
-  componentDidUpdate(prevProps) {
-    const prevExpanded = !prevProps.item.showControls || prevProps.item.expanded;
+  componentDidUpdate(prevProps: PanelProps) {
+    const prevExpanded =
+      !prevProps.item.showControls || prevProps.item.expanded;
     const expanded = !this.props.item.showControls || this.props.item.expanded;
     if (!prevExpanded && expanded) {
-      document.body.dispatchEvent(new CustomEvent('inboxsdkSidebarPanelActivated', {
-        bubbles: true,
-        cancelable: false,
-        detail: {
-          instanceId: this.props.item.panelDescriptor.instanceId
-        }
-      }));
+      ((document.body: any): HTMLElement).dispatchEvent(
+        new CustomEvent('inboxsdkSidebarPanelActivated', {
+          bubbles: true,
+          cancelable: false,
+          detail: { instanceId: this.props.item.panelDescriptor.instanceId },
+        })
+      );
     } else if (prevExpanded && !expanded) {
-      document.body.dispatchEvent(new CustomEvent('inboxsdkSidebarPanelDeactivated', {
-        bubbles: true,
-        cancelable: false,
-        detail: {
-          instanceId: this.props.item.panelDescriptor.instanceId
-        }
-      }));
+      ((document.body: any): HTMLElement).dispatchEvent(
+        new CustomEvent('inboxsdkSidebarPanelDeactivated', {
+          bubbles: true,
+          cancelable: false,
+          detail: { instanceId: this.props.item.panelDescriptor.instanceId },
+        })
+      );
     }
   }
-  shouldComponentUpdate(nextProps) {
-    return this.props.itemSelected !== nextProps.itemSelected || this.props.item.panelDescriptor !== nextProps.item.panelDescriptor || this.props.item.showControls !== nextProps.item.showControls || this.props.item.expanded !== nextProps.item.expanded;
+  shouldComponentUpdate(nextProps: PanelProps) {
+    return (
+      this.props.itemSelected !== nextProps.itemSelected ||
+      this.props.item.panelDescriptor !== nextProps.item.panelDescriptor ||
+      this.props.item.showControls !== nextProps.item.showControls ||
+      this.props.item.expanded !== nextProps.item.expanded
+    );
   }
   render() {
     const {
       dragHandleProps,
       itemSelected,
       item: {
-        panelDescriptor: {
-          title,
-          appName,
-          iconClass,
-          iconUrl,
-          el
-        },
+        panelDescriptor: { title, appName, iconClass, iconUrl, el },
         showControls,
         expanded,
-        onExpandedToggle
-      }
+        onExpandedToggle,
+      },
     } = this.props;
     const scale = itemSelected * 0.01 + 1;
     const shadow = itemSelected * 4;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      ref: el => {
-        if (el) this._el = el;
-      },
-      className: (0, _classnames.default)((0, _idMap.default)('app_sidebar_content_panel'), {
-        [(0, _idMap.default)('dragged')]: itemSelected > 0.2,
-        [(0, _idMap.default)('expanded')]: expanded,
-        [(0, _idMap.default)('showControls')]: showControls
-      }),
-      style: {
-        transform: scale === 1 ? 'none' : `scale(${scale})`,
-        boxShadow: shadow === 0 ? 'none' : `0px 0px ${shadow}px 0px rgba(0, 0, 0, 0.3)`
-      }
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _idMap.default)('app_sidebar_content_panel_top_line'),
-      "data-app-name": appName
-    }, /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
-      className: (0, _idMap.default)('app_sidebar_content_panel_title')
-    }, showControls ? dragHandleProps : null), /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _idMap.default)('app_sidebar_content_panel_grip')
-    }), /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _idMap.default)('app_sidebar_content_panel_title_icon_container')
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)((0, _idMap.default)('app_sidebar_content_panel_title_icon'), iconClass)
-    }, iconUrl && /*#__PURE__*/_react.default.createElement("img", {
-      src: iconUrl
-    }))), /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _idMap.default)('app_sidebar_content_panel_title_text')
-    }, title)), /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _idMap.default)('app_sidebar_content_panel_toggle'),
-      onClick: () => onExpandedToggle(!expanded)
-    }, /*#__PURE__*/_react.default.createElement("button", {
-      type: "button",
-      className: (0, _idMap.default)('app_sidebar_content_panel_toggle_button')
-    }))), /*#__PURE__*/_react.default.createElement(_reactSmoothCollapse.default, {
-      expanded: !showControls || expanded,
-      heightTransition: ".15s ease"
-    }, /*#__PURE__*/_react.default.createElement(_ElementContainer.default, {
-      className: (0, _idMap.default)('app_sidebar_content_panel_content'),
-      el: el
-    })));
+
+    return (
+      <div
+        ref={(el) => {
+          if (el) this._el = el;
+        }}
+        className={cx(idMap('app_sidebar_content_panel'), {
+          [idMap('dragged')]: itemSelected > 0.2,
+          [idMap('expanded')]: expanded,
+          [idMap('showControls')]: showControls,
+        })}
+        style={{
+          transform: scale === 1 ? 'none' : `scale(${scale})`,
+          boxShadow:
+            shadow === 0
+              ? 'none'
+              : `0px 0px ${shadow}px 0px rgba(0, 0, 0, 0.3)`,
+        }}
+      >
+        <div
+          className={idMap('app_sidebar_content_panel_top_line')}
+          data-app-name={appName}
+        >
+          <span
+            className={idMap('app_sidebar_content_panel_title')}
+            {...(showControls ? dragHandleProps : null)}
+          >
+            <div className={idMap('app_sidebar_content_panel_grip')} />
+            <span
+              className={idMap(
+                'app_sidebar_content_panel_title_icon_container'
+              )}
+            >
+              <span
+                className={cx(
+                  idMap('app_sidebar_content_panel_title_icon'),
+                  iconClass
+                )}
+              >
+                {iconUrl && <img src={iconUrl} />}
+              </span>
+            </span>
+            <span className={idMap('app_sidebar_content_panel_title_text')}>
+              {title}
+            </span>
+          </span>
+          <span
+            className={idMap('app_sidebar_content_panel_toggle')}
+            onClick={() => onExpandedToggle(!expanded)}
+          >
+            <button
+              type="button"
+              className={idMap('app_sidebar_content_panel_toggle_button')}
+            />
+          </span>
+        </div>
+        <SmoothCollapse
+          expanded={!showControls || expanded}
+          heightTransition=".15s ease"
+        >
+          <ElementContainer
+            className={idMap('app_sidebar_content_panel_content')}
+            el={el}
+          />
+        </SmoothCollapse>
+      </div>
+    );
   }
-}
+}