@lyra/components/lib/textfields/DefaultTextField.js

Basic UX components

'use strict';

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

var _uniqueId2 = require('lodash/uniqueId');

var _uniqueId3 = _interopRequireDefault(_uniqueId2);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _defaultStyle2 = _interopRequireDefault(_defaultStyle);

var _default = require('part:@lyra/components/textinputs/default');

var _default2 = _interopRequireDefault(_default);

var _default3 = require('part:@lyra/components/formfields/default');

var _default4 = _interopRequireDefault(_default3);

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

class DefaultTextField extends _react2.default.Component {
  constructor(...args) {
    var _temp;

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

  componentWillMount() {
    this._inputId = this.props.id || (0, _uniqueId3.default)('DefaultTextField');
  }

  render() {
    var _props = this.props;
    const label = _props.label,
          placeholder = _props.placeholder,
          hasError = _props.hasError,
          isClearable = _props.isClearable,
          type = _props.type,
          className = _props.className,
          level = _props.level,
          description = _props.description,
          hasFocus = _props.hasFocus,
          onChange = _props.onChange,
          onKeyPress = _props.onKeyPress,
          onFocus = _props.onFocus,
          onBlur = _props.onBlur,
          value = _props.value;


    return _react2.default.createElement(
      _default4.default,
      {
        className: `${hasError ? _defaultStyle2.default.hasError : _defaultStyle2.default.root} ${className || ''}`,
        level: level,
        labelFor: this._inputId,
        label: label,
        description: description
      },
      _react2.default.createElement(_default2.default, {
        className: _defaultStyle2.default.input,
        id: this._inputId,
        type: type,
        onChange: onChange,
        value: value,
        placeholder: placeholder,
        onKeyPress: onKeyPress,
        onFocus: onFocus,
        onBlur: onBlur,
        onClear: this.handleClear,
        isClearable: isClearable,
        hasError: hasError,
        hasFocus: hasFocus
      })
    );
  }
}
exports.default = DefaultTextField;
DefaultTextField.propTypes = {
  label: _propTypes2.default.string.isRequired,
  id: _propTypes2.default.string,
  type: _propTypes2.default.string,
  onChange: _propTypes2.default.func,
  onFocus: _propTypes2.default.func,
  onBlur: _propTypes2.default.func,
  onClear: _propTypes2.default.func,
  onKeyPress: _propTypes2.default.func,
  value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
  hasError: _propTypes2.default.bool,
  level: _propTypes2.default.number,
  placeholder: _propTypes2.default.string,
  isClearable: _propTypes2.default.bool,
  className: _propTypes2.default.string,
  description: _propTypes2.default.string,
  hasFocus: _propTypes2.default.bool
};
DefaultTextField.defaultProps = {
  level: 1,
  value: '',
  hasFocus: false,
  onKeyPress() {},
  onChange() {},
  onFocus() {},
  onClear() {}
};