@skbkontur/react-ui 0.0.0-0b8a8f7a39 → 0.0.0-0fe669bb2d

package/components/Select/Select/Select.js

@@ -5,28 +5,24 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _dec, _class, _class2, _temp;
 
 function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it;
-
-  if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
-    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-      if (it) o = it;
-      var i = 0;
-      return function () {
-        if (i >= o.length) return {
-          done: true
-        };
-        return {
-          done: false,
-          value: o[i++]
-        };
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
       };
-    }
-
-    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
   }
 
-  it = o[Symbol.iterator]();
-  return it.next.bind(it);
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
 function _unsupportedIterableToArray(o, minLen) {
@@ -50,9 +46,7 @@ function _arrayLikeToArray(arr, len) {
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
 import invariant from 'invariant';
-import cn from 'classnames';
 import { isKeyArrowDown, isKeyArrowUp, isKeyArrowVertical, isKeyEnter, isKeyEscape, isKeySpace } from "../../../lib/events/keyboard/identifiers";
 import { locale } from "../../../lib/locale/decorators";
 import { reactGetTextContent } from "../../../lib/reactGetTextContent";
@@ -65,13 +59,17 @@ import { MenuItem } from "../../MenuItem";
 import { MenuSeparator } from "../../MenuSeparator";
 import { RenderLayer } from "../../../internal/RenderLayer";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
-import { isFunction } from "../../../lib/utils";
+import { isFunction, isNonNullable, isReactUINode } from "../../../lib/utils";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { ArrowChevronDownIcon } from "../../../internal/icons/16px";
+import { MobilePopup } from "../../../internal/MobilePopup";
+import { cx } from "../../../lib/theming/Emotion";
+import { responsiveLayout } from "../../ResponsiveLayout/decorator";
+import { getRootNode, rootNode } from "../../../lib/rootNode";
 import { Item } from "../Item";
 import { SelectLocaleHelper } from "../locale";
-import { jsStyles } from "../Select.styles";
+import { styles } from "../Select.styles";
 import { getSelectTheme } from "../selectTheme";
 var PASS_BUTTON_PROPS = {
   disabled: true,
@@ -83,7 +81,10 @@ var PASS_BUTTON_PROPS = {
   onMouseLeave: true,
   onMouseOver: true
 };
-export var Select = (_dec = locale('Select', SelectLocaleHelper), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+export var SelectDataTids = {
+  root: 'Select__root'
+};
+export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayout(_class = rootNode(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Select, _React$Component);
 
   function Select() {
@@ -99,9 +100,6 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), _dec(_class =
       value: _this.props.defaultValue,
       searchPattern: ''
     };
-    _this.theme = void 0;
-    _this.locale = void 0;
-    _this.menu = void 0;
     _this.buttonElement = null;
     _this.getProps = createPropsGetter(Select.defaultProps);
 
@@ -136,8 +134,75 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), _dec(_class =
       }
     };
 
+    _this.getDefaultButtonParams = function () {
+      var _this$renderLabel = _this.renderLabel(),
+          label = _this$renderLabel.label,
+          isPlaceholder = _this$renderLabel.isPlaceholder;
+
+      var buttonParams = {
+        opened: _this.state.opened,
+        label: label,
+        isPlaceholder: isPlaceholder,
+        onClick: _this.toggle,
+        onKeyDown: _this.handleKey
+      };
+      return buttonParams;
+    };
+
+    _this.getSearch = function (noMargin) {
+      var _cx;
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: cx((_cx = {}, _cx[styles.search()] = !noMargin, _cx))
+      }, /*#__PURE__*/React.createElement(Input, {
+        value: _this.state.searchPattern,
+        ref: _this.focusInput,
+        onValueChange: _this.handleSearch,
+        width: "100%"
+      }));
+    };
+
+    _this.getMenuItems = function (value) {
+      var isMobile = _this.isMobileLayout;
+      return _this.mapItems(function (iValue, item, i, comment) {
+        if (isFunction(item)) {
+          var element = item();
+
+          if ( /*#__PURE__*/React.isValidElement(element)) {
+            return /*#__PURE__*/React.cloneElement(element, {
+              key: i,
+              isMobile: isMobile
+            });
+          }
+
+          return null;
+        }
+
+        if ( /*#__PURE__*/React.isValidElement(item)) {
+          if (isReactUINode('MenuItem', item)) {
+            return /*#__PURE__*/React.cloneElement(item, {
+              key: i,
+              isMobile: isMobile
+            });
+          }
+
+          return /*#__PURE__*/React.cloneElement(item, {
+            key: i
+          });
+        }
+
+        return /*#__PURE__*/React.createElement(MenuItem, {
+          key: i,
+          state: _this.areValuesEqual(iValue, value) ? 'selected' : null,
+          onClick: _this.select.bind(_assertThisInitialized(_this), iValue),
+          comment: comment,
+          isMobile: isMobile
+        }, _this.getProps().renderItem(iValue, item));
+      });
+    };
+
     _this.dropdownContainerGetParent = function () {
-      return ReactDOM.findDOMNode(_assertThisInitialized(_this));
+      return getRootNode(_assertThisInitialized(_this));
     };
 
     _this.focusInput = function (input) {
@@ -210,9 +275,13 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), _dec(_class =
     };
 
     _this.handleSearch = function (value) {
+      var _this$menu;
+
       _this.setState({
         searchPattern: value
       });
+
+      (_this$menu = _this.menu) == null ? void 0 : _this$menu.highlightItem(1);
     };
 
     _this.buttonRef = function (element) {
@@ -250,47 +319,62 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), _dec(_class =
     return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
       _this2.theme = theme;
       return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
-        value: getSelectTheme(theme, _this2.props)
+        value: _this2.theme
       }, _this2.renderMain());
     });
   }
