@skbkontur/react-ui 0.0.0-e66a3400ba → 0.0.0-eab52adf66

package/cjs/components/Select/Select.js

@@ -0,0 +1,849 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;var _exportNames = { SelectIds: true, Select: true };exports.SelectIds = exports.Select = void 0;var _createForOfIteratorHelperLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelperLoose"));var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _invariant = _interopRequireDefault(require("invariant"));
+var _globalObject = require("@skbkontur/global-object");
+var _lodash = _interopRequireDefault(require("lodash.debounce"));
+
+var _identifiers = require("../../lib/events/keyboard/identifiers");
+
+
+
+
+
+
+
+var _decorators = require("../../lib/locale/decorators");
+var _reactGetTextContent = require("../../lib/reactGetTextContent");
+
+var _Button = require("../Button");
+var _filterProps = require("../../lib/filterProps");
+var _Input = require("../Input");
+var _Menu = require("../../internal/Menu");
+
+var _MenuItem = require("../MenuItem");
+var _MenuSeparator = require("../MenuSeparator");
+var _RenderLayer = require("../../internal/RenderLayer");
+var _createPropsGetter = require("../../lib/createPropsGetter");
+
+var _utils = require("../../lib/utils");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+
+
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _MobilePopup = require("../../internal/MobilePopup");
+var _Emotion = require("../../lib/theming/Emotion");
+var _decorator = require("../ResponsiveLayout/decorator");
+
+var _rootNode = require("../../lib/rootNode");
+var _ThemeFactory = require("../../lib/theming/ThemeFactory");
+
+
+var _Link = require("../Link/Link.styles");
+var _Popup = require("../../internal/Popup");
+var _ZIndex = require("../../internal/ZIndex");
+var _getMenuPositions = require("../../lib/getMenuPositions");
+
+var _ArrowDownIcon = require("./ArrowDownIcon");
+var _Item = require("./Item");
+
+var _locale = require("./locale");
+var _Select2 = require("./Select.styles");
+var _selectTheme = require("./selectTheme");
+var _tids = require("./tids");
+
+Object.keys(_tids).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _tids[key]) return;exports[key] = _tids[key];});var _dec, _class, _Select;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var PASS_BUTTON_PROPS = {
+  id: true,
+  disabled: true,
+  error: true,
+  use: true,
+  size: true,
+  warning: true,
+  corners: true,
+
+  onMouseEnter: true,
+  onMouseLeave: true,
+  onMouseOver: true
+};
+
+var SelectIds = exports.SelectIds = {
+  menu: _tids.SelectDataTids.menu
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/**
+ * Раскрывающийся список `Select` позволяет выбрать значение из заранее известного набора вариантов.
+ *
+ * Используйте `Select` при:
+ * * заполнении форм, например для выбора месяца.
+ * * переключении состояний, например, фильтра.
+ * * выборе предустановленных настроек, например, частоты уведомлений, часового пояса.
+ *
+ * Не используйте `Select` для выбора элементов меню. В таком случае воспользуйтесь компонентом Dropdown.
+ */var
+
+
+
+
+
+Select = exports.Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper), (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class = _dec(_class = (_Select = /*#__PURE__*/function (_React$Component) {function Select() {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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    state = {
+      opened: false,
+      value: _this.props.defaultValue,
+      searchPattern: ''
+    };_this.
+
+
+
+
+
+    menuId = SelectIds.menu + (0, _utils.getRandomID)();_this.
+    buttonElement = null;_this.
+    getProps = (0, _createPropsGetter.createPropsGetter)(Select.defaultProps);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    /**
+     * @public
+     */_this.
+    open = function () {
+      if (!_this.state.opened) {
+        _this.setState({ opened: true });
+
+        if (_this.props.onOpen) {
+          _this.props.onOpen();
+        }
+      }
+    };
+
+    /**
+     * @public
+     */_this.
+    close = function () {
+      if (_this.state.opened) {
+        _this.setState({ opened: false, searchPattern: '' });
+
+        if (_this.props.onClose) {
+          _this.props.onClose();
+        }
+      }
+    };
+
+    /**
+     * @public
+     */_this.
+    focus = function () {
+      if (_this.buttonElement && _this.buttonElement.focus) {
+        _this.buttonElement.focus();
+      }
+    };_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,
+        size: _this.getProps().size,
+        disabled: _this.getProps().disabled
+      };
+
+      return buttonParams;
+    };_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    getSearch = function () {
+      return /*#__PURE__*/(
+        _react.default.createElement("div", { className: _Select2.styles.search(), onKeyDown: _this.handleKey }, /*#__PURE__*/
+        _react.default.createElement(_Input.Input, { ref: _this.debouncedFocusInput, onValueChange: _this.handleSearch, width: "100%" })
+        ));
+
+    };_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    getMobileSearch = function () {
+      return /*#__PURE__*/(
+        _react.default.createElement(_Input.Input, {
+          autoFocus: true,
+          value: _this.state.searchPattern,
+          ref: _this.debouncedFocusInput,
+          onValueChange: _this.handleSearch,
+          width: "100%" }
+        ));
+
+    };_this.
+
+    getMenuItems = function (value) {
+      var isMobile = _this.isMobileLayout;
+      var size = _this.props.size;
+
+      return _this.mapItems(
+        function (iValue, item, i, comment) {
+          if ((0, _utils.isFunction)(item)) {
+            var element = item();
+
+            if ( /*#__PURE__*/_react.default.isValidElement(element)) {
+              return /*#__PURE__*/_react.default.cloneElement(element, { key: i, isMobile: isMobile, size: size });
+            }
+
+            return null;
+          }
+
+          if ( /*#__PURE__*/_react.default.isValidElement(item)) {
+            if ((0, _utils.isReactUINode)('MenuItem', item)) {
+              return /*#__PURE__*/_react.default.cloneElement(item, { key: i, isMobile: isMobile, size: size });
+            }
+            if ((0, _utils.isReactUINode)('MenuHeader', item)) {
+              return /*#__PURE__*/_react.default.cloneElement(item, { size: size });
+            }
+            return /*#__PURE__*/_react.default.cloneElement(item, { key: i });
+          }
+
+          return /*#__PURE__*/(
+            _react.default.createElement(_MenuItem.MenuItem, {
+              key: i,
+              state: _this.areValuesEqual(iValue, value) ? 'selected' : null,
+              onClick: _this.select.bind(_this, iValue),
+              comment: comment,
+              isMobile: isMobile,
+              size: _this.props.size },
+
+            _this.getProps().renderItem(iValue, item)
+            ));
+
+        }
+      );
+    };_this.
+
+    popupGetParent = function () {
+      return (0, _rootNode.getRootNode)(_this);
+    };
+
+    // fix cases when an Input is rendered in portal
+    // https://github.com/skbkontur/retail-ui/issues/1995
+    _this.focusInput = function (input) {return input == null ? void 0 : input.focus();};_this.
+    debouncedFocusInput = (0, _lodash.default)(_this.focusInput);_this.
+
+    refMenu = function (menu) {
+      _this.menu = menu;
+    };_this.
+
+    toggle = function () {
+      if (_this.state.opened) {
+        _this.close();
+      } else {
+        _this.open();
+      }
+    };_this.
+
+    handleKey = function (e) {
+      if (!_this.state.opened) {
+        if ((0, _identifiers.isKeySpace)(e) || (0, _identifiers.isKeyArrowVertical)(e)) {
+          e.preventDefault();
+          _this.open();
+        }
+      } else {
+        switch (true) {
+          case (0, _identifiers.isKeyEscape)(e):
+            _this.focus();
+            _this.close();
+            break;
+          case (0, _identifiers.isKeyArrowUp)(e):
+            e.preventDefault();
+            if (_this.menu) {
+              _this.menu.up();
+            }
+            break;
+          case (0, _identifiers.isKeyArrowDown)(e):
+            e.preventDefault();
+            if (_this.menu) {
+              _this.menu.down();
+            }
+            break;
+          case (0, _identifiers.isKeyEnter)(e):
+            e.preventDefault(); // To prevent form submission.
+            if (_this.menu) {
+              _this.menu.enter(e);
+            }
+            break;
+        }
+      }
+      if (_this.props.onKeyDown) {
+        _this.props.onKeyDown(e);
+      }
+    };_this.
+
+    handleSearch = function (value) {var _this$menu;
+      _this.setState({ searchPattern: value });
+      (_this$menu = _this.menu) == null || _this$menu.highlightItem(0);
+    };_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    buttonRef = function (element) {
+      _this.buttonElement = element;
+    };_this.
+
+    getButton = function (buttonParams) {var _props$ariaLabel;
+      var button = _this.props._renderButton ?
+      _this.props._renderButton(buttonParams) :
+      _this.renderDefaultButton(buttonParams);
+
+      var buttonElement = _react.default.Children.only(button);
+
+      return /*#__PURE__*/_react.default.isValidElement(buttonElement) ? /*#__PURE__*/
+      _react.default.cloneElement(buttonElement, {
+        ref: _this.buttonRef,
+        onFocus: _this.props.onFocus,
+        onBlur: _this.props.onBlur,
+        size: _this.props.size,
+        'aria-describedby': _this.props['aria-describedby'],
+        'aria-expanded': _this.state.opened ? 'true' : 'false',
+        'aria-controls': _this.menuId,
+        'aria-label': (_props$ariaLabel = buttonElement.props['aria-label']) != null ? _props$ariaLabel : _this.props['aria-label']
+      }) :
+      buttonElement;
+    };return _this;}(0, _inheritsLoose2.default)(Select, _React$Component);var _proto = Select.prototype;_proto.componentDidUpdate = function componentDidUpdate(_prevProps, prevState) {if (!prevState.opened && this.state.opened) {_globalObject.globalObject.addEventListener == null || _globalObject.globalObject.addEventListener('popstate', this.close);}if (prevState.opened && !this.state.opened) {_globalObject.globalObject.removeEventListener == null || _globalObject.globalObject.removeEventListener('popstate', this.close);}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = _ThemeFactory.ThemeFactory.create({ menuOffsetY: theme.selectMenuOffsetY }, theme);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _this2.theme }, _this2.renderMain());});};_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$getProps$dataT, _cx;var buttonParams = this.getDefaultButtonParams();var dataTid = (_this$getProps$dataT = this.getProps()['data-tid']) != null ? _this$getProps$dataT : _tids.SelectDataTids.root;var button = /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: (0, _selectTheme.getSelectTheme)(this.theme, this.props) }, this.getButton(buttonParams));var isMobile = this.isMobileLayout;var style = { width: this.props.width, maxWidth: this.props.maxWidth || undefined };var root = /*#__PURE__*/_react.default.createElement("span", { "data-tid": dataTid, className: (0, _Emotion.cx)((_cx = {}, _cx[_Select2.styles.root()] = true, _cx[_Select2.styles.rootMobile(this.theme)] = isMobile, _cx)), style: style }, button, this.getMenuRenderer());return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: this.close, onFocusOutside: this.close, active: isMobile ? false : this.state.opened }, root));};_proto.renderLabel = function renderLabel() {var _this$locale;var value = this.getValue();var item = this.getItemByValue(value);if ((0, _utils.isNonNullable)(value)) {return { label: this.getProps().renderValue(value, item), isPlaceholder: false };}return { label: /*#__PURE__*/_react.default.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.getProps().use === 'link') {return _Select2.styles.leftIconLink(this.theme);}switch (size) {case 'large':return _Select2.styles.leftIconLarge(this.theme);case 'medium':return _Select2.styles.leftIconMedium(this.theme);case 'small':default:return _Select2.styles.leftIconSmall(this.theme);}};_proto.renderDefaultButton = function renderDefaultButton(params) {var _cx2, _cx3, _cx4;var buttonProps = (0, _extends2.default)({}, (0, _filterProps.filterProps)(this.props, PASS_BUTTON_PROPS), { align: 'left', disabled: this.props.disabled, width: '100%', onClick: params.onClick, onKeyDown: params.onKeyDown, active: params.opened, size: params.size });var use = this.getProps().use;var labelProps = { 'data-tid': _tids.SelectDataTids.label, className: (0, _Emotion.cx)((_cx2 = {}, _cx2[_Select2.styles.label()] = use !== 'link', _cx2[_Select2.styles.placeholder(this.theme)] = params.isPlaceholder, _cx2[_Select2.styles.customUsePlaceholder()] = params.isPlaceholder && use !== 'default', _cx2[_Select2.styles.placeholderDisabled(this.theme)] = params.isPlaceholder && this.props.disabled, _cx2)), style: { paddingRight: this.getSelectIconGap() } };var useIsCustom = use !== 'default';var icon = /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, { size: this.props.size });return /*#__PURE__*/_react.default.createElement(_Button.Button, buttonProps, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Select2.styles.selectButtonContainer(), (_cx3 = {}, _cx3[_Link.styles.root(this.theme)] = use === 'link', _cx3)) }, this.props._icon && /*#__PURE__*/_react.default.createElement("div", { className: this.getLeftIconClass(this.props.size) }, this.props._icon), /*#__PURE__*/_react.default.createElement("span", labelProps, params.label), /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Select2.styles.arrowWrap(this.theme), (_cx4 = {}, _cx4[_Select2.styles.arrowDisabled(this.theme)] = this.props.disabled, _cx4[_Select2.styles.customUseArrow()] = useIsCustom, _cx4)) }, icon)));};_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;}};var arrowLeftPadding = parseFloat(getArrowPadding()) || 0;return arrowLeftPadding;};_proto.renderMenu = function renderMenu() {var search = this.props.search ? this.getSearch() : null;var value = this.getValue();var _this$getProps = this.getProps(),menuWidth = _this$getProps.menuWidth,menuPos = _this$getProps.menuPos,menuAlign = _this$getProps.menuAlign;return /*#__PURE__*/_react.default.createElement(_Popup.Popup, { opened: true, hasShadow: true, id: this.menuId, "data-tid": _tids.SelectDataTids.menu, positions: (0, _getMenuPositions.getMenuPositions)(menuPos, menuAlign), anchorElement: this.popupGetParent(), priority: _ZIndex.ZIndex.priorities.PopupMenu, disablePortal: this.props.disablePortal, margin: parseInt(this.theme.menuOffsetY) - 1, width: menuWidth, minWidth: menuWidth === undefined ? '100%' : undefined, popupOffset: this.props.menuOffset }, /*#__PURE__*/_react.default.createElement(_Menu.Menu, { hasMargin: false, ref: this.refMenu, onItemClick: this.close, maxHeight: this.props.maxMenuHeight, align: menuAlign }, search, this.getMenuItems(value)));};_proto.renderMobileMenu = function renderMobileMenu() {var search = this.props.search ? this.getMobileSearch() : null;var value = this.getValue();return /*#__PURE__*/_react.default.createElement(_MobilePopup.MobilePopup, { headerChildComponent: search, caption: this.props.mobileMenuHeaderText, onCloseRequest: this.close, opened: this.state.opened }, /*#__PURE__*/_react.default.createElement(_Menu.Menu, { onItemClick: this.close, disableScrollContainer: true, maxHeight: 'auto' }, this.getMenuItems(value)));};_proto.select = function select(value) {this.focus();this.setState({ opened: false, value: value });if (!this.areValuesEqual(this.getValue(), value)) {var _this$props$onValueCh, _this$props;(_this$props$onValueCh = (_this$props = this.props).onValueChange) == null || _this$props$onValueCh.call(_this$props, value);}};_proto.getValue = function getValue() {if (this.props.value !== undefined) {return this.props.value;}return this.state.value;};_proto.mapItems = function mapItems(fn) {var items = this.props.items;if (!items) {return [];}var pattern = this.state.searchPattern && this.state.searchPattern.toLowerCase();var result = [];var index = 0;for (var _iterator = (0, _createForOfIteratorHelperLoose2.default)(items), _step; !(_step = _iterator()).done;) {var entry = _step.value;var _normalizeEntry = normalizeEntry(entry),value = _normalizeEntry[0],item = _normalizeEntry[1],comment = _normalizeEntry[2];if (!pattern || this.getProps().filterItem(value, item, pattern)) {result.push(fn(value, item, index, comment));++index;}}return result;};_proto.getItemByValue = function getItemByValue(value) {if (value === null || value === undefined) {return null;}var items = this.props.items || [];for (var _iterator2 = (0, _createForOfIteratorHelperLoose2.default)(items), _step2; !(_step2 = _iterator2()).done;) {var entry = _step2.value;var _normalizeEntry2 = normalizeEntry(entry),itemValue = _normalizeEntry2[0],item = _normalizeEntry2[1];if (this.areValuesEqual(itemValue, value)) {return item;}}return null;};_proto.areValuesEqual = function areValuesEqual(value1, value2) {return (0, _utils.isNonNullable)(value1) && (0, _utils.isNonNullable)(value2) && this.getProps().areValuesEqual(value1, value2);};return Select;}(_react.default.Component), _Select.__KONTUR_REACT_UI__ = 'Select', _Select.displayName = 'Select', _Select.defaultProps = { renderValue: renderValue, renderItem: renderItem, areValuesEqual: areValuesEqual, filterItem: filterItem, use: 'default', size: 'small' }, _Select.Item = _Item.Item, _Select.SEP = function () {return /*#__PURE__*/_react.default.createElement(_MenuSeparator.MenuSeparator, null);}, _Select.staticElement = function (element) {(0, _invariant.default)( /*#__PURE__*/_react.default.isValidElement(element) || typeof element === 'function', 'Select.staticElement(element) expects element to be a valid react element.');return element;}, _Select)) || _class) || _class) || _class);
+
+
+function renderValue(value, item) {
+  return item;
+}
+
+function renderItem(value, item) {
+  return item;
+}
+
+function areValuesEqual(value1, value2) {
+  return value1 === value2;
+}
+
+function normalizeEntry(entry) {
+  if (Array.isArray(entry)) {
+    return entry;
+  }
+
+  return [entry, entry, undefined];
+}
+
+var getTextFromItem = function getTextFromItem(item) {
+  if (typeof item === 'string') {
+    return item;
+  }
+
+  if ((0, _utils.isFunction)(item)) {
+    return getTextFromItem(item());
+  }
+
+  if ( /*#__PURE__*/_react.default.isValidElement(item)) {
+    return (0, _reactGetTextContent.reactGetTextContent)(item);
+  }
+
+  if (typeof item === 'number') {
+    return item.toString(10);
+  }
+
+  return '';
+};
+
+function filterItem(value, item, pattern) {
+  if (item === Select.SEP) {
+    return false;
+  }
+
+  var itemText = getTextFromItem(item);
+
+  if (!itemText) {
+    return false;
+  }
+
+  return itemText.toLowerCase().indexOf(pattern) !== -1;
+}