"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.ComboBoxViewIds = exports.ComboBoxView = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = _interopRequireDefault(require("react"));

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

var _Input = require("../../components/Input");
var _InputLikeText = require("../InputLikeText");


var _RenderLayer = require("../RenderLayer");
var _Spinner = require("../../components/Spinner");


var _CommonWrapper = require("../CommonWrapper");
var _MobilePopup = require("../MobilePopup");
var _decorator = require("../../components/ResponsiveLayout/decorator");

var _rootNode = require("../../lib/rootNode");
var _createPropsGetter = require("../../lib/createPropsGetter");
var _ThemeContext = require("../../lib/theming/ThemeContext");

var _LoadingIcon = require("../icons2022/LoadingIcon");


var _Popup = require("../Popup");
var _getMenuPositions = require("../../lib/getMenuPositions");
var _ZIndex = require("../ZIndex");

var _MaskedInput = require("../../components/MaskedInput");
var _MaskedInput2 = require("../../components/MaskedInput/MaskedInput.styles");
var _Emotion = require("../../lib/theming/Emotion");
var _InternalTextareaWithLayout = require("../InternalTextareaWithLayout/InternalTextareaWithLayout");
var _SizeDecorator = require("../../lib/size/SizeDecorator");

var _ArrowDownIcon = require("./ArrowDownIcon");
var _ComboBoxMenu = require("./ComboBoxMenu");
var _CustomComboBoxTypes = require("./CustomComboBoxTypes");
var _CustomComboBox = require("./CustomComboBox.styles");
var _CustomComboBox2 = require("./CustomComboBox");
var _getComboBoxTheme = require("./getComboBoxTheme");var _class, _ComboBoxView;























































































var ComboBoxViewIds = exports.ComboBoxViewIds = {
  menu: 'ComboBoxView__menu'
};var









