react-cm-ui/core/inputs/dropdown/dropdown.js

React UI for Healthy Church

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _lodash = _interopRequireDefault(require("lodash"));

var _classnames = _interopRequireDefault(require("classnames"));

var _reactResponsive = _interopRequireDefault(require("react-responsive"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _reactDom = _interopRequireDefault(require("react-dom"));

var _reactCustomScrollbars = _interopRequireDefault(require("react-custom-scrollbars"));

var _reactSelect = _interopRequireDefault(require("react-select"));

var _button = _interopRequireDefault(require("../button"));

var _domUtils = _interopRequireDefault(require("../../utils/domUtils"));

var _dropdownItem = _interopRequireDefault(require("./dropdownItem"));

var _icon = _interopRequireDefault(require("../../dataDisplay/icon"));

var _modal = _interopRequireDefault(require("../../surfaces/modal"));

var _utils = _interopRequireDefault(require("../../utils/utils"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

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 _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 { Date.prototype.toString.call(Reflect.construct(Date, [], 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); }

var CustomSelect = /*#__PURE__*/function (_Select) {
  _inherits(CustomSelect, _Select);

  var _super = _createSuper(CustomSelect);

  function CustomSelect() {
    _classCallCheck(this, CustomSelect);

    return _super.apply(this, arguments);
  }

  _createClass(CustomSelect, [{
    key: "renderHiddenField",
    value: function renderHiddenField(valueArray) {
      var options = this._visibleOptions = this.filterOptions(this.props.multi && this.props.removeSelected ? valueArray : null);
      var menu = this.renderMenu(options, valueArray);
      var styles = Object.assign({}, this.props.menuContainerStyle, {
        visibility: 'hidden'
      });
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "Select-menu-outer",
        style: styles
      }, /*#__PURE__*/_react["default"].createElement("div", {
        role: "listbox",
        tabIndex: -1,
        className: "Select-menu",
        id: this._instancePrefix + '-list',
        style: this.props.menuStyle
      }, menu));
    }
  }]);

  return CustomSelect;
}(_reactSelect["default"]);

var customCreatableSelect = function customCreatableSelect(props) {
  return /*#__PURE__*/_react["default"].createElement(CustomSelect, props);
};

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

  var _super2 = _createSuper(Dropdown);

  function Dropdown(props) {
    var _this;

    _classCallCheck(this, Dropdown);

    _this = _super2.call(this, props);
    _this.state = {
      isModalOpen: false,
      menuIsOpen: false,
      menuPositionStyle: {},
      menuXPosition: 'left',
      menuYPosition: 'top',
      value: props.value || null
    };
    _this._onClickOutside = _this._onClickOutside.bind(_assertThisInitialized(_this));
    _this._onDropdownMenuReposition = _this._onDropdownMenuReposition.bind(_assertThisInitialized(_this));
    _this._onDropdownMenuResize = _this._onDropdownMenuResize.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(Dropdown, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      var _this$props = this.props,
          autoScrollSelection = _this$props.autoScrollSelection,
          options = _this$props.options,
          selection = _this$props.selection,
          selectionMatchProp = _this$props.selectionMatchProp,
          currentPropsValue = _this$props.value;
      var previousPropsValue = prevProps.value;

      if (!_lodash["default"].isEqual(currentPropsValue, previousPropsValue)) {
        this.setState({
          menuIsOpen: false,
          value: currentPropsValue
        });
      }

      if (selection && autoScrollSelection && this.dropdownMenu && currentPropsValue) {
        var itemHeight = this.dropdownMenu.getScrollHeight() / _lodash["default"].size(options);

        var pageSize = this.dropdownMenu.getClientHeight() / itemHeight;

        var selectionIndex = _lodash["default"].findIndex(options, function (o) {
          if (selectionMatchProp === 'any') {
            var hasValue = _lodash["default"].has(o, 'value');

            var hasLabel = _lodash["default"].has(o, 'label');

            if (!hasValue && !hasLabel) {
              return false;
            }

            return hasValue && o['value'] === currentPropsValue['value'] || o['value'] === currentPropsValue || hasLabel && o['label'] === currentPropsValue['label'] || o['label'] === currentPropsValue;
          }

          return o[selectionMatchProp] === currentPropsValue[selectionMatchProp];
        });

        var scrollRatio = selectionIndex / pageSize;

        if (scrollRatio >= 1) {
          this.dropdownMenu.scrollTop(scrollRatio * pageSize * itemHeight);
        }
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props2 = this.props,
          button = _this$props2.button,
          buttonColor = _this$props2.buttonColor,
          buttonCompact = _this$props2.buttonCompact,
          children = _this$props2.children,
          className = _this$props2.className,
          clearable = _this$props2.clearable,
          disable = _this$props2.disable,
          fluid = _this$props2.fluid,
          iconColor = _this$props2.iconColor,
          iconInverse = _this$props2.iconInverse,
          iconPosition = _this$props2.iconPosition,
          iconSize = _this$props2.iconSize,
          iconTitle = _this$props2.iconTitle,
          iconType = _this$props2.iconType,
          id = _this$props2.id,
          inverse = _this$props2.inverse,
          label = _this$props2.label,
          labelStyle = _this$props2.labelStyle,
          options = _this$props2.options,
          placeholder = _this$props2.placeholder,
          searchable = _this$props2.searchable,
          selection = _this$props2.selection,
          selectionCreatable = _this$props2.selectionCreatable,
          selectionMatchProp = _this$props2.selectionMatchProp,
          selectionMenuContainerStyle = _this$props2.selectionMenuContainerStyle,
          selectionMenuStyle = _this$props2.selectionMenuStyle,
          selectionMobile = _this$props2.selectionMobile,
          selectionOptionComponent = _this$props2.selectionOptionComponent,
          selectionValueComponent = _this$props2.selectionValueComponent,
          selectionMultiple = _this$props2.selectionMultiple,
          selectionRequired = _this$props2.selectionRequired,
          selectionUnderline = _this$props2.selectionUnderline,
          style = _this$props2.style,
          tabIndex = _this$props2.tabIndex,
          text = _this$props2.text,
          theme = _this$props2.theme;
      var _this$state = this.state,
          menuIsOpen = _this$state.menuIsOpen,
          menuPositionStyle = _this$state.menuPositionStyle;
      var containerClasses = (0, _classnames["default"])('ui', 'dropdown', className, {
        'dropdown-button': button,
        'dropdown-button-compact': buttonCompact,
        'dropdown-color-alert': buttonColor === 'alert',
        'dropdown-color-disable': disable || buttonColor === 'disable',
        'dropdown-color-inverse': buttonColor === 'inverse',
        'dropdown-color-light': buttonColor === 'light',
        'dropdown-color-outline': buttonColor === 'outline',
        'dropdown-color-primary': !buttonColor || buttonColor === 'primary',
        'dropdown-color-alternate': buttonColor === 'alternate',
        'dropdown-color-secondary': buttonColor === 'secondary',
        'dropdown-color-success': buttonColor === 'success',
        'dropdown-color-transparent': buttonColor === 'transparent',
        'dropdown-color-warning': buttonColor === 'warning',
        'dropdown-disable': disable,
        'dropdown-fluid': fluid,
        'dropdown-icon': iconType,
        'dropdown-inverse': inverse,
        'dropdown-is-active': menuIsOpen,
        'dropdown-menu-theme-dark': theme === 'dark',
        'dropdown-menu-theme-light': theme === 'light',
        'dropdown-selection': selection,
        'dropdown-selection-underline': selectionUnderline
      });
      var dropdownIconTitle = iconTitle || placeholder;

      if (_lodash["default"].isEmpty(dropdownIconTitle) && _lodash["default"].isString(text)) {
        dropdownIconTitle = text;
      }

      var items, labelJSX;

      if (label) {
        labelJSX = /*#__PURE__*/_react["default"].createElement("label", {
          className: "label",
          style: labelStyle
        }, label, selectionRequired && !this.state.value ? /*#__PURE__*/_react["default"].createElement("span", {
          className: "input-required-indicator"
        }, "*") : null);
      }

      if (children && !selection) {
        items = _react["default"].Children.map(children, function (child, index) {
          if (!_lodash["default"].isNil(child)) {
            var _child$props = child.props,
                itemIconInverse = _child$props.iconInverse,
                itemIconType = _child$props.iconType,
                itemLabel = _child$props.label,
                itemDisabled = _child$props.disabled;
            var _child$props2 = child.props,
                itemIconColor = _child$props2.iconColor,
                itemId = _child$props2.id;
            var itemClass = (0, _classnames["default"])('dropdown-item', child.props.className, {
              'dropdown-item-is-selected': _this2.state.value ? _this2.state.value.label === itemLabel : false,
              'dropdown-item-is-disabled': itemDisabled
            });

            if (itemDisabled) {
              itemIconColor = 'static';
            }

            var value = {
              id: itemId || null,
              label: itemLabel
            };

            if (id && itemId) {
              itemId = "".concat(id, "_").concat(itemId);
            }

            return /*#__PURE__*/_react["default"].createElement("li", {
              className: itemClass,
              id: itemId,
              key: 'dropdown-menu-item-' + index
            }, /*#__PURE__*/_react["default"].createElement("span", {
              onClick: _this2._onDropdownMenuItemClick.bind(_this2, value)
            }, itemIconType ? /*#__PURE__*/_react["default"].createElement(_icon["default"], {
              inverse: itemIconInverse,
              color: itemIconColor,
              title: value.label,
              type: itemIconType
            }) : null, value.label));
          }
        });
      }

      if (selection) {
        if (!selectionCreatable) {
          return /*#__PURE__*/_react["default"].createElement(_reactResponsive["default"], {
            maxWidth: 767
          }, function (matches) {
            if (selectionMobile && matches) {
              return /*#__PURE__*/_react["default"].createElement("div", {
                className: containerClasses,
                ref: function ref(_ref) {
                  _this2.dropdownContainer = _ref;
                },
                style: style
              }, labelJSX, /*#__PURE__*/_react["default"].createElement("div", {
                className: "dropdown-selection-mobile-button",
                onClick: _this2._onSelectionMobileModalToggle.bind(_this2)
              }, placeholder && !_this2.state.value ? /*#__PURE__*/_react["default"].createElement("span", {
                className: "placeholder"
              }, placeholder) : /*#__PURE__*/_react["default"].createElement("span", {
                className: "label"
              }, _this2.state.value.label), /*#__PURE__*/_react["default"].createElement(_icon["default"], {
                color: disable ? 'disable' : null,
                compact: true,
                title: dropdownIconTitle,
                type: "arrows-alt"
              })), /*#__PURE__*/_react["default"].createElement(_modal["default"], {
                isOpen: _this2.state.isModalOpen,
                onClose: _this2._onSelectionMobileModalToggle.bind(_this2),
                title: placeholder
              }, _this2._onSelectionMobileItemRenderer()));
            } else {
              return /*#__PURE__*/_react["default"].createElement("div", {
                className: containerClasses,
                id: id,
                ref: function ref(_ref2) {
                  _this2.dropdownContainer = _ref2;
                },
                style: style
              }, labelJSX, /*#__PURE__*/_react["default"].createElement(CustomSelect, {
                arrowRenderer: function arrowRenderer() {
                  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
                    compact: true,
                    size: selectionUnderline ? 10 : iconSize || 16,
                    title: dropdownIconTitle,
                    type: iconType ? iconType : selectionUnderline ? 'caret-down' : 'chevron-down'
                  }));
                },
                clearRenderer: function clearRenderer() {
                  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
                    compact: true,
                    size: selectionUnderline ? 10 : iconSize || 16,
                    title: 'Clear Selection',
                    type: "times"
                  }));
                },
                clearable: !clearable ? clearable : true,
                disabled: disable,
                matchProp: selectionMatchProp || 'any',
                menuContainerStyle: selectionMenuContainerStyle,
                menuRenderer: _this2._menuRenderer.bind(_this2),
                menuStyle: selectionMenuStyle,
                multi: selectionMultiple,
                name: "firstSelect",
                onChange: _this2._onChange.bind(_this2),
                onOpen: _this2._onSelectionMenuOpen.bind(_this2),
                optionComponent: selectionOptionComponent,
                options: options,
                placeholder: placeholder,
                searchable: !searchable ? searchable : true,
                tabIndex: _lodash["default"].isNumber(tabIndex) ? tabIndex.toString() : tabIndex,
                value: _this2.state.value,
                valueComponent: selectionValueComponent
              }));
            }
          });
        } else if (selectionCreatable) {
          return /*#__PURE__*/_react["default"].createElement("div", {
            className: containerClasses,
            id: id,
            ref: function ref(_ref3) {
              _this2.dropdownContainer = _ref3;
            },
            style: style
          }, labelJSX, /*#__PURE__*/_react["default"].createElement(_reactSelect["default"].Creatable, {
            arrowRenderer: function arrowRenderer() {
              return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
                compact: true,
                size: 16,
                title: dropdownIconTitle,
                type: "chevron-down"
              }));
            },
            clearRenderer: function clearRenderer() {
              return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
                compact: true,
                size: 16,
                title: 'Clear Selection',
                type: "times"
              }));
            },
            clearable: !clearable ? clearable : true,
            disabled: disable,
            menuContainerStyle: selectionMenuContainerStyle,
            menuRenderer: this._menuRenderer.bind(this),
            menuStyle: selectionMenuStyle,
            multi: selectionMultiple,
            name: "firstSelect",
            onChange: this._onChange.bind(this),
            onOpen: this._onSelectionMenuOpen.bind(this),
            optionComponent: selectionOptionComponent,
            options: options,
            placeholder: placeholder,
            searchable: !searchable ? searchable : true,
            tabIndex: _lodash["default"].isNumber(tabIndex) ? tabIndex.toString() : tabIndex,
            value: this.state.value,
            valueComponent: selectionValueComponent
          }, customCreatableSelect));
        }
      }

      return /*#__PURE__*/_react["default"].createElement("div", {
        className: containerClasses,
        id: id,
        onClick: this._onDropdownClick.bind(this),
        ref: function ref(dropdownContainer) {
          _this2.dropdownContainer = dropdownContainer;
        },
        style: style
      }, iconPosition === 'left' ? /*#__PURE__*/_react["default"].createElement(_icon["default"], {
        color: this.state.menuIsOpen && !button ? 'highlight' : button ? iconColor || null : null,
        inverse: iconInverse,
        size: iconSize || 'small',
        title: dropdownIconTitle,
        type: iconType || 'chevron-down'
      }) : null, labelJSX, placeholder || text || this.state.value ? /*#__PURE__*/_react["default"].createElement("span", {
        className: "dropdown-selection-value"
      }, text ? text : this.state.value ? this.state.value.label : placeholder) : null, !iconPosition || iconPosition === 'right' ? /*#__PURE__*/_react["default"].createElement(_icon["default"], {
        color: this.state.menuIsOpen && !button ? 'highlight' : button ? iconColor || null : null,
        compact: true,
        inverse: iconInverse,
        size: iconSize || 'small',
        title: dropdownIconTitle,
        type: iconType || 'chevron-down'
      }) : null, /*#__PURE__*/_react["default"].createElement("ul", {
        className: "dropdown-menu",
        onClick: this._onDropdownMenuClick.bind(this),
        ref: function ref(el) {
          return _this2.dropdownMenu = el;
        },
        style: Object.assign({}, menuPositionStyle, {
          opacity: menuIsOpen ? 1 : 0,
          visibility: menuIsOpen ? 'visible' : 'hidden'
        })
      }, items));
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      var button = this.props.button;

      if (button) {
        console.warn('Dropdown (react-cm-ui): The prop \'button\' is deprecated. Please use the DropdownButton component instead.');
      }

      document.addEventListener('click', this._onClickOutside);
      document.addEventListener('scroll', this._onDropdownMenuReposition);
      window.addEventListener('resize', this._onDropdownMenuResize);

      this._onDropdownMenuReposition();
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      document.removeEventListener('click', this._onClickOutside);
      document.removeEventListener('scroll', this._onDropdownMenuReposition);
      window.removeEventListener('resize', this._onDropdownMenuResize);
    }
  }, {
    key: "_menuRenderer",
    value: function _menuRenderer(params) {
      var _this3 = this;

      var selectionOptionComponent = this.props.selectionOptionComponent;
      var focusedOption = params.focusedOption,
          _onFocus = params.onFocus,
          options = params.options,
          selectValue = params.selectValue,
          valueArray = params.valueArray,
          valueKey = params.valueKey;

      var items = _lodash["default"].map(options, function (o, i) {
        var isFocused = o === focusedOption;

        var isSelected = _lodash["default"].some(valueArray, function (x) {
          return x[valueKey] === o[valueKey];
        });

        if (selectionOptionComponent) {
          var OptionComponent = selectionOptionComponent;
          return /*#__PURE__*/_react["default"].createElement(OptionComponent, {
            isFocused: isFocused,
            isSelected: isSelected,
            key: "select-option-key-".concat(i),
            onFocus: function onFocus() {
              return _onFocus(o);
            },
            onSelect: function onSelect() {
              return selectValue(o);
            },
            option: o
          });
        }

        var classes = (0, _classnames["default"])('Select-option', {
          'is-disabled': o.disabled,
          'is-focused': isFocused,
          'is-selected': isSelected
        });
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: classes,
          key: "select-option-key-".concat(i),
          onClick: function onClick() {
            return params.selectValue(o);
          },
          onMouseOver: function onMouseOver() {
            return params.focusOption(o);
          }
        }, o.label);
      });

      return /*#__PURE__*/_react["default"].createElement(_reactCustomScrollbars["default"], {
        autoHeight: true,
        autoHeightMax: this.props.menuMaxHeight || 180,
        autoHeightMin: this.props.menuMinHeight,
        autoHide: true,
        className: "select-menu-scrollbar",
        ref: function ref(el) {
          _this3.dropdownMenu = el;
        }
      }, items);
    }
  }, {
    key: "_onChange",
    value: function _onChange(selectedOption) {
      var _this$props3 = this.props,
          collapseMenuOnChange = _this$props3.collapseMenuOnChange,
          onChange = _this$props3.onChange,
          onClose = _this$props3.onClose;

      if (!_lodash["default"].isUndefined(onChange)) {
        onChange(selectedOption);

        if (collapseMenuOnChange) {
          this.setState({
            menuIsOpen: false
          });
        }
      } else {
        var updatedState = {
          value: selectedOption
        };

        if (collapseMenuOnChange) {
          updatedState.menuIsOpen = false;

          if (_lodash["default"].isFunction(onClose)) {
            onClose();
          }
        }

        this.setState(updatedState);
      }
    }
  }, {
    key: "_onClickOutside",
    value: function _onClickOutside(event) {
      var menuIsOpen = this.state.menuIsOpen;

      if (this.dropdownContainer && _reactDom["default"].findDOMNode(this.dropdownContainer).contains(event.target) && menuIsOpen) {
        return;
      }

      this.setState({
        menuIsOpen: false
      });
      var onClose = this.props.onClose;

      if (_lodash["default"].isFunction(onClose)) {
        onClose();
      }
    }
  }, {
    key: "_onDropdownClick",
    value: function _onDropdownClick(event) {
      event.stopPropagation();
      var _this$props4 = this.props,
          disable = _this$props4.disable,
          onOpen = _this$props4.onOpen,
          onClose = _this$props4.onClose;
      var updatedMenuOpenState = !this.state.menuIsOpen;

      if (!disable) {
        this.setState({
          menuIsOpen: updatedMenuOpenState
        });

        if (updatedMenuOpenState) {
          if (_lodash["default"].isFunction(onOpen)) {
            onOpen();
          }
        } else {
          if (_lodash["default"].isFunction(onClose)) {
            onClose();
          }
        }
      }
    }
  }, {
    key: "_onDropdownMenuItemClick",
    value: function _onDropdownMenuItemClick(selectedOption, event) {
      event.stopPropagation();

      this._onChange(selectedOption);
    }
  }, {
    key: "_onDropdownMenuClick",
    value: function _onDropdownMenuClick(event) {
      // Prevents click event from bubbling up and closing the menu
      event.stopPropagation();
    }
  }, {
    key: "_onDropdownMenuReposition",
    value: function _onDropdownMenuReposition() {
      var dropdownContainerEl = _reactDom["default"].findDOMNode(this.dropdownContainer);

      var dropdownMenuEl = _reactDom["default"].findDOMNode(this.dropdownMenu);

      var dropdownMenuObj = _domUtils["default"].isInViewport(dropdownMenuEl, dropdownContainerEl);

      var isInTop = dropdownMenuObj.isInTop;
      var isInRight = dropdownMenuObj.isInRight;
      var isInBottom = dropdownMenuObj.isInBottom;
      var topBias = dropdownMenuObj.topBias;
      var bottomBias = dropdownMenuObj.bottomBias;
      var menuXPosition, menuYPosition;

      if (isInRight) {
        menuXPosition = 'left';
      } else {
        menuXPosition = 'right';
      }

      if (isInBottom) {
        menuYPosition = 'top';
      } else if (isInTop) {
        menuYPosition = 'bottom';
      } else {
        if (topBias < 0) {
          menuYPosition = 'bottom';
        } else if (bottomBias < 0) {
          menuYPosition = 'top';
        } else {
          menuYPosition = topBias < bottomBias ? 'top' : 'bottom';
        }
      }

      this.setState({
        menuXPosition: menuXPosition,
        menuYPosition: menuYPosition,
        menuPositionStyle: {
          bottom: menuYPosition === 'bottom' ? '100%' : null,
          left: menuXPosition === 'left' ? 0 : null,
          right: menuXPosition === 'right' ? 0 : null,
          top: menuYPosition === 'top' ? '100%' : null
        }
      });
    }
  }, {
    key: "_onDropdownMenuResize",
    value: function _onDropdownMenuResize() {
      this._onDropdownMenuReposition();
    }
  }, {
    key: "_onSelectionMenuOpen",
    value: function _onSelectionMenuOpen() {
      // debugger;
      var onOpen = this.props.onOpen;

      if (_lodash["default"].isFunction(onOpen)) {
        onOpen();
      }
    }
  }, {
    key: "_onSelectionMobileModalToggle",
    value: function _onSelectionMobileModalToggle() {
      this.setState({
        isModalOpen: !this.state.isModalOpen
      });
    }
  }, {
    key: "_onSelectionMobileItemClick",
    value: function _onSelectionMobileItemClick(selectedOption) {
      this._onChange(selectedOption);

      this._onSelectionMobileModalToggle();
    }
  }, {
    key: "_onSelectionMobileItemRenderer",
    value: function _onSelectionMobileItemRenderer() {
      var _this4 = this;

      var items = _lodash["default"].map(this.props.options, function (o, i) {
        return /*#__PURE__*/_react["default"].createElement(_button["default"], {
          className: "Select-option",
          color: "light",
          compact: true,
          fluid: true,
          inverse: true,
          key: "select-option-key-".concat(i),
          onClick: _this4._onSelectionMobileItemClick.bind(_this4, o),
          style: {
            margin: '3px 0',
            textAlign: 'left'
          }
        }, o.label);
      });

      return items;
    }
  }]);

  return Dropdown;
}(_react["default"].Component);

