@skbkontur/react-ui 0.0.0-b0853da840 → 0.0.0-cb270e7a13

package/components/TokenInput/TokenInput.js

@@ -1,638 +0,0 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";import _createClass from "@babel/runtime/helpers/esm/createClass";import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";import React from 'react';
-import { findDOMNode } from 'react-dom';
-import isEqual from 'lodash.isequal';
-
-import {
-isKeyArrowHorizontal,
-isKeyArrowLeft,
-isKeyArrowRight,
-isKeyArrowUp,
-isKeyArrowVertical,
-isKeyBackspace,
-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 { cx } from '../../lib/theming/Emotion';
-import { ThemeConsumer } from '../ThemeConsumer';
-
-
-import { jsStyles } from './TokenInput.styles';import
-styles from "./TokenInput.module.css";
-import { tokenInputReducer } from './TokenInputReducer';
-import { TokenInputMenu } from './TokenInputMenu';
-import { TextWidthHelper } from './TextWidthHelper';
-
-export var TokenInputType;(function (TokenInputType) {TokenInputType[TokenInputType["WithReference"] = 0] = "WithReference";TokenInputType[TokenInputType["WithoutReference"] = 1] = "WithoutReference";TokenInputType[TokenInputType["Combined"] = 2] = "Combined";})(TokenInputType || (TokenInputType = {}));
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-var defaultToKey = function defaultToKey(item) {return item.toString();};
-var identity = function identity(item) {return item;};
-var defaultRenderToken = function defaultRenderToken(item, _ref) {var isActive = _ref.isActive,onClick = _ref.onClick,onRemove = _ref.onRemove,disabled = _ref.disabled;return (
-    React.createElement(Token, { key: item.toString(), isActive: isActive, onClick: onClick, onRemove: onRemove, disabled: disabled },
-    item));};
-
-
-
-export var TokenInput = /*#__PURE__*/function (_React$PureComponent) {_inheritsLoose(TokenInput, _React$PureComponent);function TokenInput() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;_this.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-    state = {
-      inputValue: '',
-      inputValueWidth: 20,
-      activeTokens: [] };_this.
-
-
-    theme = void 0;_this.
-    input = null;_this.
-    tokensInputMenu = null;_this.
-    textHelper = null;_this.
-    wrapper = null;_this.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-    hasValueInItems = function (items, value) {
-      if (typeof value === 'string') {
-        return items.includes(value);
-      }
-      // todo: как то не очень
-      return items.some(function (item) {return isEqual(item, value);});
-    };_this.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-    inputRef = function (node) {return _this.input = node;};_this.
-    tokensInputMenuRef = function (node) {return _this.tokensInputMenu = node;};_this.
-    textHelperRef = function (node) {return _this.textHelper = node;};_this.
-    wrapperRef = function (node) {return _this.wrapper = node;};_this.
-
-    dispatch = function (action, cb) {
-      _this.setState(function (prevState) {return tokenInputReducer(prevState, action);}, cb);
-    };_this.
-
-
-
-
-
-
-
-
-    handleInputFocus = function (event) {
-      _this.dispatch({ type: 'SET_FOCUS_IN' });
-      if (_this.props.onFocus) {
-        _this.props.onFocus(event);
-      }
-    };_this.
-
-    handleInputBlur = function (event) {
-      if (_this.isBlurToMenu(event) || _this.state.preventBlur) {
-        event.preventDefault();
-        // первый focus нужен для предотвращения/уменьшения моргания в других браузерах
-        _this.input.focus();
-        // в firefox не работает без второго focus
-        process.nextTick(function () {return _this.input.focus();});
-        _this.dispatch({ type: 'SET_PREVENT_BLUR', payload: false });
-      } else {
-        _this.dispatch({ type: 'BLUR' });
-      }
-      if (_this.props.onBlur) {
-        _this.props.onBlur(event);
-      }
-    };_this.
-
-    isBlurToMenu = function (event) {
-      if (_this.menuRef) {
-        var menu = findDOMNode(_this.menuRef);
-        var relatedTarget = event.relatedTarget || document.activeElement;
-        if (menu && menu.contains(relatedTarget)) {
-          return true;
-        }
-      }
-      return false;
-    };_this.
-
-    handleWrapperMouseDown = function (event) {
-      _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;
-      if (!isClickOnToken) {
-        _this.dispatch({ type: 'REMOVE_ALL_ACTIVE_TOKENS' });
-      }
-    };_this.
-
-    handleWrapperMouseUp = function () {
-      _this.dispatch({ type: 'SET_PREVENT_BLUR', payload: false });
-    };_this.
-
-    handleCopy = function (event) {
-      if (!_this.state.inFocus || _this.state.activeTokens.length === 0 || _this.isCursorVisible) {
-        return;
-      }
-      event.preventDefault();
-
-      // упорядочивание токенов по индексу
-      var tokens = _this.state.activeTokens.
-      map(function (token) {return _this.props.selectedItems.indexOf(token);}).
-      sort().
-      map(function (index) {return _this.props.selectedItems[index];}).
-      map(function (item) {return _this.props.valueToString(item);});
-      event.clipboardData.setData('text/plain', tokens.join(_this.delimiters[0]));
-    };_this.
-
-    handleInputPaste = function (event) {
-      if (_this.type === TokenInputType.WithReference || !event.clipboardData) {
-        return;
-      }
-      var paste = event.clipboardData.getData('text');
-      var delimiters = _this.delimiters;
-      if (delimiters.some(function (delimiter) {return paste.includes(delimiter);})) {
-        event.preventDefault();
-        event.stopPropagation();
-        for (var _iterator = delimiters, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {var _ref2;if (_isArray) {if (_i >= _iterator.length) break;_ref2 = _iterator[_i++];} else {_i = _iterator.next();if (_i.done) break;_ref2 = _i.value;}var delimiter = _ref2;
-          paste = paste.split(delimiter).join(delimiters[0]);
-        }
-        var tokens = paste.split(delimiters[0]);
-        var _items = tokens.
-        map(function (token) {return _this.props.valueToItem(token);}).
-        filter(function (item) {return !_this.hasValueInItems(_this.props.selectedItems, item);});
-        var newItems = _this.props.selectedItems.concat(_items);
-        _this.props.onValueChange(newItems);
-      }
-    };_this.
-
-    tryGetItems = /*#__PURE__*/function () {var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(query) {var autocompleteItems, autocompleteItemsUnique;return _regeneratorRuntime.wrap(function _callee$(_context) {while (1) {switch (_context.prev = _context.next) {case 0:if (query === void 0) {query = '';}if (!(
-                _this.props.getItems && (_this.state.inputValue !== '' || !_this.props.hideMenuIfEmptyInputValue))) {_context.next = 9;break;}
-                _this.dispatch({ type: 'SET_LOADING', payload: true });_context.next = 5;return (
-                  _this.props.getItems(query));case 5:autocompleteItems = _context.sent;
-                _this.dispatch({ type: 'SET_LOADING', payload: false });
-
-                autocompleteItemsUnique = autocompleteItems.filter(
-                function (item) {return !_this.hasValueInItems(_this.props.selectedItems, item);});
-
-                if (query === '' || _this.state.inputValue !== '') {
-                  _this.dispatch({ type: 'SET_AUTOCOMPLETE_ITEMS', payload: autocompleteItemsUnique }, function () {
-                    LayoutEvents.emit();
-                    _this.highlightMenuItem();
-                  });
-                }case 9:case "end":return _context.stop();}}}, _callee);}));return function (_x) {return _ref3.apply(this, arguments);};}();_this.
-
-
-
-    handleKeyDown = function (event) {
-      if (_this.isCursorVisible) {
-        _this.handleInputKeyDown(event);
-      } else {
-        _this.handleWrapperKeyDown(event);
-      }
-    };_this.
-
-    handleInputKeyDown = function (e) {
-      e.stopPropagation();
-
-      if (_this.type !== TokenInputType.WithReference && (isKeyEnter(e) || _this.delimiters.includes(e.key))) {
-        e.preventDefault();
-        var newValue = _this.state.inputValue;
-        if (newValue !== '') {
-          _this.handleAddItem(newValue);
-        }
-      }
-
-      switch (true) {
-        case isKeyEnter(e):
-          if (_this.menuRef) {
-            _this.menuRef.enter(e);
-          }
-          break;
-        case isKeyArrowVertical(e):
-          e.preventDefault();
-          if (_this.menuRef) {
-            if (isKeyArrowUp(e)) {
-              _this.menuRef.up();
-            } else {
-              _this.menuRef.down();
-            }
-          }
-          break;
-        case isKeyEscape(e):
-          _this.input.blur();
-          break;
-        case isKeyBackspace(e):
-          _this.moveFocusToLastToken();
-          break;
-        case isKeyArrowLeft(e):
-          if (_this.input.selectionStart === 0) {
-            _this.moveFocusToLastToken();
-          }
-          break;}
-
-    };_this.
-
-
-
-
-
-
-
-
-    focusInput = function () {
-      process.nextTick(function () {return _this.input.focus();});
-    };_this.
-
-    handleWrapperKeyDown = function (e) {
-      switch (true) {
-        case isKeyBackspace(e):
-        case isKeyDelete(e):
-          var itemsNew = _this.props.selectedItems.filter(function (item) {return !_this.hasValueInItems(_this.state.activeTokens, item);});
-          _this.props.onValueChange(itemsNew);
-          _this.dispatch({ type: 'REMOVE_ALL_ACTIVE_TOKENS' }, function () {
-            LayoutEvents.emit();
-            _this.input.focus();
-          });
-          break;
-        case isKeyArrowHorizontal(e):
-          _this.handleWrapperArrows(e);
-          break;
-        case isKeyEscape(e):
-          _this.wrapper.blur();
-          break;
-        case isShortcutSelectAll(e):
-          e.preventDefault();
-          _this.dispatch({
-            type: 'SET_ACTIVE_TOKENS',
-            payload: _this.props.selectedItems });
-
-          break;}
-
-    };_this.
-
-    handleWrapperArrows = function (e) {
-      e.preventDefault();
-      var activeTokens = _this.state.activeTokens;
-      var activeItemIndex = _this.props.selectedItems.indexOf(activeTokens[0]);
-      var newItemIndex = activeItemIndex + (isKeyArrowLeft(e) ? -1 : +1);
-      var isLeftEdge = activeItemIndex === 0 && isKeyArrowLeft(e);
-      var isRightEdge = activeItemIndex === _this.props.selectedItems.length - 1 && isKeyArrowRight(e);
-      if (!e.shiftKey && activeTokens.length === 1) {
-        _this.handleWrapperArrowsWithoutShift(isLeftEdge, isRightEdge, newItemIndex);
-      } else {
-        _this.handleWrapperArrowsWithShift(isLeftEdge, isRightEdge, newItemIndex);
-      }
-    };_this.
-
-    handleWrapperArrowsWithoutShift = function (isLeftEdge, isRightEdge, newItemIndex) {
-      if (isRightEdge) {
-        _this.dispatch({ type: 'REMOVE_ALL_ACTIVE_TOKENS' }, function () {return _this.input.focus();});
-      } else if (!isLeftEdge) {
-        _this.dispatch({
-          type: 'SET_ACTIVE_TOKENS',
-          payload: [_this.props.selectedItems[newItemIndex]] });
-
-      }
-    };_this.
-
-    handleWrapperArrowsWithShift = function (isLeftEdge, isRightEdge, newItemIndex) {
-      if (!isLeftEdge && !isRightEdge) {
-        var itemNew = _this.props.selectedItems[newItemIndex];
-        var itemsNew = [itemNew].concat(_this.state.activeTokens.filter(function (item) {return !isEqual(item, itemNew);}));
-        _this.dispatch({ type: 'SET_ACTIVE_TOKENS', payload: itemsNew });
-      }
-    };_this.
-
-    handleValueChange = function (item) {
-      if (_this.hasValueInItems(_this.props.selectedItems, item)) {
-        return;
-      }
-
-      var newItems = _this.props.selectedItems.concat([item]);
-      _this.props.onValueChange(newItems);
-
-      _this.dispatch({ type: 'CLEAR_INPUT' });
-      _this.tryGetItems();
-    };_this.
-
-    handleAddItem = function (item) {
-      var value = _this.props.valueToItem(item);
-      if (_this.hasValueInItems(_this.props.selectedItems, value)) {
-        return;
-      }
-
-      var newItems = _this.props.selectedItems.concat([value]);
-      _this.props.onValueChange(newItems);
-
-      _this.dispatch({ type: 'CLEAR_INPUT' });
-      _this.tryGetItems();
-    };_this.
-
-    handleRemoveToken = function (item) {
-      _this.props.onValueChange(_this.props.selectedItems.filter(function (_) {return !isEqual(_, item);}));
-      var filteredActiveTokens = _this.state.activeTokens.filter(function (_) {return !isEqual(_, item);});
-
-      _this.dispatch({ type: 'SET_ACTIVE_TOKENS', payload: filteredActiveTokens });
-      if (filteredActiveTokens.length === 0) {
-        _this.focusInput();
-      }
-
-      _this.tryGetItems();
-    };_this.
-
-    handleTokenClick = function (event, itemNew) {
-      var items = _this.state.activeTokens;
-      if (event.ctrlKey) {
-        var newItems = _this.hasValueInItems(_this.state.activeTokens, itemNew) ?
-        items.filter(function (item) {return !isEqual(item, itemNew);}) : [].concat(
-        items, [itemNew]);
-        _this.dispatch({ type: 'SET_ACTIVE_TOKENS', payload: newItems });
-      } else {
-        _this.dispatch({ type: 'SET_ACTIVE_TOKENS', payload: [itemNew] });
-      }
-      _this.focusInput();
-    };_this.
-
-    handleChangeInputValue = function (event) {
-      var query = event.target.value.trimLeft();
-      if (query.endsWith(' ')) {
-        query = query.trimRight() + ' ';
-      }
-      if (_this.state.inputValue !== '' && query === '') {
-        _this.dispatch({ type: 'SET_AUTOCOMPLETE_ITEMS', payload: undefined });
-      }
-      _this.dispatch({ type: 'UPDATE_QUERY', payload: query }, function () {return _this.tryGetItems(query);});
-    };_this.
-
-    highlightMenuItem = function () {
-      if (
-      _this.menuRef &&
-      _this.state.autocompleteItems &&
-      _this.state.autocompleteItems.length > 0 &&
-      _this.type !== TokenInputType.Combined)
-      {
-        _this.menuRef.highlightItem(0);
-      }
-    };_this.
-
-    renderTokenFields = function () {
-      return _this.props.selectedItems.map(_this.renderToken);
-    };_this.
-
-    renderToken = function (item) {var _this$props =
-      _this.props,_this$props$renderTok = _this$props.renderToken,renderToken = _this$props$renderTok === void 0 ? defaultRenderToken : _this$props$renderTok,disabled = _this$props.disabled;
-
-      var isActive = _this.state.activeTokens.indexOf(item) !== -1;
-
-      // TODO useCallback
-      var handleIconClick = function handleIconClick(event) {
-        event.stopPropagation();
-        _this.handleRemoveToken(item);
-      };
-
-      // TODO useCallback
-      var handleTokenClick = function handleTokenClick(event) {
-        event.stopPropagation();
-        _this.handleTokenClick(event, item);
-      };
-
-      return renderToken(item, {
-        isActive: isActive,
-        onClick: handleTokenClick,
-        onRemove: handleIconClick,
-        disabled: disabled });
-
-    };return _this;}var _proto = TokenInput.prototype;_proto.componentDidMount = function componentDidMount() {this.updateInputTextWidth();document.addEventListener('copy', this.handleCopy);if (this.props.autoFocus) {this.focusInput();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {if (prevState.inputValue !== this.state.inputValue) {this.updateInputTextWidth();}if (prevState.activeTokens.length === 0 && this.state.activeTokens.length > 0) {this.dispatch({ type: 'SET_AUTOCOMPLETE_ITEMS', payload: undefined });}if (prevProps.selectedItems.length !== this.props.selectedItems.length) {LayoutEvents.emit();}if (!this.isCursorVisibleForState(prevState) && this.isCursorVisible) {this.tryGetItems(this.state.inputValue);}};_proto.componentWillUnmount = function componentWillUnmount() {document.removeEventListener('copy', this.handleCopy);};_proto.render = function render() {var _this2 = this;return React.createElement(ThemeConsumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _cx, _cx2;if (this.type !== TokenInputType.WithoutReference && !this.props.getItems) {throw Error('Missed getItems for type ' + this.type);}var _this$props2 = this.props,selectedItems = _this$props2.selectedItems,width = _this$props2.width,error = _this$props2.error,warning = _this$props2.warning,disabled = _this$props2.disabled,placeholder = _this$props2.placeholder,renderItem = _this$props2.renderItem,renderNotFound = _this$props2.renderNotFound,hideMenuIfEmptyInputValue = _this$props2.hideMenuIfEmptyInputValue,onMouseEnter = _this$props2.onMouseEnter,onMouseLeave = _this$props2.onMouseLeave;var _this$state = this.state,activeTokens = _this$state.activeTokens,inFocus = _this$state.inFocus,inputValueWidth = _this$state.inputValueWidth,inputValue = _this$state.inputValue,autocompleteItems = _this$state.autocompleteItems,loading = _this$state.loading;var showMenu = this.type !== TokenInputType.WithoutReference && this.isCursorVisible && activeTokens.length === 0 && (inputValue !== '' || !hideMenuIfEmptyInputValue);var inputInlineStyles = { // вычисляем ширину чтобы input автоматически перенёсся на следующую строку при необходимости
-      width: Math.max(50, inputValueWidth + 7), // input растягивается на всю ширину чтобы placeholder не обрезался
-      flex: selectedItems && selectedItems.length === 0 ? 1 : undefined, // в ie не работает, но альтернативный способ --- дать tabindex для label --- предположительно ещё сложнее
-      caretColor: this.isCursorVisible ? undefined : 'transparent' };var theme = this.theme;var labelClassName = cx(styles.label, jsStyles.label(theme), (_cx = {}, _cx[jsStyles.labelFocused(theme)] = !!inFocus, _cx[jsStyles.error(theme)] = !!error, _cx[jsStyles.warning(theme)] = !!warning, _cx[jsStyles.labelDisabled(theme)] = !!disabled, _cx));var inputClassName = cx(styles.input, jsStyles.input(theme), (_cx2 = {}, _cx2[styles.inputDisabled] = !!disabled, _cx2[jsStyles.inputDisabled(theme)] = !!disabled, _cx2));return React.createElement("div", { className: styles.root, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, React.createElement(TextWidthHelper, { ref: this.textHelperRef, text: inputValue }), React.createElement("label", { ref: this.wrapperRef, style: { width: width }, className: labelClassName, onMouseDown: this.handleWrapperMouseDown, onMouseUp: this.handleWrapperMouseUp }, this.renderTokenFields(), React.createElement("input", { type: "text", ref: this.inputRef, value: inputValue, style: inputInlineStyles, autoComplete: "off", spellCheck: false, disabled: disabled, className: inputClassName, placeholder: selectedItems.length > 0 ? undefined : placeholder, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onChange: this.handleChangeInputValue, onKeyDown: this.handleKeyDown, onPaste: this.handleInputPaste }), showMenu && React.createElement(TokenInputMenu, { ref: this.tokensInputMenuRef, items: autocompleteItems, loading: loading, opened: showMenu, anchorElement: this.input, inputValue: inputValue, renderNotFound: renderNotFound, renderItem: renderItem, onAddItem: this.handleAddItem, onValueChange: this.handleValueChange, showAddItemHint: this.showAddItemHint })));};_proto.isCursorVisibleForState = function isCursorVisibleForState(state) {return state.inFocus && (state.inputValue !== '' || state.activeTokens.length === 0);};_proto.updateInputTextWidth = function updateInputTextWidth() {if (this.textHelper) {var inputValueWidth = this.textHelper.getTextWidth();this.dispatch({ type: 'SET_INPUT_VALUE_WIDTH', payload: inputValueWidth }, LayoutEvents.emit);}};_proto.moveFocusToLastToken = function moveFocusToLastToken() {var items = this.props.selectedItems;if (this.state.inputValue === '' && items && items.length > 0) {this.dispatch({ type: 'SET_ACTIVE_TOKENS', payload: items.slice(-1) });}};_createClass(TokenInput, [{ key: "showAddItemHint", get: function get() {var items = this.state.autocompleteItems;var value = this.props.valueToItem(this.state.inputValue);if (items && this.hasValueInItems(items, value)) {return false;}var selectedItems = this.props.selectedItems;if (selectedItems && this.hasValueInItems(selectedItems, value)) {return false;}if (this.type === TokenInputType.Combined && this.state.inputValue !== '') {return true;}} }, { key: "type", get: function get() {return this.props.type ? this.props.type : TokenInputType.WithReference;} }, { key: "delimiters", get: function get() {return this.props.delimiters ? this.props.delimiters : [','];} }, { key: "menuRef", get: function get() {return this.tokensInputMenu && this.tokensInputMenu.getMenuRef();} }, { key: "isCursorVisible", get: function get() {return this.isCursorVisibleForState(this.state);} }]);return TokenInput;}(React.PureComponent);TokenInput.__KONTUR_REACT_UI__ = 'TokenInput';TokenInput.defaultProps = { selectedItems: [], renderItem: identity, renderValue: identity, valueToString: identity, valueToItem: function valueToItem(item) {return item;}, toKey: defaultToKey, onValueChange: function onValueChange() {return void 0;}, width: 250, onBlur: emptyHandler, onFocus: emptyHandler, onMouseEnter: emptyHandler, onMouseLeave: emptyHandler };