"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.TextareaDataTids = exports.Textarea = exports.DEFAULT_WIDTH = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = _interopRequireDefault(require("react"));
var _lodash = _interopRequireDefault(require("lodash.throttle"));
var _globalObject = require("@skbkontur/global-object");

var _identifiers = require("../../lib/events/keyboard/identifiers");
var _needsPolyfillPlaceholder = require("../../lib/needsPolyfillPlaceholder");
var LayoutEvents = _interopRequireWildcard(require("../../lib/LayoutEvents"));

var _ThemeContext = require("../../lib/theming/ThemeContext");

var _RenderLayer = require("../../internal/RenderLayer");
var _ResizeDetector = require("../../internal/ResizeDetector");
var _client = require("../../lib/client");

var _CommonWrapper = require("../../internal/CommonWrapper");
var _currentEnvironment = require("../../lib/currentEnvironment");
var _Emotion = require("../../lib/theming/Emotion");

var _rootNode = require("../../lib/rootNode");
var _createPropsGetter = require("../../lib/createPropsGetter");


var _SizeDecorator = require("../../lib/size/SizeDecorator");
var _ReactUIFeatureFlagsContext = require("../../lib/featureFlagsContext/ReactUIFeatureFlagsContext");



var _FeatureFlagsHelpers = require("../../lib/featureFlagsContext/FeatureFlagsHelpers");

var _TextareaHelpers = require("./TextareaHelpers");
var _Textarea2 = require("./Textarea.styles");

var _TextareaCounter = require("./TextareaCounter");
var _TextareaWithSafari17Workaround = require("./TextareaWithSafari17Workaround");var _excluded = ["width", "error", "warning", "size", "autoResize", "resize", "onCut", "onPaste", "maxRows", "onFocus", "selectAllOnFocus", "placeholder", "onValueChange", "showLengthCounter", "lengthCounter", "counterHelp", "extraRow", "disableAnimations", "disabled"];var _class, _Textarea;

var DEFAULT_WIDTH = exports.DEFAULT_WIDTH = 250;
var AUTORESIZE_THROTTLE_DEFAULT_WAIT = 100;










































































var TextareaDataTids = exports.TextareaDataTids = {
  root: 'Textarea__root',
  counter: 'TextareaCounter__root',
  helpIcon: 'TextareaCounter__helpIcon'
};



/**
 * Многострочное поле — это поле ввода, в котором текст отображается в несколько строк.
 */var



