@skbkontur/react-ui 5.4.2 → 5.4.4

package/components/TokenInput/TokenInput/TokenInput.js

@@ -5,7 +5,7 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _dec, _class, _TokenInput;
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
-import isEqual from 'lodash.isequal';
+import lodashIsEqual from 'lodash.isequal';
 import { globalObject } from '@skbkontur/global-object';
 import { PopupIds } from "../../../internal/Popup";
 import { isKeyArrowHorizontal, isKeyArrowLeft, isKeyArrowRight, isKeyArrowUp, isKeyArrowVertical, isKeyBackspace, isKeyComma, isKeyDelete, isKeyEnter, isKeyEscape, isShortcutSelectAll } from "../../../lib/events/keyboard/identifiers";
@@ -100,13 +100,21 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     _this.textHelper = null;
     _this.wrapper = null;
     _this.memoizedTokens = new Map();
+    _this.isEqual = function (itemA, itemB) {
+      var _this$getProps = _this.getProps(),
+        itemToId = _this$getProps.itemToId;
+      return lodashIsEqual(itemToId(itemA), itemToId(itemB));
+    };
     _this.hasValueInItems = function (items, value) {
+      var _this$getProps2 = _this.getProps(),
+        valueToString = _this$getProps2.valueToString;
       if (typeof value === 'string') {
-        return items.includes(value);
+        return items.map(function (item) {
+          return valueToString(item);
+        }).includes(value);
       }
-      // todo: как то не очень
       return items.some(function (item) {
-        return isEqual(item, value);
+        return _this.isEqual(item, value);
       });
     };
     _this.inputRef = function (node) {
@@ -224,10 +232,10 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         return;
       }
       event.preventDefault();
-      var _this$getProps = _this.getProps(),
-        selectedItems = _this$getProps.selectedItems,
-        valueToString = _this$getProps.valueToString,
-        delimiters = _this$getProps.delimiters;
+      var _this$getProps3 = _this.getProps(),
+        selectedItems = _this$getProps3.selectedItems,
+        valueToString = _this$getProps3.valueToString,
+        delimiters = _this$getProps3.delimiters;
       // упорядочивание токенов по индексу
       var tokens = _this.state.activeTokens.map(function (token) {
         return selectedItems.indexOf(token);
@@ -243,11 +251,11 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         return;
       }
       var paste = event.clipboardData.getData('text');
-      var _this$getProps2 = _this.getProps(),
-        delimiters = _this$getProps2.delimiters,
-        selectedItems = _this$getProps2.selectedItems,
-        valueToItem = _this$getProps2.valueToItem,
-        onValueChange = _this$getProps2.onValueChange;
+      var _this$getProps4 = _this.getProps(),
+        delimiters = _this$getProps4.delimiters,
+        selectedItems = _this$getProps4.selectedItems,
+        valueToItem = _this$getProps4.valueToItem,
+        onValueChange = _this$getProps4.onValueChange;
       if (delimiters.some(function (delimiter) {
         return paste.includes(delimiter);
       })) {
@@ -270,7 +278,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     };
     _this.tryGetItems = /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(query) {
-        var autocompleteItems, _this$getProps3, selectedItems, valueToItem, valueToString, isSelectedItem, isEditingItem, autocompleteItemsUnique, editingItem, selectItemIndex;
+        var autocompleteItems, _this$getProps5, selectedItems, valueToItem, valueToString, isSelectedItem, isEditingItem, autocompleteItemsUnique, editingItem, selectItemIndex;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -293,20 +301,20 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
                 type: 'SET_LOADING',
                 payload: false
               });
