@lyra/components/lib/textfields/SearchField.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 _searchStyle = require('part:@lyra/components/textfields/search-style');

var _searchStyle2 = _interopRequireDefault(_searchStyle);

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

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

    return _temp = super(...args), this._inputId = (0, _uniqueId3.default)('searchfield'), this.handleChange = event => {
      const value = event.target.value;
      this.props.onChange(value);
    }, this.handleKeyPress = event => {
      this.props.onKeyPress(event);
    }, _temp;
  }

  render() {
    var _props = this.props;
    const label = _props.label,
          placeholder = _props.placeholder,
          value = _props.value,
          onChange = _props.onChange,
          onFocus = _props.onFocus,
          onBlur = _props.onBlur,
          onKeyPress = _props.onKeyPress;


    return _react2.default.createElement(
      'div',
      { className: _searchStyle2.default.root },
      label && _react2.default.createElement(
        'label',
        { htmlFor: this._inputId, className: _searchStyle2.default.label },
        label
      ),
      _react2.default.createElement('input', {
        className: _searchStyle2.default.input,
        id: this._inputId,
        type: 'search',
        onChange: onChange,
        onFocus: onFocus,
        onBlur: onBlur,
        value: value,
        placeholder: placeholder,
        onKeyPress: onKeyPress
      })
    );
  }
}
exports.default = SearchFieldField;
SearchFieldField.propTypes = {
  label: _propTypes2.default.string.isRequired,
  value: _propTypes2.default.string,

  onChange: _propTypes2.default.func,
  onKeyPress: _propTypes2.default.func,
  onFocus: _propTypes2.default.func,
  onBlur: _propTypes2.default.func,
  placeholder: _propTypes2.default.string
};
SearchFieldField.defaultProps = {
  value: '',
  onKeyPress() {},
  onChange() {},
  onFocus() {},
  onBlur() {}
};