@skbkontur/react-ui 0.0.0-375e096002 → 0.0.0-3974a633b4

package/components/TokenInput/TokenInput/TokenInput.js

@@ -1,10 +1,12 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 
 var _dec, _class, _class2, _temp;
 
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
 function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   var it;
 
@@ -50,18 +52,19 @@ function _arrayLikeToArray(arr, len) {
 }
 
 import React from 'react';
-import { findDOMNode } from 'react-dom';
 import isEqual from 'lodash.isequal';
-import cn from 'classnames';
-import { isKeyArrowHorizontal, isKeyArrowLeft, isKeyArrowRight, isKeyArrowUp, isKeyArrowVertical, isKeyBackspace, isKeyDelete, isKeyEnter, isKeyEscape, isShortcutSelectAll } from "../../../lib/events/keyboard/identifiers";
+import { isKeyArrowHorizontal, isKeyArrowLeft, isKeyArrowRight, isKeyArrowUp, isKeyArrowVertical, isKeyBackspace, isKeyComma, isKeyDelete, isKeyEnter, isKeyEscape, isShortcutSelectAll } from "../../../lib/events/keyboard/identifiers";
 import * as LayoutEvents from "../../../lib/LayoutEvents";
 import { Token } from "../../Token";
 import { emptyHandler } from "../../../lib/utils";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { locale } from "../../../lib/locale/decorators";
 import { MenuItem } from "../../MenuItem/MenuItem";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
+import { getRootNode, rootNode } from "../../../lib/rootNode";
 import { TokenInputLocaleHelper } from "../locale";
-import { jsStyles } from "../TokenInput.styles";
+import { styles } from "../TokenInput.styles";
 import { tokenInputReducer } from "../TokenInputReducer";
 import { TokenInputMenu } from "../TokenInputMenu";
 import { TextWidthHelper } from "../TextWidthHelper";
@@ -110,7 +113,7 @@ var defaultRenderToken = function defaultRenderToken(item, _ref) {
   }, item);
 };
 
