wix-style-react/dist/es/src/InputArea/InputArea.js

wix-style-react

import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

import React from 'react';
import PropTypes from 'prop-types';
import deprecationLog from '../utils/deprecationLog';
import StatusIndicator from '../StatusIndicator';
import debounce from 'lodash/debounce';
import isNaN from 'lodash/isNaN';
import { st, classes } from './InputArea.st.css';
import { dataAttr, dataHooks } from './constants';
import { filterObject } from '../utils/filterObject';
import { FontUpgradeContext } from '../FontUpgrade/context';
/**
 * General inputArea container
 */

var InputArea = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(InputArea, _React$PureComponent);

  var _super = _createSuper(InputArea);

  // For autoGrow prop min rows is 2 so the textarea does not look like an input
  function InputArea(props) {
    var _this;

    _classCallCheck(this, InputArea);

    _this = _super.call(this, props);

    _defineProperty(_assertThisInitialized(_this), "_computedStyle", null);

    _defineProperty(_assertThisInitialized(_this), "state", {
      focus: false,
      counter: (_this.props.value || _this.props.defaultValue || '').length,
      computedRows: _this.props.minRowsAutoGrow
    });

    _defineProperty(_assertThisInitialized(_this), "_getDataAttr", function () {
      var _filterObject;

      var _this$props = _this.props,
          size = _this$props.size,
          status = _this$props.status,
          disabled = _this$props.disabled,
          resizable = _this$props.resizable,
          forceHover = _this$props.forceHover,
          forceFocus = _this$props.forceFocus;
      return filterObject((_filterObject = {}, _defineProperty(_filterObject, dataAttr.SIZE, size), _defineProperty(_filterObject, dataAttr.STATUS, !!status && !disabled), _defineProperty(_filterObject, dataAttr.DISABLED, !!disabled), _defineProperty(_filterObject, dataAttr.RESIZABLE, !!resizable && !disabled), _defineProperty(_filterObject, dataAttr.HOVER, !!forceHover), _defineProperty(_filterObject, dataAttr.FOCUS, !!(forceFocus || _this.state.focus)), _filterObject), function (key, value) {
        return !!value;
      });
    });

    _defineProperty(_assertThisInitialized(_this), "focus", function () {
      _this.textArea && _this.textArea.focus();
    });

    _defineProperty(_assertThisInitialized(_this), "blur", function () {
      _this.textArea && _this.textArea.blur();
    });

    _defineProperty(_assertThisInitialized(_this), "select", function () {
      _this.textArea && _this.textArea.select();
    });

    _defineProperty(_assertThisInitialized(_this), "_onFocus", function (e) {
      _this.setState({
        focus: true
      });

      _this.props.onFocus && _this.props.onFocus(e);

      if (_this.props.autoSelect) {
        // Set timeout is needed here since onFocus is called before react
        // gets the reference for the input (specifically when autoFocus
        // is on. So setTimeout ensures we have the ref.input needed in select)
        setTimeout(function () {
          return _this.select();
        }, 0);
      }
    });

    _defineProperty(_assertThisInitialized(_this), "_onBlur", function (e) {
      _this.setState({
        focus: false
      });

      _this.props.onBlur && _this.props.onBlur(e);
    });

    _defineProperty(_assertThisInitialized(_this), "_onKeyDown", function (e) {
      _this.props.onKeyDown && _this.props.onKeyDown(e);

      if (e.key === 'Enter') {
        _this.props.onEnterPressed && _this.props.onEnterPressed(e);
      } else if (e.key === 'Escape') {
        _this.props.onEscapePressed && _this.props.onEscapePressed();
      }
    });

    _defineProperty(_assertThisInitialized(_this), "_onChange", function (e) {
      _this.props.onChange && _this.props.onChange(e);
    });

    _defineProperty(_assertThisInitialized(_this), "_onInput", function () {
      _this._calculateComputedRows();
    });

    _defineProperty(_assertThisInitialized(_this), "_calculateComputedRows", function () {
      var minRowsAutoGrow = _this.props.minRowsAutoGrow;

      _this.setState({
        computedRows: 1
      }, function () {
        var rowsCount = _this._getRowsCount();

        var computedRows = Math.max(minRowsAutoGrow, rowsCount);

        _this.setState({
          computedRows: computedRows
        });
      });
    });

    _defineProperty(_assertThisInitialized(_this), "_updateComputedStyle", debounce(function () {
      _this._computedStyle = window.getComputedStyle(_this.textArea);
    }, 500, {
      leading: true
    }));

    _defineProperty(_assertThisInitialized(_this), "_getComputedStyle", function () {
      _this._updateComputedStyle();

      return _this._computedStyle;
    });

    _defineProperty(_assertThisInitialized(_this), "_getRowsCount", function () {
      var computedStyle = _this._getComputedStyle();

      var fontSize = parseInt(computedStyle.getPropertyValue('font-size'), 10);
      var lineHeight = parseInt(computedStyle.getPropertyValue('line-height'), 10);
      var lineHeightValue;

      if (isNaN(lineHeight)) {
        if (isNaN(fontSize)) {
          return InputArea.MIN_ROWS;
        }

        lineHeightValue = _this._getDefaultLineHeight() * fontSize;
      } else {
        lineHeightValue = lineHeight;
      }

      return Math.floor(_this.textArea.scrollHeight / lineHeightValue);
    });

    _defineProperty(_assertThisInitialized(_this), "_getDefaultLineHeight", function () {
      if (!_this._defaultLineHeight) {
        var parentNode = _this.textArea.parentNode;

        var computedStyles = _this._getComputedStyle();

        var fontFamily = computedStyles.getPropertyValue('font-family');
        var fontSize = computedStyles.getPropertyValue('font-size');
        var tempElement = document.createElement('span');
        var defaultStyles = 'position:absolute;display:inline;border:0;margin:0;padding:0;line-height:normal;';
        tempElement.setAttribute('style', "".concat(defaultStyles, "font-family:").concat(fontFamily, ";font-size:").concat(fontSize, ";"));
        tempElement.innerText = 'M';
        parentNode.appendChild(tempElement);
        _this._defaultLineHeight = parseInt(tempElement.clientHeight, 10) / parseInt(fontSize, 10);
        tempElement.parentNode.removeChild(tempElement);
      }

      return _this._defaultLineHeight;
    });

    if (props.size === 'normal') {
      deprecationLog('<InputArea/> - change prop size="normal" to size="medium"');
    }

    return _this;
  } // For testing purposes only


  _createClass(InputArea, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this$props2 = this.props,
          autoFocus = _this$props2.autoFocus,
          autoGrow = _this$props2.autoGrow,
          value = _this$props2.value;
      autoFocus && this._onFocus();

      if (autoGrow) {
        this._calculateComputedRows();
      }
      /*
       * autoFocus doesn't automatically selects text like focus do.
       * Therefore we set the selection range, but in order to support prior implementation we set the start position as the end in order to place the cursor there.
       */


      if (autoFocus && !!value) {
        this.textArea.setSelectionRange(value.length, value.length);
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      var _this$props3 = this.props,
          minRowsAutoGrow = _this$props3.minRowsAutoGrow,
          value = _this$props3.value,
          defaultValue = _this$props3.defaultValue,
          autoGrow = _this$props3.autoGrow,
          hasCounter = _this$props3.hasCounter;

      if (autoGrow && prevProps.minRowsAutoGrow !== minRowsAutoGrow) {
        this._calculateComputedRows();
      }

      if (hasCounter && prevProps.value !== value) {
        this.setState({
          counter: (value || defaultValue || '').length
        });
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this._updateComputedStyle.cancel();
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props4 = this.props,
          dataHook = _this$props4.dataHook,
          className = _this$props4.className,
          autoFocus = _this$props4.autoFocus,
          defaultValue = _this$props4.defaultValue,
          disabled = _this$props4.disabled,
          forceFocus = _this$props4.forceFocus,
          forceHover = _this$props4.forceHover,
          id = _this$props4.id,
          name = _this$props4.name,
          onKeyUp = _this$props4.onKeyUp,
          placeholder = _this$props4.placeholder,
          readOnly = _this$props4.readOnly,
          tabIndex = _this$props4.tabIndex,
          rows = _this$props4.rows,
          autoGrow = _this$props4.autoGrow,
          value = _this$props4.value,
          required = _this$props4.required,
          minHeight = _this$props4.minHeight,
          maxHeight = _this$props4.maxHeight,
          maxLength = _this$props4.maxLength,
          resizable = _this$props4.resizable,
          hasCounter = _this$props4.hasCounter,
          size = _this$props4.size,
          tooltipPlacement = _this$props4.tooltipPlacement,
          status = _this$props4.status,
          statusMessage = _this$props4.statusMessage,
          children = _this$props4.children;
      var inlineStyle = {};
      var rowsAttr = rows ? rows : autoGrow ? this.state.computedRows : undefined;
      var onInput = !rows && autoGrow ? this._onInput : undefined;

      if (minHeight) {
        inlineStyle.minHeight = minHeight;
      }

      if (maxHeight) {
        inlineStyle.maxHeight = maxHeight;
      }

      var ariaAttribute = {};
      Object.keys(this.props).filter(function (key) {
        return key.startsWith('aria');
      }).map(function (key) {
        return ariaAttribute['aria-' + key.substr(4).toLowerCase()] = _this2.props[key];
      });
      return /*#__PURE__*/React.createElement(FontUpgradeContext.Consumer, null, function (_ref) {
        var isMadefor = _ref.active;
        return /*#__PURE__*/React.createElement("div", _extends({
          "data-hook": dataHook,
          className: st(classes.root, {
            isMadefor: isMadefor,
            disabled: disabled,
            size: size,
            status: status,
            hasFocus: forceFocus || _this2.state.focus,
            forceHover: forceHover,
            resizable: resizable,
            readOnly: readOnly
          }, className)
        }, _this2._getDataAttr()), /*#__PURE__*/React.createElement("div", {
          className: classes.inputArea
        }, typeof children === 'function' ? children({
          rows: rowsAttr,
          ref: function ref(_ref2) {
            return _this2.textArea = _ref2;
          },
          onFocus: _this2._onFocus,
          onBlur: _this2._onBlur,
          onKeyDown: _this2._onKeyDown,
          onInput: onInput
        }) : /*#__PURE__*/React.createElement("textarea", _extends({
          rows: rowsAttr,
          maxLength: maxLength,
          ref: function ref(_ref3) {
            return _this2.textArea = _ref3;
          },
          id: id,
          name: name,
          style: inlineStyle,
          defaultValue: defaultValue,
          disabled: disabled,
          value: value,
          required: required,
          onFocus: _this2._onFocus,
          onBlur: _this2._onBlur,
          onKeyDown: _this2._onKeyDown,
          onChange: _this2._onChange,
          onInput: onInput,
          placeholder: placeholder,
          tabIndex: tabIndex,
          autoFocus: autoFocus,
          onKeyUp: onKeyUp
        }, ariaAttribute, {
          readOnly: readOnly
        })), hasCounter && maxLength && /*#__PURE__*/React.createElement("span", {
          className: classes.counter,
          "data-hook": "counter"
        }, _this2.state.counter, "/", maxLength)), /*#__PURE__*/React.createElement("div", {
          className: classes.status
        }, !!status && !disabled && /*#__PURE__*/React.createElement(StatusIndicator, {
          dataHook: dataHooks.tooltip,
          status: status,
          message: statusMessage,
          tooltipPlacement: tooltipPlacement
        })));
      });
    }
  }]);

  return InputArea;
}(React.PureComponent);

