npm - @skbkontur/react-ui - Versions diffs - 0.0.0-8fc80072ce → 0.0.0-9294639913 - Mend

@skbkontur/react-ui 0.0.0-8fc80072ce → 0.0.0-9294639913

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5772) hide show

package/components/TokenInput/TokenInput.js DELETED Viewed

@@ -1,639 +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 cn from 'classnames';
-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 { ThemeContext } from '../../lib/theming/ThemeContext';
-import { jsStyles } from './TokenInput.styles';
-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 () {
-        _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.includes(item);
-      // 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(ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _cn, _cn2;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 = 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));return React.createElement("div", { 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 };