google-react-maps/dist/components/searchBox.js

A more powerfully custom version of the Google Maps Javascript API built for React. Multiple Datalayer support. GEOJSON Enabled.

'use strict';

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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var DefaultInput = function (_React$Component) {
  _inherits(DefaultInput, _React$Component);

  function DefaultInput() {
    _classCallCheck(this, DefaultInput);

    return _possibleConstructorReturn(this, (DefaultInput.__proto__ || Object.getPrototypeOf(DefaultInput)).apply(this, arguments));
  }

  _createClass(DefaultInput, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          inputRef = _props.inputRef,
          className = _props.className,
          placeholder = _props.placeholder,
          style = _props.style;

      return _react2.default.createElement('input', { ref: inputRef, className: className, placeholder: placeholder, style: style });
    }
  }]);

  return DefaultInput;
}(_react2.default.Component);

var SearchBox = function (_React$Component2) {
  _inherits(SearchBox, _React$Component2);

  function SearchBox(props) {
    _classCallCheck(this, SearchBox);

    var _this2 = _possibleConstructorReturn(this, (SearchBox.__proto__ || Object.getPrototypeOf(SearchBox)).call(this, props));

    _this2.displayName = 'SearchBox';
    _this2.state = {
      searchBox: null,
      internalPosition: -1
    };
    _this2.postRender = _this2.postRender.bind(_this2);
    _this2.ref = _this2.ref.bind(_this2);
    _this2.boundsListener = null;
    _this2.placesListener = null;
    _this2.timer = null;
    return _this2;
  }

  _createClass(SearchBox, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.postRender();
    }
  }, {
    key: 'postRender',
    value: function postRender() {
      var _this3 = this;

      var _props2 = this.props,
          map = _props2.map,
          maps = _props2.maps;
      var position = this.props.position;


      if (map && maps) {
        var input = _reactDom2.default.findDOMNode(this.input);
        var container = _reactDom2.default.findDOMNode(this.child);
        var searchBox = new maps.places.SearchBox(input);

        this.timer = null;

        if (this.boundsListener) {
          this.boundsListener.remove();
        }
        if (this.placesListener) {
          this.placesListener.remove();
        }

        this.boundsListener = map.addListener('bounds_changed', function () {
          if (_this3.props.autoRefreshPlaces) {
            if (_this3.timer) {
              clearTimeout(_this3.timer);
            }
            _this3.timer = setTimeout(function () {
              var map_bounds = map.getBounds();
              searchBox.setBounds(map_bounds);

              if (typeof _this3.props.onPlacesChanged === 'function' && _this3.input) {
                var query = _this3.input.value;
                var service = new maps.places.PlacesService(map);
                query ? service.textSearch({
                  query: query,
                  bounds: map_bounds
                }, function (places, status) {
                  if (status == maps.places.PlacesServiceStatus.OK) {
                    _this3.props.onPlacesChanged(places);
                  }
                }) : '';
              }
            }, 1000);
          }
        });

        this.placesListener = searchBox.addListener('places_changed', function () {
          if (typeof _this3.props.onPlacesChanged === 'function') {
            _this3.props.onPlacesChanged(searchBox.getPlaces());
          }
        });

        if (!position) {
          position = "TOP_LEFT";
        }

        if (this.state.internalPosition < 0) {
          map.controls[maps.ControlPosition[position]].push(container);
        } else {
          map.controls[maps.ControlPosition[position]].insertAt(this.state.internalPosition, container);
        }

        var internalPosition = map.controls[maps.ControlPosition[position]].length - 1;

        if (this.state.internalPosition != internalPosition) {
          this.setState({
            internalPosition: internalPosition
          });
        }
      } else {
        console.warn(new Error("You must pass this component as a control to a Map component."));
      }
    }
  }, {
    key: 'ref',
    value: function ref(name) {
      var _this4 = this;

      return function (item) {
        _this4[name] = item;
      };
    }
  }, {
    key: 'shouldComponentUpdate',
    value: function shouldComponentUpdate(nextProps, nextState) {
      return false;
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate(prevProps, prevState) {
      if (this.state.internalPosition > -1 && prevState.internalPosition != -1) {
        this.postRender();
      }
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      var _props3 = this.props,
          map = _props3.map,
          maps = _props3.maps,
          position = _props3.position;

      if (this.state.internalPosition >= 0) {
        map.controls[maps.ControlPosition[position || 'TOP_LEFT']].removeAt(this.state.internalPosition);
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var Wrapper = this.props.wrapper;
      var Input = this.props.inputComponent || DefaultInput;
      if (Wrapper) {
        return _react2.default.createElement(
          'div',
          { ref: this.ref('parent') },
          _react2.default.createElement(
            'div',
            { ref: this.ref('child') },
            _react2.default.createElement(
              Wrapper,
              null,
              _react2.default.createElement(Input, {
                type: 'text',
                inputRef: this.ref('input'),
                placeholder: this.props.placeholder,
                style: this.props.style,
                className: this.props.className
              })
            )
          )
        );
      } else {
        return _react2.default.createElement(
          'div',
          { ref: this.ref('parent') },
          _react2.default.createElement(
            'div',
            { ref: this.ref('child') },
            _react2.default.createElement(Input, {
              type: 'text',
              inputRef: this.ref('input'),
              placeholder: this.props.placeholder,
              style: this.props.style,
              className: this.props.className
            })
          )
        );
      }
    }
  }]);

  return SearchBox;
}(_react2.default.Component);

SearchBox.propTypes = {
  placeholder: _propTypes2.default.string,
  position: _propTypes2.default.string.isRequired,
  wrapper: _propTypes2.default.func,
  onPlacesChanged: _propTypes2.default.func.isRequired,
  autoRefreshPlaces: _propTypes2.default.bool
};

SearchBox.defaultProps = {
  autoRefreshPlaces: false
};

exports.default = SearchBox;
module.exports = exports['default'];
//# sourceMappingURL=searchBox.js.map