_defineProperty(InputArea, "MIN_ROWS", 2);

InputArea.displayName = 'InputArea';
InputArea.defaultProps = {
  minRowsAutoGrow: InputArea.MIN_ROWS,
  size: 'medium'
};
InputArea.propTypes = {
  /** Applies a data-hook HTML attribute that can be used in the tests. */
  dataHook: PropTypes.string,

  /** Specifies a CSS class name to be appended to the component’s root element. */
  className: PropTypes.string,

  /** Specifies custom textarea render function */
  children: PropTypes.func,

  /** Associate a control with the regions that it controls. */
  ariaControls: PropTypes.string,

  /** Associate a region with its descriptions. Similar to aria-controls but instead associating descriptions to the region and description identifiers are separated with a space. */
  ariaDescribedby: PropTypes.string,

  /** Define a string that labels the current element in case where a text label is not visible on the screen. */
  ariaLabel: PropTypes.string,

  /** Focus the element on mount (standard React input autoFocus). */
  autoFocus: PropTypes.bool,

  /** Select the entire text of the element on focus (standard React input autoSelect). */
  autoSelect: PropTypes.bool,

  /** Controls the size of the input. */
  size: PropTypes.oneOf(['small', 'medium']),

  /** Sets a default value for those who want to use this component un-controlled. */
  defaultValue: PropTypes.string,

  /** Specifies whether input should be disabled. */
  disabled: PropTypes.bool,

  /** Specifies the status of a field. */
  status: PropTypes.oneOf(['error', 'warning', 'loading']),

  /** Defines the message to display on status icon hover. If not given or empty there will be no tooltip. */
  statusMessage: PropTypes.node,

  /** USED FOR TESTING. Forces focus state on the input. */
  forceFocus: PropTypes.bool,

  /** USED FOR TESTING. Forces hover state on the input. */
  forceHover: PropTypes.bool,

  /** Specifies whether character count is enabled. */
  hasCounter: PropTypes.bool,

  /** Assigns an unique identifier for the root element. */
  id: PropTypes.string,

  /** Reference element data when a form is submitted. */
  name: PropTypes.string,

  /** Sets the maximum height of an area in pixels. */
  maxHeight: PropTypes.string,

  /** Defines the maximum text length in number of characters. */
  maxLength: PropTypes.number,

  /** Sets the minimum height of an area in pixels. */
  minHeight: PropTypes.string,

  /** Defines a standard input onBlur callback */
  onBlur: PropTypes.func,

  /** Defines a standard input onChange callback. */
  onChange: PropTypes.func,

  /** Defines a callback handler that is called when user presses enter. */
  onEnterPressed: PropTypes.func,

  /** Defines a callback handler that is called when user presses escape. */
  onEscapePressed: PropTypes.func,

  /** Defines a standard input onFocus callback. */
  onFocus: PropTypes.func,

  /** Defines a standard input onKeyDown callback. */
  onKeyDown: PropTypes.func,

  /** Defines a standard input onKeyUp callback. */
  onKeyUp: PropTypes.func,

  /** Sets a placeholder message to display. */
  placeholder: PropTypes.string,

  /** Specifies whether input is read only. */
  readOnly: PropTypes.bool,

  /** Specifies whether area can be manually resized by the user. */
  resizable: PropTypes.bool,

  /** Sets initial height of an area to fit a specified number of rows. */
  rows: PropTypes.number,

  /** Specifies whether area should grow and shrink according to user input. */
  autoGrow: PropTypes.bool,

  /** Sets the minimum amount of rows the component can have in `autoGrow` mode */
  minRowsAutoGrow: PropTypes.number,

  /** Indicates that element can be focused and where it participates in sequential keyboard navigation. */
  tabIndex: PropTypes.number,

  /** Controls placement of a status tooltip. */
  tooltipPlacement: PropTypes.string,

  /** Defines input value. */
  value: PropTypes.string,

  /** Specifies whether the input area is a mandatory field. */
  required: PropTypes.bool
};
export default InputArea;