-              _this$getProps3 = _this.getProps(), selectedItems = _this$getProps3.selectedItems, valueToItem = _this$getProps3.valueToItem, valueToString = _this$getProps3.valueToString;
+              _this$getProps5 = _this.getProps(), selectedItems = _this$getProps5.selectedItems, valueToItem = _this$getProps5.valueToItem, valueToString = _this$getProps5.valueToString;
               isSelectedItem = function isSelectedItem(item) {
                 return _this.hasValueInItems(selectedItems, item);
               };
               isEditingItem = function isEditingItem(item) {
                 var editingItem = selectedItems[_this.state.editingTokenIndex];
-                return !!editingItem && isEqual(item, editingItem);
+                return !!editingItem && _this.isEqual(item, editingItem);
               };
               autocompleteItemsUnique = autocompleteItems.filter(function (item) {
                 return !isSelectedItem(item) || isEditingItem(item);
               });
               if (_this.isEditingMode) {
                 editingItem = selectedItems[_this.state.editingTokenIndex];
-                if (isEqual(editingItem, valueToItem(_this.state.inputValue)) && !_this.hasValueInItems(autocompleteItemsUnique, editingItem)) {
+                if (_this.isEqual(editingItem, valueToItem(_this.state.inputValue)) && !_this.hasValueInItems(autocompleteItemsUnique, editingItem)) {
                   autocompleteItemsUnique.unshift(editingItem);
                 }
               }
@@ -344,7 +352,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       }
     };
     _this.handleInputKeyDown = function (e) {
-      var _this$input3, _this$input4;
+      var _this$state$autocompl, _this$state$autocompl2, _this$input3, _this$input4;
       e.stopPropagation();
       if (_this.type !== TokenInputType.WithReference && _this.getProps().delimiters.some(function (key) {
         return key === e.key || key === ',' && isKeyComma(e);
@@ -360,9 +368,10 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         }
       }
       var isRightmostTokenNotDisabled = !_this.isTokenDisabled(_this.getProps().selectedItems.length - 1);
+      var canSetValueToInput = _this.showAddItemHint || ((_this$state$autocompl = (_this$state$autocompl2 = _this.state.autocompleteItems) == null ? void 0 : _this$state$autocompl2.length) != null ? _this$state$autocompl : 0) > 0;
       switch (true) {
         case isKeyEnter(e):
-          if (_this.menuRef) {
+          if (canSetValueToInput && _this.menuRef) {
             _this.menuRef.enter(e);
           }
           // don't allow textarea
@@ -414,9 +423,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     };
     _this.handleWrapperKeyDown = function (e) {
       var _this$wrapper2;
-      var _this$getProps4 = _this.getProps(),
-        selectedItems = _this$getProps4.selectedItems,
-        onValueChange = _this$getProps4.onValueChange;
+      var _this$getProps6 = _this.getProps(),
+        selectedItems = _this$getProps6.selectedItems,
+        onValueChange = _this$getProps6.onValueChange;
       switch (true) {
         case isKeyBackspace(e):
         case isKeyDelete(e):
@@ -493,7 +502,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       if (!isLeftEdge && !isRightEdge) {
         var itemNew = _this.getProps().selectedItems[newItemIndex];
         var itemsNew = [itemNew].concat(_this.state.activeTokens.filter(function (item) {
-          return !isEqual(item, itemNew);
+          return !_this.isEqual(item, itemNew);
         }));
         _this.dispatch({
           type: 'SET_ACTIVE_TOKENS',
@@ -511,9 +520,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       }
     };
     _this.selectItem = function (item) {
-      var _this$getProps5 = _this.getProps(),
-        selectedItems = _this$getProps5.selectedItems,
-        valueToString = _this$getProps5.valueToString;
+      var _this$getProps7 = _this.getProps(),
+        selectedItems = _this$getProps7.selectedItems,
+        valueToString = _this$getProps7.valueToString;
       if (_this.isEditingMode) {
         _this.dispatch({
           type: 'UPDATE_QUERY',
@@ -529,10 +538,10 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     };
     _this.handleRemoveToken = function (item) {
       _this.props.onValueChange == null || _this.props.onValueChange(_this.getProps().selectedItems.filter(function (_) {
-        return !isEqual(_, item);
+        return !_this.isEqual(_, item);
       }));
       var filteredActiveTokens = _this.state.activeTokens.filter(function (_) {
-        return !isEqual(_, item);
+        return !_this.isEqual(_, item);
       });
       _this.dispatch({
         type: 'SET_ACTIVE_TOKENS',
@@ -547,7 +556,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       var items = _this.state.activeTokens;
       if (event.ctrlKey) {
         var newItems = _this.hasValueInItems(_this.state.activeTokens, itemNew) ? items.filter(function (item) {
-          return !isEqual(item, itemNew);
+          return !_this.isEqual(item, itemNew);
         }) : [].concat(items, [itemNew]);
         _this.dispatch({
           type: 'SET_ACTIVE_TOKENS',
@@ -562,9 +571,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       _this.focusInput();
     };
     _this.handleTokenEdit = function (itemNew) {
-      var _this$getProps6 = _this.getProps(),
-        selectedItems = _this$getProps6.selectedItems,
-        valueToString = _this$getProps6.valueToString;
+      var _this$getProps8 = _this.getProps(),
+        selectedItems = _this$getProps8.selectedItems,
+        valueToString = _this$getProps8.valueToString;
       var editingTokenIndex = selectedItems.findIndex(function (item) {
         return item === itemNew;
       });
@@ -590,12 +599,18 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       _this.tryGetItems();
     };
     _this.finishTokenEdit = function () {
-      var selectedItems = _this.getProps().selectedItems;
+      var _autocompleteItems$fi;
+      var _this$getProps9 = _this.getProps(),
+        selectedItems = _this$getProps9.selectedItems,
+        valueToString = _this$getProps9.valueToString;
       var _this$state2 = _this.state,
         editingTokenIndex = _this$state2.editingTokenIndex,
         inputValue = _this$state2.inputValue,
-        reservedInputValue = _this$state2.reservedInputValue;
-      var editedItem = _this.getProps().valueToItem(inputValue);
+        reservedInputValue = _this$state2.reservedInputValue,
+        autocompleteItems = _this$state2.autocompleteItems;
+      var editedItem = (_autocompleteItems$fi = autocompleteItems == null ? void 0 : autocompleteItems.find(function (item) {
+        return valueToString(item) === inputValue;
+      })) != null ? _autocompleteItems$fi : _this.getProps().valueToItem(inputValue);
       var newItems = selectedItems.concat([]);
       if (!_this.hasValueInItems(selectedItems, editedItem)) {
         newItems.splice.apply(newItems, [editingTokenIndex, 1].concat(_this.isInputValueChanged ? [editedItem] : []));
@@ -766,8 +781,8 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       if (isDirectionLeft === void 0) {
         isDirectionLeft = true;
       }
-      var _this$getProps7 = _this.getProps(),
-        selectedItems = _this$getProps7.selectedItems;
+      var _this$getProps10 = _this.getProps(),
+        selectedItems = _this$getProps10.selectedItems;
       var step = isDirectionLeft ? -1 : +1;
       var availableIndex = startIndex + step;
       while (_this.isTokenDisabled(availableIndex)) {
@@ -894,14 +909,14 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       totalCount = _this$props2.totalCount,
       ariaDescribedby = _this$props2['aria-describedby'],
       ariaLabel = _this$props2['aria-label'];
-    var _this$getProps8 = this.getProps(),
-      selectedItems = _this$getProps8.selectedItems,
-      width = _this$getProps8.width,
-      onMouseEnter = _this$getProps8.onMouseEnter,
-      onMouseLeave = _this$getProps8.onMouseLeave,
-      menuWidth = _this$getProps8.menuWidth,
-      menuAlign = _this$getProps8.menuAlign,
-      renderItem = _this$getProps8.renderItem;
+    var _this$getProps11 = this.getProps(),
+      selectedItems = _this$getProps11.selectedItems,
+      width = _this$getProps11.width,
+      onMouseEnter = _this$getProps11.onMouseEnter,
+      onMouseLeave = _this$getProps11.onMouseLeave,
+      menuWidth = _this$getProps11.menuWidth,
+      menuAlign = _this$getProps11.menuAlign,
+      renderItem = _this$getProps11.renderItem;
     var _this$state3 = this.state,
       activeTokens = _this$state3.activeTokens,
       inFocus = _this$state3.inFocus,
@@ -1089,9 +1104,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       var _this$state4 = this.state,
         inputValue = _this$state4.inputValue,
         editingTokenIndex = _this$state4.editingTokenIndex;
-      var _this$getProps9 = this.getProps(),
-        valueToString = _this$getProps9.valueToString,
-        selectedItems = _this$getProps9.selectedItems;
+      var _this$getProps12 = this.getProps(),
+        valueToString = _this$getProps12.valueToString,
+        selectedItems = _this$getProps12.selectedItems;
       if (this.isEditingMode) {
         return valueToString(selectedItems[editingTokenIndex]) !== inputValue;
       }
@@ -1109,6 +1124,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     return item;
   },
   toKey: defaultToKey,
+  itemToId: defaultToKey,
   onValueChange: function onValueChange() {
     return void 0;
   },