react-spatial/components/SearchInput/SearchInput.js

Components to build React map apps.

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { MdClose } from 'react-icons/md';
import Button from '../Button';

var propTypes = {
  /**
   * Value of the input
   */
  value: PropTypes.string,

  /**
   * CSS class of the container (input+button).
   */
  className: PropTypes.string,

  /**
   * CSS class of the clear button .
   */
  classNameClearBt: PropTypes.string,

  /**
   * CSS class of the search button.
   */
  classNameSearchBt: PropTypes.string,

  /**
   * Placeholder of the input.
   */
  placeholder: PropTypes.string,

  /**
   * Function launched when the input has the focus.
   */
  onFocus: PropTypes.func,

  /**
   * Function launched when the input looses the focus.
   */
  onBlurInput: PropTypes.func,

  /**
   * Function triggered when the search button is clicked.
   * element.
   */
  onClickSearchButton: PropTypes.func,

  /**
   * Function launched when the user press a key on the input and the list.
   */
  onKeyPress: PropTypes.func,

  /**
   * Function launched when the user change the content of the input.
   */
  onChange: PropTypes.func,

  /**
   * Content for submit button.
   */
  button: PropTypes.any,

  /**
   * Title for the clear button.
   */
  titleClearBt: PropTypes.string,

  /**
   * Title for the search button.
   */
  titleSearchBt: PropTypes.string,

  /**
   * Title for the input text.
   */
  titleSearchInput: PropTypes.string,
};

var defaultProps = {
  button: 'search',
  value: '',
  className: 'tm-search-input',
  classNameClearBt: 'tm-button tm-bt-clear',
  classNameSearchBt: 'tm-button tm-bt-search',
  placeholder: '',
  titleClearBt: '',
  titleSearchBt: '',
  titleSearchInput: '',
  onFocus: function () {},
  onBlurInput: function () {},
  onClickSearchButton: function () {},
  onKeyPress: function () {},
  onChange: function () {},
};

/**
 * This component displays a search input
 */
var SearchInput = /*@__PURE__*/(function (PureComponent) {
  function SearchInput(props) {
    PureComponent.call(this, props);
    this.state = {
      focus: false,
    };
    this.refInput = null;
  }

  if ( PureComponent ) SearchInput.__proto__ = PureComponent;
  SearchInput.prototype = Object.create( PureComponent && PureComponent.prototype );
  SearchInput.prototype.constructor = SearchInput;

  SearchInput.prototype.componentDidUpdate = function componentDidUpdate (prevProps, prevState) {
    var ref = this.state;
    var focus = ref.focus;
    if (this.refInput && focus && focus !== prevState.focus) {
      this.refInput.focus();
    }
  };

  SearchInput.prototype.onFocus = function onFocus (evt) {
    this.setState({ focus: true });
    var ref = this.props;
    var onFocus = ref.onFocus;
    onFocus(evt);
  };

  SearchInput.prototype.onBlur = function onBlur (evt) {
    this.setState({ focus: false });
    var ref = this.props;
    var onBlurInput = ref.onBlurInput;
    onBlurInput(evt.nativeEvent, this.lastKeyPress);
  };

  SearchInput.prototype.onKeyUp = function onKeyUp (evt) {
    if (evt.which === 13) {
      this.search(evt);
    }
    var ref = this.props;
    var onKeyPress = ref.onKeyPress;
    onKeyPress(evt);
    this.lastKeyPress = null;
  };

  SearchInput.prototype.onKeyDown = function onKeyDown (evt) {
    this.lastKeyPress = evt.nativeEvent;
  };

  /**
   * Trigger the onChange function with a new value or the current value of
   * the input.
   */
  SearchInput.prototype.search = function search (evt, newVal) {
    var ref = this.props;
    var value = ref.value;
    var onChange = ref.onChange;
    if (newVal !== undefined && newVal !== null) {
      onChange(evt, newVal);
    } else {
      onChange(evt, value);
    }
  };

  SearchInput.prototype.render = function render () {
    var this$1 = this;

    var ref = this.props;
    var button = ref.button;
    var className = ref.className;
    var classNameClearBt = ref.classNameClearBt;
    var classNameSearchBt = ref.classNameSearchBt;
    var value = ref.value;
    var placeholder = ref.placeholder;
    var titleClearBt = ref.titleClearBt;
    var titleSearchBt = ref.titleSearchBt;
    var titleSearchInput = ref.titleSearchInput;
    var onClickSearchButton = ref.onClickSearchButton;
    var ref$1 = this.state;
    var focus = ref$1.focus;

    // Hide clear button
    var display = !value ? 'none' : undefined;

    var newClassName = className || '';
    if (focus) {
      newClassName = newClassName + " tm-focus";
    }

    return (
      React.createElement( 'div', { className: newClassName },
        React.createElement( 'input', {
          value: value, type: "text", tabIndex: "0", placeholder: placeholder, title: titleSearchInput, onChange: function (e) { return this$1.search(e, e.target.value); }, onBlur: function (e) { return this$1.onBlur(e); }, onFocus: function (e) { return this$1.onFocus(e); }, onKeyDown: function (e) { return this$1.onKeyDown(e); }, onKeyUp: function (e) { return this$1.onKeyUp(e); }, ref: function (node) {
            this$1.refInput = node;
          } }),
        React.createElement( Button, {
          className: classNameClearBt, title: titleClearBt, style: display && {
              display: display,
            }, onClick: function (e) {
            this$1.search(e, '');
            this$1.setState({ focus: true });
          } },
          React.createElement( MdClose, { focusable: false })
        ),
        React.createElement( Button, {
          className: classNameSearchBt, title: titleSearchBt, onClick: function (e) {
            this$1.search(e);
            onClickSearchButton(e);
          } },
          button
        )
      )
    );
  };

  return SearchInput;
}(PureComponent));

SearchInput.propTypes = propTypes;
SearchInput.defaultProps = defaultProps;

export default SearchInput;

//# sourceMappingURL=SearchInput.js.map