function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import * as React from 'react';
import classNames from 'classnames';
import debounce from 'lodash/debounce';
import throttle from 'lodash/throttle';
import { NavSidebar, NavList, NavListCollapseHeader } from '../../components/nav-sidebar';
import FooterIndicator from '../../components/footer-indicator/FooterIndicator';
import LoadingIndicatorWrapper from '../../components/loading-indicator/LoadingIndicatorWrapper';
import { bdlBoxBlue } from '../../styles/variables';
import CopyrightFooter from './CopyrightFooter';
import InstantLogin from './InstantLogin';
import LeftSidebarDropWrapper from './LeftSidebarDropWrapper';
import LeftSidebarIconWrapper from './LeftSidebarIconWrapper';
import NewItemsIndicator from './NewItemsIndicator';
import defaultNavLinkRenderer from './defaultNavLinkRenderer';
import './styles/LeftSidebar.scss';

var LeftSidebar = /*#__PURE__*/function (_React$Component) {
  _inherits(LeftSidebar, _React$Component);

  var _super = _createSuper(LeftSidebar);

  function LeftSidebar(props) {
    var _this;

    _classCallCheck(this, LeftSidebar);

    _this = _super.call(this, props);

    _defineProperty(_assertThisInitialized(_this), "onListScroll", function () {
      _this.changeIsScrollingState();

      _this.throttledCheckAndChangeScrollShadows();
    });

    _defineProperty(_assertThisInitialized(_this), "checkAndChangeScrollShadows", function () {
      if (_this.elScrollableList) {
        _this.setState(_this.calculateOverflow(_this.elScrollableList));
      }
    });

    _defineProperty(_assertThisInitialized(_this), "changeIsScrollingState", function () {
      if (!_this.state.isScrolling) {
        _this.setState({
          isScrolling: true
        });
      }

      _this.debouncedTurnOffScrollingState();
    });

    _defineProperty(_assertThisInitialized(_this), "turnOffScrollingState", function () {
      _this.setState({
        isScrolling: false
      });
    });

    _defineProperty(_assertThisInitialized(_this), "debouncedTurnOffScrollingState", debounce(_this.turnOffScrollingState, 100));

    _defineProperty(_assertThisInitialized(_this), "throttledCheckAndChangeScrollShadows", throttle(_this.checkAndChangeScrollShadows, 50));

    _this.state = {
      isScrollableAbove: false,
      isScrollableBelow: false,
      isScrolling: false
    };
    return _this;
  }

  _createClass(LeftSidebar, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      if (!this.elScrollableList) {
        return;
      }

      var overflow = this.calculateOverflow(this.elScrollableList);
      /**
       * recalculate overflow when dropdown is visible and new collabs are added
       * This will not go into an infinite loop because we check for changes in local component state
       */

      if (overflow.isScrollableAbove !== this.state.isScrollableAbove || overflow.isScrollableBelow !== this.state.isScrollableBelow) {
        // eslint-disable-next-line react/no-did-update-set-state
        this.setState(overflow);
      }
    }
  }, {
    key: "getIcon",
    value: function getIcon(iconElement, IconComponent) {
      var customTheme = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
      var selected = arguments.length > 3 ? arguments[3] : undefined;
      var scaleIcon = arguments.length > 4 ? arguments[4] : undefined;
      var wrapperClass = scaleIcon ? 'scaled-icon' : '';

      if (iconElement) {
        return /*#__PURE__*/React.createElement(LeftSidebarIconWrapper, {
          className: wrapperClass
        }, iconElement);
      }

      if (IconComponent) {
        return /*#__PURE__*/React.createElement(LeftSidebarIconWrapper, {
          className: wrapperClass
        }, /*#__PURE__*/React.createElement(IconComponent, {
          color: selected && customTheme.secondaryColor ? customTheme.secondaryColor : bdlBoxBlue,
          selected: selected
        }));
      }

      return null;
    }
  }, {
    key: "getNewItemBadge",
    value: function getNewItemBadge(newItemBadge) {
      var customTheme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
      var secondaryColor = customTheme.secondaryColor;
      return newItemBadge ? /*#__PURE__*/React.createElement(NewItemsIndicator, {
        customColor: secondaryColor
      }) : null;
    }
  }, {
    key: "getNavList",
    value: function getNavList(headerLinkProps, leftSidebarProps, showLoadingIndicator, onToggleCollapse) {
      var _this2 = this;

      var _headerLinkProps$canR = headerLinkProps.canReceiveDrop,
          canReceiveDrop = _headerLinkProps$canR === void 0 ? false : _headerLinkProps$canR,
          _headerLinkProps$clas = headerLinkProps.className,
          className = _headerLinkProps$clas === void 0 ? '' : _headerLinkProps$clas,
          collapsed = headerLinkProps.collapsed,
          dropTargetRef = headerLinkProps.dropTargetRef,
          id = headerLinkProps.id,
          menuItems = headerLinkProps.menuItems,
          placeholder = headerLinkProps.placeholder,
          showDropZoneOnHover = headerLinkProps.showDropZoneOnHover;
      var heading = onToggleCollapse ? /*#__PURE__*/React.createElement(NavListCollapseHeader, {
        onToggleCollapse: onToggleCollapse
      }, this.getNavLink(headerLinkProps, leftSidebarProps)) : this.getNavLink(headerLinkProps, leftSidebarProps);
      var placeholderEl = menuItems && menuItems.length || showLoadingIndicator ? null : /*#__PURE__*/React.createElement("div", {
        className: "placeholder"
      }, placeholder);
      var classes = classNames('left-sidebar-list', className, {
        'is-loading-empty': showLoadingIndicator && menuItems && menuItems.length === 0,
        'is-loading': showLoadingIndicator && menuItems && menuItems.length > 0,
        'lsb-scrollable-shadow-top': this.state.isScrollableAbove,
        'lsb-scrollable-shadow-bottom': this.state.isScrollableBelow
      });
      var ulProps = onToggleCollapse ? {
        onScroll: this.onListScroll,
        ref: function ref(elScrollableList) {
          _this2.elScrollableList = elScrollableList;
        }
      } : {};
      var builtNavList = /*#__PURE__*/React.createElement(NavList, {
        className: classes,
        collapsed: collapsed,
        heading: heading,
        placeholder: placeholderEl,
        key: "list-".concat(id),
        ulProps: ulProps
      }, menuItems && menuItems.map(function (props) {
        return _this2.getNavLink(props, leftSidebarProps);
      }) || null);
      return canReceiveDrop ? /*#__PURE__*/React.createElement(LeftSidebarDropWrapper, {
        isDragging: leftSidebarProps.isDragging,
        dropTargetRef: dropTargetRef,
        showDropZoneOnHover: showDropZoneOnHover
      }, builtNavList) : builtNavList;
    }
  }, {
    key: "getNavLink",
    value: function getNavLink(props, leftSidebarProps) {
      var callout = props.callout,
          _props$canReceiveDrop = props.canReceiveDrop,
          canReceiveDrop = _props$canReceiveDrop === void 0 ? false : _props$canReceiveDrop,
          _props$className = props.className,
          className = _props$className === void 0 ? '' : _props$className,
          dropTargetRef = props.dropTargetRef,
          htmlAttributes = props.htmlAttributes,
          iconComponent = props.iconComponent,
          iconElement = props.iconElement,
          id = props.id,
          message = props.message,
          navLinkRenderer = props.navLinkRenderer,
          newItemBadge = props.newItemBadge,
          onClickRemove = props.onClickRemove,
          removeButtonHtmlAttributes = props.removeButtonHtmlAttributes,
          routerLink = props.routerLink,
          routerProps = props.routerProps,
          scaleIcon = props.scaleIcon,
          _props$selected = props.selected,
          selected = _props$selected === void 0 ? false : _props$selected,
          showTooltip = props.showTooltip,
          showDropZoneOnHover = props.showDropZoneOnHover;
      var linkClassNames = classNames('left-sidebar-link', className, {
        'is-selected': selected
      });
      var linkProps = {
        callout: callout,
        className: linkClassNames,
        customTheme: leftSidebarProps.customTheme,
        onClickRemove: onClickRemove,
        htmlAttributes: htmlAttributes,
        icon: this.getIcon(iconElement, iconComponent, leftSidebarProps.customTheme, selected, scaleIcon),
        isScrolling: this.state.isScrolling,
        message: message,
        newItemBadge: this.getNewItemBadge(newItemBadge, leftSidebarProps.customTheme),
        removeButtonHtmlAttributes: removeButtonHtmlAttributes,
        routerLink: routerLink,
        routerProps: routerProps,
        selected: selected,
        showTooltip: showTooltip
      };
      var builtLink = navLinkRenderer ? navLinkRenderer(linkProps) : defaultNavLinkRenderer(linkProps); // Check for menu items on links so we don't double-highlight groups

      return canReceiveDrop && !props.menuItems ? /*#__PURE__*/React.createElement(LeftSidebarDropWrapper, {
        isDragging: leftSidebarProps.isDragging,
        dropTargetRef: dropTargetRef,
        key: "link-".concat(id),
        showDropZoneOnHover: showDropZoneOnHover
      }, builtLink) : /*#__PURE__*/React.createElement(React.Fragment, {
        key: "link-".concat(id)
      }, builtLink);
    }
  }, {
    key: "calculateOverflow",
    value: function calculateOverflow(elem) {
      var isScrollableAbove = elem.scrollTop > 0;
      var isScrollableBelow = elem.scrollTop < elem.scrollHeight - elem.clientHeight;
      return {
        isScrollableAbove: isScrollableAbove,
        isScrollableBelow: isScrollableBelow
      };
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var _this$props = this.props,
          leftSidebarProps = _this$props.leftSidebarProps,
          menuItems = _this$props.menuItems;
      var className = leftSidebarProps.className || '';
      var navSidebarProps = leftSidebarProps.htmlAttributes || {};
      var instantLoginProps = leftSidebarProps.instantLoginProps || {};
      var preparedMenu = menuItems.map(function (props, key) {
        if (props.menuItems) {
          if (props.onToggleCollapse) {
            var collapsed = props.collapsed,
                showLoadingIndicator = props.showLoadingIndicator;
            return /*#__PURE__*/React.createElement(LoadingIndicatorWrapper, {
              className: "favorites-loading-wrapper",
              crawlerPosition: "top",
              isLoading: showLoadingIndicator && !collapsed,
              key: "loading-indicator-".concat(key)
            }, _this3.getNavList(props, leftSidebarProps, showLoadingIndicator, props.onToggleCollapse));
          }

          return _this3.getNavList(props, leftSidebarProps);
        }

        return _this3.getNavLink(props, leftSidebarProps);
      });
      return /*#__PURE__*/React.createElement(NavSidebar, _extends({
        className: "left-sidebar ".concat(className)
      }, navSidebarProps), leftSidebarProps.isInstantLoggedIn ? /*#__PURE__*/React.createElement(InstantLogin, instantLoginProps) : null, /*#__PURE__*/React.createElement("div", {
        className: "left-sidebar-container"
      }, preparedMenu), /*#__PURE__*/React.createElement(CopyrightFooter, {
        linkProps: leftSidebarProps.copyrightFooterProps
      }), leftSidebarProps.indicatorText ? /*#__PURE__*/React.createElement(FooterIndicator, {
        indicatorText: leftSidebarProps.indicatorText
      }) : null);
    }
  }]);

  return LeftSidebar;
}(React.Component);

_defineProperty(LeftSidebar, "defaultProps", {
  leftSidebarProps: {},
  menuItems: []
});

export default LeftSidebar;
//# sourceMappingURL=LeftSidebar.js.map