-export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {
+export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), rootNode(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {
   _inheritsLoose(TokenInput, _React$PureComponent);
 
   function TokenInput() {
@@ -128,6 +131,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), _d
     _this.tokensInputMenu = null;
     _this.textHelper = null;
     _this.wrapper = null;
+    _this.setRootNode = void 0;
 
     _this.hasValueInItems = function (items, value) {
       if (typeof value === 'string') {
@@ -175,18 +179,21 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), _d
     _this.handleInputBlur = function (event) {
       var isBlurToMenu = _this.isBlurToMenu(event);
 
-      if (!isBlurToMenu && _this.isEditingMode) {
-        _this.finishTokenEdit();
+      if (!isBlurToMenu) {
+        _this.handleOutsideBlur();
       }
 
       if (isBlurToMenu || _this.state.preventBlur) {
+        var _this$input;
+
         event.preventDefault(); // первый focus нужен для предотвращения/уменьшения моргания в других браузерах
 
-        _this.input.focus(); // в firefox не работает без второго focus
+        (_this$input = _this.input) == null ? void 0 : _this$input.focus(); // в firefox не работает без второго focus
 
+        requestAnimationFrame(function () {
+          var _this$input2;
 
-        process.nextTick(function () {
-          return _this.input.focus();
+          return (_this$input2 = _this.input) == null ? void 0 : _this$input2.focus();
         });
 
         _this.dispatch({
@@ -197,16 +204,51 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), _d
         _this.dispatch({
           type: 'BLUR'
         });
+
+        _this.props.onBlur == null ? void 0 : _this.props.onBlur(event);
       }
+    };
+
+    _this.handleOutsideBlur = function () {
+      var _this$state = _this.state,
+          inputValue = _this$state.inputValue,
+          autocompleteItems = _this$state.autocompleteItems;
+      var valueToString = _this.props.valueToString;
+
+      if (inputValue === '') {
+        // если стерли содержимое токена в режиме редактирования, то удаляем токен
+        if (_this.isEditingMode) {
+          _this.finishTokenEdit();
+        }
+
+        return;
+      } // если не изменилось значение токена при редактировании
+
+
+      if (_this.isEditingMode && !_this.isTokenValueChanged) {
+        _this.finishTokenEdit();
 
-      if (_this.props.onBlur) {
-        _this.props.onBlur(event);
+        return;
+      } // чекаем автокомплит на совпадение с введеным значением в инпут
+
+
+      if (autocompleteItems && autocompleteItems.length === 1) {
+        var _item = autocompleteItems[0];
+
+        if (valueToString(_item) === inputValue) {
+          _this.isEditingMode ? _this.finishTokenEdit() : _this.selectItem(_item);
+          return;
+        }
       }
+
+      if (_this.isInputChanged) _this.checkForUnexpectedInput();
     };
 
     _this.isBlurToMenu = function (event) {
       if (_this.menuRef) {
-        var menu = findDOMNode(_this.menuRef);
+        var _this$tokensInputMenu;
+
+        var menu = getRootNode((_this$tokensInputMenu = _this.tokensInputMenu) == null ? void 0 : _this$tokensInputMenu.getMenuRef());
         var relatedTarget = event.relatedTarget || document.activeElement;
 
         if (menu && menu.contains(relatedTarget)) {
@@ -218,14 +260,15 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), _d
     };
 
     _this.handleWrapperMouseDown = function (event) {
+      var _this$wrapper;
+
       _this.dispatch({
         type: 'SET_PREVENT_BLUR',
         payload: true
       });
 
       var target = event.target;
-
-      var isClickOnToken = target && _this.wrapper.contains(target) && target !== _this.wrapper && target !== _this.input;
+      var isClickOnToken = target && ((_this$wrapper = _this.wrapper) == null ? void 0 : _this$wrapper.contains(target)) && target !== _this.wrapper && target !== _this.input;
 
       if (!isClickOnToken) {
         _this.dispatch({
@@ -393,9 +436,13 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), _d
     };
 
     _this.handleInputKeyDown = function (e) {
+      var _this$input3, _this$input4;
+
       e.stopPropagation();
 
-      if (_this.type !== TokenInputType.WithReference && _this.props.delimiters.includes(e.key)) {
+      if (_this.type !== TokenInputType.WithReference && _this.props.delimiters.some(function (key) {
+        return key === e.key || key === ',' && isKeyComma(e);
+      }) || isKeyEnter(e) && _this.type === TokenInputType.WithoutReference) {
         e.preventDefault();
         var newValue = _this.state.inputValue;
 
@@ -433,8 +480,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), _d
           break;
 
         case isKeyEscape(e):
-          _this.input.blur();
-
+          (_this$input3 = _this.input) == null ? void 0 : _this$input3.blur();
           break;
 
         case isKeyBackspace(e):
@@ -442,7 +488,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), _d
           break;
 
         case isKeyArrowLeft(e):
-          if (_this.input.selectionStart === 0) {
+          if (((_this$input4 = _this.input) == null ? void 0 : _this$input4.selectionStart) === 0) {
             _this.moveFocusToLastToken();
           }
 
@@ -451,8 +497,10 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), _d
     };
 
     _this.focusInput = function () {
-      process.nextTick(function () {
-        return _this.input.focus();
+      requestAnimationFrame(function () {
+        var _this$input5;
+
+        return (_this$input5 = _this.input) == null ? void 0 : _this$input5.focus();
       });
     };
 
@@ -463,6 +511,8 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), _d
     };
 
     _this.handleWrapperKeyDown = function (e) {
+      var _this$wrapper2;
+
       switch (true) {
         case isKeyBackspace(e):
         case isKeyDelete(e):
@@ -477,9 +527,10 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), _d
               _this.dispatch({
                 type: 'REMOVE_ALL_ACTIVE_TOKENS'
               }, function () {
-                LayoutEvents.emit();
+                var _this$input6;
 
-                _this.input.focus();
+                LayoutEvents.emit();
+                (_this$input6 = _this.input) == null ? void 0 : _this$input6.focus();
               });
             }
 
@@ -492,8 +543,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), _d
           break;
 
         case isKeyEscape(e):
-          _this.wrapper.blur();
-
+          (_this$wrapper2 = _this.wrapper) == null ? void 0 : _this$wrapper2.blur();
           break;
 
         case isKeyEnter(e):
@@ -539,7 +589,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), _d
         _this.dispatch({
           type: 'REMOVE_ALL_ACTIVE_TOKENS'
         }, function () {
-          return _this.input.focus();
+          var _this$input7;
+
+          return (_this$input7 = _this.input) == null ? void 0 : _this$input7.focus();
         });
       } else if (!isLeftEdge) {
         _this.dispatch({
@@ -669,10 +721,10 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), _d
     };
 
     _this.finishTokenEdit = function () {
-      var _this$state = _this.state,
-          editingTokenIndex = _this$state.editingTokenIndex,
-          inputValue = _this$state.inputValue,
-          reservedInputValue = _this$state.reservedInputValue;
+      var _this$state2 = _this.state,
+          editingTokenIndex = _this$state2.editingTokenIndex,
+          inputValue = _this$state2.inputValue,
+          reservedInputValue = _this$state2.reservedInputValue;
       var _this$props = _this.props,
           selectedItems = _this$props.selectedItems,
           valueToItem = _this$props.valueToItem;
@@ -709,16 +761,36 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), _d
           type: 'SET_ACTIVE_TOKENS',
           payload: [newItems[editingTokenIndex]]
         });
-      } else if (editingTokenIndex > 0) {
-        _this.dispatch({
-          type: 'SET_ACTIVE_TOKENS',
-          payload: [newItems[editingTokenIndex - 1]]
-        });
-      } else if (newItems.length > 0) {
-        _this.dispatch({
-          type: 'SET_ACTIVE_TOKENS',
-          payload: [newItems[0]]
-        });
+      }
+    };
+
+    _this.checkForUnexpectedInput = function () {
+      var inputValue = _this.state.inputValue;
+      var onUnexpectedInput = _this.props.onUnexpectedInput;
+
+      if (onUnexpectedInput) {
+        // чекаем не возвращает ли что-нибудь обработчик
+        var returnedValue = onUnexpectedInput(inputValue);
+
+        if (returnedValue === undefined) {
+          return;
+        }
+
+        if (returnedValue === null) {
+          _this.dispatch({
+            type: 'CLEAR_INPUT'
+          }, function () {
+            if (_this.isEditingMode) {
+              _this.finishTokenEdit();
+            }
+          });
+
+          return;
+        }
+
+        if (returnedValue) {
+          _this.selectItem(returnedValue);
+        }
       }
     };
 
@@ -783,14 +855,18 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), _d
       var handleIconClick = function handleIconClick(event) {
         event.stopPropagation();
 
-        _this.handleRemoveToken(item);
+        if (!_this.isEditingMode) {
+          _this.handleRemoveToken(item);
+        }
       }; // TODO useCallback
 
 
       var handleTokenClick = function handleTokenClick(event) {
         event.stopPropagation();
 
-        _this.handleTokenClick(event, item);
+        if (!_this.isEditingMode) {
+          _this.handleTokenClick(event, item);
+        }
       };
 
       var handleTokenDoubleClick = function handleTokenDoubleClick(event) {
@@ -863,13 +939,33 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), _d
       LayoutEvents.emit();
     }
 
-    if (!this.isCursorVisibleForState(prevState) && this.isCursorVisible && !this.isEditingMode) {
-      this.tryGetItems(this.state.inputValue);
+    if (!this.isCursorVisibleForState(prevState) && this.isCursorVisible) {
+      this.tryGetItems(this.isEditingMode ? '' : this.state.inputValue);
     }
   };
 
   _proto.componentWillUnmount = function componentWillUnmount() {
     document.removeEventListener('copy', this.handleCopy);
+  }
+  /**
+  * @public
+  */
+  ;
+
+  _proto.focus = function focus() {
+    var _this$input8;
+
+    (_this$input8 = this.input) == null ? void 0 : _this$input8.focus();
+  }
+  /**
+  * @public
+  */
+  ;
+
+  _proto.blur = function blur() {
+    var _this$input9;
+
+    (_this$input9 = this.input) == null ? void 0 : _this$input9.blur();
   };
 
   _proto.render = function render() {
@@ -882,7 +978,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), _d
   };
 
   _proto.renderMain = function renderMain() {
-    var _cn, _cn2, _cn3;
+    var _cx, _cx2, _cx3;
 
     if (this.type !== TokenInputType.WithoutReference && !this.props.getItems) {
       throw Error('Missed getItems for type ' + this.type);
@@ -900,16 +996,19 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), _d
         renderNotFound = _this$props3.renderNotFound,
         hideMenuIfEmptyInputValue = _this$props3.hideMenuIfEmptyInputValue,
         onMouseEnter = _this$props3.onMouseEnter,
-        onMouseLeave = _this$props3.onMouseLeave;
-    var _this$state2 = this.state,
-        activeTokens = _this$state2.activeTokens,
-        inFocus = _this$state2.inFocus,
-        inputValueWidth = _this$state2.inputValueWidth,
-        inputValue = _this$state2.inputValue,
-        reservedInputValue = _this$state2.reservedInputValue,
-        autocompleteItems = _this$state2.autocompleteItems,
-        loading = _this$state2.loading,
-        inputValueHeight = _this$state2.inputValueHeight;
+        onMouseLeave = _this$props3.onMouseLeave,
+        inputMode = _this$props3.inputMode,
+        menuWidth = _this$props3.menuWidth,
+        menuAlign = _this$props3.menuAlign;
+    var _this$state3 = this.state,
+        activeTokens = _this$state3.activeTokens,
+        inFocus = _this$state3.inFocus,
+        inputValueWidth = _this$state3.inputValueWidth,
+        inputValue = _this$state3.inputValue,
+        reservedInputValue = _this$state3.reservedInputValue,
+        autocompleteItems = _this$state3.autocompleteItems,
+        loading = _this$state3.loading,
+        inputValueHeight = _this$state3.inputValueHeight;
     var showMenu = this.type !== TokenInputType.WithoutReference && this.isCursorVisible && activeTokens.length === 0 && (inputValue !== '' || !hideMenuIfEmptyInputValue);
     var theme = this.theme;
     var lineHeight = parseInt(theme.tokenInputLineHeight, 10) || 0;
@@ -922,9 +1021,11 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), _d
       // в ie не работает, но альтернативный способ --- дать tabindex для label --- предположительно ещё сложнее
       caretColor: this.isCursorVisible ? undefined : 'transparent'
     };
-    var labelClassName = cn(jsStyles.label(theme), (_cn = {}, _cn[jsStyles.labelFocused(theme)] = !!inFocus, _cn[jsStyles.error(theme)] = !!error, _cn[jsStyles.warning(theme)] = !!warning, _cn[jsStyles.labelDisabled(theme)] = !!disabled, _cn));
-    var inputClassName = cn(jsStyles.input(theme), (_cn2 = {}, _cn2[jsStyles.inputDisabled(theme)] = !!disabled, _cn2[jsStyles.inputEditing(theme)] = this.isEditingMode, _cn2));
-    return /*#__PURE__*/React.createElement("div", {
+    var labelClassName = cx(styles.label(theme), (_cx = {}, _cx[styles.labelDisabled(theme)] = !!disabled, _cx[styles.labelFocused(theme)] = !!inFocus, _cx[styles.error(theme)] = !!error, _cx[styles.warning(theme)] = !!warning, _cx));
+    var inputClassName = cx(styles.input(theme), (_cx2 = {}, _cx2[styles.inputDisabled(theme)] = !!disabled, _cx2[styles.inputEditing(theme)] = this.isEditingMode, _cx2));
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement("div", {
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave
     }, /*#__PURE__*/React.createElement("label", {
@@ -937,14 +1038,13 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), _d
       onMouseUp: this.handleWrapperMouseUp
     }, /*#__PURE__*/React.createElement(TextWidthHelper, {
       ref: this.textHelperRef,
-      classHelp: cn(jsStyles.helperText(theme), (_cn3 = {}, _cn3[jsStyles.helperTextEditing(theme)] = this.isEditingMode, _cn3)),
+      classHelp: cx(styles.helperText(theme), (_cx3 = {}, _cx3[styles.helperTextEditing(theme)] = this.isEditingMode, _cx3)),
       text: inputValue,
       theme: this.theme
     }), this.renderTokensStart(), /*#__PURE__*/React.createElement("textarea", {
       ref: this.inputRef,
       value: inputValue,
       style: inputInlineStyles,
-      autoComplete: "off",
       spellCheck: false,
       disabled: disabled,
       className: inputClassName,
@@ -953,25 +1053,28 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), _d
       onBlur: this.handleInputBlur,
       onChange: this.handleChangeInputValue,
       onKeyDown: this.handleKeyDown,
-      onPaste: this.handleInputPaste
+      onPaste: this.handleInputPaste,
+      inputMode: inputMode
     }), showMenu && /*#__PURE__*/React.createElement(TokenInputMenu, {
       ref: this.tokensInputMenuRef,
       items: autocompleteItems,
       loading: loading,
       opened: showMenu,
       maxMenuHeight: maxMenuHeight,
-      anchorElement: this.input,
+      anchorElement: menuAlign === 'cursor' ? this.input : this.wrapper,
       renderNotFound: renderNotFound,
       renderItem: renderItem,
       onValueChange: this.selectItem,
-      renderAddButton: this.renderAddButton
+      renderAddButton: this.renderAddButton,
+      menuWidth: menuWidth,
+      menuAlign: menuAlign
     }), this.renderTokensEnd(), this.isEditingMode ? /*#__PURE__*/React.createElement("span", {
-      className: jsStyles.reservedInput(theme)
-    }, reservedInputValue) : null));
+      className: styles.reservedInput(theme)
+    }, reservedInputValue) : null)));
   }