Dropdown.Item = _dropdownItem["default"];
Dropdown.propTypes = {
  autoScrollSelection: _propTypes["default"].bool,
  button: _propTypes["default"].bool,
  buttonColor: _propTypes["default"].oneOf(_utils["default"].colorEnums()),
  buttonCompact: _propTypes["default"].bool,
  className: _propTypes["default"].string,
  clearable: _propTypes["default"].bool,
  collapseMenuOnChange: _propTypes["default"].bool,
  disable: _propTypes["default"].bool,
  fluid: _propTypes["default"].bool,
  iconColor: _propTypes["default"].oneOf(_utils["default"].colorEnums()),
  iconInverse: _propTypes["default"].bool,
  iconPosition: _propTypes["default"].oneOf(['left', 'right']),
  iconSize: _propTypes["default"].oneOfType([_propTypes["default"].oneOf(_utils["default"].sizeEnums()), _propTypes["default"].number]),
  iconTitle: _propTypes["default"].string,
  iconType: _propTypes["default"].string,
  id: _propTypes["default"].string,
  inverse: _propTypes["default"].bool,
  label: _propTypes["default"].string,
  labelStyle: _propTypes["default"].shape({}),
  menuMaxHeight: _propTypes["default"].number,
  menuMinHeight: _propTypes["default"].number,
  onChange: _propTypes["default"].func,
  onClose: _propTypes["default"].func,
  onOpen: _propTypes["default"].func,
  options: _propTypes["default"].array,
  placeholder: _propTypes["default"].string,
  searchable: _propTypes["default"].bool,
  selection: _propTypes["default"].bool,
  selectionCreatable: _propTypes["default"].bool,
  selectionMatchProp: _propTypes["default"].oneOf(['any', 'label', 'value']),
  selectionMenuContainerStyle: _propTypes["default"].shape({}),
  selectionMenuStyle: _propTypes["default"].shape({}),
  selectionMobile: _propTypes["default"].bool,
  selectionMultiple: _propTypes["default"].bool,
  selectionOptionComponent: _propTypes["default"].func,
  selectionRequired: _propTypes["default"].bool,
  selectionUnderline: _propTypes["default"].bool,
  selectionValueComponent: _propTypes["default"].func,
  style: _propTypes["default"].shape({}),
  tabIndex: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
  text: _propTypes["default"].oneOfType([_propTypes["default"].shape({}), _propTypes["default"].string]),
  theme: _propTypes["default"].oneOf(_utils["default"].themeEnums()),
  value: _propTypes["default"].oneOfType([_propTypes["default"].array, _propTypes["default"].number, _propTypes["default"].shape({}), _propTypes["default"].string])
};
Dropdown.defaultProps = {
  autoScrollSelection: false
};
var _default = Dropdown;
exports["default"] = _default;