@skbkontur/react-ui 0.0.0-aaf2aabecb → 0.0.0-bb4cbfe9c6

package/components/Select/Select/Select.js

@@ -4,30 +4,73 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 
 var _dec, _class, _class2, _temp;
 
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  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
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
+  }
+
+  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) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+
+  return arr2;
+}
+
 import React from 'react';
 import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
 import invariant from 'invariant';
-import warning from 'warning';
-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";
-import { Button } from "..\\..\\Button";
-import { DropdownContainer } from "..\\..\\..\\internal\\DropdownContainer";
-import { filterProps } from "..\\..\\..\\lib\\filterProps";
-import { Input } from "..\\..\\Input";
-import { Link } from "..\\..\\Link";
-import { Menu } from "..\\..\\..\\internal\\Menu";
-import { MenuItem } from "..\\..\\MenuItem";
-import { MenuSeparator } from "..\\..\\MenuSeparator";
-import { RenderLayer } from "..\\..\\..\\internal\\RenderLayer";
-import { createPropsGetter } from "..\\..\\..\\lib\\createPropsGetter";
-import { isFunction } from "..\\..\\..\\lib\\utils";
-import { ThemeContext } from "..\\..\\..\\lib\\theming\\ThemeContext";
-import { Item } from "..\\Item";
-import { SelectLocaleHelper } from "..\\locale";
-import { jsStyles } from "..\\Select.styles";
+import { isKeyArrowDown, isKeyArrowUp, isKeyArrowVertical, isKeyEnter, isKeyEscape, isKeySpace } from "../../../lib/events/keyboard/identifiers";
+import { locale } from "../../../lib/locale/decorators";
+import { reactGetTextContent } from "../../../lib/reactGetTextContent";
+import { Button } from "../../Button";
+import { DropdownContainer } from "../../../internal/DropdownContainer";
+import { filterProps } from "../../../lib/filterProps";
+import { Input } from "../../Input";
+import { Menu } from "../../../internal/Menu";
+import { MenuItem } from "../../MenuItem";
+import { MenuSeparator } from "../../MenuSeparator";
+import { RenderLayer } from "../../../internal/RenderLayer";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { isFunction, 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 { styles } from "../Select.styles";
+import { getSelectTheme } from "../selectTheme";
 var PASS_BUTTON_PROPS = {
   disabled: true,
   error: true,
@@ -38,9 +81,7 @@ 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 Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayout(_class = rootNode(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Select, _React$Component);
 
   function Select() {
@@ -53,11 +94,9 @@ function (_React$Component) {
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
     _this.state = {
       opened: false,
-      value: _this.props.defaultValue
+      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);
 
@@ -76,7 +115,8 @@ function (_React$Component) {
     _this.close = function () {
       if (_this.state.opened) {
         _this.setState({
-          opened: false
+          opened: false,
+          searchPattern: ''
         });
 
         if (_this.props.onClose) {
@@ -91,8 +131,75 @@ function (_React$Component) {
       }
     };
 
+    _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 ? false : true, _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.getProps().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) {
@@ -165,9 +272,13 @@ function (_React$Component) {
     };
 
     _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) {
@@ -177,7 +288,7 @@ function (_React$Component) {
     _this.getButton = function (buttonParams) {
       var button = _this.props._renderButton ? _this.props._renderButton(buttonParams) : _this.renderDefaultButton(buttonParams);
       var buttonElement = React.Children.only(button);
-      return React.isValidElement(buttonElement) ? React.cloneElement(buttonElement, {
+      return /*#__PURE__*/React.isValidElement(buttonElement) ? /*#__PURE__*/React.cloneElement(buttonElement, {
         ref: _this.buttonRef,
         onFocus: _this.props.onFocus,
         onBlur: _this.props.onBlur
@@ -202,44 +313,60 @@ function (_React$Component) {
   _proto.render = function render() {
     var _this2 = this;
 
-    return React.createElement(ThemeContext.Consumer, null, function (theme) {
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
       _this2.theme = theme;
-      return _this2.renderMain();
+      return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+        value: getSelectTheme(theme, _this2.props)
+      }, _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 React.createElement(RenderLayer, {
+    var root = /*#__PURE__*/React.createElement("span", {
+      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
-    }, 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);
 
@@ -251,112 +378,117 @@ function (_React$Component) {
     }
 
     return {
-      label: 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.renderDefaultButton = function renderDefaultButton(params) {
-    var _cn;
+  _proto.getLeftIconClass = function getLeftIconClass(size) {
+    if (this.props.use === 'link') {
+      return styles.leftIconLink(this.theme);
+    }
+
+    switch (size) {
+      case 'large':
+        return styles.leftIconLarge(this.theme);
 
-    if (this.props.diadocLinkIcon) {
-      warning(false, "diadocLinkIcon has been deprecated");
-      return this.renderLinkButton(params);
+      case 'medium':
+        return styles.leftIconMedium(this.theme);
+
+      case 'small':
+      default:
+        return styles.leftIconSmall(this.theme);
     }
+  };
+
+  _proto.renderDefaultButton = function renderDefaultButton(params) {
+    var _cx3, _cx4;
 
     var buttonProps = _extends({}, filterProps(this.props, PASS_BUTTON_PROPS), {
       align: 'left',
       disabled: this.props.disabled,
-      _noPadding: true,
       width: '100%',
       onClick: params.onClick,
       onKeyDown: params.onKeyDown,
       active: params.opened
     });
 
-    if (this.props._icon) {
-      Object.assign(buttonProps, {
-        _noPadding: false,
-        _noRightPadding: true,
-        icon: this.props._icon
-      });
-    }
-
     var labelProps = {
-      className: cn((_cn = {}, _cn[jsStyles.label()] = this.props.use !== 'link', _cn[jsStyles.labelWithLeftIcon()] = !!this.props._icon, _cn[jsStyles.placeholder(this.theme)] = params.isPlaceholder, _cn[jsStyles.customUsePlaceholder()] = params.isPlaceholder && this.props.use !== 'default', _cn)),
+      className: cx((_cx3 = {}, _cx3[styles.label()] = this.props.use !== 'link', _cx3[styles.placeholder(this.theme)] = params.isPlaceholder, _cx3[styles.customUsePlaceholder()] = params.isPlaceholder && this.props.use !== 'default', _cx3[styles.placeholderDisabled(this.theme)] = params.isPlaceholder && this.props.disabled, _cx3)),
       style: {
-        paddingRight: (buttonProps.size === 'large' ? 31 : 28) + (this.props._icon ? 10 : 0)
+        paddingRight: this.getSelectIconGap()
       }
     };
     var useIsCustom = this.props.use !== 'default';
-    return React.createElement(Button, buttonProps, React.createElement("span", labelProps, React.createElement("span", {
-      className: jsStyles.labelText()
-    }, params.label)), React.createElement("div", {
-      className: jsStyles.arrowWrap()
-    }, React.createElement("div", {
-      className: cn(jsStyles.arrow(this.theme), useIsCustom && jsStyles.customUseArrow())
-    })));
+    return /*#__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: 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.renderLinkButton = function renderLinkButton(params) {
-    var linkProps = {
-      disabled: params.disabled,
-      icon: this.props.diadocLinkIcon,
-      _button: true,
-      _buttonOpened: params.opened,
-      onClick: params.onClick,
-      onKeyDown: params.onKeyDown
+  _proto.getSelectIconGap = function getSelectIconGap() {
+    var _this3 = this;
+
+    var getArrowPadding = function getArrowPadding() {
+      switch (_this3.props.size) {
+        case 'large':
+          return _this3.theme.selectIconGapLarge;
+
+        case 'medium':
+          return _this3.theme.selectIconGapMedium;
+
+        case 'small':
+        default:
+          return _this3.theme.selectIconGapSmall;
+      }
     };
-    return React.createElement(Link, linkProps, params.label);
+
+    var arrowLeftPadding = parseFloat(getArrowPadding()) || 0;
+    return arrowLeftPadding;
   };
 
   _proto.renderMenu = function renderMenu() {
-    var _this3 = this;
-
-    var search = this.props.search ? React.createElement("div", {
-      className: jsStyles.search()
-    }, React.createElement(Input, {
+    var search = this.props.search ? /*#__PURE__*/React.createElement("div", {
+      className: styles.search(),
+      onKeyDown: this.handleKey
+    }, /*#__PURE__*/React.createElement(Input, {
       ref: this.focusInput,
       onValueChange: this.handleSearch,
       width: "100%"
     })) : null;
     var value = this.getValue();
-    return React.createElement(DropdownContainer, {
+    return /*#__PURE__*/React.createElement(DropdownContainer, {
       getParent: this.dropdownContainerGetParent,
       offsetY: -1,
       align: this.props.menuAlign,
       disablePortal: this.props.disablePortal
-    }, React.createElement(Menu, {
+    }, /*#__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 (React.isValidElement(element)) {
-          return React.cloneElement(element, {
-            key: i
-          });
-        }
-
-        return null;
-      }
-
-      if (React.isValidElement(item)) {
-        return React.cloneElement(item, {
-          key: i
-        });
-      }
+    }, search, this.getMenuItems(value)));
+  };
 
-      return React.createElement(MenuItem, {
-        key: i,
-        state: _this3.getProps().areValuesEqual(iValue, value) ? 'selected' : null,
-        onClick: _this3.select.bind(_this3, iValue),
-        comment: comment
-      }, _this3.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) {
@@ -390,19 +522,8 @@ function (_React$Component) {
     var result = [];
     var index = 0;
 
-    for (var _iterator = items, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref;
-
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref = _i.value;
-      }
-
-      var entry = _ref;
+    for (var _iterator = _createForOfIteratorHelperLoose(items), _step; !(_step = _iterator()).done;) {
+      var entry = _step.value;
 
       var _normalizeEntry = normalizeEntry(entry),
           _value = _normalizeEntry[0],
@@ -425,19 +546,8 @@ function (_React$Component) {
 
     var items = this.props.items || [];
 
-    for (var _iterator2 = items, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-      var _ref2;
-
-      if (_isArray2) {
-        if (_i2 >= _iterator2.length) break;
-        _ref2 = _iterator2[_i2++];
-      } else {
-        _i2 = _iterator2.next();
-        if (_i2.done) break;
-        _ref2 = _i2.value;
-      }
-
-      var entry = _ref2;
+    for (var _iterator2 = _createForOfIteratorHelperLoose(items), _step2; !(_step2 = _iterator2()).done;) {
+      var entry = _step2.value;
 
       var _normalizeEntry2 = normalizeEntry(entry),
           itemValue = _normalizeEntry2[0],
@@ -480,11 +590,11 @@ function (_React$Component) {
   filterItem: filterItem,
   use: 'default'
 }, _class2.Item = Item, _class2.SEP = function () {
-  return React.createElement(MenuSeparator, null);
+  return /*#__PURE__*/React.createElement(MenuSeparator, null);
 }, _class2["static"] = function (element) {
-  invariant(React.isValidElement(element) || typeof element === 'function', 'Select.static(element) expects element to be a valid react 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;
@@ -511,7 +621,7 @@ function filterItem(value, item, pattern) {
     return false;
   }
 
-  if (React.isValidElement(item) || isFunction(item) && React.isValidElement(item = item())) {
+  if ( /*#__PURE__*/React.isValidElement(item) || isFunction(item) && /*#__PURE__*/React.isValidElement(item = item())) {
     item = reactGetTextContent(item);
   }