-  /**
-  * Сбрасывает введенное пользователем значение
-  * @public
+  /**
+  * Сбрасывает введенное пользователем значение
+  * @public
   */
   ;
 
@@ -1053,6 +1156,37 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), _d
     get: function get() {
       return this.state.editingTokenIndex > -1;
     }
+  }, {
+    key: "isInputChanged",
+    get: function get() {
+      if (this.isEditingMode) {
+        return this.isTokenValueChanged;
+      }
+
+      return this.isInputValueChanged;
+    }
+  }, {
+    key: "isInputValueChanged",
+    get: function get() {
+      var inputValue = this.state.inputValue;
+      return inputValue !== '';
+    }
+  }, {
+    key: "isTokenValueChanged",
+    get: function get() {
+      var _this$state4 = this.state,
+          inputValue = _this$state4.inputValue,
+          editingTokenIndex = _this$state4.editingTokenIndex;
+      var _this$props4 = this.props,
+          selectedItems = _this$props4.selectedItems,
+          valueToString = _this$props4.valueToString;
+
+      if (this.isEditingMode) {
+        return valueToString(selectedItems[editingTokenIndex]) !== inputValue;
+      }
+
+      return false;
+    }
   }]);
 
   return TokenInput;
@@ -1073,5 +1207,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), _d
   onBlur: emptyHandler,
   onFocus: emptyHandler,
   onMouseEnter: emptyHandler,
-  onMouseLeave: emptyHandler
-}, _temp)) || _class);
+  onMouseLeave: emptyHandler,
+  menuWidth: 'auto',
+  menuAlign: 'cursor'
+}, _temp)) || _class) || _class);