@patternplate/client/lib/app/components/search-field.js

Universal javascript client application for patternplate

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _lodash = require("lodash");

var _components = require("@patternplate/components");

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

class SearchField extends _react.default.Component {
  constructor(...args) {
    super(...args);
    this.handleChange = this.handleChange.bind(this);
    this.handleKeyDown = this.handleKeyDown.bind(this);
    this.handleStop = (0, _lodash.debounce)(this.props.onStop, 300, {
      trailing: true
    });
    this.timer = null;
  }

  handleChange(e) {
    e.persist();
    this.props.onChange(e);
    this.handleStop(e);
  }

  handleKeyDown(e) {
    const target = e.target;
    const hasValue = target.value.length > 0;
    const atEnd = hasValue && target.selectionStart === target.value.length;

    if (e.which === 32 && e.altKey && e.ctrlKey) {
      e.preventDefault();
      this.props.onClose();
    }

    if (e.which !== 27) {
      e.stopPropagation();
    }

    if (e.which === 27 && hasValue) {
      e.preventDefault();
      this.props.onClear();
    }

    if (e.which === 38) {
      this.props.onUp(e);
    }

    if (e.which === 39 && atEnd && this.props.suggestion) {
      e.preventDefault();
      this.props.onComplete(this.props.suggestion);
    }

    if (e.which === 40 && atEnd) {
      e.preventDefault();
      this.props.onDown(e);
    }
  }

  render() {
    const props = this.props;
    return _react.default.createElement(_components.SearchField, {
      autoFocus: props.autoFocus,
      name: props.name,
      onBlur: props.onBlur,
      onChange: this.handleChange,
      onFocus: props.onFocus,
      onKeyDown: this.handleKeyDown,
      placeholder: props.placeholder,
      suggestion: props.suggestion,
      title: props.title,
      value: props.value,
      "data-search": props.mark
    }, props.children);
  }

}

SearchField.defaultProps = {
  blur: () => {},
  onChange: () => {},
  onFocus: () => {},
  onUp: () => {},
  onDown: () => {},
  onBlur: () => {},
  onStop: () => {},
  value: ""
};
var _default = SearchField;
exports.default = _default;
//# sourceMappingURL=search-field.js.map