ComboBoxView = exports.ComboBoxView = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class = (0, _SizeDecorator.withSize)(_class = (_ComboBoxView = /*#__PURE__*/function (_React$Component) {function ComboBoxView() {var _this$props$value;var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.



















    getProps = (0, _createPropsGetter.createPropsGetter)(ComboBoxView.defaultProps);_this.




    mobileInput = null;_this.

    dropdownContainerRef = /*#__PURE__*/_react.default.createRef();_this.


    menuId = ComboBoxViewIds.menu + (0, _utils.getRandomID)();_this.

    state = {
      anchorElement: null,
      clearCrossShowed: _this.props.showClearIcon === 'always' && !!((_this$props$value = _this.props.value) != null && _this$props$value.toString())
    };_this.





































































    getComboBoxMenu = function () {
      var _this$props = _this.props,items = _this$props.items,loading = _this$props.loading,opened = _this$props.opened,refMenu = _this$props.refMenu,maxMenuHeight = _this$props.maxMenuHeight,renderTotalCount = _this$props.renderTotalCount,renderNotFound = _this$props.renderNotFound,totalCount = _this$props.totalCount;

      var _this$getProps = _this.getProps(),repeatRequest = _this$getProps.repeatRequest,requestStatus = _this$getProps.requestStatus,renderItem = _this$getProps.renderItem,itemWrapper = _this$getProps.itemWrapper;
      return /*#__PURE__*/(
        _react.default.createElement(_ComboBoxMenu.ComboBoxMenu, {
          hasMargin: false,
          menuId: _this.menuId,
          items: items,
          loading: loading,
          maxMenuHeight: maxMenuHeight,
          onValueChange: _this.handleItemSelect,
          opened: opened,
          refMenu: refMenu,
          renderTotalCount: renderTotalCount,
          renderItem: renderItem,
          renderNotFound: renderNotFound,
          itemWrapper: itemWrapper,
          renderAddButton: _this.renderAddButton,
          repeatRequest: repeatRequest,
          requestStatus: requestStatus,
          totalCount: totalCount,
          isMobile: _this.isMobileLayout,
          size: _this.size }
        ));

    };_this.

    renderMenu = function () {
      var _this$getProps2 = _this.getProps(),opened = _this$getProps2.opened,menuPos = _this$getProps2.menuPos,menuAlign = _this$getProps2.menuAlign;
      var anchorElement = _this.state.anchorElement;

      return (
        opened &&
        anchorElement && /*#__PURE__*/
        _react.default.createElement(_Popup.Popup, {
          opened: true,
          hasShadow: true,
          minWidth: "100%",
          anchorElement: anchorElement,
          priority: _ZIndex.ZIndex.priorities.PopupMenu,
          positions: (0, _getMenuPositions.getMenuPositions)(menuPos, menuAlign),
          disablePortal: _this.props.disablePortal,
          margin: parseInt(_this.theme.menuOffsetY) - 1,
          ref: _this.dropdownContainerRef },

        _this.getComboBoxMenu()
        ));


    };_this.

    renderMobileMenu = function () {
      var rightIcon = null;

      var _this$props2 = _this.props,loading = _this$props2.loading,items = _this$props2.items,opened = _this$props2.opened,onFocus = _this$props2.onFocus,onInputValueChange = _this$props2.onInputValueChange,onInputKeyDown = _this$props2.onInputKeyDown,placeholder = _this$props2.placeholder,textValue = _this$props2.textValue;
      if (loading && items && !!items.length) {
        rightIcon = _this.renderSpinner();
      }

      var inputProps = {
        autoComplete: 'off',
        autoFocus: true,
        width: '100%',
        onFocus: onFocus,
        onValueChange: onInputValueChange,
        onKeyDown: onInputKeyDown,
        value: textValue,
        placeholder: placeholder,
        rightIcon: rightIcon
      };

      return (
        opened && /*#__PURE__*/
        _react.default.createElement(_MobilePopup.MobilePopup, {
          headerChildComponent: /*#__PURE__*/_react.default.createElement(_Input.Input, (0, _extends2.default)({ ref: _this.refMobileInput }, inputProps)),
          onCloseRequest: _this.props.onMobileClose,
          opened: true },

        _this.getComboBoxMenu()
        ));


    };_this.

    getParent = function () {
      return (0, _rootNode.getRootNode)(_this);
    };_this.

    renderAddButton = function () {
      return _this.getProps().renderAddButton(_this.props.textValue);
    };_this.


























































































































    handleMobileFocus = function () {var _this$mobileInput;
      _this.props.onInputClick == null || _this.props.onInputClick();

      (_this$mobileInput = _this.mobileInput) == null || _this$mobileInput.focus();
    };_this.

    handleItemSelect = function (item) {
      if (_this.props.onValueChange) {
        _this.props.onValueChange(item);
      }

      if (_this.isMobileLayout) {
        _this.props.onMobileClose == null || _this.props.onMobileClose();
      }
    };_this.

    refInput = function (input) {
      if (_this.props.refInput) {
        _this.props.refInput(input);
      }
      _this.input = input;
    };_this.

    renderSpinner = function () {return /*#__PURE__*/(
        _react.default.createElement("span", { className: _CustomComboBox.styles.spinnerWrapper() }, /*#__PURE__*/
        _react.default.createElement(_Spinner.Spinner, { type: "mini", caption: "", dimmed: true })
        ));};_this.


    getRightIcon = function () {
      var _this$props3 = _this.props,loading = _this$props3.loading,items = _this$props3.items,drawArrow = _this$props3.drawArrow,rightIcon = _this$props3.rightIcon;
      var size = _this.size;

      if (loading && items && !!items.length) {
        return /*#__PURE__*/_react.default.createElement(_LoadingIcon.LoadingIcon, { size: size });
      }

      if (rightIcon || drawArrow) {
        return rightIcon || /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, { size: size });
      }

      return null;
    };_this.

    refMobileInput = function (input) {
      _this.mobileInput = input;
    };return _this;}(0, _inheritsLoose2.default)(ComboBoxView, _React$Component);var _proto = ComboBoxView.prototype;_proto.componentDidMount = function componentDidMount() {this.updateAnchorElement();if (this.props.autoFocus && this.props.onFocus) {this.props.onFocus();}};_proto.updateAnchorElement = function updateAnchorElement() {var parent = this.getParent();var anchorElement = this.state.anchorElement;if (anchorElement !== parent) {this.setState({ anchorElement: parent });}};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var input = this.input,props = this.props;this.updateAnchorElement();if (props.editing && !prevProps.editing && input) {input.focus();}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = (0, _getComboBoxTheme.getComboBoxTheme)(theme, _this2.props.viewMode);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _this2.theme }, _this2.renderMain());});};_proto.renderMain = function renderMain() {var _this$props4 = this.props,onMouseEnter = _this$props4.onMouseEnter,onMouseLeave = _this$props4.onMouseLeave,onMouseOver = _this$props4.onMouseOver,opened = _this$props4.opened;var _this$getProps3 = this.getProps(),onClickOutside = _this$getProps3.onClickOutside,onFocusOutside = _this$getProps3.onFocusOutside,width = _this$getProps3.width;var isMobile = this.isMobileLayout;var input = this.renderInput();return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: onClickOutside, onFocusOutside: onFocusOutside, active: opened }, /*#__PURE__*/_react.default.createElement("span", { "data-tid": _CustomComboBox2.CustomComboBoxDataTids.comboBoxView, style: { width: width }, className: _CustomComboBox.styles.root(), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseOver: onMouseOver, ref: this.setRootNode }, input, isMobile ? this.renderMobileMenu() : this.renderMenu())));};_proto.renderInput = function renderInput() {var isMobile = this.isMobileLayout;var _this$props5 = this.props,id = _this$props5.id,align = _this$props5.align,borderless = _this$props5.borderless,disabled = _this$props5.disabled,editing = _this$props5.editing,error = _this$props5.error,onFocus = _this$props5.onFocus,onInputBlur = _this$props5.onInputBlur,onInputValueChange = _this$props5.onInputValueChange,onInputFocus = _this$props5.onInputFocus,onInputClick = _this$props5.onInputClick,onInputKeyDown = _this$props5.onInputKeyDown,placeholder = _this$props5.placeholder,textValue = _this$props5.textValue,value = _this$props5.value,warning = _this$props5.warning,refInputLikeText = _this$props5.refInputLikeText,leftIcon = _this$props5.leftIcon,inputMode = _this$props5.inputMode,ariaDescribedby = _this$props5['aria-describedby'],ariaLabel = _this$props5['aria-label'],showClearIcon = _this$props5.showClearIcon,mask = _this$props5.mask,maskChar = _this$props5.maskChar,formatChars = _this$props5.formatChars,onBeforePasteInMask = _this$props5.onBeforePasteInMask;var rightIcon = this.getRightIcon();var inputProps = { id: id, align: align, borderless: borderless, disabled: disabled, error: error, maxLength: this.props.maxLength, onBlur: isMobile ? undefined : onInputBlur, onValueChange: onInputValueChange, onFocus: onInputFocus, onClick: isMobile ? this.handleMobileFocus : onInputClick, leftIcon: leftIcon, rightIcon: rightIcon, value: textValue || '', onKeyDown: onInputKeyDown, placeholder: placeholder, width: '100%', ref: this.refInput, warning: warning, inputMode: inputMode, autoComplete: 'off', 'aria-describedby': ariaDescribedby, 'aria-controls': this.menuId, 'aria-label': ariaLabel, showClearIcon: showClearIcon, size: this.size };var multilineTextareaProps = { autoResize: true, rows: 1, extraRow: false, maxRows: this.props.maxRows };if (this.props.viewMode === 'multiline' && !mask) {return /*#__PURE__*/_react.default.createElement(_InternalTextareaWithLayout.InternalTextareaWithLayout, (0, _extends2.default)({}, inputProps, multilineTextareaProps));}if (editing) {if (mask) {return /*#__PURE__*/_react.default.createElement(_MaskedInput.MaskedInput, (0, _extends2.default)({}, inputProps, { type: "text", mask: mask, maskChar: maskChar, formatChars: formatChars, onBeforePasteValue: onBeforePasteInMask }));}if (this.props.viewMode === 'multiline-editing') {return /*#__PURE__*/_react.default.createElement(_InternalTextareaWithLayout.InternalTextareaWithLayout, (0, _extends2.default)({}, inputProps, multilineTextareaProps));}return /*#__PURE__*/_react.default.createElement(_Input.Input, inputProps);}var _this$getProps4 = this.getProps(),renderValue = _this$getProps4.renderValue;return /*#__PURE__*/_react.default.createElement(_InputLikeText.InputLikeText, { id: id, align: align, borderless: borderless, error: error, onFocus: onFocus, leftIcon: leftIcon, rightIcon: rightIcon, disabled: disabled, warning: warning, placeholder: placeholder, size: this.size, width: "100%", ref: refInputLikeText, "aria-describedby": ariaDescribedby, "aria-controls": this.menuId, showClearIcon: showClearIcon, className: (0, _Emotion.cx)(mask && _MaskedInput2.styles.root(this.theme)), onClearCrossClick: this.props.onClearCrossClick }, (0, _utils.isNonNullable)(value) && renderValue ? renderValue(value) : null);};return ComboBoxView;}(_react.default.Component), _ComboBoxView.__KONTUR_REACT_UI__ = 'ComboBoxView', _ComboBoxView.displayName = 'ComboBoxView', _ComboBoxView.defaultProps = { renderItem: function renderItem(item) {return item;}, renderValue: function renderValue(item) {return item;}, renderAddButton: function renderAddButton() {return null;}, repeatRequest: function repeatRequest() {return undefined;}, requestStatus: _CustomComboBoxTypes.ComboBoxRequestStatus.Unknown, onClickOutside: function onClickOutside() {/**/}, onFocusOutside: function onFocusOutside() {/**/}, width: 250, showClearIcon: 'never' }, _ComboBoxView)) || _class) || _class) || _class;