Textarea = exports.Textarea = (0, _rootNode.rootNode)(_class = (0, _SizeDecorator.withSize)(_class = (_Textarea = /*#__PURE__*/function (_React$Component) {function Textarea() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.










    clear = function () {
      if (_this.node) {
        _this.node.value = '';
      }
      if (_this.fakeNode) {
        _this.fakeNode.value = '';
      }
    };_this.

    getProps = (0, _createPropsGetter.createPropsGetter)(Textarea.defaultProps);_this.

























    state = {
      needsPolyfillPlaceholder: _needsPolyfillPlaceholder.needsPolyfillPlaceholder,
      isCounterVisible: false
    };_this.


    reflowCounter = function () {
      if (_this.counter) {
        _this.counter.reflow();
      }
    };_this.


    selectAllId = null;_this.




    textareaObserver = _globalObject.globalObject.MutationObserver ?
    new _globalObject.globalObject.MutationObserver(_this.reflowCounter) :
    null;






























































































    /**
     * @public
     * @param {number} start
     * @param {number} end
     */_this.
    setSelectionRange = function (start, end) {var _globalObject$documen;
      if (!_this.node) {
        throw new Error('Cannot call "setSelectionRange" on unmounted Input');
      }

      if (((_globalObject$documen = _globalObject.globalObject.document) == null ? void 0 : _globalObject$documen.activeElement) !== _this.node) {
        _this.focus();
      }

      _this.node.setSelectionRange(start, end);
    };

    /** Переводит фокус в поле (если ещё не в фокусе) и выделяет весь текст в нём.
     * Работает с типами `text`, `password`, `tel`, `search`, `url`.
     * @public
     */_this.
    selectAll = function () {
      if (_this.node) {
        _this.setSelectionRange(0, _this.node.value.length);
      }
    };_this.

    delaySelectAll = function () {var _globalObject$request;return (
        _this.selectAllId = (_globalObject$request = _globalObject.globalObject.requestAnimationFrame == null ? void 0 : _globalObject.globalObject.requestAnimationFrame(_this.selectAll)) != null ? _globalObject$request : null);};_this.

    cancelDelayedSelectAll = function () {
      if (_this.selectAllId) {
        _globalObject.globalObject.cancelAnimationFrame == null || _globalObject.globalObject.cancelAnimationFrame(_this.selectAllId);
        _this.selectAllId = null;
      }
    };_this.

    renderMain = function (props) {var _cx, _ref, _textareaProps$maxLen, _cx2;
      var _props$width =




















        props.width,width = _props$width === void 0 ? DEFAULT_WIDTH : _props$width,error = props.error,warning = props.warning,size = props.size,autoResize = props.autoResize,resize = props.resize,onCut = props.onCut,onPaste = props.onPaste,maxRows = props.maxRows,onFocus = props.onFocus,selectAllOnFocus = props.selectAllOnFocus,placeholder = props.placeholder,onValueChange = props.onValueChange,showLengthCounter = props.showLengthCounter,lengthCounter = props.lengthCounter,counterHelp = props.counterHelp,extraRow = props.extraRow,disableAnimations = props.disableAnimations,disabled = props.disabled,textareaProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);

      var isCounterVisible = _this.state.isCounterVisible;

      var rootProps = {
        style: {
          width: width
        }
      };

      var textareaClassNames = (0, _Emotion.cx)(_this.getTextareaSizeClassName(), (_cx = {}, _cx[
      _Textarea2.styles.textarea(_this.theme)] = true, _cx[
      _Textarea2.styles.hovering(_this.theme)] = !error && !warning, _cx[
      _Textarea2.styles.disabled(_this.theme)] = disabled, _cx[
      _Textarea2.styles.error(_this.theme)] = !!error, _cx[
      _Textarea2.styles.warning(_this.theme)] = !!warning, _cx[
      _Textarea2.styles.disableAnimations()] = _this.isAnimationsDisabled(), _cx)
      );

      var textareaStyle = {
        resize: autoResize ? 'none' : resize,
        textAlign: _this.props.align
      };

      var placeholderPolyfill = null;

      if (_this.state.needsPolyfillPlaceholder && !textareaProps.value && !textareaProps.defaultValue) {
        placeholderPolyfill = /*#__PURE__*/_react.default.createElement("span", { className: _Textarea2.styles.placeholder() }, placeholder);
      }

      var fakeTextarea = null;
      if (autoResize) {
        var fakeProps = {
          value: _this.props.value,
          defaultValue: _this.props.defaultValue,
          className: (0, _Emotion.cx)(textareaClassNames, _Textarea2.styles.fake()),
          readOnly: true
        };
        fakeTextarea = /*#__PURE__*/_react.default.createElement("textarea", (0, _extends2.default)({}, fakeProps, { ref: _this.refFake }));
      }

      var counter = showLengthCounter && isCounterVisible && _this.node && /*#__PURE__*/
      _react.default.createElement(_TextareaCounter.TextareaCounter, {
        textarea: _this.node,
        size: _this.size,
        help: counterHelp,
        value: textareaProps.value,
        length: (_ref = (_textareaProps$maxLen = textareaProps.maxLength) != null ? _textareaProps$maxLen : lengthCounter) != null ? _ref : 0,
        onCloseHelp: _this.handleCloseCounterHelp,
        ref: _this.refCounter }
      );


      var Component = _client.isSafariWithTextareaBug ? _TextareaWithSafari17Workaround.TextareaWithSafari17Workaround : 'textarea';

      return /*#__PURE__*/(
        _react.default.createElement(_RenderLayer.RenderLayer, {
          onFocusOutside: _this.handleCloseCounterHelp,
          onClickOutside: _this.handleCloseCounterHelp,
          active: _this.state.isCounterVisible }, /*#__PURE__*/

        _react.default.createElement("label", (0, _extends2.default)({
          "data-tid": TextareaDataTids.root },
        rootProps, {
          className: (0, _Emotion.cx)(_this.getRootSizeClassName(), (_cx2 = {}, _cx2[
          _Textarea2.styles.root()] = true, _cx2)
          ) }),

        placeholderPolyfill, /*#__PURE__*/
        _react.default.createElement(_ResizeDetector.ResizeDetector, { onResize: _this.reflowCounter, alignBaseline: _this.featureFlags.textareaBaselineAlign }, /*#__PURE__*/
        _react.default.createElement(Component, (0, _extends2.default)({},
        textareaProps, {
          className: textareaClassNames,
          style: textareaStyle,
          placeholder: !placeholderPolyfill ? placeholder : undefined,
          ref: _this.ref,
          onChange: _this.handleChange,
          onCut: _this.handleCut,
          onPaste: _this.handlePaste,
          onFocus: _this.handleFocus,
          onKeyDown: _this.handleKeyDown,
          disabled: disabled }),

        _this.props.children
        )
        ),
        fakeTextarea,
        counter
        )
        ));

    };_this.

    handleCloseCounterHelp = function () {return _this.setState({ isCounterVisible: false });};_this.

    handleKeyDown = function (e) {
      // Edge bug: textarea maxlength doesn't work after new line
      // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/18833616/
      var value = _this.props.value !== undefined ? _this.props.value.toString() : null;
      var isBlockEnter = (0, _identifiers.isKeyEnter)(e) && value !== null && value.length === _this.props.maxLength;

      if (isBlockEnter) {
        e.preventDefault();
      }

      if (_this.props.onKeyDown) {
        _this.props.onKeyDown(e);
      }
    };_this.

    handleChange = function (e) {
      if (_needsPolyfillPlaceholder.needsPolyfillPlaceholder) {
        var fieldIsEmpty = e.target.value === '';

        if (_this.state.needsPolyfillPlaceholder !== fieldIsEmpty) {
          _this.setState({ needsPolyfillPlaceholder: fieldIsEmpty });
        }
      }

      if (_this.props.onValueChange) {
        _this.props.onValueChange(e.target.value);
      }

      if (_this.props.autoResize) {
        _this.autoResize();
      }

      if (_this.props.onChange) {
        _this.props.onChange(e);
      }

      _this.reflowCounter();
    };_this.

    ref = function (element) {
      _this.node = element;
    };_this.

    refFake = function (element) {
      _this.fakeNode = element;
    };_this.

    refCounter = function (ref) {
      _this.counter = ref;
    };_this.

    autoResizeHandler = function () {
      var fakeNode = _this.fakeNode;
      if (!fakeNode) {
        return;
      }
      var node = _this.node;
      if (!node) {
        return;
      }
      if (_this.props.value === undefined) {
        fakeNode.value = node.value;
      }

      var _this$getProps = _this.getProps(),rows = _this$getProps.rows,maxRows = _this$getProps.maxRows;
      if (rows === undefined || maxRows === undefined) {
        return;
      }

      var _ref2 =
        (0, _TextareaHelpers.getTextAreaHeight)({
          node: fakeNode,
          minRows: typeof rows === 'number' ? rows : parseInt(rows, 10),
          maxRows: typeof maxRows === 'number' ? maxRows : parseInt(maxRows, 10),
          extraRow: _this.getProps().extraRow
        }) || {},height = _ref2.height,exceededMaxHeight = _ref2.exceededMaxHeight;

      if (height === undefined || exceededMaxHeight === undefined) {
        return;
      }

      node.style.height = height + 'px';
      node.style.overflowY = exceededMaxHeight ? 'scroll' : 'hidden';
      fakeNode.style.overflowY = exceededMaxHeight ? 'scroll' : 'hidden';
    };_this.

    autoResize = (0, _lodash.default)(_this.autoResizeHandler, _this.getAutoResizeThrottleWait());_this.

    handleCut = function (event) {
      if (_this.props.autoResize) {
        _this.autoResize();
      }

      if (_this.props.onCut) {
        _this.props.onCut(event);
      }

      _this.reflowCounter();
    };_this.

    handlePaste = function (event) {
      if (_this.props.autoResize) {
        _this.autoResize();
      }

      if (_this.props.onPaste) {
        _this.props.onPaste(event);
      }

      _this.reflowCounter();
    };_this.

    handleFocus = function (event) {
      _this.setState({ isCounterVisible: true });

      if (_this.props.selectAllOnFocus) {
        // https://github.com/facebook/react/issues/7769
        _this.node && !_client.isIE11 ? _this.selectAll() : _this.delaySelectAll();
      }

      if (_this.props.onFocus) {
        _this.props.onFocus(event);
      }
    };return _this;}(0, _inheritsLoose2.default)(Textarea, _React$Component);var _proto = Textarea.prototype;_proto.getRootSizeClassName = function getRootSizeClassName() {switch (this.size) {case 'large':return _Textarea2.styles.rootLarge(this.theme);case 'medium':return _Textarea2.styles.rootMedium(this.theme);case 'small':default:return _Textarea2.styles.rootSmall(this.theme);}};_proto.getTextareaSizeClassName = function getTextareaSizeClassName() {switch (this.size) {case 'large':return _Textarea2.styles.textareaLarge(this.theme);case 'medium':return _Textarea2.styles.textareaMedium(this.theme);case 'small':default:return _Textarea2.styles.textareaSmall(this.theme);}};_proto.getAutoResizeThrottleWait = function getAutoResizeThrottleWait(props) {if (props === void 0) {props = this.props;} // NOTE: При отключении анимации остается эффект дергания при авто-ресайзе из-за троттлинга расчета высоты
    // Поэтому выставляем таймаут троттла в ноль. Подробности - https://github.com/skbkontur/retail-ui/issues/2120
    return this.isAnimationsDisabled(props) ? 0 : AUTORESIZE_THROTTLE_DEFAULT_WAIT;};_proto.isAnimationsDisabled = function isAnimationsDisabled(_temp) {var _ref3 = _temp === void 0 ? this.props : _temp,disableAnimations = _ref3.disableAnimations,extraRow = _ref3.extraRow;return disableAnimations || !extraRow;};_proto.componentDidMount = function componentDidMount() {if (this.props.autoResize) {this.autoResize();this.layoutEvents = LayoutEvents.addListener(this.autoResize);}if (this.node && this.props.showLengthCounter && this.textareaObserver) {this.textareaObserver.observe(this.node, { attributes: true });}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.layoutEvents) {this.layoutEvents.remove();}if (this.props.showLengthCounter && this.textareaObserver) {this.textareaObserver.disconnect();}this.cancelDelayedSelectAll();};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {if (this.getAutoResizeThrottleWait() !== this.getAutoResizeThrottleWait(prevProps)) {this.autoResize.cancel();this.autoResize = (0, _lodash.default)(this.autoResizeHandler, this.getAutoResizeThrottleWait());}var _this$getProps2 = this.getProps(),rows = _this$getProps2.rows,maxRows = _this$getProps2.maxRows;if (this.props.autoResize && (rows !== prevProps.rows || maxRows !== prevProps.maxRows || this.props.value !== prevProps.value)) {this.autoResize();}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ReactUIFeatureFlagsContext.ReactUIFeatureFlagsContext.Consumer, null, function (flags) {_this2.featureFlags = (0, _FeatureFlagsHelpers.getFullReactUIFlagsContext)(flags);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.getProps()), _this2.renderMain);});});} /** Программно устанавливает фокус на поле.
   * @public
   */;_proto.focus = function focus() {if (this.node) {this.node.focus();}} /** Программно снимает фокус с поля.
   * @public
   */;_proto.blur = function blur() {if (this.node) {this.node.blur();}} /** start - инициирует последовательное изменение числового значения: начинает повторяющееся увеличение/уменьшение, обычно используется при удерживании кнопки «+» или «−» для числового Input. end - останавливает ранее запущенное числоизменение, инициируемое numberStart.
   * [Документация](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange)
   * @public
   */;_proto.getNode = function getNode() {return this.node;};return Textarea;}(_react.default.Component), _Textarea.__KONTUR_REACT_UI__ = 'Textarea', _Textarea.displayName = 'Textarea', _Textarea.defaultProps = { rows: 3, maxRows: 15, extraRow: true, disableAnimations: _currentEnvironment.isTestEnv }, _Textarea)) || _class) || _class;