@lyra/components/lib/textareas/DefaultTextArea.js

Basic UX components

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _defaultStyle = require('part:@lyra/components/textareas/default-style');

var _defaultStyle2 = _interopRequireDefault(_defaultStyle);

var _closeIcon = require('part:@lyra/base/close-icon');

var _closeIcon2 = _interopRequireDefault(_closeIcon);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

const NOOP = () => {};
class DefaultTextArea extends _react2.default.Component {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.handleClear = event => {
      this.props.onClear(event);
    }, this.setInput = element => {
      this._input = element;
    }, _temp;
  }

  select() {
    if (this._input) {
      this._input.select();
    }
  }

  focus() {
    if (this._input) {
      this._input.focus();
    }
  }

  componentDidMount() {
    this._input.setCustomValidity(this.props.customValidity);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.customValidity !== this.props.customValidity) {
      this._input.setCustomValidity(nextProps.customValidity);
    }
  }

  render() {
    var _props = this.props;

    const value = _props.value,
          isClearable = _props.isClearable,
          rows = _props.rows,
          onKeyPress = _props.onKeyPress,
          onChange = _props.onChange,
          onFocus = _props.onFocus,
          onBlur = _props.onBlur,
          onClear = _props.onClear,
          customValidity = _props.customValidity,
          rest = _objectWithoutProperties(_props, ['value', 'isClearable', 'rows', 'onKeyPress', 'onChange', 'onFocus', 'onBlur', 'onClear', 'customValidity']);

    return _react2.default.createElement(
      'div',
      { className: _defaultStyle2.default.root },
      _react2.default.createElement('textarea', _extends({
        className: _defaultStyle2.default.textarea,
        rows: rows,
        value: value,
        onChange: onChange,
        onKeyPress: onKeyPress,
        onFocus: onFocus,
        onBlur: onBlur,
        autoComplete: 'off',
        ref: this.setInput
      }, rest)),
      isClearable && !this.props.disabled && _react2.default.createElement(
        'button',
        { className: _defaultStyle2.default.clearButton, onClick: onClear },
        _react2.default.createElement(_closeIcon2.default, { color: 'inherit' })
      )
    );
  }
}
exports.default = DefaultTextArea;
DefaultTextArea.propTypes = {
  onChange: _propTypes2.default.func,
  onFocus: _propTypes2.default.func,
  onKeyPress: _propTypes2.default.func,
  onBlur: _propTypes2.default.func,
  onClear: _propTypes2.default.func,
  value: _propTypes2.default.string,
  customValidity: _propTypes2.default.string,
  isClearable: _propTypes2.default.bool,
  rows: _propTypes2.default.number,
  hasFocus: _propTypes2.default.bool,
  disabled: _propTypes2.default.bool
};
DefaultTextArea.defaultProps = {
  value: '',
  customValidity: '',
  rows: 10,
  isClearable: false,
  onKeyPress: NOOP,
  onChange: NOOP,
  onFocus: NOOP,
  onClear: NOOP,
  onBlur: NOOP
};