@lyra/components/lib/textinputs/TextInput.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 _closeIcon = require('part:@lyra/base/close-icon');

var _closeIcon2 = _interopRequireDefault(_closeIcon);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

var _defaultStyle2 = _interopRequireDefault(_defaultStyle);

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 DefaultTextInput extends _react2.default.PureComponent {
  constructor(...args) {
    var _temp;

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

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

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

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

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

  render() {
    var _props = this.props;

    const onClear = _props.onClear,
          hasError = _props.hasError,
          isClearable = _props.isClearable,
          isSelected = _props.isSelected,
          disabled = _props.disabled,
          markers = _props.markers,
          passedStyles = _props.styles,
          customValidity = _props.customValidity,
          focusPath = _props.focusPath,
          rest = _objectWithoutProperties(_props, ['onClear', 'hasError', 'isClearable', 'isSelected', 'disabled', 'markers', 'styles', 'customValidity', 'focusPath']);

    const styles = _extends({}, _defaultStyle2.default, passedStyles);

    return _react2.default.createElement(
      'div',
      {
        className: (0, _classnames2.default)(styles.container, [isClearable && styles.isClearable, disabled && styles.isDisabled])
      },
      _react2.default.createElement('input', _extends({
        ref: this.setInput
      }, rest, {
        className: (0, _classnames2.default)(styles.input),
        disabled: disabled
      })),
      isClearable && _react2.default.createElement(
        'button',
        { className: styles.clearButton, onClick: onClear },
        _react2.default.createElement(_closeIcon2.default, { color: 'inherit' })
      )
    );
  }
}
exports.default = DefaultTextInput;
DefaultTextInput.propTypes = {
  value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
  markers: _propTypes2.default.array,
  focusPath: _propTypes2.default.array,
  type: _propTypes2.default.string,
  onClear: _propTypes2.default.func,
  onFocus: _propTypes2.default.func,
  onBlur: _propTypes2.default.func,
  isClearable: _propTypes2.default.bool,
  isSelected: _propTypes2.default.bool,
  disabled: _propTypes2.default.bool,
  autoComplete: _propTypes2.default.string,
  hasError: _propTypes2.default.bool,
  customValidity: _propTypes2.default.string,
  styles: _propTypes2.default.shape({
    container: _propTypes2.default.string,
    input: _propTypes2.default.string,
    isClearable: _propTypes2.default.string,
    clearButton: _propTypes2.default.string,
    inputOnDisabled: _propTypes2.default.string,
    inputOnError: _propTypes2.default.string,
    containerOnError: _propTypes2.default.string
  })
};
DefaultTextInput.defaultProps = {
  value: '',
  type: 'text',
  hasError: false,
  isSelected: false,
  isClearable: false,
  disabled: false,
  autoComplete: 'off',
  onClear: NOOP,
  onFocus: NOOP,
  onBlur: NOOP,
  styles: {},
  customValidity: ''
};