@skbkontur/react-ui 0.0.0-aaf2aabecb → 0.0.0-b08da15166

package/components/Input/Input/Input.js

@@ -2,24 +2,28 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+var _excluded = ["onMouseEnter", "onMouseLeave", "onMouseOver", "onKeyDown", "onKeyPress", "onValueChange", "width", "error", "warning", "leftIcon", "rightIcon", "borderless", "value", "align", "type", "mask", "maskChar", "alwaysShowMask", "size", "placeholder", "selectAllOnFocus", "disabled", "onUnexpectedInput", "prefix", "suffix", "formatChars"];
+
+var _class, _class2, _temp;
+
 import invariant from 'invariant';
 import React from 'react';
 import raf from 'raf';
-import cn from 'classnames';
-import { isIE11, isEdge } from "..\\..\\..\\lib\\utils";
-import { isKeyBackspace, isKeyDelete, someKeys } from "..\\..\\..\\lib\\events\\keyboard\\identifiers";
-import { polyfillPlaceholder } from "..\\..\\..\\lib\\polyfillPlaceholder";
-import { MaskedInput } from "..\\..\\..\\internal\\MaskedInput";
-import { ThemeContext } from "..\\..\\..\\lib\\theming\\ThemeContext";
-import { jsStyles } from "..\\Input.styles";
-/**
-                                            * Интерфес пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.
-                                            *  Все пропсы кроме перечисленных, `className` и `style` передаются в `<input>`
-                                            */
-
-export var Input =
-/*#__PURE__*/
-function (_React$Component) {
+import { isIE11, isEdge } from "../../../lib/client";
+import { isKeyBackspace, isKeyDelete, someKeys } from "../../../lib/events/keyboard/identifiers";
+import { needsPolyfillPlaceholder } from "../../../lib/needsPolyfillPlaceholder";
+import { MaskedInput } from "../../../internal/MaskedInput";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
+import { rootNode } from "../../../lib/rootNode";
+import { styles } from "../Input.styles";
+export
+/**
+* Интерфейс пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.
+*  Все пропсы кроме перечисленных, `className` и `style` передаются в `<input>`
+*/
+var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Input, _React$Component);
 
   function Input() {
@@ -31,12 +35,11 @@ function (_React$Component) {
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
     _this.state = {
-      polyfillPlaceholder: false,
+      needsPolyfillPlaceholder: needsPolyfillPlaceholder,
       blinking: false,
       focused: false
     };
     _this.selectAllId = null;
-    _this.theme = void 0;
     _this.blinkTimeout = 0;
     _this.input = null;
 
@@ -76,6 +79,81 @@ function (_React$Component) {
       }
     };
 
+    _this.renderMain = function (props) {
+      var _cx, _cx2;
+
+      var onMouseEnter = props.onMouseEnter,
+          onMouseLeave = props.onMouseLeave,
+          onMouseOver = props.onMouseOver,
+          onKeyDown = props.onKeyDown,
+          onKeyPress = props.onKeyPress,
+          onValueChange = props.onValueChange,
+          width = props.width,
+          error = props.error,
+          warning = props.warning,
+          leftIcon = props.leftIcon,
+          rightIcon = props.rightIcon,
+          borderless = props.borderless,
+          value = props.value,
+          align = props.align,
+          type = props.type,
+          mask = props.mask,
+          maskChar = props.maskChar,
+          alwaysShowMask = props.alwaysShowMask,
+          size = props.size,
+          placeholder = props.placeholder,
+          selectAllOnFocus = props.selectAllOnFocus,
+          disabled = props.disabled,
+          onUnexpectedInput = props.onUnexpectedInput,
+          prefix = props.prefix,
+          suffix = props.suffix,
+          formatChars = props.formatChars,
+          rest = _objectWithoutPropertiesLoose(props, _excluded);
+
+      var _this$state = _this.state,
+          blinking = _this$state.blinking,
+          focused = _this$state.focused;
+      var labelProps = {
+        className: cx(styles.root(_this.theme), _this.getSizeClassName(), (_cx = {}, _cx[styles.focus(_this.theme)] = focused, _cx[styles.blink(_this.theme)] = blinking, _cx[styles.borderless()] = borderless && !focused, _cx[styles.disabled(_this.theme)] = disabled, _cx[styles.warning(_this.theme)] = warning, _cx[styles.error(_this.theme)] = error, _cx[styles.focusFallback(_this.theme)] = focused && (isIE11 || isEdge), _cx[styles.warningFallback(_this.theme)] = warning && (isIE11 || isEdge), _cx[styles.errorFallback(_this.theme)] = error && (isIE11 || isEdge), _cx)),
+        style: {
+          width: width
+        },
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        onMouseOver: onMouseOver
+      };
+
+      var inputProps = _extends({}, rest, {
+        className: cx(styles.input(_this.theme), (_cx2 = {}, _cx2[styles.inputFocus(_this.theme)] = focused, _cx2[styles.inputDisabled(_this.theme)] = disabled, _cx2)),
+        value: value,
+        onChange: _this.handleChange,
+        onFocus: _this.handleFocus,
+        onKeyDown: _this.handleKeyDown,
+        onKeyPress: _this.handleKeyPress,
+        onBlur: _this.handleBlur,
+        style: {
+          textAlign: align
+        },
+        ref: _this.refInput,
+        type: 'text',
+        placeholder: !_this.isMaskVisible && !needsPolyfillPlaceholder ? placeholder : undefined,
+        disabled: disabled
+      });
+
+      if (type === 'password') {
+        inputProps.type = type;
+      }
+
+      var input = mask ? _this.renderMaskedInput(inputProps, mask) : /*#__PURE__*/React.createElement('input', inputProps);
+      return /*#__PURE__*/React.createElement("label", labelProps, /*#__PURE__*/React.createElement("span", {
+        className: styles.sideContainer()
+      }, _this.renderLeftIcon(), _this.renderPrefix()), /*#__PURE__*/React.createElement("span", {
+        className: styles.wrapper()
+      }, input, _this.renderPlaceholder()), /*#__PURE__*/React.createElement("span", {
+        className: cx(styles.sideContainer(), styles.rightContainer())
+      }, _this.renderSuffix(), _this.renderRightIcon()));
+    };
+
     _this.refInput = function (element) {
       if (element instanceof MaskedInput) {
         _this.input = element.input;
@@ -85,12 +163,12 @@ function (_React$Component) {
     };
 
     _this.handleChange = function (event) {
-      if (polyfillPlaceholder) {
+      if (needsPolyfillPlaceholder) {
         var fieldIsEmpty = event.target.value === '';
 
-        if (_this.state.polyfillPlaceholder !== fieldIsEmpty) {
+        if (_this.state.needsPolyfillPlaceholder !== fieldIsEmpty) {
           _this.setState({
-            polyfillPlaceholder: fieldIsEmpty
+            needsPolyfillPlaceholder: fieldIsEmpty
           });
         }
       }
@@ -111,7 +189,7 @@ function (_React$Component) {
 
       if (_this.props.selectAllOnFocus) {
         // https://github.com/facebook/react/issues/7769
-        _this.input ? _this.selectAll() : _this.delaySelectAll();
+        _this.input && !isIE11 ? _this.selectAll() : _this.delaySelectAll();
       }
 
       if (_this.props.onFocus) {
@@ -170,26 +248,34 @@ function (_React$Component) {
     };
 
     _this.renderPrefix = function () {
-      var prefix = _this.props.prefix;
+      var _cx3;
+
+      var _this$props = _this.props,
+          prefix = _this$props.prefix,
+          disabled = _this$props.disabled;
 
       if (!prefix) {
         return null;
       }
 
-      return React.createElement("span", {
-        className: jsStyles.prefix(_this.theme)
+      return /*#__PURE__*/React.createElement("span", {
+        className: cx(styles.prefix(_this.theme), (_cx3 = {}, _cx3[styles.prefixDisabled(_this.theme)] = disabled, _cx3))
       }, prefix);
     };
 
     _this.renderSuffix = function () {
-      var suffix = _this.props.suffix;
+      var _cx4;
+
+      var _this$props2 = _this.props,
+          suffix = _this$props2.suffix,
+          disabled = _this$props2.disabled;
 
       if (!suffix) {
         return null;
       }
 
-      return React.createElement("span", {
-        className: jsStyles.suffix(_this.theme)
+      return /*#__PURE__*/React.createElement("span", {
+        className: cx(styles.suffix(_this.theme), (_cx4 = {}, _cx4[styles.suffixDisabled(_this.theme)] = disabled, _cx4))
       }, suffix);
     };
 
@@ -198,50 +284,42 @@ function (_React$Component) {
 
   var _proto = Input.prototype;
 
-  _proto.componentDidMount = function componentDidMount() {
-    if (polyfillPlaceholder) {
-      this.setState({
-        polyfillPlaceholder: true
-      });
-    }
-  };
-
   _proto.componentWillUnmount = function componentWillUnmount() {
     if (this.blinkTimeout) {
       clearTimeout(this.blinkTimeout);
     }
 
     this.cancelDelayedSelectAll();
-  };
-
-  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
-    if (polyfillPlaceholder && !nextProps.value) {
-      this.setState({
-        polyfillPlaceholder: true
-      });
-    }
   }
-  /**
-   * @public
-   */
+  /**
+  * @public
+  */
   ;
 
   _proto.focus = function focus() {
     invariant(this.input, 'Cannot call "focus" because Input is not mounted');
     this.input.focus();
   }
-  /**
-   * @public
-   */
+  /**
+  * @public
+  */
   ;
 
   _proto.blur = function blur() {
     invariant(this.input, 'Cannot call "blur" because Input is not mounted');
     this.input.blur();
   }
-  /**
-   * @public
-   */
+  /**
+  * @public
+  */
+  ;
+
+  _proto.getNode = function getNode() {
+    return this.input;
+  }
+  /**
+  * @public
+  */
   ;
 
   _proto.blink = function blink() {
@@ -264,9 +342,11 @@ function (_React$Component) {
       _this2.blinkTimeout = window.setTimeout(_this2.cancelBlink, 150);
     });
   }
-  /**
-   * @public
-   */
+  /**
+  * @public
+  * @param {number} start
+  * @param {number} end
+  */
   ;
 
   _proto.setSelectionRange = function setSelectionRange(start, end) {
@@ -284,98 +364,22 @@ function (_React$Component) {
   _proto.render = function render() {
     var _this3 = this;
 
-    return React.createElement(ThemeContext.Consumer, null, function (theme) {
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
       _this3.theme = theme;
-      return _this3.renderMain();
+      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+        rootNodeRef: _this3.setRootNode
+      }, _this3.props), _this3.renderMain);
     });
   }
-  /**
-   * @public
-   */
+  /**
+  * @public
+  */
   ;
 
-  _proto.renderMain = function renderMain() {
-    var _cn;
-
-    var _this$props = this.props,
-        onMouseEnter = _this$props.onMouseEnter,
-        onMouseLeave = _this$props.onMouseLeave,
-        onMouseOver = _this$props.onMouseOver,
-        onKeyDown = _this$props.onKeyDown,
-        onKeyPress = _this$props.onKeyPress,
-        onValueChange = _this$props.onValueChange,
-        width = _this$props.width,
-        error = _this$props.error,
-        warning = _this$props.warning,
-        leftIcon = _this$props.leftIcon,
-        rightIcon = _this$props.rightIcon,
-        borderless = _this$props.borderless,
-        value = _this$props.value,
-        align = _this$props.align,
-        type = _this$props.type,
-        mask = _this$props.mask,
-        maskChar = _this$props.maskChar,
-        alwaysShowMask = _this$props.alwaysShowMask,
-        style = _this$props.style,
-        className = _this$props.className,
-        size = _this$props.size,
-        placeholder = _this$props.placeholder,
-        selectAllOnFocus = _this$props.selectAllOnFocus,
-        disabled = _this$props.disabled,
-        onUnexpectedInput = _this$props.onUnexpectedInput,
-        prefix = _this$props.prefix,
-        suffix = _this$props.suffix,
-        formatChars = _this$props.formatChars,
-        rest = _objectWithoutPropertiesLoose(_this$props, ["onMouseEnter", "onMouseLeave", "onMouseOver", "onKeyDown", "onKeyPress", "onValueChange", "width", "error", "warning", "leftIcon", "rightIcon", "borderless", "value", "align", "type", "mask", "maskChar", "alwaysShowMask", "style", "className", "size", "placeholder", "selectAllOnFocus", "disabled", "onUnexpectedInput", "prefix", "suffix", "formatChars"]);
-
-    var _this$state = this.state,
-        blinking = _this$state.blinking,
-        focused = _this$state.focused;
-    var labelProps = {
-      className: cn(jsStyles.root(this.theme), this.getSizeClassName(), (_cn = {}, _cn[jsStyles.borderless()] = !!borderless, _cn[jsStyles.focus(this.theme)] = focused, _cn[jsStyles.blink(this.theme)] = !!blinking, _cn[jsStyles.warning(this.theme)] = !!warning, _cn[jsStyles.error(this.theme)] = !!error, _cn[jsStyles.disabled(this.theme)] = !!disabled, _cn[jsStyles.focusFallback(this.theme)] = focused && (isIE11 || isEdge), _cn[jsStyles.warningFallback(this.theme)] = !!warning && (isIE11 || isEdge), _cn[jsStyles.errorFallback(this.theme)] = !!error && (isIE11 || isEdge), _cn)),
-      style: {
-        width: width
-      },
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave,
-      onMouseOver: onMouseOver
-    };
-
-    var inputProps = _extends({}, rest, {
-      className: jsStyles.input(this.theme),
-      value: value,
-      onChange: this.handleChange,
-      onFocus: this.handleFocus,
-      onKeyDown: this.handleKeyDown,
-      onKeyPress: this.handleKeyPress,
-      onBlur: this.handleBlur,
-      style: {
-        textAlign: align
-      },
-      ref: this.refInput,
-      type: 'text',
-      placeholder: !this.isMaskVisible && !polyfillPlaceholder ? placeholder : undefined,
-      disabled: disabled
-    });
-
-    if (type === 'password') {
-      inputProps.type = type;
-    }
-
-    var input = mask ? this.renderMaskedInput(inputProps, mask) : React.createElement('input', inputProps);
-    return React.createElement("label", labelProps, React.createElement("span", {
-      className: jsStyles.sideContainer()
-    }, this.renderLeftIcon(), this.renderPrefix()), React.createElement("span", {
-      className: jsStyles.wrapper()
-    }, input, this.renderPlaceholder()), React.createElement("span", {
-      className: cn(jsStyles.sideContainer(), jsStyles.rightContainer())
-    }, this.renderSuffix(), this.renderRightIcon()));
-  };
-
   _proto.renderMaskedInput = function renderMaskedInput(inputProps, mask) {
-    return React.createElement(MaskedInput, _extends({}, inputProps, {
+    return /*#__PURE__*/React.createElement(MaskedInput, _extends({}, inputProps, {
       mask: mask,
-      maskChar: this.props.maskChar === undefined ? '_' : this.props.maskChar,
+      maskChar: this.props.maskChar,
       alwaysShowMask: this.props.alwaysShowMask,
       formatChars: this.props.formatChars,
       onChange: this.props.onChange,
@@ -384,36 +388,56 @@ function (_React$Component) {
     }));
   };
 
+  _proto.getIconSizeClassname = function getIconSizeClassname(right) {
+    if (right === void 0) {
+      right = false;
+    }
+
+    switch (this.props.size) {
+      case 'large':
+        return right ? styles.rightIconLarge(this.theme) : styles.leftIconLarge(this.theme);
+
+      case 'medium':
+        return right ? styles.rightIconMedium(this.theme) : styles.leftIconMedium(this.theme);
+
+      case 'small':
+      default:
+        return right ? styles.rightIconSmall(this.theme) : styles.leftIconSmall(this.theme);
+    }
+  };
+
   _proto.renderLeftIcon = function renderLeftIcon() {
-    return this.renderIcon(this.props.leftIcon, jsStyles.leftIcon());
+    return this.renderIcon(this.props.leftIcon, this.getIconSizeClassname());
   };
 
   _proto.renderRightIcon = function renderRightIcon() {
-    return this.renderIcon(this.props.rightIcon, jsStyles.rightIcon());
+    return this.renderIcon(this.props.rightIcon, this.getIconSizeClassname(true));
   };
 
-  _proto.renderIcon = function renderIcon(icon, className) {
+  _proto.renderIcon = function renderIcon(icon, sizeClassName) {
+    var _cx5;
+
     if (!icon) {
       return null;
     }
 
-    if (icon instanceof Function) {
-      return React.createElement("span", {
-        className: className
-      }, icon());
-    }
-
-    return React.createElement("span", {
-      className: cn(className, jsStyles.useDefaultColor(this.theme), jsStyles.useDefaultColor(this.theme))
-    }, icon);
+    var disabled = this.props.disabled;
+    var iconNode = icon instanceof Function ? icon() : icon;
+    return /*#__PURE__*/React.createElement("span", {
+      className: cx(styles.icon(), sizeClassName, styles.useDefaultColor(this.theme), (_cx5 = {}, _cx5[styles.iconDisabled()] = disabled, _cx5))
+    }, iconNode);
   };
 
   _proto.renderPlaceholder = function renderPlaceholder() {
+    var disabled = this.props.disabled;
+    var focused = this.state.focused;
     var placeholder = null;
 
-    if (this.state.polyfillPlaceholder && this.props.placeholder && !this.isMaskVisible && !this.props.value) {
-      placeholder = React.createElement("div", {
-        className: cn(jsStyles.placeholder(this.theme), jsStyles.placeholder(this.theme)),
+    if (this.state.needsPolyfillPlaceholder && this.props.placeholder && !this.isMaskVisible && !this.props.value && !this.props.defaultValue) {
+      var _cx6;
+
+      placeholder = /*#__PURE__*/React.createElement("div", {
+        className: cx(styles.placeholder(this.theme), (_cx6 = {}, _cx6[styles.placeholderDisabled(this.theme)] = disabled, _cx6[styles.placeholderFocus(this.theme)] = focused, _cx6)),
         style: {
           textAlign: this.props.align || 'inherit'
         }
@@ -424,35 +448,33 @@ function (_React$Component) {
   };
 
   _proto.getSizeClassName = function getSizeClassName() {
-    var _ref, _ref2, _ref3;
+    var _cx7, _cx8, _cx9;
 
     switch (this.props.size) {
       case 'large':
-        return _ref = {}, _ref[jsStyles.sizeLarge(this.theme)] = true, _ref[jsStyles.sizeLargeFallback(this.theme)] = isIE11 || isEdge, _ref;
+        return cx((_cx7 = {}, _cx7[styles.sizeLarge(this.theme)] = true, _cx7[styles.sizeLargeFallback(this.theme)] = isIE11 || isEdge, _cx7));
 
       case 'medium':
-        return _ref2 = {}, _ref2[jsStyles.sizeMedium(this.theme)] = true, _ref2[jsStyles.sizeMediumFallback(this.theme)] = isIE11 || isEdge, _ref2;
+        return cx((_cx8 = {}, _cx8[styles.sizeMedium(this.theme)] = true, _cx8[styles.sizeMediumFallback(this.theme)] = isIE11 || isEdge, _cx8));
 
       case 'small':
       default:
-        return _ref3 = {}, _ref3[jsStyles.sizeSmall(this.theme)] = true, _ref3[jsStyles.sizeSmallFallback(this.theme)] = isIE11 || isEdge, _ref3;
+        return cx((_cx9 = {}, _cx9[styles.sizeSmall(this.theme)] = true, _cx9[styles.sizeSmallFallback(this.theme)] = isIE11 || isEdge, _cx9));
     }
   };
 
   _createClass(Input, [{
     key: "isMaskVisible",
     get: function get() {
-      var _this$props2 = this.props,
-          mask = _this$props2.mask,
-          alwaysShowMask = _this$props2.alwaysShowMask;
+      var _this$props3 = this.props,
+          mask = _this$props3.mask,
+          alwaysShowMask = _this$props3.alwaysShowMask;
       var focused = this.state.focused;
       return Boolean(mask && (focused || alwaysShowMask));
     }
   }]);
 
   return Input;
-}(React.Component);
-Input.__KONTUR_REACT_UI__ = 'Input';
-Input.defaultProps = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Input', _class2.defaultProps = {
   size: 'small'
-};
+}, _temp)) || _class;