-  /**
-  * @public
+  /**
+  * @public
   */
   ;
 
+  _proto.getMenuRenderer = function getMenuRenderer() {
+    if (this.props.disabled) {
+      return null;
+    }
+
+    if (this.isMobileLayout) {
+      return this.renderMobileMenu();
+    }
+
+    if (this.state.opened) {
+      return this.renderMenu();
+    }
+
+    return null;
+  };
+
   _proto.renderMain = function renderMain() {
-    var _this$renderLabel = this.renderLabel(),
-        label = _this$renderLabel.label,
-        isPlaceholder = _this$renderLabel.isPlaceholder;
-
-    var buttonParams = {
-      opened: this.state.opened,
-      label: label,
-      isPlaceholder: isPlaceholder,
-      onClick: this.toggle,
-      onKeyDown: this.handleKey
-    };
+    var _cx2;
+
+    var buttonParams = this.getDefaultButtonParams();
+    var button = this.getButton(buttonParams);
+    var isMobile = this.isMobileLayout;
     var style = {
       width: this.props.width,
       maxWidth: this.props.maxWidth || undefined
     };
-    var button = this.getButton(buttonParams);
-    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement(RenderLayer, {
+    var root = /*#__PURE__*/React.createElement("span", {
+      "data-tid": SelectDataTids.root,
+      className: cx((_cx2 = {}, _cx2[styles.root()] = true, _cx2[styles.rootMobile(this.theme)] = isMobile, _cx2)),
+      style: style
+    }, button, this.getMenuRenderer());
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement(RenderLayer, {
       onClickOutside: this.close,
       onFocusOutside: this.close,
-      active: this.state.opened
-    }, /*#__PURE__*/React.createElement("span", {
-      className: jsStyles.root(this.theme),
-      style: style
-    }, button, !this.props.disabled && this.state.opened && this.renderMenu())));
+      active: isMobile ? false : this.state.opened
+    }, root));
   };
 
   _proto.renderLabel = function renderLabel() {
+    var _this$locale;
+
     var value = this.getValue();
     var item = this.getItemByValue(value);
 
-    if (item != null || value != null) {
+    if (isNonNullable(value)) {
       return {
         label: this.getProps().renderValue(value, item),
         isPlaceholder: false
@@ -298,31 +382,31 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), _dec(_class =
     }
 
     return {
-      label: /*#__PURE__*/React.createElement("span", null, this.props.placeholder || this.locale.placeholder),
+      label: /*#__PURE__*/React.createElement("span", null, this.props.placeholder || ((_this$locale = this.locale) == null ? void 0 : _this$locale.placeholder)),
       isPlaceholder: true
     };
   };
 
   _proto.getLeftIconClass = function getLeftIconClass(size) {
-    if (this.props.use === 'link') {
-      return jsStyles.leftIconLink(this.theme);
+    if (this.getProps().use === 'link') {
+      return styles.leftIconLink(this.theme);
     }
 
     switch (size) {
       case 'large':
-        return jsStyles.leftIconLarge(this.theme);
+        return styles.leftIconLarge(this.theme);
 
       case 'medium':
-        return jsStyles.leftIconMedium(this.theme);
+        return styles.leftIconMedium(this.theme);
 
       case 'small':
       default:
-        return jsStyles.leftIconSmall(this.theme);
+        return styles.leftIconSmall(this.theme);
     }
   };
 
   _proto.renderDefaultButton = function renderDefaultButton(params) {
-    var _cn;
+    var _cx3, _cx4;
 
     var buttonProps = _extends({}, filterProps(this.props, PASS_BUTTON_PROPS), {
       align: 'left',
@@ -333,20 +417,23 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), _dec(_class =
       active: params.opened
     });
 
+    var use = this.getProps().use;
     var labelProps = {
-      className: cn((_cn = {}, _cn[jsStyles.label()] = this.props.use !== 'link', _cn[jsStyles.placeholder(this.theme)] = params.isPlaceholder, _cn[jsStyles.placeholderDisabled(this.theme)] = params.isPlaceholder && this.props.disabled, _cn[jsStyles.customUsePlaceholder()] = params.isPlaceholder && this.props.use !== 'default', _cn)),
+      className: cx((_cx3 = {}, _cx3[styles.label()] = use !== 'link', _cx3[styles.placeholder(this.theme)] = params.isPlaceholder, _cx3[styles.customUsePlaceholder()] = params.isPlaceholder && use !== 'default', _cx3[styles.placeholderDisabled(this.theme)] = params.isPlaceholder && this.props.disabled, _cx3)),
       style: {
         paddingRight: this.getSelectIconGap()
       }
     };
-    var useIsCustom = this.props.use !== 'default';
-    return /*#__PURE__*/React.createElement(Button, buttonProps, /*#__PURE__*/React.createElement("div", {
-      className: jsStyles.selectButtonContainer()
+    var useIsCustom = use !== 'default';
+    return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+      value: getSelectTheme(this.theme, this.props)
+    }, /*#__PURE__*/React.createElement(Button, buttonProps, /*#__PURE__*/React.createElement("div", {
+      className: styles.selectButtonContainer()
     }, this.props._icon && /*#__PURE__*/React.createElement("div", {
       className: this.getLeftIconClass(this.props.size)
     }, this.props._icon), /*#__PURE__*/React.createElement("span", labelProps, params.label), /*#__PURE__*/React.createElement("div", {
-      className: cn(jsStyles.arrowWrap(this.theme), useIsCustom && jsStyles.customUseArrow())
-    }, /*#__PURE__*/React.createElement(ArrowChevronDownIcon, null))));
+      className: cx(styles.arrowWrap(this.theme), (_cx4 = {}, _cx4[styles.arrowDisabled(this.theme)] = this.props.disabled, _cx4[styles.customUseArrow()] = useIsCustom, _cx4))
+    }, /*#__PURE__*/React.createElement(ArrowChevronDownIcon, null)))));
   };
 
   _proto.getSelectIconGap = function getSelectIconGap() {
@@ -371,52 +458,47 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), _dec(_class =
   };
 
   _proto.renderMenu = function renderMenu() {
-    var _this4 = this;
-
     var search = this.props.search ? /*#__PURE__*/React.createElement("div", {
-      className: jsStyles.search()
+      className: styles.search(),
+      onKeyDown: this.handleKey
     }, /*#__PURE__*/React.createElement(Input, {
       ref: this.focusInput,
       onValueChange: this.handleSearch,
       width: "100%"
     })) : null;
     var value = this.getValue();
+    var hasFixedWidth = !!this.props.menuWidth && this.props.menuWidth !== 'auto';
     return /*#__PURE__*/React.createElement(DropdownContainer, {
       getParent: this.dropdownContainerGetParent,
       offsetY: -1,
       align: this.props.menuAlign,
-      disablePortal: this.props.disablePortal
+      disablePortal: this.props.disablePortal,
+      hasFixedWidth: hasFixedWidth
     }, /*#__PURE__*/React.createElement(Menu, {
       ref: this.refMenu,
       width: this.props.menuWidth,
       onItemClick: this.close,
-      maxHeight: this.props.maxMenuHeight
-    }, search, this.mapItems(function (iValue, item, i, comment) {
-      if (isFunction(item)) {
-        var element = item();
-
-        if ( /*#__PURE__*/React.isValidElement(element)) {
-          return /*#__PURE__*/React.cloneElement(element, {
-            key: i
-          });
-        }
-
-        return null;
-      }
-
-      if ( /*#__PURE__*/React.isValidElement(item)) {
-        return /*#__PURE__*/React.cloneElement(item, {
-          key: i
-        });
-      }
+      maxHeight: this.props.maxMenuHeight,
+      align: this.props.menuAlign
+    }, search, this.getMenuItems(value)));
+  };
 
-      return /*#__PURE__*/React.createElement(MenuItem, {
-        key: i,
-        state: _this4.getProps().areValuesEqual(iValue, value) ? 'selected' : null,
-        onClick: _this4.select.bind(_this4, iValue),
-        comment: comment
-      }, _this4.getProps().renderItem(iValue, item));
-    })));
+  _proto.renderMobileMenu = function renderMobileMenu() {
+    var search = this.props.search ? this.getSearch(true) : null;
+    var value = this.getValue();
+    var isWithSearch = Boolean(search);
+    return /*#__PURE__*/React.createElement(MobilePopup, {
+      headerChildComponent: search,
+      caption: this.props.mobileMenuHeaderText,
+      useFullHeight: isWithSearch,
+      onCloseRequest: this.close,
+      opened: this.state.opened
+    }, /*#__PURE__*/React.createElement(Menu, {
+      hasShadow: false,
+      onItemClick: this.close,
+      disableScrollContainer: true,
+      maxHeight: 'auto'
+    }, this.getMenuItems(value)));
   };
 
   _proto.select = function select(value) {
@@ -426,8 +508,10 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), _dec(_class =
       value: value
     });
 
-    if (this.props.onValueChange && !this.getProps().areValuesEqual(this.getValue(), value)) {
-      this.props.onValueChange(value);
+    if (!this.areValuesEqual(this.getValue(), value)) {
+      var _this$props$onValueCh, _this$props;
+
+      (_this$props$onValueCh = (_this$props = this.props).onValueChange) == null ? void 0 : _this$props$onValueCh.call(_this$props, value);
     }
   };
 
@@ -481,7 +565,7 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), _dec(_class =
           itemValue = _normalizeEntry2[0],
           _item2 = _normalizeEntry2[1];
 
-      if (this.getProps().areValuesEqual(itemValue, value)) {
+      if (this.areValuesEqual(itemValue, value)) {
         return _item2;
       }
     }
@@ -489,6 +573,10 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), _dec(_class =
     return null;
   };
 
+  _proto.areValuesEqual = function areValuesEqual(value1, value2) {
+    return isNonNullable(value1) && isNonNullable(value2) && this.getProps().areValuesEqual(value1, value2);
+  };
+
   return Select;
 }(React.Component), _class2.__KONTUR_REACT_UI__ = 'Select', _class2.propTypes = {
   areValuesEqual: PropTypes.func,
@@ -522,7 +610,7 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), _dec(_class =
 }, _class2["static"] = function (element) {
   invariant( /*#__PURE__*/React.isValidElement(element) || typeof element === 'function', 'Select.static(element) expects element to be a valid react element.');
   return element;
-}, _temp)) || _class);
+}, _temp)) || _class) || _class) || _class);
 
 function renderValue(value, item) {
   return item;
@@ -539,27 +627,41 @@ function areValuesEqual(value1, value2) {
 function normalizeEntry(entry) {
   if (Array.isArray(entry)) {
     return entry;
-  } else {
-    return [entry, entry, undefined];
   }
+
+  return [entry, entry, undefined];
 }
 
-function filterItem(value, item, pattern) {
-  if (item === Select.SEP) {
-    return false;
+var getTextFromItem = function getTextFromItem(item) {
+  if (typeof item === 'string') {
+    return item;
+  }
+
+  if (isFunction(item)) {
+    return getTextFromItem(item());
   }
 
-  if ( /*#__PURE__*/React.isValidElement(item) || isFunction(item) && /*#__PURE__*/React.isValidElement(item = item())) {
-    item = reactGetTextContent(item);
+  if ( /*#__PURE__*/React.isValidElement(item)) {
+    return reactGetTextContent(item);
   }
 
   if (typeof item === 'number') {
-    item = item.toString(10);
+    return item.toString(10);
   }
 
-  if (typeof item !== 'string') {
+  return '';
+};
+
+function filterItem(value, item, pattern) {
+  if (item === Select.SEP) {
+    return false;
+  }
+
+  var itemText = getTextFromItem(item);
+
+  if (!itemText) {
     return false;
   }
 
-  return item.toLowerCase().indexOf(pattern) !== -1;
+  return itemText.toLowerCase().indexOf(pattern) !== -1;
 }